-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
641 lines (638 loc) · 42 KB
/
index.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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Alvaro Montoro ([email protected])" />
<meta name="keywords" content="css art,css,art,illustration,single div,single-div,drawings" />
<meta name="description" content="Collection of CSS drawings created with a single div" />
<meta name="theme-color" content="#444" />
<meta property="og:title" content="Single Div CSS Drawings" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://cssdrawings.com/" />
<meta property="og:image" content="https://cssdrawings.com/thumb.jpg" />
<meta property="og:description" content="Collection of CSS drawings created with a single div." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://cssdrawings.com/" />
<meta name="twitter:title" content="Single Div CSS Drawings" />
<meta name="twitter:description" content="Collection of CSS drawings created with a single div." />
<meta name="twitter:image" content="https://cssdrawings.com/thumb.jpg" />
<meta name="monetization" content="$ilp.uphold.com/2f28xFUMdj9Z" />
<title>Single Div Drawings</title>
<link rel="stylesheet" href="./css/styles.css?date=20230631" />
<link rel="stylesheet" href="./css/drawings.min.css?date=20231031" />
<link rel="author" href="https://www.linkedin.com/in/alvaromontoro/" />
<link rel="shortcut icon" href="./fav.ico" />
<link rel="apple-touch-icon" href="./apple-touch-icon.png" />
<link rel="canonical" href="https://cssdrawings.com/" />
</head>
<body>
<header class="full">
<div>
<h1>CSS Drawings</h1>
<span>A Single Div CSS Art Project by <a href="https://www.linkedin.com/in/alvaromontoro/" rel="author">Alvaro Montoro</a></span>
</div>
<div>
<a href="https://github.com/alvaromontoro/single-div" rel="noreferrer nofollow">GitHub</a>
<a class="share-icon tweet-icon" rel="external noreferrer nofollow" href="https://twitter.com/intent/tweet?text=CSS%20Drawings%3A%20a%20single%20element%20drawings%20project%20by%20%40alvaro_montoro%20https%3A%2F%2Fcssdrawings.com">Tweet about this project</a>
<a class="share-icon coffee-icon" rel="external noreferrer nofollow" href="https://buymeacoffee.com/alvaromontoro">Buy me a coffee</a>
<a class="share-icon patreon-icon" rel="external noreferrer nofollow" href="https://www.patreon.com/alvaromontoro">Become a patron</a>
</div>
</header>
<section id="witchy" class="tall witchy-container">
<article class="witchy" role="img" aria-label="A kawaii-ish witch with green skin, wearing a dark gray robe and pointy hat"></article>
</section>
<section id="discontinued" class="discontinued-container">
<article class="discontinued" role="img" aria-label="A store front with a big 'Closed' sign on, a note says that a Spirit Halloween will open soon"></article>
</section>
<section id="pin" class="pin-container">
<article class="pin" role="img" aria-label="a closed security pin"></article>
<article class="pin open" role="img" aria-label="an open security pin"></article>
</section>
<section id="handmade" class="handmade-container">
<a href="https://www.youtube.com/watch?v=EeUH6-Ow6x0" class="youtube-link">Coding video</a>
<article class="handmade" role="img" aria-label="a logo with the words 'hand made', and two needles crossing through a ball of wool"></article>
</section>
<section id="rules" class="rules-container">
<article class="rules" role="img" aria-label="cartoon a bunch of traffic signs"></article>
</section>
<section id="cheesy" class="full cold-container">
<article class="cold" role="img" aria-label="the 'cold' emoji. A blue circle with eyes, teeth chattering, and icicles hanging from face and mouth"></article>
</section>
<section id="cheesy" class="full cheesy-container">
<article class="cheesy" role="img" aria-label="Cartoon of a triangular piece of cheese in kawaii style"></article>
</section>
<section id="feast" class="feast-container">
<article class="feast" role="img" aria-label="Cartoon of a cornucopia with the text 'Happy Thanksgiving!'"></article>
</section>
<section id="fake2" class="fake2-container">
<article class="fake2" role="img" aria-label="Caricature of an American politician with orange face saying 'Fake News!'"></article>
</section>
<section id="fake" class="full fake-container">
<article class="fake" role="img" aria-label="Cartoon of a turtle wearing a shark fin"></article>
</section>
<section id="alive" class="alive-container">
<a href="https://www.youtube.com/watch?v=vmX9O0jLe4Y" class="youtube-link">Coding video</a>
<article class="alive" role="img" aria-label="Cartoon of a sextant (a navigational instrument to measure distances)"></article>
</section>
<section id="faraway" class="faraway-container">
<a href="https://www.youtube.com/watch?v=q7GYJ41fKDA" class="youtube-link">Coding video</a>
<article class="faraway" role="img" aria-label="Cartoon of a sextant (a navigational instrument to measure distances)"></article>
</section>
<section id="sticky" class="tall interactive sticky-container">
<a href="https://www.youtube.com/watch?v=YWIWXtIumBk" class="youtube-link">Coding video</a>
<input type="range" class="sticky" value="70" min="30" max="100" oninput="this.style='--v:'+this.value+'%'" role="img" aria-label="cartoon of a shoe that has stepped on a sticky chewing gum on the floor"/>
</section>
<section id="seeing" class="seeing-container">
<article class="seeing" role="img" aria-label="Drawing of the all-seeing Eye of Providence (an eye inside of a triangle)"></article>
</section>
<section id="component" class="component-container">
<article class="component" role="img" aria-label="Chemical formula of the caffeine"></article>
</section>
<section id="brave" class="brave-container">
<article class="brave" role="img" aria-label="Cartoon of a mouse looking at a lion and saying 'fuck you!' defiantly"></article>
</section>
<section id="tangled" class="tangled-container">
<a href="https://www.youtube.com/watch?v=wJBEYKmqDEw" class="youtube-link">Coding video</a>
<article class="tangled" role="img" aria-label="Cartoon of a tower with a girl with really long hair looking from a window at the top of the tower"></article>
</section>
<section id="remember" class="remember-container">
<article class="remember" role="img" aria-label="Cartoon of a hand with a thread knotted around the index finger"></article>
</section>
<section id="small" class="small-container">
<a href="https://www.youtube.com/watch?v=lPx8WRTwZMw" class="youtube-link">Coding video</a>
<article class="small" role="img" aria-label="Cartoon of a small chick coming out of the egg"></article>
</section>
<section id="collect" class="collect-container">
<input class="animated" id="collect-animated" type="checkbox" role="switch" />
<label for="collect-animated">Animation</label>
<article class="collect" role="img" aria-label="Cartoon of a baseball card for player Alvaro Montoro, who plays at the Red SoCSS">ALVARO MONTORO</article>
</section>
<section id="glass" class="glass-container">
<input class="animated" id="glass-animated" type="checkbox" role="switch" />
<label for="glass-animated">Animation</label>
<article class="glass" role="img" aria-label="Cartoon of a magnifying glass with a spider moving up and down (getting behind of the mangifying glass and getting bigger)"></article>
</section>
<section id="bones" class="bones-container">
<a href="https://www.youtube.com/watch?v=R-YnTXveO_g" class="youtube-link">Coding video</a>
<article class="bones" role="img" aria-label="Cartoon of a cute-ish skeleton"></article>
</section>
<section id="sparkle" class="sparkle-container">
<article class="sparkle" role="img" aria-label="Cartoon of a burning sparkle"></article>
</section>
<section id="space" class="full space-container">
<input class="animated" id="space-animated" type="checkbox" role="switch" />
<label for="space-animated">Animation</label>
<a href="https://www.youtube.com/watch?v=5W3ebJfYi1I" class="youtube-link">Coding video</a>
<article class="space" role="img" aria-label="drawing of an astronaut floating in space"></article>
</section>
<section id="mix" class="mix-container">
<input class="animated" id="mix-animated" type="checkbox" role="switch" />
<label for="mix-animated">Animation</label>
<a href="https://www.youtube.com/watch?v=EIzsv46dFSQ" class="youtube-link">Coding video</a>
<article class="mix" role="img" aria-label="drawing of a mixing bowl with a whisk"></article>
</section>
<section id="treat" class="treat-container">
<a href="https://www.youtube.com/watch?v=vHln4zdlxoI" class="youtube-link">Coding video</a>
<article class="treat" role="img" aria-label="drawing of a two-scoop icecream with a cherry on top"></article>
</section>
<section id="bounce" class="grand bounce-container">
<input class="animated" id="bounce-animated" type="checkbox" role="switch" />
<label for="bounce-animated">Animation</label>
<article class="bounce" role="img" aria-label="cartoon of a bouncer holding a clipboard in front of a door"></article>
</section>
<section id="crawl" class="crawl-container">
<input class="animated" id="crawl-animated" type="checkbox" role="switch" />
<label for="crawl-animated">(Chrome-Only) Animation</label>
<article class="crawl" role="img" aria-label="Cartoon of a smiling earthworm"></article>
</section>
<section id="picasso" class="tall picasso-container">
<article class="picasso" role="img" aria-label="Cartoon of an artist (Pablo Picasso) in cubist/blue style"></article>
</section>
<section id="lost" class="lost-container">
<article class="lost" role="img" aria-label="Cartoon of lost and found wooden box with different items: baseballs, a football, a racket (it's a reference to Pixar's Lou)."></article>
</section>
<section id="mission-impossible" class="grand mission-impossible-container">
<input class="animated" id="mission-impossible-animated" type="checkbox" role="switch" />
<label for="mission-impossible-animated">Animation</label>
<article class="mission-impossible" role="img" aria-label="cartoon of a man balancing while hanging from a rope in the ceiling"></article>
</section>
<section id="impossible" class="impossible-container">
<article class="impossible" role="img" aria-label="Cartoon of an impossible optical effect"></article>
</section>
<section id="pumpkin" class="pumpkin-container">
<article class="pumpkin" role="img" aria-label="Cartoon of a smiling carved pumpkin"></article>
</section>
<section id="whale" class="whale-container">
<article class="whale" role="img" aria-label="Cartoon of a blue whale"></article>
</section>
<section id="death" class="death-container">
<a href="https://www.youtube.com/watch?v=gNMuPuuNr4c" class="youtube-link">Animation video</a>
<article class="death" role="img" aria-label="Cartoon of the grim reaper"></article>
</section>
<section id="chibi" class="grand chibi-container">
<a href="https://www.youtube.com/watch?v=NAuxqUEqr68" class="youtube-link">Coding video</a>
<article class="chibi" role="img" aria-label="cartoon of a girl drawn in chibi/manga style"></article>
</section>
<section id="framed" class="framed-container">
<article class="framed" role="img" aria-label="drawing of a woman holding a tulip inside a frame"></article>
</section>
<section id="coffee-mug-1" class="coffee-mug-1-container">
<article class="coffee-mug-1" role="img" aria-label="Cartoon of realistic-looking coffee mug"></article>
</section>
<section id="browser-logos" class="full browsers-container">
<article class="adidas-logo" role="img" aria-label="Adidas logo"></article>
<article class="figma-logo" role="img" aria-label="Figma logo"></article>
<article class="webtorrent-logo" role="img" aria-label="Maxthon logo"></article>
<article class="discord-logo" role="img" aria-label="Discord logo"></article>
<article class="css-logo" role="img" aria-label="CSS logo"></article>
<article class="html-logo" role="img" aria-label="HTML logo"></article>
</section>
<section id="brew" class="tall brew-container">
<article class="brew" role="img" aria-label="cartoon of a french press with brewed coffee"></article>
</section>
<section id="free" class="free-container">
<article class="free" role="img" aria-label="A man with a table full of unhealthy food asks for a sugar-free soda"></article>
</section>
<section id="bill" class="bill-container">
<article class="bill" role="img" aria-label="Cartoon of Bill Cipher, a floating triangle with a single eye, a top hat and a bow tie"></article>
</section>
<section id="monster" class="grand monster-container">
<article class="monster" role="img" aria-label="Cartoon of No-Face from Spirited Away (a monster with semi-translucid black cape and a smiling mask at the top) on a bridge widht clouds in the background."></article>
</section>
<section id="grain" class="grain-container">
<article class="grain" role="img" aria-label="Cartoon of a salt shaker (with eyes and a smiley face) with a grain of salt next to it"></article>
</section>
<section id="vintage" class="vintage-container">
<article class="vintage" role="img" aria-label="pop art style vhs tapes"></article>
</section>
<section id="luminous" class="luminous-container">
<article class="luminous" role="img" aria-label="Cartoon of lighted candle"></article>
</section>
<section id="cubed" class="cubed-container">
<article class="cubed" role="img" aria-label="Cartoon of a broken cube"></article>
</section>
<section id="pop" class="pop-container">
<article class="pop" role="img" aria-label="Cartoon of an owl drawn using different concentric circles of color"></article>
</section>
<section id="soft" class="soft-container">
<article class="soft" role="img" aria-label="Cartoon of a can of soda (soft drink) with the name CSSoda."></article>
</section>
<section id="valuable" class="valuable-container">
<article class="valuable" role="img" aria-label="Cartoon of an open treasure chest"></article>
</section>
<section id="ten" class="tall ten-container">
<input class="animated" id="ten-animated" type="checkbox" role="switch" />
<label for="ten-animated">(Chrome-only) Animation</label>
<article class="ten" role="img" aria-label="Cartoon of Lionel Messi wearing Barcelona jersey (if animated, also PSG and Argentina jerseys)"></article>
</section>
<section id="mythical" class="mythical-container">
<a href="https://www.youtube.com/watch?v=aDTl_hPm1Sc" class="youtube-link">Coding video</a>
<article class="mythical" role="img" aria-label="Cartoon of Medusa, a woman with snake hair"></article>
</section>
<section id="erase" class="pun-container">
<article class="pun" role="img" aria-label="Cartoon of the moon with a restaurant on top, and the text: 'Did you hear about the restaurant on the moon? The food was good but it had no atmosphere'"></article>
</section>
<section id="erase" class="erase-container">
<article class="erase" role="img" aria-label="cartoon with the word powerless and a pencil erasing the 'less' part"></article>
</section>
<section id="stripes" class="full stripes-container">
<article class="stripes" role="img" aria-label="drawing of the first three albums of The White Stripes (minus the people)"></article>
</section>
<section id="forever" class="forever-container">
<article class="forever" role="img" aria-label="cartoon with the silhouette of a man carrying a boulder uphill forever (the Myth of Sisyphus)"></artice>
</section>
<section id="shadow" class="shadow-container">
<a href="https://www.youtube.com/watch?v=34zyL-rNbZs" class="youtube-link">Coding video</a>
<article class="shadow" role="img" aria-label="the word shadow with a shadow"></article>
</section>
<section id="burger" class="burger-container">
<a href="https://www.youtube.com/watch?v=e5rf6UAFWMU" class="youtube-link">Coding video</a>
<article class="burger" role="img" aria-label="Cartoon of a burger running (fast food)"></article>
</section>
<section id="game-2" class="game-2-container">
<a href="https://www.youtube.com/watch?v=XLIh-NGUJ9Q" class="youtube-link">Coding video</a>
<article class="game-2" role="img" aria-label="Cartoon of a Game Boy console with the text Divtober CSS Boy">Divtober CSS Boy</article>
</section>
<section id="rise" class="rise-container">
<article class="rise" role="img" aria-label="Cartoon of a tombstone with a zombie hand raising from the grave">RIP</article>
</section>
<section id="haunted" class="haunted-container">
<input class="animated" id="haunted-animated" type="checkbox" role="switch" />
<label for="haunted-animated">Animation</label>
<a href="https://www.youtube.com/watch?v=e9UvI3cR__8" class="youtube-link">Coding video</a>
<article class="haunted" role="img" aria-label="cartoon of a haunted house with a ghost peaking out the window"></article>
</section>
<section id="wonder" class="full wonder-container">
<article class="wonder" role="img" aria-label="cartoon of comic superhero Wonder Woman, a woman wearing a tiara, boots, an outfit with the colors of the USA flag, and the lasso of truth."></article>
</section>
<section id="night-landscape" class="squared night-landscape-container">
<article class="night-landscape" role="img" aria-label="Cartoon of a night landscape with a lake in the front, mountains in the back, and some stars in the sky."></article>
</section>
<section id="meaty" class="meaty-container">
<article class="meaty" role="img" aria-label="Drawing of a cheeseburgers with a variable number of patties depending on the browser viewport"></article>
</section>
<section id="stamp" class="stamp-container">
<article class="stamp" role="img" aria-role="cartoon of a stamp with a picture of a 30 cent stamp postmarked october 5, 2022 from Austin TX">30¢</article>
</section>
<section id="quiet-2" class="grand quiet-2-container">
<a href="https://www.youtube.com/watch?v=UiDSuWOS1NQ" class="youtube-link">Coding video</a>
<article class="quiet-2" role="img" aria-label="drawing of a sunrise from space"></article>
</section>
<section id="snack" class="snack-container">
<article class="snack" role="img" aria-label="cartoon of a bag of chips">Chips</article>
</section>
<section id="dry" class="dry-container">
<input class="animated" id="dry-color" type="checkbox" role="switch" checked />
<label for="dry-color">Black & White mode</label>
<article class="dry" role="img" aria-label="Illustration of a rainy scene and an open umbrella"></article>
</section>
<section id="badge" class="badge-container">
<article class="badge texture" role="img" aria-label="Illustration of the Boy Scouts' Digital Technology merit badge"></article>
</section>
<section id="chapulin" class="chapulin-container">
<a href="https://www.youtube.com/watch?v=tXsWcYGJqR0" class="youtube-link">Coding video</a>
<article class="chapulin" role="img" aria-label="minimalist representation of the Chapulin Colorado, a fictional superhero"></article>
</section>
<section id="person-portrait-1" class="tall person-profile-1-container">
<a href="https://www.youtube.com/watch?v=hJs3a67CHM8" class="youtube-link">Coding video</a>
<article class="person-profile-1" role="img" aria-label="Cartoon with portrait of a person"></article>
</section>
<section id="flex-jaws" class="tall flex-jaws-container">
<a href="https://www.youtube.com/watch?v=U_tEyUmHlQQ" class="youtube-link">Coding video</a>
<article class="flex-jaws" role="img" aria-label="cartoon mimicking the Jaws movie poster with a shark threatening something (a computer) on the surface. Instead of Jaws, the text is Flex.">FLEX</article>
</section>
<section id="sheep" class="sheep-container">
<article class="sheep" role="img" aria-label="Cartoon of a sheep"></article>
</section>
<section id="sheep-in-a-box">
<!-- <a href="https://twitter.com/alvaro_montoro/status/1567348673939480577?s=20&t=u-fucb4xellPiz6TiSahpA" class="youtube-link">See joke</a> -->
<article class="little-prince-sheep" role="img" aria-label="A box with three holes and a sheep inside (not visible)"></article>
</section>
<section id="man-with-mustache-1" class="man-with-mustache-1-container full">
<a href="https://www.youtube.com/watch?v=tDTvruBst7w" class="youtube-link">Coding video</a>
<article class="man-with-mustache-1" role="img" aria-label="Cartoon of a man with a mustache"></article>
</section>
<section id="red-stapler" class="interactive red-stapler-container">
<input type="checkbox" class="stapler red-stapler" role="img" aria-label="interactive red stapler that opens/closes on click" />
</section>
<section id="stapler" class="interactive stapler-container">
<input type="checkbox" class="stapler" role="img" aria-label="interactive black stapler that opens/closes on click" />
</section>
<section id="woman-1" class="grand woman-container">
<a href="https://www.youtube.com/watch?v=6YG6qJ_zIis" class="youtube-link">Coding video</a>
<article class="woman" role="img" aria-label="cartoon of a woman's portrait"></article>
</section>
<section id="uwu" class="kawaii-uwu-container">
<article class="kawaii-uwu" role="img" aria-label="Kawaii face (uwu)"></article>
</section>
<section id="kawaii-face" class="kawaii-container interactive">
<a href="https://www.youtube.com/watch?v=q2a-EAmGbzA" class="youtube-link">Coding video</a>
<article class="kawaii" role="img" aria-label="Kawaii face"></article>
</section>
<section id="flexo" class="tall interactive flexo-container">
<article class="flexo" role="img" aria-label="An interactive study light that switches on on click"></article>
</section>
<section id="roomba" class="roomba-container">
<article class="roomba" role="img" aria-label="Cartoon of a roomba vacuum cleaner">CSSoomba</article>
</section>
<section id="lgbtq-flags" class="lgbtq-flags-container">
<article role="img" aria-label="Traditional Gay flag" class="flag traditional"></article>
<article role="img" aria-label="Progress Gay flag" class="flag progress"></article>
<article role="img" aria-label="Labrys Pride flag" class="flag labrys"></article>
<article role="img" aria-label="Pride of Africa flag" class="flag pride-of-africa"></article>
</section>
<!-- <section class="full cube-animation-container">
<input class="animated" id="cube-animated" type="checkbox" role="switch" />
<label for="cube-animated">Animation</label>
<article class="cube-animation" role="img" aria-label="Animation with a paper and lines that form a spinning cube"></article>
</section> -->
<section id="adidas" class="adidas-container">
<article class="adidas" role="img" aria-label="Adidas logo"></article>
<article class="adidas full-line" role="img" aria-label="Adidas logo"></article>
</section>
<section id="spring" class="spring-container">
<input class="animated" id="spring-animated" type="checkbox" role="switch" />
<label for="spring-animated">Animation</label>
<article class="spring" role="img" aria-label="Animated cartoon showing a sunny scene with a field with flowers and a flying bee."></article>
</section>
<section id="fireworks" class="full fireworks-container">
<input class="animated" id="fireworks-animated" type="checkbox" role="switch" />
<label for="fireworks-animated">Animation</label>
<article class="firework" role="img" aria-label="Animated firework"></article>
<article class="firework" role="img" aria-label="Animated and colorful firework"></article>
</section>
<section id="browser-logos" class="full browsers-container">
<article class="browser chrome-logo" role="img" aria-label="Chrome logo"></article>
<article class="browser safari-logo" role="img" aria-label="Safari logo"></article>
<article class="browser opera-logo" role="img" aria-label="Opera logo"></article>
<article class="browser tor-logo" role="img" aria-label="Tor logo"></article>
<article class="browser vivaldi-logo" role="img" aria-label="Vivaldi logo"></article>
<article class="browser samsung-internet-logo" role="img" aria-label="Samsung Internet logo"></article>
</section>
<section id="yin-yang">
<article class="yin-yang" role="img" aria-label="Yin-Yang symbol"></article>
</section>
<section id="hashnode-lion" class="hashnode-logo-container">
<input class="animated" id="hashnode-lion-animated" type="checkbox" role="switch" />
<label for="hashnode-lion-animated">(Chrome-only) Animation</label>
<article class="hashnode-logo" role="img" aria-label="animation from hashnode logo to lion"></article>
</section>
<section id="flame" class="grand flame-container">
<input class="animated" id="flame-animated" type="checkbox" role="switch" />
<label for="flame-animated">Animation</label>
<article class="match" role="img" aria-label="Animated cartoon of a match burning"></article>
</section>
<section id="houndstooth" class="pattern-container">
<article class="pattern-1" role="img" aria-label="houndstooth pattern"></article>
</section>
<section id="pattern-circles" class="pattern-container">
<article class="pattern-2" role="img" aria-label="Colorful pattern made out of circles"></article>
</section>
<section id="t-shirt" class="t-shirt-container">
<article class="t-shirt" role="img" aria-label="t-shirt"></article>
</section>
<section id="speedometer" class="speedometer-container">
<input class="animated" id="speedometer-animated" type="checkbox" role="switch" />
<label for="speedometer-animated">Animation</label>
<article class="speedometer" role="progressbar" aria-label="speedometer" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="--value: 75"></article>
</section>
<section id="christmas-tree" class="christmas-tree-container">
<a href="https://www.youtube.com/watch?v=U8ZKEL7WFB4" class="youtube-link">Coding video</a>
<article class="christmas-tree" role="img" aria-label="Cartoon of a Christmas tree with presents at the bottom"></article>
</section>
<section id="man-with-mustache-2" class="man-with-mustache-2-container">
<a href="https://www.youtube.com/watch?v=1XCEvltZdsM" class="youtube-link">Coding video</a>
<article class="man-with-mustache-2" role="img" class="cartoon" aria-label="Cartoon of a man with a mustache"></article>
</section>
<section id="harry-potter" class="full hp-characters-container">
<a href="https://www.youtube.com/watch?v=1XCEvltZdsM" class="youtube-link">Coding video</a>
<div class="hp-characters">
<article class="hp-character griffindor" role="img" aria-label="Cartoon of a Griffindor student (Harry Potter), a boy with rounded glasses and a scar in the forehead, wearing a red and gold scarf"></article>
<article class="hp-character slytherin" role="img" aria-label="Cartoon of a Slytherin student (Draco Malfoy), an angry-looking boy with silvery hair, wearing a green and silver scarf"></article>
<article class="hp-character ravenclaw" role="img" aria-label="Cartoon of a Ravenclaw student, a girl with long hair and long eye lashes, wearing a blue and bronze scarf"></article>
<article class="hp-character hufflepuff" role="img" aria-label="Cartoon of a Hufflepuff student, a Black boy with dark hair and eyebrows, wearing a black and yellow scarf"></article>
</div>
</section>
<section id="3d-dice" class="animated-dice-container">
<input class="animated" id="dice-animated" type="checkbox" role="switch" />
<label for="dice-animated">Animation</label>
<article class="animated-dice" role="img" aria-label="Animation showing a dice in 3d"></article>
</section>
<section id="invitation" class="interactive invitation-container">
<article class="invitation" role="img" aria-label="Envelop that opens to show a birthday invitation">You are invited!
It's my birthday party and it's coming up soon!</article>
</section>
<section id="frankenstein" class="frankenstein-container">
<a href="https://www.youtube.com/watch?v=7y3WzWmzxgA" class="youtube-link">Coding video</a>
<article class="frankenstein" role="img" aria-label="A cartoon of a (surprised) Frankenstein's Monster popping up from the bottom of the screen. Green skin, scars in the face, screws popping from forehead and neck."></article>
</section>
<section id="pumpkin-pattern" class="pumpkin-pattern-container">
<a href="https://www.youtube.com/watch?v=JBtuqHSlI-8" class="youtube-link">Coding video</a>
<article class="pumpkin-pattern" role="img" aria-label="A pattern with smiling pumpkins"></article>
</section>
<section id="ghost-1" class="ghost-1-container">
<a href="https://www.youtube.com/watch?v=JBtuqHSlI-8" class="youtube-link">Coding video</a>
<article class="ghost-1" role="img" aria-label="cartoon of a cute ghost"></article>
</section>
<section id="spooky" class="spooky-container">
<article class="spooky" role="img" aria-label="the word 'spooky' with the o's replaced with a skull and a ghost">Spooky</article>
</section>
<section id="seasons" class="interactive grand seasons-container">
<input class="seasons" type="range" value="50" min="0" max="100" style="--size:50" oninput="this.style='--size:'+this.value" role="img" aria-label="An interactive cartoon of a landscape painting with a tree. It slides and shows the contrast between summer and winter." />
</section>
<section id="watermelon" class="watermelon-container">
<a href="https://www.youtube.com/watch?v=k5DLVrswBxM" class="youtube-link">Coding video</a>
<article class="watermelon" role="img" aria-label="cartoon of a watermelon with sticky arms and legs, wearing just one sock, and holding a sign that says 'hola!' (hello in Spanish)"></article>
</section>
<section id="fruit-bowl" class="fruit-bowl-container">
<article class="fruit-bowl" role="img" aria-label="cartoon of a still life with a fruit bowl"></article>
</section>
<section id="dots-animation" class="dots-animation-container">
<input class="animated" id="dots-animated" type="checkbox" role="switch" />
<label for="dots-animated">Animation</label>
<article class="dots-animation" role="img" aria-label="animated word 'dot' drawn using dots"></article>
</section>
<section id="queso" class="dip-queso-container">
<article class="dip-queso" role="img" aria-label="A cartoon of a tortilla chip chilling and drinking a margarita while dipping in queso"></article>
</section>
<section id="clapperboard" class="full clapperboard-container interactive">
<article class="clapperboard" role="img" aria-label="A 3D looking cartoon of a clapperboard/slate"></article>
</section>
<section id="curry" class="grand curry-container">
<a href="https://www.youtube.com/watch?v=1SCCwqehAYA" class="youtube-link">Coding video</a>
<article class="curry" role="img" aria-label="A cartoon of a bottle of curry powder"> Curry
Powder</article>
</section>
<section id="trash" class="trash-container">
<article class="trash" role="img" aria-label="A cartoon of a smelly trash can with boxes and bags around it"></article>
</section>
<section id="toot" class="interactive toot-container">
<audio
class="toot"
controls
preload
src="./media/toot.mp3"
role="img"
volume="1"
aria-label="animated cartoon of a bottom tooting on click"
onclick="this.play()">
Sorry, your browser does not support this amazing demo
</audio>
</section>
<section id="volume" class="volume-knob-container grand interactive">
<input class="volume-knob" type="range" value="11" min="1" max="11" oninput="this.setAttribute('value',this.value)" aria-label="Volume knob" />
</section>
<section id="critter" class="critter-container">
<a href="https://www.youtube.com/watch?v=lrHtJQa810E" class="youtube-link">Coding video</a>
<article class="critter" role="img" aria-label="A cartoon of a critter"></article>
</section>
<section id="journey">
<article class="journey" role="img" aria-label="minimalist version of the yellow brick road and Emerald city with a balloon in the sky"></article>
</section>
<section id="magic" class="grand magic-container interactive">
<article class="magic" tabindex="0" role="application" aria-label="The great magician Al performs a magic trick using CSS only!"></article>
</section>
<section id="cassette" class="grand cassette-container">
<a href="https://www.youtube.com/watch?v=0zaKHAa439A" class="youtube-link">Coding video</a>
<article class="cassette" role="img" aria-label="A cartoon of a cassette tape with the text 'Summer 95 Radio Mix!'"></article>
</section>
<section id="diamond" class="diamond-container">
<input class="animated" id="diamond-animated" type="checkbox" role="switch" />
<label for="diamond-animated">Animation</label>
<article class="diamond" role="img" aria-label="A cartoon of a shiny diamond"></article>
</section>
<section id="yeti" class="yeti-container">
<article class="yeti" role="img" aria-label="a cartoon of a sad abonimable snow man (aka the yeti)"></article>
</section>
<section id="boat" class="boat-container">
<input class="animated" id="boat-animated" type="checkbox" role="switch" />
<label for="boat-animated">Animation</label>
<a href="https://www.youtube.com/watch?v=kb-MxR1BXHw" class="youtube-link">Coding video</a>
<article class="boat" role="img" aria-label="cartoon of a boat floating empty with the oars in disarray"></article>
</section>
<section id="gentleman" class="tall glentleman-container">
<a href="https://www.youtube.com/watch?v=Giq9h88lVnc" class="youtube-link">Coding video</a>
<article class="gentleman" role="img" aria-label="Cartoon of a fancy-looking British gentleman with a hat, a monocle, a cup of tea, and an umbrella."></article>
</section>
<section id="mouse" class="mouse-container">
<article class="mouse" role="img" aria-label="cartoon of a mouse"></article>
</section>
<section id="sink" class="full sink-container">
<input class="animated" id="sink-animated" type="checkbox" role="switch" />
<label for="sink-animated">Animation</label>
<article class="sink" role="img" aria-label="Animated cartoon of a paper boat sinking in a bathroom sink"></article>
</section>
<section id="gangster" class="gangster-container">
<article class="gangster" role="img" aria-label="cartoon silhouette of a 1920s organized crime/mafia man holding a gun"></article>
</section>
<section id="growing" class="growing-container">
<input class="animated" id="growing-animated" type="checkbox" role="switch" />
<label for="growing-animated">(Chrome only) Animation</label>
<article class="growing" role="img" aria-label="Animation of a cartoon tree growing"></article>
</section>
<section id="toxic" class="toxic-container">
<a href="https://www.youtube.com/watch?v=fitjMV2bmA4" class="youtube-link">Coding video</a>
<article class="toxic" role="img" aria-label="cartoon of a barrel with the toxic sign on it and a glowing substance inside and dripping outside"></article>
</section>
<section id="warning" class="warning-container">
<article class="warning" role="img" aria-label="Warning. Neighborhood Watch. All suspicious activities are reported to the Police Department.">
Warning
</article>
</section>
<section id="loop" class="full loop-container">
<input class="animated" id="loop-animated" type="checkbox" role="switch" />
<label for="loop-animated">(Chrome only) Animation</label>
<article class="loop"></article>
</section>
<section id="rabbit" class="grand rabbit-container">
<input class="animated" id="turtle-hare-animated" type="checkbox" role="switch" />
<label for="turtle-hare-animated">Animation</label>
<article class="rabbit" role="img" aria-label="animated cartoon showing a surprised rabbit next to a finish line while a turtle passes it on a skateboard"></article>
</section>
<section class="fan-container">
<input class="animated" id="fan-animated" type="checkbox" role="switch" />
<label for="fan-animated">Animation</label>
<a href="#fan" id="fan" class="fan" role="img" aria-label="Cartoon of a fan spinning">An animated cartoon of a ceiling fan</a>
</section>
<section id="homer-simpson">
<article class="homer" aria-label="Homer Simpson" role="img"></article>
</section>
<section id="typewriter" class="full typewriter-container">
<input class="animated" id="typewriter-animated" type="checkbox" role="switch" />
<label for="typewriter-animated">Animation</label>
<article class="typewriter" role="img" aria-label="Cartoon of an old typewriter with paper"></article>
</section>
<section class="bull-container" id="bull">
<a href="https://www.youtube.com/watch?v=882L4CwgSzM" class="youtube-link">Coding video</a>
<article class="bull" role="img" aria-label="cartoon of a bull"></article>
</section>
<section id="shark" class="shark-container">
<article class="shark" role="img" aria-label="Cartoon of a shark"></article>
</section>
<section id="window" class="grand interactive window-container">
<article class="window" role="img" aria-label="cartoon of an interactive, the blinds go up and down"></article>
</section>
<section id="snowman" class="full snowman-container">
<input class="animated" id="snowman-animated" type="checkbox" role="switch" />
<label for="snowman-animated">Animation</label>
<article class="snowman" role="img" aria-label="Animated cartoon with a snowman and snow falling"></article>
</section>
<section id="washington" class="washington-container">
<article class="washington" role="img" aria-label="Portrait of George Washington drawn with vertical lines of different width"></article>
</section>
<section id="floating-castle" class="floating-castle-container">
<article class="floating-castle" role="img" aria-label="Cartoon of a 3d-looking floating castle"></article>
</section>
<section id="soccer" class="grand soccer-field-container">
<article class="soccer-field" role="img" aria-label="diagram of a soccer field with circles representing the players"></article>
</section>
<section id="coffee-mug" class="coffee-mug-container">
<article class="coffee-mug" role="img" aria-label="Cartoon of a coffee mug"></article>
</section>
<section id="tower" class="tower-container">
<article class="tower" role="img" aria-label="Cartoon of a tower with a flag on top"></article>
</section>
<section id="pacman" class="full pacman-container">
<input class="animated" id="pacman-animated" type="checkbox" role="switch" />
<label for="pacman-animated">Animation</label>
<article class="pacman" role="img" aria-label="Animation imitating the popular game Pacman"></article>
</section>
<section id="box-model" class="box-model-container">
<article class="box-model" role="img" aria-label="Diagram showing the box model parts"></article>
</section>
<section id="circles-animation" class="circles-squares-container">
<input class="animated" id="circles-animated" type="checkbox" role="switch" />
<label for="circles-animated">Animation</label>
<article class="circles-squares" role="img" aria-label="Animation with squares shifting and turning into circles (and viceversa)"></article>
</section>
<section id="slack" class="slack-logo-only-container">
<article class="slack-logo-only" role="img" aria-label="Slack logo"></article>
</section>
<section id="robot" class="robot-container">
<article class="robot" role="img" aria-label="Cartoon of a robot"></article>
</section>
<section id="nfl-to-nba" class="interactive">
<article class="nfl-to-nba" role="img" aria-label="Interactive NFL logo that changes to NBA logo"></article>
</section>
<section id="the-end" class="the-end-container">
<article class="the-end" role="img" aria-label="Old movies-style The End sign"></article>
</section>
<footer class="full">
<span>
© Copyright 2018-2023. <a href="https://alvaromontoro.com" rel="author">Alvaro Montoro</a>
</span>
<span>
Inspired by <a href="https://a.singlediv.com/" rel="noreferrer nofollow">Lynn Fisher</a>
</span>
</footer>
<nav aria-labelledby="webring" class="full">
<h2 id="webring">CSS JOY Webring</h2>
<a href="https://webri.ng/webring/cssjoy/previous?via=https://cssdrawings.com">Previous</a>
<a href="https://webri.ng/webring/cssjoy/random?via=https://cssdrawings.com">Random</a>
<a href="https://webri.ng/webring/cssjoy/next?via=https://cssdrawings.com">Next</a>
</nav>
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Bowlby+One&family=Parisienne&family=Zen+Kurenaido&family=Rye&display=swap" rel="stylesheet">
</body>
</html>