-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
705 lines (664 loc) · 58.8 KB
/
index.html
File metadata and controls
705 lines (664 loc) · 58.8 KB
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
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./stylesheets/reset.css" />
<link rel="stylesheet" href="./stylesheets/main.css" />
<link rel="stylesheet" href="./stylesheets/reading-progress-bar.css" />
<link rel="stylesheet" href="./stylesheets/pure-css-banner.css" />
<link rel="stylesheet" href="./stylesheets/cards.css" />
<link rel="stylesheet" href="./stylesheets/pseudo-fixed.css" />
<link rel="stylesheet" href="./stylesheets/horizontal.css" />
<link rel="stylesheet" href="./stylesheets/parallax.css" />
<link rel="stylesheet" href="./stylesheets/complex-parallax.css" />
<link rel="stylesheet" href="./stylesheets/folding.css" />
<link rel="stylesheet" href="./stylesheets/property-trigger.css" />
<link rel="stylesheet" href="./stylesheets/filigree.css" />
<link rel="stylesheet" href="./stylesheets/scroll-snap-carousel.css" />
<link rel="stylesheet" href="./stylesheets/ben-day.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet" />
</head>
<body>
<main>
<section class="pure-css">
<div class="pure-css-scroll-text">↓ scroll ↑</div>
<div class="pure-css-inner">
<div class="this-is-wrapper">
<h1 class="this-is-headline">This is</h1>
</div>
<div class="pure-css-svg-wrapper">
<svg id="PureCssSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 521.924 77.345">
<path id="PureCssPath"
d="M265.527 47.413v8.838h33.643v3.515h-33.643v3.516h33.643v3.515h-33.643v3.516h33.643v3.516h-37.158V3.516h37.158v3.516h-33.643v3.515h33.643v3.516h-33.643v3.516h33.643v3.515h-33.643v8.741h31.69v3.515h-31.69v3.516h31.69v3.515h-31.69v3.516h31.69v3.516h-31.69Zm-81.201 10.4v-3.516h21.192q6.494 0 12.011-3.125 5.518-3.125 8.814-8.691 3.296-5.566 3.296-12.305a21.561 21.561 0 0 0-3.272-11.45 24.206 24.206 0 0 0-8.862-8.52 23.89 23.89 0 0 0-11.987-3.174h-44.239v66.797h-3.515V3.516h47.754a26.839 26.839 0 0 1 10.62 2.173 29.412 29.412 0 0 1 7.06 4.208 26.966 26.966 0 0 1 1.753 1.554q3.711 3.589 5.957 8.52a24.364 24.364 0 0 1 2.246 10.205 31.531 31.531 0 0 1-.961 7.944 25.531 25.531 0 0 1-2.945 6.973 25.625 25.625 0 0 1-10.498 9.693l7.373 19.043h-3.76l-6.982-17.627a33.624 33.624 0 0 1-1.238.384q-.637.186-1.353.371a58.595 58.595 0 0 1-.485.124l6.591 16.748h-3.759l-6.446-16.162a31.906 31.906 0 0 1-2.352.137 36.406 36.406 0 0 1-.821.009l6.201 16.016h-3.711l-6.153-16.016h-3.173l5.908 16.016h-3.711l-5.957-16.016h-10.596Zm-157.031.488v-3.515h14.893q6.591 0 12.231-3.125t9.009-8.692q3.369-5.566 3.369-12.304 0-6.202-3.345-11.67-3.345-5.469-9.033-8.716a24.269 24.269 0 0 0-12.232-3.247H3.516v66.797H0V3.516h42.188a27.399 27.399 0 0 1 10.766 2.197q5.2 2.198 9.009 5.884a28.15 28.15 0 0 1 6.079 8.692 24.851 24.851 0 0 1 2.27 10.376 30.809 30.809 0 0 1-.944 7.737 27.043 27.043 0 0 1-1.302 3.835 26.136 26.136 0 0 1-3.437 5.895 22.831 22.831 0 0 1-2.666 2.869q-3.858 3.492-8.96 5.396a30.678 30.678 0 0 1-10.815 1.904H27.295ZM145.41 42.676V3.516h3.516v39.16q0 7.032-2.832 13.452-2.832 6.421-7.617 11.06a35.861 35.861 0 0 1-10.145 6.858 41.237 41.237 0 0 1-1.232.539q-6.592 2.759-13.819 2.759-7.226 0-13.818-2.759a37.091 37.091 0 0 1-9.197-5.458 34.161 34.161 0 0 1-2.18-1.939 34.744 34.744 0 0 1-7.617-11.06 32.978 32.978 0 0 1-2.832-13.452V3.516h3.515v39.16q0 8.399 4.322 15.576a31.7 31.7 0 0 0 11.718 11.377 32.039 32.039 0 0 0 16.089 4.2 32.039 32.039 0 0 0 16.089-4.2 31.7 31.7 0 0 0 11.719-11.377 29.656 29.656 0 0 0 4.321-15.576Zm240.088-28.125-2.832 2.1q-4.932-6.104-12.085-9.619-7.153-3.516-15.308-3.516a34.403 34.403 0 0 0-13.647 2.783q-6.519 2.784-11.23 7.495a35.04 35.04 0 0 0-7.14 10.423 39.988 39.988 0 0 0-.356.808 34.403 34.403 0 0 0-2.783 13.647A34.403 34.403 0 0 0 322.9 52.32q2.784 6.518 7.496 11.23a35.04 35.04 0 0 0 10.422 7.14 39.988 39.988 0 0 0 .808.355 34.403 34.403 0 0 0 13.647 2.784 34.243 34.243 0 0 0 15.308-3.516 35.424 35.424 0 0 0 12.085-9.619l2.783 2.148a38.902 38.902 0 0 1-13.305 10.62q-7.886 3.882-16.871 3.882a37.613 37.613 0 0 1-15.014-3.076 39.571 39.571 0 0 1-10.642-6.667 37.127 37.127 0 0 1-1.687-1.585 38.767 38.767 0 0 1-7.86-11.443 44.226 44.226 0 0 1-.392-.886 37.613 37.613 0 0 1-3.076-15.015 37.613 37.613 0 0 1 3.076-15.014 39.571 39.571 0 0 1 6.667-10.642 37.127 37.127 0 0 1 1.585-1.687 38.767 38.767 0 0 1 11.442-7.86 44.226 44.226 0 0 1 .887-.392A37.613 37.613 0 0 1 355.273.001q8.985 0 16.895 3.881 7.91 3.882 13.33 10.669ZM184.326 50.782v-3.516h21.192a16.879 16.879 0 0 0 12.06-4.785 15.974 15.974 0 0 0 4.996-11.089 21.523 21.523 0 0 0 .033-1.216 14.675 14.675 0 0 0-3.925-10.016 20.066 20.066 0 0 0-1.202-1.239q-5.126-4.858-11.962-4.858h-37.207v59.766h-3.516V10.547h40.723a20.233 20.233 0 0 1 14.453 5.884q6.152 5.884 6.152 13.745a20.866 20.866 0 0 1-1.568 8.184 19.718 19.718 0 0 1-4.511 6.514 20.114 20.114 0 0 1-14.526 5.908h-21.192ZM424.463 33.35h-5.567a35.176 35.176 0 0 1-4.845-.304q-5.49-.768-7.777-3.476a7.275 7.275 0 0 1-1.635-4.862q0-3.746 4.063-6.212a14.658 14.658 0 0 1 .356-.209 15.566 15.566 0 0 1 3.467-1.406q3.369-.953 8.177-1.087a57.883 57.883 0 0 1 1.612-.022q6.202 0 11.524 1.44 5.041 1.365 8.418 3.847a18.375 18.375 0 0 1 .371.279l-2.783 2.149q-6.104-4.199-17.53-4.199a57.635 57.635 0 0 0-3.418.094q-3.591.214-5.932.913a11.716 11.716 0 0 0-1.392.506q-1.7.753-2.555 1.724a3.224 3.224 0 0 0-.863 2.183q0 2.622 2.124 3.814a5.424 5.424 0 0 0 .269.141 8.133 8.133 0 0 0 1.575.553q1.663.42 4.195.555a48.759 48.759 0 0 0 2.579.064h5.567a47.965 47.965 0 0 1 8.06.633q4.368.746 7.856 2.37a22.726 22.726 0 0 1 5.031 3.173 20.097 20.097 0 0 1 7.308 14.624 27.503 27.503 0 0 1 .065 1.905q0 4.736-2.099 8.886a21.729 21.729 0 0 1-5.019 6.446 25.543 25.543 0 0 1-1.012.854 24.652 24.652 0 0 1-4.474 2.82q-2.195 1.089-4.805 1.927a41.973 41.973 0 0 1-.755.234 42.786 42.786 0 0 1-7.73 1.528 54.652 54.652 0 0 1-5.844.303 55.011 55.011 0 0 1-13.183-1.541 49.363 49.363 0 0 1-4.444-1.316 42.479 42.479 0 0 1-7.838-3.612 33.934 33.934 0 0 1-5.834-4.371l2.832-2.1a31.445 31.445 0 0 0 7.198 4.824 40.644 40.644 0 0 0 5.253 2.134 49.708 49.708 0 0 0 13.241 2.4 57.465 57.465 0 0 0 2.775.066q9.308 0 15.793-2.775a24.244 24.244 0 0 0 4.91-2.791 20.732 20.732 0 0 0 4.424-4.348 15.746 15.746 0 0 0 3.096-9.568 19.479 19.479 0 0 0-1.063-6.573 16.542 16.542 0 0 0-5.383-7.441q-5.123-4.114-13.702-4.958a47.621 47.621 0 0 0-4.657-.218Zm68.31 0h-5.566a35.176 35.176 0 0 1-4.845-.304q-5.49-.768-7.778-3.476a7.275 7.275 0 0 1-1.635-4.862q0-3.746 4.063-6.212a14.658 14.658 0 0 1 .356-.209 15.566 15.566 0 0 1 3.468-1.406q3.369-.953 8.177-1.087a57.883 57.883 0 0 1 1.612-.022q6.201 0 11.523 1.44 5.042 1.365 8.419 3.847a18.375 18.375 0 0 1 .37.279l-2.783 2.149q-6.103-4.199-17.529-4.199a57.635 57.635 0 0 0-3.418.094q-3.591.214-5.932.913a11.716 11.716 0 0 0-1.392.506q-1.701.753-2.555 1.724a3.224 3.224 0 0 0-.863 2.183q0 2.622 2.123 3.814a5.424 5.424 0 0 0 .269.141 8.133 8.133 0 0 0 1.575.553q1.663.42 4.195.555a48.759 48.759 0 0 0 2.58.064h5.566a47.965 47.965 0 0 1 8.06.633q4.369.746 7.856 2.37a22.726 22.726 0 0 1 5.032 3.173 20.097 20.097 0 0 1 7.308 14.624 27.503 27.503 0 0 1 .065 1.905q0 4.736-2.1 8.886a21.729 21.729 0 0 1-5.018 6.446 25.543 25.543 0 0 1-1.012.854 24.652 24.652 0 0 1-4.474 2.82q-2.195 1.089-4.806 1.927a41.973 41.973 0 0 1-.754.234 42.786 42.786 0 0 1-7.73 1.528 54.652 54.652 0 0 1-5.845.303 55.011 55.011 0 0 1-13.182-1.541 49.363 49.363 0 0 1-4.444-1.316 42.479 42.479 0 0 1-7.839-3.612 33.934 33.934 0 0 1-5.833-4.371l2.832-2.1a31.445 31.445 0 0 0 7.198 4.824 40.644 40.644 0 0 0 5.253 2.134 49.708 49.708 0 0 0 13.241 2.4 57.465 57.465 0 0 0 2.774.066q9.309 0 15.794-2.775a24.244 24.244 0 0 0 4.91-2.791 20.732 20.732 0 0 0 4.424-4.348 15.746 15.746 0 0 0 3.095-9.568 19.479 19.479 0 0 0-1.062-6.573 16.542 16.542 0 0 0-5.383-7.441q-5.124-4.114-13.703-4.958a47.621 47.621 0 0 0-4.657-.218Zm-68.31 14.063h-5.567a47.965 47.965 0 0 1-8.059-.634q-4.369-.746-7.856-2.37a22.726 22.726 0 0 1-5.032-3.173 20.097 20.097 0 0 1-7.308-14.624 27.503 27.503 0 0 1-.065-1.904q0-4.737 2.1-8.887a21.729 21.729 0 0 1 5.018-6.446 25.543 25.543 0 0 1 1.012-.854 24.652 24.652 0 0 1 4.474-2.82q2.195-1.089 4.806-1.926a41.973 41.973 0 0 1 .754-.234 42.786 42.786 0 0 1 7.73-1.529 54.652 54.652 0 0 1 5.844-.302 55.011 55.011 0 0 1 13.183 1.54 49.363 49.363 0 0 1 4.444 1.316 42.479 42.479 0 0 1 7.839 3.612 33.934 33.934 0 0 1 5.833 4.371l-2.832 2.1a31.445 31.445 0 0 0-7.198-4.824 40.644 40.644 0 0 0-5.253-2.134 49.708 49.708 0 0 0-13.241-2.399 57.465 57.465 0 0 0-2.775-.067q-9.308 0-15.793 2.775a24.244 24.244 0 0 0-4.91 2.792 20.732 20.732 0 0 0-4.424 4.347 15.746 15.746 0 0 0-3.095 9.569 19.479 19.479 0 0 0 1.062 6.572 16.542 16.542 0 0 0 5.383 7.441q5.124 4.115 13.703 4.958a47.621 47.621 0 0 0 4.656.218h5.372a36.139 36.139 0 0 1 4.911.304q5.457.753 7.793 3.372a7.183 7.183 0 0 1 1.749 4.967q0 3.745-4.064 6.211a14.658 14.658 0 0 1-.355.209 15.566 15.566 0 0 1-3.468 1.406q-3.369.953-8.177 1.087a57.883 57.883 0 0 1-1.612.022q-6.201 0-11.524-1.44-5.041-1.365-8.418-3.846a18.375 18.375 0 0 1-.371-.28l2.784-2.149q6.103 4.2 17.529 4.2a57.635 57.635 0 0 0 3.418-.095q3.591-.214 5.932-.913a11.716 11.716 0 0 0 1.392-.506q1.701-.753 2.555-1.724a3.224 3.224 0 0 0 .863-2.182q0-2.622-2.123-3.814a5.424 5.424 0 0 0-.27-.141 8.133 8.133 0 0 0-1.574-.554q-1.663-.42-4.195-.555a48.759 48.759 0 0 0-2.58-.063Zm68.31 0h-5.566a47.965 47.965 0 0 1-8.06-.634q-4.369-.746-7.856-2.37a22.726 22.726 0 0 1-5.031-3.173 20.097 20.097 0 0 1-7.308-14.624 27.503 27.503 0 0 1-.065-1.904q0-4.737 2.099-8.887a21.729 21.729 0 0 1 5.019-6.446 25.543 25.543 0 0 1 1.012-.854 24.652 24.652 0 0 1 4.473-2.82q2.195-1.089 4.806-1.926a41.973 41.973 0 0 1 .755-.234 42.786 42.786 0 0 1 7.73-1.529 54.652 54.652 0 0 1 5.844-.302 55.011 55.011 0 0 1 13.183 1.54 49.363 49.363 0 0 1 4.444 1.316 42.479 42.479 0 0 1 7.838 3.612 33.934 33.934 0 0 1 5.834 4.371l-2.832 2.1a31.445 31.445 0 0 0-7.199-4.824 40.644 40.644 0 0 0-5.252-2.134A49.708 49.708 0 0 0 493.4 5.292a57.465 57.465 0 0 0-2.775-.067q-9.308 0-15.793 2.775a24.244 24.244 0 0 0-4.91 2.792 20.732 20.732 0 0 0-4.424 4.347 15.746 15.746 0 0 0-3.096 9.569 19.479 19.479 0 0 0 1.063 6.572 16.542 16.542 0 0 0 5.383 7.441q5.123 4.115 13.702 4.958a47.621 47.621 0 0 0 4.657.218h5.371a36.139 36.139 0 0 1 4.912.304q5.457.753 7.793 3.372a7.183 7.183 0 0 1 1.748 4.967q0 3.745-4.063 6.211a14.658 14.658 0 0 1-.356.209 15.566 15.566 0 0 1-3.467 1.406q-3.369.953-8.177 1.087a57.883 57.883 0 0 1-1.613.022q-6.201 0-11.523-1.44-5.042-1.365-8.418-3.846a18.375 18.375 0 0 1-.371-.28l2.783-2.149q6.104 4.2 17.529 4.2a57.635 57.635 0 0 0 3.418-.095q3.592-.214 5.933-.913a11.716 11.716 0 0 0 1.392-.506q1.7-.753 2.555-1.724a3.224 3.224 0 0 0 .863-2.182q0-2.622-2.124-3.814a5.424 5.424 0 0 0-.269-.141 8.133 8.133 0 0 0-1.575-.554q-1.663-.42-4.195-.555a48.759 48.759 0 0 0-2.58-.063Zm-68.31-7.032h-5.567a40.518 40.518 0 0 1-5.946-.407q-3.016-.449-5.472-1.391a17.617 17.617 0 0 1-4.353-2.376 13.347 13.347 0 0 1-5.431-9.718 17.99 17.99 0 0 1-.087-1.781 12.772 12.772 0 0 1 4.206-9.532 19.536 19.536 0 0 1 2.289-1.87 22.328 22.328 0 0 1 6.409-3.039q5.029-1.526 11.803-1.526a50.145 50.145 0 0 1 10.246 1.015 43.765 43.765 0 0 1 4.33 1.133 36.331 36.331 0 0 1 6.018 2.494 27.7 27.7 0 0 1 5.237 3.561l-2.735 2.197a25.094 25.094 0 0 0-5.113-3.198 34.27 34.27 0 0 0-4.945-1.88q-6.055-1.807-13.038-1.807-6.497 0-11.062 1.398a18.671 18.671 0 0 0-4.685 2.118 14.461 14.461 0 0 0-2.871 2.383 9.435 9.435 0 0 0-2.573 6.553 12.211 12.211 0 0 0 .628 4.013 10.033 10.033 0 0 0 3.84 4.995q4.468 3.15 13.305 3.15h5.372q6.825 0 11.558 1.798a17.657 17.657 0 0 1 4.384 2.377q5.542 4.174 5.542 11.499a12.772 12.772 0 0 1-4.205 9.531 19.536 19.536 0 0 1-2.289 1.87 22.328 22.328 0 0 1-6.409 3.039q-5.029 1.526-11.804 1.526a50.145 50.145 0 0 1-10.246-1.015 43.765 43.765 0 0 1-4.329-1.133 36.331 36.331 0 0 1-6.019-2.494 27.7 27.7 0 0 1-5.236-3.561l2.734-2.197a25.094 25.094 0 0 0 5.113 3.198 34.27 34.27 0 0 0 4.946 1.88q6.055 1.807 13.037 1.807 6.497 0 11.062-1.398a18.671 18.671 0 0 0 4.685-2.118 14.461 14.461 0 0 0 2.871-2.383 9.435 9.435 0 0 0 2.573-6.552 12.211 12.211 0 0 0-.628-4.014 10.033 10.033 0 0 0-3.839-4.995q-4.468-3.15-13.306-3.15Zm68.31 0h-5.566a40.518 40.518 0 0 1-5.946-.407q-3.016-.449-5.472-1.391a17.617 17.617 0 0 1-4.353-2.376 13.347 13.347 0 0 1-5.432-9.718 17.99 17.99 0 0 1-.086-1.781 12.772 12.772 0 0 1 4.205-9.532 19.536 19.536 0 0 1 2.289-1.87 22.328 22.328 0 0 1 6.409-3.039q5.029-1.526 11.804-1.526a50.145 50.145 0 0 1 10.246 1.015 43.765 43.765 0 0 1 4.329 1.133 36.331 36.331 0 0 1 6.019 2.494 27.7 27.7 0 0 1 5.236 3.561l-2.734 2.197a25.094 25.094 0 0 0-5.113-3.198 34.27 34.27 0 0 0-4.946-1.88q-6.055-1.807-13.037-1.807-6.497 0-11.062 1.398a18.671 18.671 0 0 0-4.685 2.118 14.461 14.461 0 0 0-2.871 2.383 9.435 9.435 0 0 0-2.573 6.553 12.211 12.211 0 0 0 .628 4.013 10.033 10.033 0 0 0 3.839 4.995q4.468 3.15 13.306 3.15h5.371q6.825 0 11.558 1.798a17.657 17.657 0 0 1 4.385 2.377q5.542 4.174 5.542 11.499a12.772 12.772 0 0 1-4.206 9.531 19.536 19.536 0 0 1-2.289 1.87 22.328 22.328 0 0 1-6.409 3.039q-5.029 1.526-11.804 1.526a50.145 50.145 0 0 1-10.246-1.015 43.765 43.765 0 0 1-4.329-1.133 36.331 36.331 0 0 1-6.018-2.494 27.7 27.7 0 0 1-5.237-3.561l2.735-2.197a25.094 25.094 0 0 0 5.113 3.198 34.27 34.27 0 0 0 4.945 1.88q6.055 1.807 13.037 1.807 6.498 0 11.063-1.398a18.671 18.671 0 0 0 4.685-2.118 14.461 14.461 0 0 0 2.871-2.383 9.435 9.435 0 0 0 2.573-6.552 12.211 12.211 0 0 0-.628-4.014 10.033 10.033 0 0 0-3.84-4.995q-4.468-3.15-13.306-3.15ZM27.295 51.27v-3.516h14.893q7.226 0 12.402-4.785a15.857 15.857 0 0 0 5.162-11.548 21.261 21.261 0 0 0 .014-.756 15.134 15.134 0 0 0-4.038-10.321 20.65 20.65 0 0 0-1.236-1.276 17.313 17.313 0 0 0-12.304-5.005H10.547v59.766H7.031V10.547h35.157a20.7 20.7 0 0 1 14.794 6.031q6.299 6.03 6.299 14.087a20.34 20.34 0 0 1-1.731 8.468 19.788 19.788 0 0 1-4.494 6.229 20.848 20.848 0 0 1-14.869 5.908H27.295Zm111.084-8.594V3.516h3.516v39.16a26.245 26.245 0 0 1-3.858 13.843 28.121 28.121 0 0 1-10.449 10.083 28.678 28.678 0 0 1-14.307 3.711 28.678 28.678 0 0 1-14.306-3.711 28.121 28.121 0 0 1-10.45-10.083 26.245 26.245 0 0 1-3.857-13.843V3.516h3.516v39.16q0 6.494 3.369 12.061a24.542 24.542 0 0 0 9.155 8.813q5.786 3.247 12.573 3.247a25.264 25.264 0 0 0 12.573-3.247 24.542 24.542 0 0 0 9.156-8.813q3.369-5.567 3.369-12.061Zm241.65-23.73-2.734 2.197q-3.955-4.932-9.717-7.764-5.762-2.832-12.305-2.832a27.493 27.493 0 0 0-10.913 2.222 28.407 28.407 0 0 0-8.384 5.424 27.147 27.147 0 0 0-.6.582 28.161 28.161 0 0 0-5.866 8.661 31.911 31.911 0 0 0-.14.323 27.493 27.493 0 0 0-2.222 10.913 27.493 27.493 0 0 0 2.222 10.913 28.407 28.407 0 0 0 5.424 8.385 27.147 27.147 0 0 0 .582.6 28.161 28.161 0 0 0 8.661 5.865 31.911 31.911 0 0 0 .323.141 27.493 27.493 0 0 0 10.913 2.221q6.543 0 12.305-2.832t9.717-7.763l2.637 2.295a31.63 31.63 0 0 1-10.889 8.667 30.951 30.951 0 0 1-13.77 3.149 30.878 30.878 0 0 1-12.304-2.515 32.416 32.416 0 0 1-8.433-5.207 30.17 30.17 0 0 1-1.65-1.531 31.566 31.566 0 0 1-6.335-9.177 36.155 36.155 0 0 1-.404-.906 30.878 30.878 0 0 1-2.514-12.305 30.878 30.878 0 0 1 2.514-12.304 32.416 32.416 0 0 1 5.207-8.433 30.17 30.17 0 0 1 1.532-1.65 31.566 31.566 0 0 1 9.177-6.335 36.155 36.155 0 0 1 .906-.404 30.878 30.878 0 0 1 12.304-2.514 31.013 31.013 0 0 1 13.843 3.174 31.578 31.578 0 0 1 10.913 8.74ZM184.326 43.751v-3.516h21.192a11.083 11.083 0 0 0 3.937-.68 10.022 10.022 0 0 0 3.191-1.957 8.603 8.603 0 0 0 2.672-4.77 12.913 12.913 0 0 0 .258-2.652 7.786 7.786 0 0 0-1.716-4.861 11.274 11.274 0 0 0-1.336-1.438 10.097 10.097 0 0 0-7.006-2.783h-30.176v52.735h-3.516v-56.25h33.692q5.42 0 9.497 3.808a13.856 13.856 0 0 1 2.62 3.255 11 11 0 0 1 1.457 5.534 15.724 15.724 0 0 1-.58 4.38 11.914 11.914 0 0 1-3.375 5.508q-3.955 3.687-9.619 3.687h-21.192Zm-52.978-1.075V3.516h3.515v39.16a19.291 19.291 0 0 1-5.909 14.148 24.329 24.329 0 0 1-.438.427q-6.348 6.031-15.235 6.031-8.886 0-15.234-6.031a20.3 20.3 0 0 1-4.906-7.001 19.695 19.695 0 0 1-1.442-7.574V3.516h3.516v39.16a15.945 15.945 0 0 0 4.892 11.691 20.247 20.247 0 0 0 .406.394 17.928 17.928 0 0 0 12.768 5.005 17.952 17.952 0 0 0 12.744-5.005 16.961 16.961 0 0 0 3.992-5.523 16.097 16.097 0 0 0 1.331-6.562ZM27.295 44.239v-3.516h14.893a12.161 12.161 0 0 0 4.006-.639 10.632 10.632 0 0 0 3.464-1.998 8.589 8.589 0 0 0 2.884-5.163 12.672 12.672 0 0 0 .192-2.258 8.211 8.211 0 0 0-1.85-5.176 11.912 11.912 0 0 0-1.372-1.465 11.397 11.397 0 0 0-3.5-2.22 10.361 10.361 0 0 0-3.825-.71H17.578v52.735h-3.515v-56.25h28.125a13.945 13.945 0 0 1 9.838 3.955 14.365 14.365 0 0 1 2.725 3.397 11.453 11.453 0 0 1 1.499 5.734 15.142 15.142 0 0 1-.626 4.461 11.849 11.849 0 0 1-3.476 5.426 14.283 14.283 0 0 1-9.505 3.681 18.305 18.305 0 0 1-.455.006H27.295Zm97.021-1.563V3.516h3.516v39.16a12.573 12.573 0 0 1-3.881 9.192 16.478 16.478 0 0 1-.391.379 14.498 14.498 0 0 1-10.279 4.004 14.498 14.498 0 0 1-10.278-4.004 13.788 13.788 0 0 1-3.067-4.097 12.499 12.499 0 0 1-1.206-5.474V3.516h3.516v39.16a9.186 9.186 0 0 0 2.902 6.778 12.19 12.19 0 0 0 .345.327 11.172 11.172 0 0 0 7.788 2.954q4.541 0 7.788-2.954a10.219 10.219 0 0 0 2.269-2.909 9.098 9.098 0 0 0 .978-4.196ZM374.512 23.34l-2.783 2.149a20.556 20.556 0 0 0-7.251-5.811q-4.322-2.099-9.205-2.099a20.259 20.259 0 0 0-14.723 6.009 24.575 24.575 0 0 0-.194.192q-6.176 6.201-6.176 14.892a20.321 20.321 0 0 0 5.985 14.699 24.812 24.812 0 0 0 .191.194 20.261 20.261 0 0 0 14.645 6.2 24.469 24.469 0 0 0 .272.001q4.883 0 9.229-2.124a20.741 20.741 0 0 0 7.275-5.835l2.686 2.246q-3.418 4.297-8.447 6.763a24.079 24.079 0 0 1-10.743 2.466 24.13 24.13 0 0 1-12.353-3.296q-5.664-3.296-8.96-8.96a24.13 24.13 0 0 1-3.296-12.354 24.13 24.13 0 0 1 3.296-12.353q3.296-5.664 8.96-8.96a24.13 24.13 0 0 1 12.353-3.296 24.233 24.233 0 0 1 10.767 2.466q5.054 2.466 8.472 6.811Zm-192.139 4.786v45.703h-3.516V24.61h26.661a7.584 7.584 0 0 1 2.454.384 6.569 6.569 0 0 1 2.184 1.252 5.841 5.841 0 0 1 1.224 1.423 4.79 4.79 0 0 1 .681 2.507 9.419 9.419 0 0 1-.325 2.59q-.831 2.903-3.795 3.674a9.64 9.64 0 0 1-2.423.279h-21.192v-3.515h21.192q2.402 0 2.898-1.907a4.46 4.46 0 0 0 .129-1.121 1.479 1.479 0 0 0-.369-.97q-.208-.25-.534-.47-.904-.61-2.124-.61h-23.145Zm-157.764 0v45.703h-3.515V24.61h21.094a7.761 7.761 0 0 1 2.948.548 7.265 7.265 0 0 1 2.008 1.234 6.389 6.389 0 0 1 1.324 1.533 5.194 5.194 0 0 1 .751 2.74 8.71 8.71 0 0 1-.374 2.668q-.911 2.83-4.043 3.593a11.081 11.081 0 0 1-2.614.282H27.295v-3.516h14.893a5.939 5.939 0 0 0 1.325-.134q1.83-.421 2.131-2.158a4.308 4.308 0 0 0 .059-.735 2.026 2.026 0 0 0-.638-1.483 3.114 3.114 0 0 0-.387-.324 3.895 3.895 0 0 0-1.691-.673 5.188 5.188 0 0 0-.8-.059H24.609Zm344.434-.391-2.832 2.148q-4.248-5.273-10.938-5.273-5.81 0-9.936 4.126a13.529 13.529 0 0 0-4.125 9.755 16.258 16.258 0 0 0-.001.181q0 5.811 4.126 9.937a13.529 13.529 0 0 0 9.755 4.125 16.258 16.258 0 0 0 .181.001 13.61 13.61 0 0 0 6.128-1.416q2.857-1.416 4.859-3.906l2.734 2.295q-2.441 3.076-6.055 4.809-3.613 1.734-7.666 1.734a16.914 16.914 0 0 1-12.265-4.992 20.495 20.495 0 0 1-.161-.16q-5.152-5.151-5.152-12.427a16.914 16.914 0 0 1 4.992-12.265 20.495 20.495 0 0 1 .16-.161q5.151-5.152 12.426-5.152 4.102 0 7.715 1.782 3.614 1.783 6.055 4.859ZM258.496 3.516v70.313h-3.516V3.516h3.516Zm-7.031 0v70.313h-3.516V3.516h3.516Zm-7.031 0v70.313h-3.516V3.516h3.516Z"
vector-effect="non-scaling-stroke" />
</svg>
</div>
</div>
</section>
<div class="hero-image" id="reading-progress-bar">
<header>
<h1>A Pure CSS Scroll-Based Reading Progress Bar</h1>
<div class="meta">
<address class="author">
By <a rel="author" href="/author/john-doe">John Doe</a>
</address>
on
<time pubdate datetime="2011-08-28" title="August 28th, 2011">8/28/11</time>
</div>
</header>
</div>
<article class="content">
<div class="progress animation"></div>
<div class="content-inner">
<h2>History</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup
language such as HTML or XML (including XML dialects such as SVG,
MathML or XHTML).[1] CSS is a cornerstone technology of the World
Wide Web, alongside HTML and JavaScript.[2]
</p>
<p>
CSS is designed to enable the separation of content and
presentation, including layout, colors, and fonts.[3] This
separation can improve content accessibility; provide more
flexibility and control in the specification of presentation
characteristics; enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file, which reduces
complexity and repetition in the structural content; and enable the
.css file to be cached to improve the page load speed between the
pages that share the file and its formatting.
</p>
<p>
Separation of formatting and content also makes it feasible to
present the same markup page in different styles for different
rendering methods, such as on-screen, in print, by voice (via
speech-based browser or screen reader), and on Braille-based tactile
devices. CSS also has rules for alternate formatting if the content
is accessed on a mobile device.[4]
</p>
<p>
The name cascading comes from the specified priority scheme to
determine which style rule applies if more than one rule matches a
particular element. This cascading priority scheme is predictable.
</p>
<p>
The CSS specifications are maintained by the World Wide Web
Consortium (W3C). Internet media type (MIME type) text/css is
registered for use with CSS by RFC 2318 (March 1998). The W3C
operates a free CSS validation service for CSS documents.[5]
</p>
<p>
In addition to HTML, other markup languages support the use of CSS
including XHTML, plain XML, SVG, and XUL. CSS is also used in the
GTK widget toolkit.
</p>
<h2>Use</h2>
<p>
Before CSS, nearly all presentational attributes of HTML documents
were contained within the HTML markup. All font colors, background
styles, element alignments, borders, and sizes had to be explicitly
described, often repeatedly, within the HTML. CSS lets authors move
much of that information to another file, the style sheet, resulting
in considerably simpler HTML.
</p>
<p>
For example, headings (h1 elements), sub-headings (h2),
sub-sub-headings (h3), etc., are defined structurally using HTML. In
print and on the screen, choice of font, size, color and emphasis
for these elements is presentational.
</p>
<p>
Before CSS, document authors who wanted to assign such typographic
characteristics to, say, all h2 headings had to repeat HTML
presentational markup for each occurrence of that heading type. This
made documents more complex, larger, and more error-prone and
difficult to maintain. CSS allows the separation of presentation
from structure. CSS can define color, font, text alignment, size,
borders, spacing, layout and many other typographic characteristics,
and can do so independently for on-screen and printed views. CSS
also defines non-visual styles, such as reading speed and emphasis
for aural text readers. The W3C has now deprecated the use of all
presentational HTML markup.[16]
</p>
<p></p>
</div>
</article>
<section class="fixed-section" id="fixed-positioning">
<div class="fixed-subject">
<div class="subtitle">A Different Kind of</div>
Fixed Positioning
<p>
By varying how much the element translates vertically with the
scroll position.
</p>
</div>
</section>
<section class="horizontal" id="horizontal-scrolling">
<div class="horizontal-timeline">
<div class="horizontal-content">
<span>←</span><span>→</span><span>←</span><span>→</span><span>←</span><span>→</span>
<span>←</span><span>→</span><span>←</span><span>→</span><span>←</span><span>→</span>
<!-- <span>←</span><span>→</span><span>←</span><span>→</span><span>←</span><span>→</span>
<span>←</span><span>→</span><span>←</span><span>→</span><span>←</span><span>→</span> -->
</div>
</div>
</section>
<section class="cards" id="cards">
<div class="card">
<div class="card-inner">
<div class="image" style="background-color: hsl(186 50% 80% / 1)">
<img src="./images/13.png" />
</div>
<div class="content">
<a class="header">Ingrid H.</a>
<div class="meta">
<span class="date">Joined in 2019</span>
</div>
<div class="description">
Meet Ingrid, a product manager with a wanderlust for travel.
When not innovating UX, she explores landscapes and immerses in
vibrant cultures worldwide.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
<span class="friend-count"></span>
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="image" style="background-color: hsl(77 72% 80% / 1)">
<img src="./images/8.png" />
</div>
<div class="content">
<a class="header">Sarah D.</a>
<div class="meta">
<span class="date">Joined in 2013</span>
</div>
<div class="description">
Sarah is a talented website designer who finds inspiration in
nature. She crafts stunning websites for her clients,
incorporating elements inspired by the natural world.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
<span class="friend-count"></span>
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="image" style="background-color: hsl(15 83% 80% / 1)">
<img src="./images/2.png" />
</div>
<div class="content">
<a class="header">Marek G.</a>
<div class="meta">
<span class="date">Joined in 2021</span>
</div>
<div class="description">
Marek is a talented coder who embraces programming challenges
and conquers long-distance runs with focus and endurance.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
<span class="friend-count"></span>
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="image" style="background-color: hsl(358.97deg 79.09% 80%)">
<img src="./images/12.png" />
</div>
<div class="content">
<a class="header">Naija K.</a>
<div class="meta">
<span class="date">Joined in 2018</span>
</div>
<div class="description">
Naija, skilled UX designer merges gaming passion with expertise,
creating engaging interfaces and pushing boundaries to enhance
gaming through understanding player behavior.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
<span class="friend-count"></span>
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="image" style="background-color: hsl(186 66% 80% / 1)">
<img src="./images/1.png" />
</div>
<div class="content">
<a class="header">Josh Q.</a>
<div class="meta">
<span class="date">Joined in 2017</span>
</div>
<div class="description">
Josh is a web developer who loves coding and cooking. His
culinary creations are as beautiful as his websites. Josh's
creativity has no limits in both coding and cooking.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
<span class="friend-count"></span>
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="image" style="background-color: hsl(332.31deg 20.63% 80%)">
<img src="./images/14.png" />
</div>
<div class="content">
<a class="header">René S.</a>
<div class="meta">
<span class="date">Joined in 2017</span>
</div>
<div class="description">
Meet René, a passionate QA engineer who excels at software
testing and skiing. René's expertise lies in ensuring excellence
in code and conquering mountains, both digitally and in person.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
<span class="friend-count"></span>
</a>
</div>
</div>
</div>
</section>
<section class="scroll-snap-carousel" id="carousel">
<div class="carousel">
<div class="swipe">
<span>← Scroll →</span>
<div class="icon"></div>
</div>
<div class="carousel-scroll-container">
<div class="slide">
<img
src="https://images.unsplash.com/photo-1506106487742-2baf007edcfb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1503924087716-07cbd5f49b21?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1508165821229-7be282c31b6e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1587944923679-cf2f4c871c5b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1490780960365-b5e36e1d824c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1470217957101-da7150b9b681?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1446491429004-809880bd132e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1458668383970-8ddd3927deed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1501822810445-bba370e517ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1540390769625-2fc3f8b1d50c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1443632864897-14973fa006cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1473283147055-e39c51463929?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
<div class="slide">
<img
src="https://images.unsplash.com/photo-1518510434791-8ecb34c419da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=60" />
</div>
</div>
</div>
</section>
<section class="parallax-section" id="parallax-simple">
<h2>Simple parallax</h2>
<div class="parallax-subject">
<img
src="https://images.unsplash.com/photo-1509978778156-518eea30166b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2515&q=80" />
</div>
</section>
<section class="complex-parallax-section" id="parallax-complex>
<svg
xmlns=" http://www.w3.org/2000/svg" width="125" height="102" class="subject distance-1">
<g xmlns="http://www.w3.org/2000/svg" fill="#FFF" fill-rule="evenodd">
<path
d="m26.155 54 39.497-39.981a14.04 14.04 0 0 1 10.06-4.21c3.803 0 7.374 1.492 10.055 4.208l3.077 3.115L95 10.901l-3.077-3.115C87.6 3.41 81.843 1 75.709 1c-6.13.001-11.888 2.411-16.211 6.789L20 47.769 26.155 54Z" />
<path
d="m79 27.3-6.185-6.223L33.132 61c-5.573 5.606-14.64 5.608-20.211.003-5.573-5.606-5.573-14.729 0-20.335L47.163 6.221 40.978 0 6.737 34.446c-8.983 9.037-8.983 23.742 0 32.777C11.081 71.593 16.864 74 23.024 74c6.161 0 11.948-2.41 16.292-6.779L79 27.3Zm39.262 7.476C113.92 30.406 108.136 28 101.973 28c-6.161.001-11.948 2.408-16.291 6.779L46 74.7l6.182 6.222L91.867 41c5.574-5.606 14.64-5.605 20.211-.002 2.695 2.711 4.179 6.32 4.179 10.166 0 3.847-1.484 7.457-4.179 10.168L77.837 95.78l6.185 6.22 34.24-34.446c8.984-9.036 8.984-23.741 0-32.778" />
<path
d="M98.846 48 59.349 87.981c-5.548 5.613-14.571 5.616-20.116.002l-3.077-3.115L30 91.099l3.077 3.115C37.4 98.59 43.157 101 49.292 101c6.13-.001 11.887-2.411 16.211-6.789L105 54.231 98.846 48Z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="102" class="subject distance-2">
<g xmlns="http://www.w3.org/2000/svg" fill="#FFF" fill-rule="evenodd">
<path
d="m26.155 54 39.497-39.981a14.04 14.04 0 0 1 10.06-4.21c3.803 0 7.374 1.492 10.055 4.208l3.077 3.115L95 10.901l-3.077-3.115C87.6 3.41 81.843 1 75.709 1c-6.13.001-11.888 2.411-16.211 6.789L20 47.769 26.155 54Z" />
<path
d="m79 27.3-6.185-6.223L33.132 61c-5.573 5.606-14.64 5.608-20.211.003-5.573-5.606-5.573-14.729 0-20.335L47.163 6.221 40.978 0 6.737 34.446c-8.983 9.037-8.983 23.742 0 32.777C11.081 71.593 16.864 74 23.024 74c6.161 0 11.948-2.41 16.292-6.779L79 27.3Zm39.262 7.476C113.92 30.406 108.136 28 101.973 28c-6.161.001-11.948 2.408-16.291 6.779L46 74.7l6.182 6.222L91.867 41c5.574-5.606 14.64-5.605 20.211-.002 2.695 2.711 4.179 6.32 4.179 10.166 0 3.847-1.484 7.457-4.179 10.168L77.837 95.78l6.185 6.22 34.24-34.446c8.984-9.036 8.984-23.741 0-32.778" />
<path
d="M98.846 48 59.349 87.981c-5.548 5.613-14.571 5.616-20.116.002l-3.077-3.115L30 91.099l3.077 3.115C37.4 98.59 43.157 101 49.292 101c6.13-.001 11.887-2.411 16.211-6.789L105 54.231 98.846 48Z" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="102" class="subject distance-3">
<g xmlns="http://www.w3.org/2000/svg" fill="#FFF" fill-rule="evenodd">
<path
d="m26.155 54 39.497-39.981a14.04 14.04 0 0 1 10.06-4.21c3.803 0 7.374 1.492 10.055 4.208l3.077 3.115L95 10.901l-3.077-3.115C87.6 3.41 81.843 1 75.709 1c-6.13.001-11.888 2.411-16.211 6.789L20 47.769 26.155 54Z" />
<path
d="m79 27.3-6.185-6.223L33.132 61c-5.573 5.606-14.64 5.608-20.211.003-5.573-5.606-5.573-14.729 0-20.335L47.163 6.221 40.978 0 6.737 34.446c-8.983 9.037-8.983 23.742 0 32.777C11.081 71.593 16.864 74 23.024 74c6.161 0 11.948-2.41 16.292-6.779L79 27.3Zm39.262 7.476C113.92 30.406 108.136 28 101.973 28c-6.161.001-11.948 2.408-16.291 6.779L46 74.7l6.182 6.222L91.867 41c5.574-5.606 14.64-5.605 20.211-.002 2.695 2.711 4.179 6.32 4.179 10.166 0 3.847-1.484 7.457-4.179 10.168L77.837 95.78l6.185 6.22 34.24-34.446c8.984-9.036 8.984-23.741 0-32.778" />
<path
d="M98.846 48 59.349 87.981c-5.548 5.613-14.571 5.616-20.116.002l-3.077-3.115L30 91.099l3.077 3.115C37.4 98.59 43.157 101 49.292 101c6.13-.001 11.887-2.411 16.211-6.789L105 54.231 98.846 48Z" />
</g>
</svg>
</section>
<section class="folding-section" id="folding">
<div class="fold fold-right"></div>
<div class="fold fold-left"></div>
</section>
<section class="trigger-section">
<div class="trigger-subject">
I'm <span>not </span> triggered
</div>
</section>
<section class="ben-day-section">
</section>
<section class="filigree-section" id="filigree">
<svg id="FiligreeSVG" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd"
clip-rule="evenodd" style="
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
image-rendering: optimizeQuality;
" viewBox="0 0 60000 75000">
<path
d="M763.53 29556.04c-220.05 0-398.44-178.39-398.44-398.44s178.39-398.44 398.44-398.44l14719.83 11.56c750.58.59 1208.75 388.98 1601.18 721.65 253.59 214.97 458.01 388.26 671.51 209.5 122.09-102.22 262.06-269.9 400.01-435.17 297.85-356.81 588.66-705.2 970.25-740.38 527.17-48.6 921.82 447.8 1285.85 905.72 76.19 95.85 150.94 189.87 185.6 231.02 121.58 144.33 50.15 263.06 89.2 230.16 26.2-22.07 75.5-84.03 131.07-153.88 194.79-244.84 442.98-556.74 942.99-716 412.23-131.28 973.69-11.98 1588.13 275.29 221.76 103.67 453.79 229.99 690.26 374.33 553.97-546.16 1078.26-1097.15 1470.64-1693.92 38.81-59.03 72.19-108.31 104.83-155.75-461.41-595.43-807.57-1242.53-929.98-1968.49-111.04-658.51 128.41-1108.94 497.7-1352.19 204.22-134.53 447.46-201.59 692.02-202.29 241.92-.69 486.85 63.73 697.5 192.11 399.56 243.5 676.26 706.81 580.78 1378.29-96.11 675.94-557.39 1407.44-913.29 1927.7 517.5 602.57 1154.21 1160.3 1767.2 1697.17 55.07 48.23 109.95 96.3 164.56 144.24 560.65-549.95 1094.84-1102.1 1493.09-1694.16-368.46-534.36-876.08-1317.03-980.86-2053.86-9.46-66.53-14.4-136.88-15.09-210.33-3.79-396.12 141.64-751.62 375.13-1020.3 235.65-271.18 561.5-455.22 915.63-505.58 56.76-8.07 118.74-12.54 185.78-13.18h6.26c67.04.64 129.02 5.11 185.78 13.18 354.14 50.34 679.98 234.41 915.63 505.58 233.5 268.7 378.9 624.16 375.13 1020.3-.69 73.46-5.64 143.79-15.09 210.33-104.78 736.83-612.4 1519.5-980.86 2053.86 400.03 594.7 937.2 1149.12 1500.58 1701.51 57.37-50.37 115.05-100.89 172.94-151.59 612.99-536.87 1249.7-1094.6 1767.2-1697.17-355.9-520.26-817.18-1251.76-913.29-1927.7-95.48-671.49 181.21-1134.78 580.78-1378.3 210.65-128.38 455.57-192.79 697.5-192.1 244.56.7 487.8 67.76 692.02 202.29 369.29 243.26 608.73 693.71 497.7 1352.19-122.41 725.96-468.57 1373.06-929.98 1968.49 32.64 47.44 66.02 96.72 104.83 155.75 390.94 594.59 912.84 1143.73 1464.57 1687.93 233.09-141.85 461.77-266.1 680.46-368.34 614.44-287.27 1175.9-406.57 1588.13-275.29 500.01 159.24 748.2 471.16 942.99 716 55.58 69.85 104.9 131.83 131.07 153.88 39.05 32.9-32.38-85.83 89.2-230.16 34.66-41.15 109.41-135.17 185.6-231.02 364.03-457.92 758.68-954.32 1285.85-905.72 381.58 35.18 672.41 383.58 970.26 740.4 137.95 165.26 277.92 332.93 400 435.15 215.31 180.27 427.15 1.71 688.52-218.61 398.74-336.1 862.67-727.17 1610.61-727.76l14397.03-11.31c220.05 0 398.44 178.39 398.44 398.44s-178.39 398.44-398.44 398.44l-14397.03 11.31c-457.6.36-802.07 290.72-1098.11 540.26-544.51 459-985.82 831.01-1713.52 221.73-176.96-148.17-339.65-343.06-500-535.15-191.96-229.97-379.41-454.51-429.64-459.14-97.79-9.01-353.3 312.38-588.97 608.84-55.41 69.7-109.92 138.26-201.22 246.64-536.55 636.9-862.02 621.11-1211.08 327.04-95.92-80.81-165.32-168.04-243.57-266.38-129.15-162.32-293.7-369.13-558.61-453.5-206.83-65.87-569.91 32.03-1010.01 237.79-137.91 64.47-280.83 139.18-426.99 222.69 871.77 849.22 1732.38 1723.08 2248.64 2807.05l-.42.2c74.45 151.47 136.75 302.01 188.56 446.37 61.8 172.21 106.62 328.92 138.4 465.03 164.72 705.39-31.92 1204.97-372.26 1486.28-188.61 155.9-420.26 241.9-659.89 257.26-234.29 15.03-477.35-38.61-694.92-161.58-426.39-241-751.82-743.42-704.25-1506.83 8.09-137.52 126.15-242.46 263.67-234.37 137.52 8.09 242.46 126.15 234.37 263.67-33.86 543.5 175.01 888.31 450.35 1043.93 130.91 73.99 277.68 106.24 419.52 97.14 136.49-8.75 267.43-56.89 372.79-143.98 205.84-170.14 318.81-497.85 204.3-988.24-29.47-126.25-68.97-265.82-120.84-410.35-44.71-124.56-100.18-257.85-168.6-396.76l-1.96-2.93c-497.38-1044.32-1365.91-1907.11-2235.14-2752.05-300.48 198.18-606.94 425.91-905.36 672.14-378.4 312.22-741.84 652.87-1061.74 999.32 172.21 254.96 327.78 520.99 461.28 801.29l-.67.32c76.05 154.94 140.24 310.31 194.08 460.31 64.8 180.58 111.22 342.41 143.68 481.44 179.78 769.88-41.96 1321.04-422.65 1635.7-213.59 176.55-475.45 273.9-746.03 291.25-262.02 16.81-533.96-43.25-777.53-180.92-471.71-266.62-832.11-816.31-780.43-1645.7 31.27-500.85 312.17-1080.24 741.31-1662.78 53.12-72.1 108.66-144.5 166.37-217-456.29-568.65-998.7-1095.56-1536.35-1617.77l-1.98-1.92c-247.82 228.02-479.37 453.35-682.23 677.26-262.36 289.61-516.1 591.57-747.15 896.61 124.03 175.98 239.71 352.25 344.62 527.24 312.14 520.64 531.49 1033.76 598.04 1501.77l1.95 20.51c45.14 724.55-254.13 1205.62-658.56 1437.58-184.18 105.64-389.49 158.47-594.58 158.47-205.09 0-410.4-52.82-594.58-158.46-404.44-231.98-703.69-713.05-658.55-1437.59l1.95-20.51c66.55-468.01 285.9-981.13 598.04-1501.77 104.91-174.99 220.59-351.26 344.62-527.24-231.05-305.04-484.79-607-747.15-896.61-205.08-226.37-439.49-454.18-690.38-684.76l-9.7 9.42c-537.65 522.21-1080.06 1049.12-1536.35 1617.77 57.71 72.5 113.25 144.9 166.37 217 429.14 582.54 710.04 1161.93 741.31 1662.78 51.68 829.39-308.73 1379.08-780.43 1645.7-243.57 137.67-515.51 197.72-777.53 180.92-270.59-17.35-532.44-114.72-746.04-291.25-380.69-314.66-602.42-865.81-422.64-1635.7 32.46-139.03 78.88-300.86 143.68-481.44 53.84-150 118.03-305.37 194.08-460.31l-.67-.32c133.5-280.3 289.07-546.33 461.28-801.29-319.9-346.45-683.34-687.1-1061.74-999.32-295.3-243.65-598.46-469.2-895.91-665.9-867.09 842.95-1732.56 1704.06-2228.72 2745.81l-1.96 2.93c-68.42 138.91-123.89 272.2-168.6 396.76-51.87 144.53-91.37 284.1-120.84 410.35-114.51 490.39-1.55 818.1 204.29 988.24 105.36 87.07 236.3 135.23 372.8 143.98 141.85 9.09 288.61-23.15 419.52-97.14 275.33-155.62 484.21-500.43 450.35-1043.93-8.09-137.52 96.85-255.58 234.37-263.67 137.52-8.09 255.58 96.85 263.67 234.37 47.57 763.41-277.87 1265.83-704.25 1506.83-217.57 122.97-460.63 176.6-694.92 161.58-239.64-15.36-471.29-101.38-659.9-257.26-340.34-281.31-536.97-780.89-372.25-1486.28 31.78-136.11 76.6-292.82 138.4-465.03 51.81-144.36 114.11-294.9 188.56-446.37l-.42-.2c515.1-1081.53 1373-1953.9 2242.76-2801.32-149.64-85.83-295.94-162.48-436.98-228.42-440.1-205.76-803.18-303.66-1010.01-237.79-264.91 84.37-429.46 291.18-558.61 453.5-78.24 98.34-147.66 185.58-243.57 266.38-349.06 294.07-674.53 309.86-1211.08-327.04-91.3-108.38-145.81-176.94-201.22-246.64-235.67-296.46-491.18-617.85-588.97-608.84-50.23 4.63-237.67 229.17-429.63 459.12-160.34 192.1-323.03 386.99-500.01 535.17-728.89 610.28-1162.15 243.01-1699.63-212.62-290.51-246.27-629.69-533.79-1085.56-534.15l-14719.83-11.56zm23704.21 394.6c275.05 188.49 551.38 397.12 820.2 618.92 367.3 303.05 722.23 631.78 1042.47 968.53 453.33-547.21 969.54-1050.75 1482.96-1549.48l-134.68-118.02c-594.99-521.11-1211.27-1060.88-1732.23-1648.49l-20.39 30.38c-401 609.88-914.99 1159.07-1458.33 1698.16zm8022.77 45.28c510.94 496.34 1024.33 997.63 1475.44 1542.17 320.24-336.75 675.17-665.48 1042.47-968.53 271.88-224.32 551.44-435.17 829.59-625.35-540.95-537.02-1052.45-1084.27-1451.85-1691.73l-20.39-30.38c-520.96 587.61-1137.24 1127.38-1732.23 1648.49-47.84 41.9-95.55 83.67-143.03 125.33zm-953.68 184.5c-502.01-493.3-985.39-992.49-1388.65-1538.92-401.2 543.64-881.7 1040.52-1380.96 1531.36 252.06 232.45 489.64 464.34 702.36 699.14 238.69 263.48 470.75 537.14 686.53 814.64 215.78-277.5 447.85-551.16 686.54-814.64 210.42-232.26 445.17-461.66 694.18-691.58zm-5623.45-2791.27c312.8-467.55 671.53-1069.3 745.38-1588.75 62.55-439.91-103.69-734.27-346.4-882.19-131.42-80.09-285.18-120.29-437.74-119.85-149.94.43-297.19 40.3-418.58 120.27-215.24 141.78-351.63 423.19-278.96 854.13 97.75 579.69 368.13 1114.29 736.3 1616.39zm4468.14 5496.54c-70.23-117.14-145.65-234.99-225.41-353.04-79.76 118.05-155.17 235.9-225.4 353.04-277.61 463.04-472.08 911.02-530.35 1307.46-27.93 499.35 157.49 818.57 409.21 962.95 106.99 61.37 226.68 92.06 346.54 92.06 119.86 0 239.54-30.7 346.54-92.07 251.72-144.37 437.15-463.59 409.22-962.94-58.27-396.44-252.74-844.42-530.35-1307.46zm4017.33-5496.54c368.17-502.1 638.55-1036.7 736.3-1616.39 72.66-430.93-63.73-712.35-278.96-854.13-121.39-79.97-268.64-119.84-418.58-120.27-152.57-.44-306.33 39.75-437.74 119.84-242.72 147.93-408.95 442.29-346.4 882.2 73.85 519.45 432.58 1121.2 745.38 1588.75zm-8012.23 5448.14-7.17-9.68c-101.15 163.03-193.58 330.09-275.43 501.94l-3.13 4.68c-66.42 134.85-119.7 262.65-162.16 380.95-48.86 136.16-86.76 270.59-115.56 393.94-99.45 425.9-11.59 702.03 153.9 838.82 80.38 66.43 181.1 103.23 286.66 109.99 114.13 7.31 232-18.51 336.91-77.8 230-130.01 403.92-427.52 374.17-905.06-20.92-335.18-244.27-770.92-588.19-1237.78zm3761.56-5603.37c292.24-443.61 608-990.7 673.96-1454.61 5.66-39.84 8.55-74.5 8.83-104.09 1.82-190.75-68.49-362.26-181.37-492.16-110.74-127.43-262.03-213.67-425.01-236.84-29.25-4.16-54.83-6.49-76.41-6.88-21.58.39-47.16 2.72-76.41 6.88-162.98 23.17-314.27 109.41-425.01 236.84-112.88 129.9-183.19 301.42-181.37 492.16.28 29.6 3.16 64.25 8.83 104.09 65.96 463.91 381.72 1011 673.96 1454.61zm4044.16 6095.63c-81.85-171.85-174.28-338.91-275.43-501.94l-7.17 9.68c-343.92 466.86-567.27 902.6-588.19 1237.78-29.75 477.54 144.16 775.05 374.17 905.06 104.91 59.29 222.78 85.12 336.91 77.8 105.56-6.76 206.27-43.55 286.65-109.99 165.49-136.79 253.36-412.93 153.91-838.82-28.8-123.35-66.7-257.78-115.56-393.94-42.46-118.3-95.74-246.1-162.16-380.95l-3.13-4.68z"
id="FiligreePath" />
</svg>
</section>
<footer id="features">
<div class="content">
<h1>Modern CSS features used:</h1>
<dl>
<dt>Native CSS Nesting</dt>
<dd>
A code organization feature common to CSS preprocessors like LESS
is now available to many browsers natively. Nesting helps
developers by reducing the need to repeat selectors while also
co-locating style rules for related elements. It can also help
styles match the HTML they target.
<a href="https://developer.chrome.com/articles/css-nesting/" target="_blank">Learn more about CSS
nesting.</a>
</dd>
<dt>Custom Properties</dt>
<dd>
Though it's been around in browsers for quite a while, these CSS
variables can be even more useful when combined with Keyframe
Animations to change their values, and Style Queries to scope
additional rules.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*" target="_blank">Learn more about custom
properties.</a>
</dd>
<dt>Feature Support Queries</dt>
<dd>
This type of query can be used to conditionally apply CSS rule
sets based on whether or not the browser supports particular
features, properties and/or values. It can take a chained set of
queries with <code>and</code>, and can also test the negative with
<code>not</code>.
<p>
A query was used on this page to test for
<code>view-timeline-name</code> support.
</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*" target="_blank">Learn more about custom
properties.</a>
</dd>
<dt>Keyframe Animations</dt>
<dd>
The <code>@keyframes</code> CSS at-rule controls the intermediate
steps in a CSS animation sequence by defining styles for keyframes
along the animation sequence. Keyframe timelines can also update
non-animatable properties, which can come in handy, for example by
using custom properties and style queries to apply different rule
sets throughout the sequence.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes" target="_blank">Learn more about
keyframe animations.</a>
</dd>
<dt>Scroll View Timelines</dt>
<dd>
The <code>view-timeline</code> property is used to define a named
view progress timeline, which is progressed through based on the
change in visibility of a subject element inside a scrollable
element, and is applied to the subject element. The visibility of
the subject inside the scroller is tracked in relationship to the
edges of the scrolling ancestor element.
<p>
Most of the scroll-controlled animations on this page use this
method.
</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline" target="_blank">Learn more about
view timelines.</a>
</dd>
<dt>Animation Timelines</dt>
<dd>
The <code>animation-timeline</code> CSS property specifies the
timeline that is used to control the progress of a CSS animation.
Among other values, named view or scroll timelines can be used as
the progress timeline to control an animation, like an associated
keyframe animation.
<p>
Most of the scroll-controlled animations on this page use this
method.
</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline" target="_blank">Learn more
about animation timelines.</a>
</dd>
<dt>Named Containers</dt>
<dd>
The <code>container-name</code> CSS property specifies a list of
query container names used by the <code>@container</code> at-rule
in a container query. A container query will apply styles to
elements based on the size of the nearest ancestor with a
containment context, or based on the presence of a custom property
value. When a containment context is given a name, it can be
specifically targeted using the <code>@container</code> at-rule
instead of the nearest ancestor with containment.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/container-name" target="_blank">Learn more about
named containers.</a>
</dd>
<dt>Style Queries</dt>
<dd>
A style query allows an author to create rule sets which will only
be applied when the queried element – either an ancestor of
the element in the rule set, or a named container – matches
a queried style's value. While still in the beginning stages of
support, Chromium browsers only support custom properties for the
queired style.
<p>
This technique is used on this page for some of the triggered
animations, typically using a rule set to change a value which
is animated by a transition, much like toggling a class on that
container.
</p>
<a href="https://developer.chrome.com/blog/style-queries/" target="_blank">Learn more about style
queries.</a>
</dd>
<dt>Sticky Positioning</dt>
<dd>
By setting an element's <code>position</code> to
<code>sticky</code> and setting a top/bottom for vertical
scrolling, or a left/right value for horizontal scrolling, the
element will flow as though it was position static within its
container, and then offset relative to its nearest scrolling
ancestor and nearest block-level ancestor. It's can be used for an
effect like a blend between <code>static</code> and
<code>fixed</code> positioning.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky" target="_blank">Learn more about
sticky positioning.</a>
</dd>
<dt>Clamp</dt>
<dd>
The <code>clamp()</code> CSS function clamps a middle value within
a range of values between a defined minimum bound and a maximum
bound. It is used on this page in the "scroll progress article" to
create responsive typography by setting a relative target font
size (for example in viewport units), and a lower and upper bound
in a non-responsive unit like pixels.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clamp" target="_blank">Learn more about clamp.</a>
</dd>
<dt>Scroll Snap</dt>
<dd>
The <code>scroll-snap-type</code> property can control how a a
scrolling container should behave, making the container's view
"snap" or lock to particular child elements or locations. The
<code>scroll-snap-align</code> property applied to child elements
control those snapping points based on its view within the scroll
container.
<p>
This technique was used in the carousel gallery of images,
combined with a scroll view timeline to change the images' focus
appearance.
</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type" target="_blank">Learn more about
scroll snap.</a>
</dd>
<dt>Scroll Behavior</dt>
<dd>
This property allows the author to control how a scrolling element
behaves as it scrolls, either jumping directly to a scroll
location, or animating to that position on an optional easing
curve. This was applied to the carousel image gallery.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior" target="_blank">Learn more about
scroll behavior.</a>
</dd>
<dt>Grid and Flexbox</dt>
<dd>
Both <code>grid</code> and <code>flexbox</code> layout systems
have come a long way in the the last few years, and can be
considered essential tools for practically any design. They can be
used simply to make vertical and horizontally alignment simpler to
implement, to creating complex and overlapping layouts, or
combined as they were in the profile cards demonstration on this
page.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display#inside" target="_blank">Learn more about
grid and flex display options.</a>
</dd>
<dt>`:has()` Pseudo Selector</dt>
<dd>
This selector has been described as a "ancestor" selector, and for
most practical use cases that is true enough. A rule can be
written to apply to an element only if it contains – or
"has" – a matching descendant selector.
<p>
This was used in the profile cards demo as you hover over a
"card" element in order to fade out all cards which are not
hovered.
</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has" target="_blank">Learn more about
<code>:has()</code>.</a>
</dd>
<dt>Stroke Dash Array & Offset</dt>
<dd>
These properties control the spacing between "dashes" of the line
used as a stroke for an SVG path. By setting the spacing of the
dash to the same length as the path and offsetting it by that
amount, the entire path will be contained by that gap between
dashes, appearing to have no stroke. By animating the offset, an
author can make it appear that the SVG is being drawn as the dash
moves to replace the empty gaps.
<a href="https://justinmarsan.medium.com/animating-a-complex-svg-icon-with-dash-array-and-dash-offset-in-css-451da9d3baba"
target="_blank">Learn more about using the stroke dash array and offset for
this effect.</a>
</dd>
<dt>Backdrop Filter</dt>
<dd>
This property is conceptually and syntactically similar to the
longer-lived <code>filter</code> property. But rather than
applying the filter effect to the element overall, it instead
applies to everything behind that element.
<p>
This property was used in the hero image area preceding the
reading progress indicator demo.
</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter" target="_blank">Learn more about
backdrop filter.</a>
</dd>
<dt>Counters with named variables</dt>
<dd>
Counters can be used to display a string, typically a number, in
places like pseudo elements' content. This value can be reset,
incremented and adjusted in other rule sets, as well as in
keyframe animations.
<p>
This property was used for the "friend" count in the profile
cards demo.
</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter" target="_blank">Learn more about
counter.</a>
</dd>
</dl>
</div>
<div class="copyright">
Made by <a href="https://danjnj.com" target="_blank">Dan Johnson</a>,
initially presented at
<a href="https://squarespace.com" target="_blank">Squarespace</a> Hack
Week October 2023.
<br />
The site continues to evolve...
</div>
</footer>
</main>
</body>
</html>