-
Notifications
You must be signed in to change notification settings - Fork 0
/
style-guide.html
489 lines (489 loc) · 35.1 KB
/
style-guide.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Fri Sep 03 2021 21:45:27 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="612fa06c6c54af1489df8681" data-wf-site="612fa06c6c54af0794df867d">
<head>
<meta charset="utf-8">
<title>Style Guide</title>
<meta content="Style Guide" property="og:title">
<meta content="Style Guide" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/beer-inu.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Inter:regular,500,600,700"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon"><!-- Please keep this css code to improve the font quality -->
<style>
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<div class="fs-styleguide_component">
<div class="fs-styleguide_elements">
<div class="page-padding">
<div class="container">
<div class="fs-styleguide_page-header">
<h2>Style Guide</h2>
<div class="margin-top margin-xsmall">
<a href="https://client-first.webflow.io/" target="_blank" class="fs-styleguide_version-details">Client-First Version 1.0</a>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>HTML Heading Tags</div>
</div>
<div class="fs-styleguide_1-col">
<h1>H1<br>Sample text is being used as a placeholder.</h1>
<h2>H2<br>Sample text is being used as a placeholder as real text.</h2>
<h3>H3<br>Sample text helps you understand how real text may look on your website.</h3>
<h4>H4<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.</h4>
<h5>H5<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.</h5>
<h6>H6<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.</h6>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Heading Classes</div>
</div>
<div class="fs-styleguide_1-col">
<h2 class="heading-xlarge">heading-xlarge</h2>
<h2 class="heading-large">heading-large</h2>
<h2 class="heading-medium">heading-medium</h2>
<h2 class="heading-small">heading-small</h2>
<h2 class="heading-xsmall">heading-xsmall</h2>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Other HTML Tags</div>
</div>
<div class="fs-styleguide_1-col">
<p>All Paragraphs<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.<br></p>
<a href="#">All Links</a>
<blockquote>All Quotes<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.</blockquote>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Text Classes</div>
</div>
<div class="fs-styleguide_1-col">
<p class="text-size-large">text-size-large <br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.<br></p>
<p class="text-size-medium">text-size-medium<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.</p>
<p class="text-size-regular">text-size-regular<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.</p>
<p class="text-size-small">text-size-small<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.</p>
<p class="text-size-tiny">text-size-tiny<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.</p>
<p class="text-style-strikethrough">text-style-strikethrough<br></p>
<p class="text-style-italic">text-style-italic<br></p>
<div class="text-style-muted">text-style-muted<br></div>
<div class="text-style-allcaps">text-style-allcaps<br></div>
<div class="text-style-nowrap">text-style-nowrap</div>
<a href="#" class="text-style-link">text-style-link</a>
<blockquote class="text-style-quote">text-style-quote<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.</blockquote>
<p class="text-style-2lines">text-style-2lines<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.</p>
<p class="text-style-3lines">text-style-3lines<br>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet,</p>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Text Weights</div>
</div>
<div class="fs-styleguide_1-col">
<div class="text-weight-xbold">text-weight-xbold</div>
<div class="text-weight-bold">text-weight-bold</div>
<div class="text-weight-semibold">text-weight-semibold</div>
<div class="text-weight-medium">text-weight-medium</div>
<div class="text-weight-normal">text-weight-normal</div>
<div class="text-weight-light">text-weight-light</div>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Text Alignments</div>
</div>
<div class="fs-styleguide_1-col">
<div class="text-align-left">text-align-left</div>
<div class="text-align-center">text-align-center</div>
<div class="text-align-right">text-align-right</div>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Text Colors</div>
</div>
<div class="fs-styleguide_1-col">
<div class="text-color-grey">text-color-grey</div>
<div class="text-color-black">text-color-black</div>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Rich Text</div>
</div>
<div class="fs-styleguide_1-col">
<div class="text-rich-text w-richtext">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.</p>
<ul role="list">
<li>The rich text element allows you to create and format headings,</li>
<li>The rich text element allows you to create and format headings,</li>
<li>The rich text element allows you to create and format headings,</li>
<li></li>
</ul>
<p>
<a href="http://youtube.com">This is a link</a>
</p>
<blockquote>Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.</blockquote>
<figure style="max-width:" class="w-richtext-align-normal w-richtext-figure-type-image">
<div><img src="images/Placeholder.svg" loading="lazy" alt="Placeholder"></div>
<figcaption>This is a placeholder image.</figcaption>
</figure>
</div>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Color Palette</div>
</div>
<div class="fs-styleguide_3-col">
<div class="fs-styleguide_color-sample-wrapper">
<div class="text-weight-semibold">Primary</div>
<div class="fs-styleguide_color-sample is-primary"></div>
</div>
<div class="fs-styleguide_color-sample-wrapper">
<div class="text-weight-semibold">Secondary</div>
<div class="fs-styleguide_color-sample is-secondary"></div>
</div>
<div class="fs-styleguide_color-sample-wrapper">
<div class="text-weight-semibold">Text Color</div>
<div class="fs-styleguide_color-sample is-text-color"></div>
</div>
<div class="fs-styleguide_color-sample-wrapper">
<div class="text-weight-semibold">Background1</div>
<div class="fs-styleguide_color-sample is-background1"></div>
</div>
<div class="fs-styleguide_color-sample-wrapper">
<div class="text-weight-semibold">Background2</div>
<div class="fs-styleguide_color-sample is-background2"></div>
</div>
<div class="fs-styleguide_color-sample-wrapper">
<div class="text-weight-semibold">Others</div>
<div class="fs-styleguide_color-sample is-others"></div>
</div>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Buttons</div>
</div>
<div class="fs-styleguide_2-col">
<div class="fs-styleguide_1-col">
<a href="#" class="button-primary w-button">button</a>
<a href="#" class="button-secondary w-button">button-secondary</a>
<a href="#" class="button-text w-button">button-text</a>
</div>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Backgrounds</div>
</div>
<div class="fs-styleguide_1-col">
<div class="background-color-white">
<div class="fs-styleguide_background-spacer"></div>
</div>
<div class="background-color-grey">
<div class="fs-styleguide_background-spacer"></div>
</div>
<div class="background-color-black">
<div class="fs-styleguide_background-spacer"></div>
</div>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Icons Sizes</div>
</div>
<div class="fs-styleguide_row"><img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" class="icon-small"><img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" class="icon-medium"><img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" class="icon-large"></div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Icons 1x1 Sizes</div>
</div>
<div class="fs-styleguide_row"><img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" class="icon-1x1-small"><img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" class="icon-1x1-medium"><img src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg" loading="lazy" alt="" class="icon-1x1-large"></div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Social Media Icons</div>
</div>
<div class="fs-styleguide_row is-for-social-icons">
<div class="icon-1x1-small w-embed"><svg aria-hidden="true" role="img" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<title>Twitter icon</title>
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
</svg></div>
<div class="icon-1x1-small w-embed"><svg area-hidden="true" role="img" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<title>Facebook icon</title>
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path>
</svg></div>
<div class="icon-1x1-small w-embed"><svg area-hidden="true" role="img" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Instagram icon</title>
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"></path>
</svg></div>
<div class="icon-1x1-small w-embed"><svg area-hidden="true" role="img" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>LinkedIn icon</title>
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
</svg></div>
<div class="icon-1x1-small w-embed"><svg area-hidden="true" role="img" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Slack icon</title>
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"></path>
</svg></div>
<div class="icon-1x1-small w-embed"><svg area-hidden="true" role="img" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Dribbble icon</title>
<path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z"></path>
</svg></div>
<div class="icon-1x1-small w-embed"><svg area-hidden="true" role="img" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Pinterest icon</title>
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"></path>
</svg></div>
<div class="icon-1x1-small w-embed"><svg area-hidden="true" role="img" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<title>YouTube icon</title>
<path d="M23.499 6.203a3.008 3.008 0 00-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 00-2.088 2.09A31.258 31.26 0 000 12.01a31.258 31.26 0 00.523 5.785 3.008 3.008 0 002.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 002.089-2.09 31.258 31.26 0 00.5-5.784 31.258 31.26 0 00-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z"></path>
</svg></div>
<div class="icon-1x1-small w-embed"><svg area-hidden="true" fill="currentColor" role="img" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>SoundCloud icon</title>
<path d="M1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c0-.057-.045-.1-.09-.1m-.899.828c-.06 0-.091.037-.104.094L0 14.479l.165 1.308c0 .055.045.094.09.094s.089-.045.104-.104l.21-1.319-.21-1.334c0-.061-.044-.09-.09-.09m1.83-1.229c-.061 0-.12.045-.12.104l-.21 2.563.225 2.458c0 .06.045.12.119.12.061 0 .105-.061.121-.12l.254-2.474-.254-2.548c-.016-.06-.061-.12-.121-.12m.945-.089c-.075 0-.135.06-.15.135l-.193 2.64.21 2.544c.016.077.075.138.149.138.075 0 .135-.061.15-.15l.24-2.532-.24-2.623c0-.075-.06-.135-.135-.135l-.031-.017zm1.155.36c-.005-.09-.075-.149-.159-.149-.09 0-.158.06-.164.149l-.217 2.43.2 2.563c0 .09.075.157.159.157.074 0 .148-.068.148-.158l.227-2.563-.227-2.444.033.015zm.809-1.709c-.101 0-.18.09-.18.181l-.21 3.957.187 2.563c0 .09.08.164.18.164.094 0 .174-.09.18-.18l.209-2.563-.209-3.972c-.008-.104-.088-.18-.18-.18m.959-.914c-.105 0-.195.09-.203.194l-.18 4.872.165 2.548c0 .12.09.209.195.209.104 0 .194-.089.21-.209l.193-2.548-.192-4.856c-.016-.12-.105-.21-.21-.21m.989-.449c-.121 0-.211.089-.225.209l-.165 5.275.165 2.52c.014.119.104.225.225.225.119 0 .225-.105.225-.225l.195-2.52-.196-5.275c0-.12-.105-.225-.225-.225m1.245.045c0-.135-.105-.24-.24-.24-.119 0-.24.105-.24.24l-.149 5.441.149 2.503c.016.135.121.24.256.24s.24-.105.24-.24l.164-2.503-.164-5.456-.016.015zm.749-.134c-.135 0-.255.119-.255.254l-.15 5.322.15 2.473c0 .15.12.255.255.255s.255-.12.255-.27l.15-2.474-.165-5.307c0-.148-.12-.27-.271-.27m1.005.166c-.164 0-.284.135-.284.285l-.103 5.143.135 2.474c0 .149.119.277.284.277.149 0 .271-.12.284-.285l.121-2.443-.135-5.112c-.012-.164-.135-.285-.285-.285m1.184-.945c-.045-.029-.105-.044-.165-.044s-.119.015-.165.044c-.09.054-.149.15-.149.255v.061l-.104 6.048.115 2.449v.008c.008.06.03.135.074.18.058.061.142.104.234.104.08 0 .158-.044.209-.09.058-.06.091-.135.091-.225l.015-.24.117-2.203-.135-6.086c0-.104-.061-.193-.135-.239l-.002-.022zm1.006-.547c-.045-.045-.09-.061-.15-.061-.074 0-.149.016-.209.061-.075.061-.119.15-.119.24v.029l-.137 6.609.076 1.215.061 1.185c0 .164.148.314.328.314.181 0 .33-.15.33-.329l.15-2.414-.15-6.637c0-.12-.074-.221-.165-.277m8.934 3.777c-.405 0-.795.086-1.139.232-.24-2.654-2.46-4.736-5.188-4.736-.659 0-1.305.135-1.889.359-.225.09-.27.18-.285.359v9.368c.016.18.15.33.33.345h8.185C22.681 17.218 24 15.914 24 14.28s-1.319-2.952-2.938-2.952"></path>
</svg></div>
</div>
</div>
<div class="fs-styleguide_section">
<div class="fs-styleguide_section-type">
<div>Webflow Elements</div>
</div>
<div class="fs-styleguide_1-col gap-medium">
<div class="fs-styleguide_element-wrapper">
<h4>List</h4>
<ul role="list">
<li>Sample text is being used as a placeholder for real text that is normally present.</li>
<li>Sample text is being used as a placeholder for real text that is normally present.</li>
<li>Sample text is being used as a placeholder for real text that is normally present.</li>
</ul>
</div>
<div class="fs-styleguide_element-wrapper">
<h4>Form</h4>
<div class="form-wrapper w-form">
<form id="wf-form-Styleguide-Form" name="wf-form-Styleguide-Form" data-name="Styleguide Form" class="form">
<div class="form-field-wrapper"><label for="First-Name" class="form-label">Text Input</label><input type="text" class="form-input w-input" maxlength="256" name="First-Name" data-name="First Name" placeholder="First Name" id="First-Name"></div>
<div class="form-field-wrapper"><label for="Message" class="form-label">Text Area</label><textarea placeholder="Message" maxlength="5000" id="Message" name="Message" data-name="Message" class="form-input is-text-area w-input"></textarea></div>
<div class="form-field-wrapper"><label for="Style-Select" class="form-label">Select field</label><select id="Style-Select" name="Style-Select" data-name="Style Select" class="form-input is-select-input w-select">
<option value="">Select one...</option>
<option value="First">First Choice</option>
<option value="Second">Second Choice</option>
<option value="Third">Third Choice</option>
</select></div>
<div class="form-field-wrapper"><label for="email" class="form-label">Checkbox field</label><label class="w-checkbox form-checkbox">
<div class="w-checkbox-input w-checkbox-input--inputType-custom form-checkbox-icon w--redirected-checked"></div><input type="checkbox" id="Checkbox" name="Checkbox" data-name="Checkbox" checked="" style="opacity:0;position:absolute;z-index:-1"><span for="Checkbox" class="form-checkbox-label w-form-label">Checkbox</span>
</label></div>
<div class="form-field-wrapper"><label for="email" class="form-label">Radio button</label><label class="form-radio w-radio"><input type="radio" data-name="Radio" id="radio" name="radio" value="Radio" class="w-form-formradioinput form-radio-icon w-radio-input"><span class="form-radio-label w-form-label">Radio</span></label></div>
<div class="margin-top margin-small"><input type="submit" value="Submit" data-wait="Please wait..." class="button-primary is-form-submit w-button"></div>
</form>
<div class="form-message-success w-form-done">
<div>Thank you! Your submission has been received!</div>
</div>
<div class="form-message-error w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="text-color-orange"></div>
<div class="rel-1"></div>
</div>
</div>
</div>
</div>
<div class="fs-styleguide_classes">
<div class="fs-styleguide_structures">
<div class="page-wrapper"></div>
<div class="page-padding"></div>
<div class="main-wrapper"></div>
</div>
<div class="fs-styleguide_containers">
<div class="container"></div>
<div class="container-medium"></div>
<div class="container-small"></div>
</div>
<div class="fs-styleguide_max-widths">
<div class="max-width-full"></div>
<div class="max-width-full-tablet"></div>
<div class="max-width-full-mobile-landscape"></div>
<div class="max-width-full-mobile-portrait"></div>
<div class="max-width-xxlarge"></div>
<div class="max-width-xlarge"></div>
<div class="max-width-large"></div>
<div class="max-width-medium"></div>
<div class="max-width-small"></div>
<div class="max-width-xsmall"></div>
<div class="max-width-xxsmall"></div>
</div>
<div class="fs-styleguide_margins">
<div class="margin-0"></div>
<div class="margin-tiny"></div>
<div class="margin-xxsmall"></div>
<div class="margin-xsmall"></div>
<div class="margin-small"></div>
<div class="margin-medium"></div>
<div class="margin-large"></div>
<div class="margin-xlarge"></div>
<div class="margin-xxlarge"></div>
<div class="margin-huge"></div>
<div class="margin-xhuge"></div>
<div class="margin-xxhuge"></div>
<div class="margin-custom1"></div>
<div class="margin-custom2"></div>
<div class="margin-custom3"></div>
</div>
<div class="fs-styleguide_paddings">
<div class="padding-0"></div>
<div class="padding-tiny"></div>
<div class="padding-xxsmall"></div>
<div class="padding-xsmall"></div>
<div class="padding-small"></div>
<div class="padding-medium"></div>
<div class="padding-large"></div>
<div class="padding-xlarge"></div>
<div class="padding-xxlarge"></div>
<div class="padding-huge"></div>
<div class="padding-xhuge"></div>
<div class="padding-xxhuge"></div>
<div class="padding-custom1"></div>
<div class="padding-custom2"></div>
<div class="padding-custom3"></div>
</div>
<div class="fs-styleguide_margin-directions">
<div class="margin-top"></div>
<div class="margin-bottom"></div>
<div class="margin-left"></div>
<div class="margin-right"></div>
<div class="margin-vertical"></div>
<div class="margin-horizontal"></div>
</div>
<div class="fs-styleguide_padding-directions">
<div class="padding-top"></div>
<div class="padding-bottom"></div>
<div class="padding-left"></div>
<div class="padding-right"></div>
<div class="padding-vertical"></div>
<div class="padding-horizontal"></div>
</div>
<div class="fs-styleguide_responsiveness">
<div class="hide"></div>
<div class="hide-tablet"></div>
<div class="hide-mobile-landscape"></div>
<div class="hide-mobile-portrait"></div>
<div class="show"></div>
<div class="show-tablet"></div>
<div class="show-mobile-landscape"></div>
<div class="show-mobile-portrait"></div>
</div>
<div class="fs-styleguide_utility">
<div class="spacing-clean"></div>
<div class="z-1"></div>
<div class="z-2"></div>
<div class="align-center"></div>
<div class="div-square"></div>
<div class="clickable-off">
<div class="layer"></div>
</div>
<div class="clickable-on"></div>
<div class="overflow-hidden"></div>
<div class="overflow-scroll"></div>
<div class="overflow-auto"></div>
</div>
<div class="fs-styleguide_symbols">
<div class="global-styles w-embed">
<style>
/* Snippet gets rid of top margin on first element in any rich text*/
.w-richtext>:first-child {
margin-top: 0;
}
/* Snippet gets rid of bottom margin on last element in any rich text*/
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
margin-bottom: 0;
}
/* Snippet makes all link elements listed below to inherit color from their parent */
a,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link
{
color: inherit;
}
/* Snippet prevents all click and hover interaction with an element */
.clickable-off {
pointer-events: none;
}
/* Snippet enables all click and hover interaction with an element */
.clickable-on{
pointer-events: auto;
}
/* Snippet enables you to add class of div-square which creates and maintains a 1:1 dimension of a div.*/
.div-square::after {
content: "";
display: block;
padding-bottom: 100%;
}
/*Hide focus outline for main content element*/
main:focus-visible {
outline: -webkit-focus-ring-color auto 0px;
}
/* Make sure containers never lose their center alignment*/
.container-medium, .container-small, .container-large {
margin-right: auto !important;
margin-left: auto !important;
}
/*Reset selects, buttons, and links styles*/
.w-input, .w-select, a {
color: inherit;
text-decoration: inherit;
font-size: inherit;
}
/*Apply "..." after 3 lines of text */
.text-style-3lines {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/*Apply "..." after 2 lines of text */
.text-style-2lines {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</div>
</div>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=612fa06c6c54af0794df867d" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>