-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyling.html
480 lines (476 loc) · 41.4 KB
/
styling.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>guidoslotboom.github.io</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/theme.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/javascript/theme-toggle.js"></script>
</head>
<body>
<header class="page__header">
<div class="header__wrapper grid-cols">
<div class="col-full">
<a href="index.html" class="logo">
<div class="logo__shape">
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.6906 28C63.1197 30.4752 63.1197 33.5248 61.6906 36L50.3094 55.7128C48.8803 58.188 46.2393 59.7128 43.3812 59.7128L20.6188 59.7128C17.7607 59.7128 15.1197 58.188 13.6906 55.7128L2.3094 36C0.880337 33.5248 0.880337 30.4752 2.3094 28L13.6906 8.28719C15.1197 5.81198 17.7607 4.28719 20.6188 4.28719L43.3812 4.28719C46.2393 4.28719 48.8803 5.81198 50.3094 8.28719L61.6906 28Z" class="hexagon"/>
<path d="M19.5103 39.5955L20.4695 41.2608L22.4678 44.7313C22.8358 45.3593 23.3625 45.8794 23.995 46.2395C24.6276 46.5996 25.3437 46.787 26.0715 46.7829H37.9017C38.6311 46.7831 39.3476 46.5911 39.979 46.2263C40.6105 45.8614 41.1347 45.3366 41.4988 44.7046L44.4563 39.5822L47.4405 34.4864C47.8078 33.8554 48.0009 33.1382 48.0001 32.4081H39.2606" class="stroke"/>
<path d="M44.4632 25.2207L43.444 23.4089L41.5256 20.0783C41.1615 19.4463 40.6374 18.9215 40.0059 18.5566C39.3744 18.1918 38.6579 17.9998 37.9286 18H26.0717C25.3424 17.9998 24.6259 18.1918 23.9944 18.5566C23.3629 18.9215 22.8387 19.4463 22.4747 20.0783L19.5171 25.2074L16.5595 30.3298C16.1932 30.9612 16.0002 31.6782 16 32.4081H24.7128" class="stroke"/>
<path d="M31.9869 33.0742C32.3548 33.0742 32.653 32.776 32.653 32.4081C32.653 32.0402 32.3548 31.742 31.9869 31.742C31.619 31.742 31.3208 32.0402 31.3208 32.4081C31.3208 32.776 31.619 33.0742 31.9869 33.0742Z" class="stroke"/>
<path d="M31.987 33.7404C32.7228 33.7404 33.3193 33.1439 33.3193 32.4081C33.3193 31.6723 32.7228 31.0759 31.987 31.0759C31.2512 31.0759 30.6548 31.6723 30.6548 32.4081C30.6548 33.1439 31.2512 33.7404 31.987 33.7404Z" class="dot"/>
</svg>
</div>
<div class="logo__text">
<span>Guido<br> Slotboom<strong>.</strong></span>
<span>UI Designer & Front-end Developer</span>
</div>
</a>
<button id="theme-toggle" class="button" title="Toggle between theme" aria-label="auto">
<span>
<svg class="theme-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" fill=""/>
<mask class="moon" id="moon-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<circle class="eclipse" cx="22" cy="11" r="5" fill="black"></circle>
</mask>
<circle class="sun-and-moon" cx="12" cy="12" r="5" mask="url(#moon-mask)"></circle>
<g class="sunbeams">
<path d="M12 2V4"/>
<path d="M12 20V22"/>
<path d="M22 12H20"/>
<path d="M4 12H2"/>
<path d="M19.071 4.92893L17.6568 6.34314"/>
<path d="M6.34314 17.6569L4.92893 19.0711"/>
<path d="M19.0711 19.0711L17.6569 17.6569"/>
<path d="M6.34311 6.34314L4.92889 4.92893"/>
</g>
</svg>
</span>
</button>
</div>
</div>
</header>
<main class="page__content">
<div class="content__wrapper grid-cols">
<div>
<h1>The heading text h1</h1>
<p class="text-xl">Paragraph text large lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
<p class="text-lg">Paragraph text large lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
<p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
<p class="text-sm">Paragraph text small lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
<p class="text-xs">Paragraph text small lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
<h2>The heading text h2</h2>
<p>Paragraph text lorem ipsum dolor sit amet <a href="#">text link</a>, consectetur adipiscing elit. <q>Phasellus eu enim quis dui dictum tristique a eu elit.</q> Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
<a href="#">Tekst link</a>
<p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
<p>
<a class="button color-primary" href="#"><span>Button text</span></a>
<a class="button color-accent" href="#"><span>Button text</span></a>
</p>
<h3>The heading text h3</h3>
<p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit.</li>
</ul>
<h4>The heading text h4</h4>
<p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
<figure>
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.</p>
</blockquote>
<figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>
<h5>The heading text h5</h5>
<p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
<figure>
<img src="assets/images/placeholder-figure.jpg" alt="Placeholder figure">
<figcaption>Lorem ipsum dolor sit amet</figcaption>
</figure>
<h6>The heading text h6</h6>
<p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
</div>
</div>
<div class="content__wrapper grid-cols">
<div>
<h2>Multi columns</h2>
<p class="multi-columns">Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
<ul class="multi-columns">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit.</li>
</ul>
</div>
</div>
<div class="content__wrapper grid-cols">
<div>
<h2>Oh snap, scroll snap!</h2>
<p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
</div>
<div id="showcases" class="col-full" aria-roledescription="carousel">
<div class="scroll-snap-items scroll-snap-x">
<div class="showcase snap-item" role="group">
<div class="showcase__text">
<h3>Showcase</h3>
<h4>The header of a showcase scroll item lorem ipsum dolor</h4>
<ul>
<li>Tag</li>
<li>Tag</li>
</ul>
</div>
<figure class="showcase__image">
<img src="assets/images/placeholder-showcase-1.png" alt="Placeholder showcase">
</figure>
</div>
<div class="showcase snap-item" role="group">
<figure class="showcase__image">
<img src="assets/images/placeholder-showcase-2.png" alt="Placeholder showcase">
</figure>
<div class="showcase__text">
<h3>Showcase</h3>
<h4>The header of a showcase scroll item lorem ipsum dolor</h4>
<ul>
<li>Tag</li>
<li>Tag</li>
</ul>
</div>
</div>
<div class="showcase snap-item" role="group">
<div class="showcase__text">
<h3>Showcase</h3>
<h4>The header of a showcase scroll item lorem ipsum dolor</h4>
<ul>
<li>Tag</li>
<li>Tag</li>
</ul>
</div>
<figure class="showcase__image">
<img src="assets/images/placeholder-showcase-1.png" alt="Placeholder showcase">
</figure>
</div>
<div class="showcase snap-item" role="group">
<figure class="showcase__image">
<img src="assets/images/placeholder-showcase-2.png" alt="Placeholder showcase">
</figure>
<div class="showcase__text">
<h3>Showcase</h3>
<h4>The header of a showcase scroll item lorem ipsum dolor</h4>
<ul>
<li>Tag</li>
<li>Tag</li>
</ul>
</div>
</div>
<div class="showcase snap-item" role="group">
<div class="showcase__text">
<h3>Showcase</h3>
<h4>The header of a showcase scroll item lorem ipsum dolor</h4>
<ul>
<li>Tag</li>
<li>Tag</li>
</ul>
</div>
<figure class="showcase__image">
<img src="assets/images/placeholder-showcase-1.png" alt="Placeholder showcase">
</figure>
</div>
<div class="showcase snap-item" role="group">
<figure class="showcase__image">
<img src="assets/images/placeholder-showcase-2.png" alt="Placeholder showcase">
</figure>
<div class="showcase__text">
<h3>Showcase</h3>
<h4>The header of a showcase scroll item lorem ipsum dolor</h4>
<ul>
<li>Tag</li>
<li>Tag</li>
</ul>
</div>
</div>
</div>
<div class="scroll-snap-nav buttons" data-slider="showcases">
<button class="button icon-md" id="scrollToPrev">
<span class="material-symbols-outlined">chevron_left</span>
</button>
<button class="button icon-md" id="scrollToNext">
<span class="material-symbols-outlined">chevron_right</span>
</button>
</div>
</div>
</div>
<div class="content__wrapper grid-cols">
<div>
<h2>Tabs</h2>
<p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
</div>
<div class="col-xl tabs">
<div class="tab__list" role="tablist" aria-label="Tab panels">
<button role="tab" aria-selected="true" id="tabpanel1">
<figure>
<svg width="96" height="64" viewBox="0 0 96 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M77.6906 28C79.1197 30.4752 79.1197 33.5248 77.6906 36L66.3094 55.7128C64.8803 58.188 62.2393 59.7128 59.3812 59.7128L36.6188 59.7128C33.7607 59.7128 31.1197 58.188 29.6906 55.7128L18.3094 36C16.8803 33.5248 16.8803 30.4752 18.3094 28L29.6906 8.28718C31.1197 5.81198 33.7607 4.28719 36.6188 4.28719L59.3812 4.28719C62.2393 4.28719 64.8803 5.81198 66.3094 8.28719L77.6906 28Z" class="stroke stroke-base stroke-dasharray"/>
<path d="M70.2679 29C71.3397 30.8564 71.3397 33.1436 70.2679 35L61.732 49.7846C60.6603 51.641 58.6795 52.7846 56.5359 52.7846L39.4641 52.7846C37.3205 52.7846 35.3397 51.641 34.2679 49.7846L25.7321 35C24.6603 33.1436 24.6603 30.8564 25.7321 29L34.2679 14.2154C35.3397 12.359 37.3205 11.2154 39.4641 11.2154L56.5359 11.2154C58.6795 11.2154 60.6603 12.359 61.7321 14.2154L70.2679 29Z" class="fill fill-base"/>
<path d="M59.9793 30.5C60.5152 31.4282 60.5152 32.5718 59.9793 33.5L55.2887 41.6244C54.7528 42.5526 53.7624 43.1244 52.6906 43.1244L43.3094 43.1244C42.2376 43.1244 41.2472 42.5526 40.7113 41.6244L36.0207 33.5C35.4848 32.5718 35.4848 31.4282 36.0207 30.5L40.7113 22.3756C41.2472 21.4474 42.2376 20.8756 43.3094 20.8756L52.6906 20.8756C53.7624 20.8756 54.7528 21.4474 55.2887 22.3756L59.9793 30.5Z" class="stroke stroke-contrast"/>
<path d="M53.4226 31C53.7799 31.6188 53.7799 32.3812 53.4226 33L51.5773 36.1962C51.2201 36.815 50.5598 37.1962 49.8453 37.1962L46.1547 37.1962C45.4402 37.1962 44.7799 36.815 44.4226 36.1962L42.5774 33C42.2201 32.3812 42.2201 31.6188 42.5774 31L44.4226 27.8038C44.7799 27.185 45.4402 26.8038 46.1547 26.8038L49.8453 26.8038C50.5598 26.8038 51.2201 27.185 51.5774 27.8038L53.4226 31Z" class="fill fill-contrast"/>
</svg>
</figure>
<span>Tabpanel button one</span>
</button>
<button role="tab" aria-selected="false" id="tabpanel2">
<figure>
<svg width="96" height="64" viewBox="0 0 96 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="13" y="5" width="78" height="46" rx="3" class="stroke stroke-base"/>
<path d="M61.134 26.5C61.6699 27.4282 61.6699 28.5718 61.134 29.5L57.866 35.1603C57.3301 36.0885 56.3397 36.6603 55.2679 36.6603L48.732 36.6603C47.6603 36.6603 46.6699 36.0885 46.134 35.1603L42.866 29.5C42.3301 28.5718 42.3301 27.4282 42.866 26.5L46.134 20.8397C46.6699 19.9115 47.6603 19.3397 48.7321 19.3397L55.2679 19.3397C56.3397 19.3397 57.3301 19.9115 57.866 20.8397L61.134 26.5Z" class="fill fill-contrast"/>
<rect x="4" y="20" width="24" height="40" rx="4" class="fill fill-base"/>
<path d="M20.7113 39.5C20.89 39.8094 20.89 40.1906 20.7113 40.5L18.7887 43.8301C18.61 44.1395 18.2799 44.3301 17.9226 44.3301L14.0773 44.3301C13.7201 44.3301 13.39 44.1395 13.2113 43.8301L11.2887 40.5C11.11 40.1906 11.11 39.8094 11.2887 39.5L13.2113 36.1699C13.39 35.8605 13.7201 35.6699 14.0774 35.6699L17.9226 35.6699C18.2799 35.6699 18.61 35.8605 18.7887 36.1699L20.7113 39.5Z" class="fill fill-contrast"/>
</svg>
</figure>
<span>Tabpanel button two</span>
</button>
<button role="tab" aria-selected="false" id="tabpanel3">
<figure>
<svg width="96" height="64" viewBox="0 0 96 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="60" y="4" width="32" height="56" rx="4" class="fill fill-base"/>
<path d="M83.134 30.5C83.6699 31.4282 83.6699 32.5718 83.134 33.5L80.866 37.4282C80.3301 38.3564 79.3397 38.9282 78.2679 38.9282L73.7321 38.9282C72.6603 38.9282 71.6699 38.3564 71.134 37.4282L68.866 33.5C68.3301 32.5718 68.3301 31.4282 68.866 30.5L71.134 26.5718C71.6699 25.6436 72.6603 25.0718 73.7321 25.0718L78.2679 25.0718C79.3397 25.0718 80.3301 25.6436 80.866 26.5718L83.134 30.5Z" class="fill fill-contrast"/>
<path d="M4 4H12C14.2091 4 16 5.79086 16 8V56C16 58.2091 14.2091 60 12 60H4" class="stroke stroke-base"/>
<path d="M22 32L46 32" class="stroke stroke-contrast"/>
<circle cx="16" cy="32" r="5" class="stroke stroke-contrast fill fill-base"/>
<path d="M40 38L46 32L40 26" class="stroke stroke-contrast"/>
</svg>
</figure>
<span>Tabpanel button three</span>
</button>
<button role="tab" aria-selected="false" id="tabpanel4">
<figure>
<svg width="96" height="64" viewBox="0 0 96 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M77.6906 28C79.1197 30.4752 79.1197 33.5248 77.6906 36L66.3094 55.7128C64.8803 58.188 62.2393 59.7128 59.3812 59.7128L36.6188 59.7128C33.7607 59.7128 31.1197 58.188 29.6906 55.7128L18.3094 36C16.8803 33.5248 16.8803 30.4752 18.3094 28L29.6906 8.28718C31.1197 5.81198 33.7607 4.28719 36.6188 4.28719L59.3812 4.28719C62.2393 4.28719 64.8803 5.81198 66.3094 8.28719L77.6906 28Z" class="stroke stroke-base"/>
<path d="M70.2679 29C71.3397 30.8564 71.3397 33.1436 70.2679 35L61.732 49.7846C60.6603 51.641 58.6795 52.7846 56.5359 52.7846L39.4641 52.7846C37.3205 52.7846 35.3397 51.641 34.2679 49.7846L25.7321 35C24.6603 33.1436 24.6603 30.8564 25.7321 29L34.2679 14.2154C35.3397 12.359 37.3205 11.2154 39.4641 11.2154L56.5359 11.2154C58.6795 11.2154 60.6603 12.359 61.7321 14.2154L70.2679 29Z" class="fill fill-base"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M61.2402 30.4565C61.8102 31.4066 61.8102 32.5934 61.2402 33.5435L57.6402 39.5435C57.098 40.4471 56.1215 41 55.0677 41L55.0001 41C54.4478 41 54.0001 40.5523 54.0001 40C54.0001 39.4477 54.4478 39 55.0001 39L55.0677 39C55.419 39 55.7445 38.8157 55.9252 38.5145L59.5252 32.5145C59.7152 32.1978 59.7152 31.8022 59.5252 31.4855L55.9252 25.4855C55.7445 25.1843 55.419 25 55.0677 25L55.0001 25C54.4478 25 54.0001 24.5523 54.0001 24C54.0001 23.4477 54.4478 23 55.0001 23L55.0677 23C56.1215 23 57.098 23.5529 57.6402 24.4565L61.2402 30.4565Z" class="fill fill-contrast"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M42 40C42 40.5523 41.5523 41 41 41L40.9324 41C39.8786 41 38.9021 40.4471 38.3599 39.5435L34.7599 33.5435C34.1899 32.5934 34.1899 31.4066 34.7599 30.4565L38.3599 24.4565C38.9021 23.5529 39.8786 23 40.9324 23L41 23C41.5523 23 42 23.4477 42 24C42 24.5523 41.5523 25 41 25L40.9324 25C40.5811 25 40.2556 25.1843 40.0749 25.4855L36.4749 31.4855C36.2849 31.8022 36.2849 32.1978 36.4749 32.5145L40.0749 38.5145C40.2556 38.8157 40.5811 39 40.9324 39L41 39C41.5523 39 42 39.4477 42 40Z" class="fill fill-contrast"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.8038 42.9806C45.2623 42.8723 44.9111 42.3454 45.0194 41.8039L49.0194 21.8039C49.1277 21.2623 49.6545 20.9111 50.1961 21.0194C50.7376 21.1277 51.0888 21.6545 50.9805 22.1961L46.9805 42.1961C46.8722 42.7377 46.3454 43.0889 45.8038 42.9806Z" class="fill fill-contrast"/>
</svg>
</figure>
<span>Tabpanel button four</span>
</button>
</div>
<div class="content__wrapper tab__panel">
<div role="tabpanel" aria-labelledby="tabpanel1">
<h3>Tabpanel 1</h3>
<p>Tabpanel 1 text lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at vestibulum augue. Duis ut est ultricies <a href="#">text link</a>, vestibulum lacus eget, congue justo. Etiam eu elementum augue, viverra viverra lorem. Phasellus accumsan, urna consequat suscipit ullamcorper, elit quam luctus dolor, ullamcorper lacinia erat leo eu augue.</p>
<ul class="dock">
<li class="dock__item">
<figure>
<img src="assets/images/placeholder-tool.svg" alt="Placeholder Tool">
<figcaption>Placeholder</figcaption>
</figure>
</li>
<li class="dock__item">
<figure>
<img src="assets/images/placeholder-tool.svg" alt="Placeholder Tool">
<figcaption>Placeholder</figcaption>
</figure>
</li>
<li class="dock__item">
<figure>
<img src="assets/images/placeholder-tool.svg" alt="Placeholder Tool">
<figcaption>Placeholder</figcaption>
</figure>
</li>
<li class="dock__item">
<figure>
<img src="assets/images/placeholder-tool.svg" alt="Placeholder Tool">
<figcaption>Placeholder</figcaption>
</figure>
</li>
<li class="dock__item">
<figure>
<img src="assets/images/placeholder-tool.svg" alt="Placeholder Tool">
<figcaption>Placeholder</figcaption>
</figure>
</li>
</ul>
</div>
<div role="tabpanel" aria-labelledby="tabpanel2" hidden>
<h3>Tabpanel 2</h3>
<p>Tabpanel 2 text lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at vestibulum augue. Duis ut est ultricies, vestibulum lacus eget, congue justo. Etiam eu elementum augue, viverra viverra lorem. Phasellus accumsan, urna consequat suscipit ullamcorper, elit quam luctus dolor, ullamcorper lacinia erat leo eu augue.</p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div role="tabpanel" aria-labelledby="tabpanel3" hidden>
<h3>Tabpanel 3</h3>
<p>Tabpanel 3 text lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at vestibulum augue. Duis ut est ultricies, vestibulum lacus eget, congue justo. Etiam eu elementum augue, viverra viverra lorem. Phasellus accumsan, urna consequat suscipit ullamcorper, elit quam luctus dolor, ullamcorper lacinia erat leo eu augue.</p>
</div>
<div role="tabpanel" aria-labelledby="tabpanel4" hidden>
<h3>Tabpanel 4</h3>
<p>Tabpanel 4 text lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at vestibulum augue. Duis ut est ultricies, vestibulum lacus eget, congue justo. Etiam eu elementum augue, viverra viverra lorem. Phasellus accumsan, urna consequat suscipit ullamcorper, elit quam luctus dolor, ullamcorper lacinia erat leo eu augue.</p>
<p>
<a class="button color-accent" href="#"><span>Button text</span></a>
<a class="button color-primary" href="#"><span>Button text</span></a>
<a class="button" href="#"><span>Button text</span></a>
</p>
</div>
</div>
</div>
</div>
<div class="content__wrapper grid-cols">
<div>
<h2>Text Buttons</h2>
<div>
<a class="button text-lg" href="#"><span>Button text</span></a>
<a class="button text-md" href="#"><span>Button text</span></a>
<a class="button text-sm" href="#"><span>Button text</span></a>
</div>
<div>
<a class="button color-primary text-lg" href="#"><span>Button text</span></a>
<a class="button color-primary text-md" href="#"><span>Button text</span></a>
<a class="button color-primary text-sm" href="#"><span>Button text</span></a>
</div>
<div>
<a class="button color-accent text-lg" href="#"><span>Button text</span></a>
<a class="button color-accent text-md" href="#"><span>Button text</span></a>
<a class="button color-accent text-sm" href="#"><span>Button text</span></a>
</div>
<div>
<a class="button style-stealth text-lg" href="#"><span>Button text</span></a>
<a class="button style-stealth text-md" href="#"><span>Button text</span></a>
<a class="button style-stealth text-sm" href="#"><span>Button text</span></a>
</div>
<div>
<a class="button style-stealth color-primary text-lg" href="#"><span>Button text</span></a>
<a class="button style-stealth color-primary text-md" href="#"><span>Button text</span></a>
<a class="button style-stealth color-primary text-sm" href="#"><span>Button text</span></a>
</div>
<div>
<a class="button style-stealth color-accent text-lg" href="#"><span>Button text</span></a>
<a class="button style-stealth color-accent text-md" href="#"><span>Button text</span></a>
<a class="button style-stealth color-accent text-sm" href="#"><span>Button text</span></a>
</div>
</div>
<div>
<h2>Icon Buttons</h2>
<div>
<a class="button icon-lg" href="#">
<span class="material-symbols-outlined">home</span>
</a>
<a class="button icon-md" href="#">
<span class="material-symbols-outlined">home</span>
</a>
<a class="button icon-sm" href="#">
<span class="material-symbols-outlined">home</span>
</a>
</div>
<div>
<a class="button color-primary icon-lg" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
<a class="button color-primary icon-md" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
<a class="button color-primary icon-sm" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
</div>
<div>
<a class="button color-accent icon-lg" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
<a class="button color-accent icon-md" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
<a class="button color-accent icon-sm" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
</div>
<div>
<a class="button style-stealth icon-lg" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
<a class="button style-stealth icon-md" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
<a class="button style-stealth icon-sm" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
</div>
<div>
<a class="button style-stealth color-primary icon-lg" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
<a class="button style-stealth color-primary icon-md" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
<a class="button style-stealth color-primary icon-sm" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
</div>
<div>
<a class="button style-stealth color-accent icon-lg" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
<a class="button style-stealth color-accent icon-md" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
<a class="button style-stealth color-accent icon-sm" href="#">
<span class="material-symbols-outlined">arrow_forward</span>
</a>
</div>
</div>
</div>
<div class="content__wrapper grid-cols">
<div>
<h2>Socials Buttons</h2>
<div class="socials">
<a class="social linkedin" href="#">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.9406 23H1.30879V9.10457H5.9406V23ZM3.62469 6.40268C3.09386 6.38751 2.57927 6.21624 2.14522 5.91028C1.71116 5.60432 1.3769 5.17723 1.18419 4.68239C0.991472 4.18754 0.948857 3.64687 1.06167 3.12794C1.17447 2.60901 1.4377 2.13483 1.81846 1.76465C2.19922 1.39447 2.68063 1.1447 3.20253 1.04655C3.72443 0.9484 4.26368 1.00623 4.7529 1.2128C5.24213 1.41937 5.65963 1.76553 5.95324 2.20803C6.24686 2.65053 6.40356 3.16974 6.40378 3.70079C6.39159 4.42698 6.09242 5.11882 5.57168 5.6251C5.05093 6.13138 4.35094 6.41094 3.62469 6.40268ZM23 23H18.38V15.6817C18.38 13.4894 17.453 12.7019 16.2488 12.7019C15.8957 12.7254 15.5483 12.8185 15.2313 12.9757C14.9142 13.1329 14.6249 13.3512 14.3925 13.618C14.1601 13.8849 13.9822 14.195 13.87 14.5306C13.7578 14.8662 13.7211 15.2207 13.7463 15.5737C13.7386 15.6455 13.7386 15.718 13.7463 15.7898V23H9.1125V9.10457H13.595V11.1117C14.0466 10.4246 14.6663 9.86507 15.3963 9.48659C16.1262 9.10812 16.9395 8.92341 17.7613 8.95017C20.1544 8.95017 23 10.278 23 14.601V23Z"/>
</svg>
</a>
<a class="social instagram" href="#">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2.163C15.204 2.163 15.584 2.175 16.85 2.233C20.102 2.381 21.621 3.924 21.769 7.152C21.827 8.417 21.838 8.797 21.838 12.001C21.838 15.206 21.826 15.585 21.769 16.85C21.62 20.075 20.105 21.621 16.85 21.769C15.584 21.827 15.206 21.839 12 21.839C8.796 21.839 8.416 21.827 7.151 21.769C3.891 21.62 2.38 20.07 2.232 16.849C2.174 15.584 2.162 15.205 2.162 12C2.162 8.796 2.175 8.417 2.232 7.151C2.381 3.924 3.896 2.38 7.151 2.232C8.417 2.175 8.796 2.163 12 2.163ZM12 0C8.741 0 8.333 0.014 7.053 0.072C2.695 0.272 0.273 2.69 0.073 7.052C0.014 8.333 0 8.741 0 12C0 15.259 0.014 15.668 0.072 16.948C0.272 21.306 2.69 23.728 7.052 23.928C8.333 23.986 8.741 24 12 24C15.259 24 15.668 23.986 16.948 23.928C21.302 23.728 23.73 21.31 23.927 16.948C23.986 15.668 24 15.259 24 12C24 8.741 23.986 8.333 23.928 7.053C23.732 2.699 21.311 0.273 16.949 0.073C15.668 0.014 15.259 0 12 0ZM12 5.838C8.597 5.838 5.838 8.597 5.838 12C5.838 15.403 8.597 18.163 12 18.163C15.403 18.163 18.162 15.404 18.162 12C18.162 8.597 15.403 5.838 12 5.838ZM12 16C9.791 16 8 14.21 8 12C8 9.791 9.791 8 12 8C14.209 8 16 9.791 16 12C16 14.21 14.209 16 12 16ZM18.406 4.155C17.61 4.155 16.965 4.8 16.965 5.595C16.965 6.39 17.61 7.035 18.406 7.035C19.201 7.035 19.845 6.39 19.845 5.595C19.845 4.8 19.201 4.155 18.406 4.155Z"/>
</svg>
</a>
<a class="social twitter" href="#">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.543 6.73C21.5576 6.93614 21.5576 7.14227 21.5576 7.35031C21.5576 13.6893 16.6045 21 7.54759 21V20.9962C4.87215 21 2.25229 20.2533 0 18.8455C0.389031 18.8911 0.780012 18.9139 1.17197 18.9149C3.38915 18.9168 5.54296 18.192 7.28726 16.8573C5.18026 16.8184 3.3326 15.4799 2.68714 13.5259C3.42523 13.6646 4.18574 13.6361 4.91018 13.4432C2.61304 12.9911 0.96039 11.0247 0.96039 8.74102V8.68023C1.64485 9.05165 2.41121 9.25779 3.19512 9.28059C1.03157 7.87183 0.364656 5.06761 1.67118 2.87514C4.17112 5.87221 7.8596 7.69419 11.8191 7.88703C11.4223 6.22083 11.9644 4.47484 13.2436 3.30357C15.2268 1.48728 18.3459 1.58038 20.2101 3.5116C21.3129 3.29977 22.3698 2.90554 23.337 2.34698C22.9694 3.45746 22.2001 4.40075 21.1725 5.00016C22.1484 4.88807 23.102 4.63348 24 4.24496C23.3389 5.2101 22.5063 6.05079 21.543 6.73Z"/>
</svg>
</a>
<a class="social github" href="#">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0C5.374 0 0 5.373 0 12C0 17.302 3.438 21.8 8.207 23.387C8.806 23.498 9 23.126 9 22.81V20.576C5.662 21.302 4.967 19.16 4.967 19.16C4.421 17.773 3.634 17.404 3.634 17.404C2.545 16.659 3.717 16.675 3.717 16.675C4.922 16.759 5.556 17.912 5.556 17.912C6.626 19.746 8.363 19.216 9.048 18.909C9.155 18.134 9.466 17.604 9.81 17.305C7.145 17 4.343 15.971 4.343 11.374C4.343 10.063 4.812 8.993 5.579 8.153C5.455 7.85 5.044 6.629 5.696 4.977C5.696 4.977 6.704 4.655 8.997 6.207C9.954 5.941 10.98 5.808 12 5.803C13.02 5.808 14.047 5.941 15.006 6.207C17.297 4.655 18.303 4.977 18.303 4.977C18.956 6.63 18.545 7.851 18.421 8.153C19.191 8.993 19.656 10.064 19.656 11.374C19.656 15.983 16.849 16.998 14.177 17.295C14.607 17.667 15 18.397 15 19.517V22.81C15 23.129 15.192 23.504 15.801 23.386C20.566 21.797 24 17.3 24 12C24 5.373 18.627 0 12 0Z">
</svg>
</a>
<a class="social codepen" href="#">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.372 0.189436C11.7526 -0.0631454 12.2474 -0.0631454 12.628 0.189436L23.4922 7.39931C23.8094 7.60977 24 7.96507 24 8.34568V15.6543C24 16.0349 23.8094 16.3902 23.4922 16.6007L12.628 23.8106C12.2474 24.0631 11.7526 24.0631 11.372 23.8106L0.507759 16.6007C0.190634 16.3902 0 16.0349 0 15.6543V8.34568C0 7.96507 0.190634 7.60977 0.507759 7.39931L11.372 0.189436ZM2.2716 10.4787L4.53306 12L2.2716 13.5213V10.4787ZM3.1802 15.6479L10.8642 20.7473V16.2591L6.5679 13.3689L3.1802 15.6479ZM8.60275 12L12 14.2854L15.3973 12L12 9.71457L8.60275 12ZM13.1358 7.74087L17.4321 10.6311L20.8198 8.3521L13.1358 3.25272V7.74087ZM10.8642 3.25272V7.74087L6.5679 10.6311L3.1802 8.3521L10.8642 3.25272ZM21.7284 10.4787L19.4669 12L21.7284 13.5213V10.4787ZM20.8198 15.6479L17.4321 13.3689L13.1358 16.2591V20.7473L20.8198 15.6479Z"/>
</svg>
</a>
<a class="social dribbble" href="#">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0C5.372 0 0 5.373 0 12C0 18.627 5.372 24 12 24C18.628 24 24 18.627 24 12C24 5.373 18.628 0 12 0ZM21.885 11.441C19.31 11.019 16.942 10.996 14.782 11.368C14.538 10.805 14.285 10.243 14.015 9.688C16.325 8.688 18.18 7.33 19.563 5.606C20.913 7.2 21.76 9.225 21.885 11.441ZM18.043 4.159C16.838 5.713 15.175 6.942 13.057 7.839C12.041 5.978 10.879 4.163 9.569 2.401C10.348 2.204 11.16 2.087 12 2.087C14.275 2.087 16.368 2.866 18.043 4.159ZM7.527 3.166C8.858 4.908 10.038 6.704 11.064 8.547C8.634 9.262 5.733 9.629 2.38 9.652C3.072 6.817 4.981 4.459 7.527 3.166ZM2.087 12L2.1 11.744C5.949 11.739 9.269 11.296 12.05 10.422C12.283 10.897 12.506 11.374 12.72 11.854C9.34 12.911 6.555 15.076 4.383 18.334C2.951 16.615 2.087 14.407 2.087 12ZM5.916 19.81C7.885 16.722 10.398 14.712 13.514 13.783C14.442 16.203 15.123 18.693 15.557 21.243C12.208 22.534 8.604 21.909 5.916 19.81ZM17.502 20.24C17.064 17.887 16.422 15.587 15.582 13.343C17.458 13.078 19.522 13.147 21.781 13.539C21.344 16.325 19.753 18.731 17.502 20.24Z"/>
</svg>
</a>
</div>
</div>
</div>
</main>
<footer class="page__footer">
<div class="footer__wrapper grid-cols text-center">
<div class="col-lg text-sm">
<p>Digital Creative located in Amersfoort, The Nederlands.</p>
<p>© 2022 Guido Slotboom. All rights reserved.</p>
</div>
</div>
</footer>
<script src="assets/javascript/slider.js"></script>
<script src="assets/javascript/tabs.js"></script>
</body>
</html>