-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
638 lines (543 loc) · 40.5 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
<!DOCTYPE html>
<html>
<head>
<!--Webpage title-->
<title>David Seth Designs</title>
<!--Required meta tags-->
<meta charset="utf-8" />
<!--Bootstrap CSS 4.3 ahhhh man I need to link this up to bootstrap 5 for simpler coding-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--Link CSS style sheet-->
<link rel="stylesheet" type="text/css" href="mainCSS.css">
<!--Link JS???? i did it in the body at the top idk if that is right???-->
</head>
<body>
<!--back to top button-->
<button onclick="topFunction()" id="topButton">Top</button>
<!--JS link to external js page-->
<script src="mainJS.js"></script>
<!--HEADER/NavBar at TOP-->
<header class="container">
<div class="row">
<h1 class="col-sm-6 animate-text">David Seth Designs</h1>
<nav class="col-sm-6">
<a href="#skills"><p>Skills</p></a>
<a href="#gallery-id"><p>Art Gallery</p></a>
<a href="#contact"><p>Contact</p></a>
</nav>
</div>
</header>
<!--Main CONTENT SECTION-->
<main>
<!--Welcome: bkgd img + welcome/under construction message? GOOD NUFF-->
<section class="jumbotron jumbotron-fluid" id="welcome-message">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Who is Dave?</h2>
</div>
</div>
<div class="row">
<p class="col-sm-12">I'm a 2D visual artist who loves animation and story telling. I also have experience with front end web development and graphic design. <br /><br />Welcome to my virtual space!</p>
</div>
</div>
</section>
<!--Skills GOOD NUFF-->
<section class="container" id="skills">
<div class="row">
<h2 class="col-sm-12">Skills</h2>
</div>
<!--Skills Section Place Holder with icons of programs i use and/or cv skill list?-->
<div class="row" id="skill-icons">
<img src="images/programIcons2020/procreate-512.png" alt="procreate illustration app"/>
<img src="images/programIcons2020/photoshop-512.png" alt="adobe photoshop"/>
<img src="images/programIcons2020/illustrator-512.png" alt="adobe illustrator"/>
<img src="images/programIcons2020/afterEffects-512.png" alt="adobe after effects"/>
<img src="images/programIcons2020/mediaEncoder-512.png" alt="adobe media encoder"/>
<img src="images/programIcons2020/clipstudioicon.png" alt="clip studio clip studio paint"/>
</div>
<div class="row" id="skill-icons">
<img src="images/programIcons2020/html-5.png" alt="html 5"/>
<img src="images/programIcons2020/css3alt.png" alt="css"/>
<img src="images/programIcons2020/bootstrap512.png" alt="bootstrap"/>
<img src="images/programIcons2020/javascript.png" alt="java script"/>
<img src="images/programIcons2020/xcode icon 512.png" alt="xcode apple developer environment"/>
</div>
<div class="row">
<h3 class="col-sm-12 center">... and more!</h3>
</div>
<!--
<div>
<figure class="gallery-item"><img src="images/programIcons2020/procreate-512.png" /></figure>
<figure class="gallery-item"><img src="images/programIcons2020/photoshop-512.png" /></figure>
<figure class="gallery-item"><img src="images/programIcons2020/illustrator-512.png" /></figure>
<figure class="gallery-item"><img src="images/programIcons2020/afterEffects-512.png" /></figure>
<figure class="gallery-item"><img src="images/programIcons2020/mediaEncoder-512.png" /></figure>
<figure class="gallery-item"><img src="images/programIcons2020/clipstudioicon.png" /></figure>
<figure class="gallery-item"><img src="images/programIcons2020/html-5.png" /></figure>
<figure class="gallery-item"><img src="images/programIcons2020/css3.png" /></figure>
<figure class="gallery-item"><img src="images/programIcons2020/bootstrap512.png" /></figure>
<figure class="gallery-item"><img src="images/programIcons2020/javascript.png" /></figure>
</div>
-->
</section>
<!-- GALLERY 2.0 HORIZONTAL SCROLL maybe just with class mods and scroll snap-->
<section class="container" id="gallery-id">
<div class="row"> <!--art gallery Section header row-->
<h2 class="col-sm-12 center">Art Gallery</h2>
</div>
<!--basic gallery media element format
<div class="media-element">
<img loading="lazy" src="" alt="" />
<p id="media-element-caption"></p>
</div>
-->
<!--FAN ART-->
<div class="col-sm-12 center"> <!--MAIN FAN ART BUTTON-->
<button id="galleryButton" onclick="showHideFunction('fanArt')">
<img src="images/galleryArt/newerArt/jjk sukuna.jpg" />
<p>FAN ART</p>
</button>
</div>
<div id="fanArt"> <!--SUBCATEGORY FAN ART BUTTONS AND GALLERY-->
<div class="row">
<!--NEWER Fan ART FOLDER GOOD NUFF 1 of 2-->
<div class="col-sm-6 center"> <!--new fanart BUTTON -->
<button id="galleryButton" onclick="showHideFunction('newFanArt')">
<img src="images/galleryArt/2020 - 22 digital/Mako_Kill_La_Kill_figurecolorBG.png" />
<p>newer</p>
</button>
<div id="newFanArt"> <!--newer drop down content-->
<div class="media-scroller with-overscroll snaps-inline snaps--individual">
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Michiko_Malandro_.png" alt="Michiko Malandro fan art of CheHeavens cosplay" />
<p id="media-element-caption">Michiko Malandro based on CheHeaven's Cosplay (Mitchiko & Hatchin)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Mako_Kill_La_Kill_figurecolor.png" alt="Mako from kill la kill with white bg" />
<p id="media-element-caption">Mako Makanshoku (Kill La Kill)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Mako_Kill_La_Kill_figurecolorBG.png" alt="Mako full color and color background" />
<p id="media-element-caption">Mako Makanshoku & Background (Kill La Kill)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Korra.png" alt="Avatar Korra in T pose flex" />
<p id="media-element-caption">Korra's Flex (Avatar)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/crunchyrollHimeFanSubmission.png" alt="Crunchyroll Hime Fan Submission" />
<p id="media-element-caption">Crunchyroll Hime</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/DnD campaign npcs from premade module.PNG" alt="premade dnd module npc character fan art" />
<p id="media-element-caption">The Dragons of Stormwreck Isle NPC Portrait Redesign (Dungeons & Dragons)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/newerArt/jjk sukuna.jpg" alt="Sukuna from JJK anime fan art" />
<p id="media-element-caption">Sukuna (Jujutsu Kaisen)</p>
</div>
<div class="media-element">
<img id="rotate-90" loading="lazy" src="images/galleryArt/newerArt/sakamotoDaysfanart.jpg" alt="sakamoto days fan art" />
<p id="media-element-caption">Cover Redraw Practice (Sakamoto Days)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderHandDrawn/eurydice hades.jpg" alt="Eurydice from Hades game fan art" />
<p id="media-element-caption">Eurydice (Hades)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/newerArt/chainsawman power.jpg" alt="Power from Chainsaw Man anime fan art" />
<p id="media-element-caption">Power (Chainsaw Man)</p>
</div>
<div class="media-element">
<img id="rotate-90" loading="lazy" src="images/galleryArt/olderHandDrawn/samurai champloo png.png" alt="fuu from samurai champloo in comedic mid fall moment" />
<p id="media-element-caption">Fuu (Samurai Champloo)</p>
</div>
<div class="media-element">
<img id="rotate-90" loading="lazy" src="images/galleryArt/olderHandDrawn/gokushufudou noname.png" alt="Tatsu from Way of the House Husband Gokushufudou Manga Fan Art" />
<p id="media-element-caption">Tatsu (Gokushufudou)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/newerArt/jjk goujo.jpg" alt="jjk satoru gojo sensei fan art" />
<p id="media-element-caption">Satoru Gojo Sketch (Jujutsu Kaisen)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderHandDrawn/master roshi dbz noname.png" alt="Master Roshi DBZ fan art" />
<p id="media-element-caption">Roshi/Kame Sensei (DBZ)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderHandDrawn/hikariKuina Alice in borderlands fan art.jpg" alt="Hikari Kuina Alice in borderlands fan art" />
<p id="media-element-caption">Hikari Kuina‍ 🌈 (Alice in Borderlands)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/newerArt/devilish darlings fan art.jpg" alt="Devilish Darlings 2 monster babes fan art" />
<p id="media-element-caption">Nia & Rosette (Devilish Darlings)</p>
</div>
</div>
</div>
</div>
<!--OLDER FAN ART FOLDER GOOD NUFF 2 of 2-->
<div class="col-sm-6 center"> <!--old fanart BUTTON-->
<button id="galleryButton" onclick="showHideFunction('oldFanArt')">
<img src="images/galleryArt/2020 - 22 digital/Goku_Son_Dragon_Ball.png" />
<p>older</p>
</button>
<div id="oldFanArt"> <!--Old Art Drop down content-->
<div class="media-scroller with-overscroll snaps-inline snaps--individual">
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/Rock_Lee.png" alt="Fan Art! Rock Lee's face from Naruto in his drunken fist martial arts pose." />
<p id="media-element-caption">Drunken Fist Rock Lee (Naruto)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Seis_Manos.png" alt="Fan Art! Seis Manos from Netflix scene." />
<p id="media-element-caption">Bar Story Guy (Seis Manos)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/GlibAndTibMaryAndTheWitchesFlower.png" alt="Cats Glib and Tib from Mary and the Witches Flower fan art" />
<p id="media-element-caption">Glib and Tib (Mary and the Witch's Flower)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Goku_Son_Dragon_Ball.png" alt="Fan Art! gokuson bust" />
<p id="media-element-caption">Goku (Dragon Ball)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Your_Lie_In_April.png" alt="Fan Art! your lie in april screen cap redraw." />
<p id="media-element-caption">Kaori Miyazono (Your Lie In April)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderHandDrawn/pokemon warmups.jpg" alt="Warmup page of pokemon sketches" />
<p id="media-element-caption">Warmup Sketches (Pokémon)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/newerArt/rooster fighter fan art.jpg" alt="rooster fighter fan art warm up" />
<p id="media-element-caption">Warmup Sketch (Rooster Fighter)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/newerArt/hellsing ultimate alucard.jpg" alt="quick sketch of alucrad from hellsing ultimate fan art" />
<p id="media-element-caption">Alucard (Hellsing Ultimate)</p>
</div>
<div class="media-element">
<img id="rotate-90" loading="lazy" src="images/galleryArt/olderHandDrawn/sam cannonbusters noname.png" alt="Friendly bipoc android bodyguard named SAM from Cannon Busters" />
<p id="media-element-caption">SAM (Cannon Busters)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderHandDrawn/blue period noname.png" alt="Blue Period Yatora Yaguchi" />
<p id="media-element-caption">Yaguchi (Blue Period)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderHandDrawn/odd taxi.jpg" alt="Odd Taxi fan art" />
<p id="media-element-caption">Odokawa (Odd Taxi)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/May_4.png" alt="Fan Art! My redesign of Chewbacca the Wookie for May the 4th." />
<p id="media-element-caption">May the Fourth Chewbacca (Star Wars)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/Midnight_Gospel.png" alt="Fan Art! Clancy from Midnight Gospel entering the simulator as it malfunctions." />
<p id="media-element-caption">Malfunctioning Simulator (Midnight Gospel)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/fanArtMilesMorales.png" alt="Fan Art! Miles Morales in his Spidey outfit from Into the Spiderverse." />
<p id="media-element-caption">Miles Morales (Into the Spiderverse)</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--MY ART-->
<div class="col-sm-12 center"> <!--MAIN MY ART BUTTON-->
<button id="galleryButton" onclick="showHideFunction('myArt')">
<img src="images/galleryArt/olderArt/Elephant_And_Bird.png" />
<p>MY ART</p>
</button>
</div>
<div id="myArt"> <!--SUBCATEGORY MY ART BUTTONS AND GALLERY-->
<div class="row"> <!--analog and digital folders row -->
<div class="col-sm-6 center"> <!--MY handdrawn only / analog FOLDER GOOD NUFF-->
<button id="galleryButton" onclick="showHideFunction('analogArt')">
<img src="images/galleryArt/painting/board 05.jpg" />
<p>analog</p>
</button>
<div id="analogArt"> <!--my analogf drop down content-->
<div class="media-scroller with-overscroll snaps-inline snaps--individual">
<div class="media-element">
<img loading="lazy" src="images/galleryArt/newerArt/still life.jpg" alt="still life ink sketch of bottles" />
<p id="media-element-caption">Ink Warmup Sketch 1</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/newerArt/still life sketch waiting on food.jpg" alt="still life flower sketch" />
<p id="media-element-caption">Ink Warmup Sketch 2</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderHandDrawn/charcoal portrait drawing.JPG" alt="charcoal portrait" />
<p id="media-element-caption">Charcoal Portrait</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/newerArt/lovebirds.jpg" alt="love birds sketch" />
<p id="media-element-caption">Love Birds</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/painting/board 01.jpg" alt="unpainted skateboard" />
<p id="media-element-caption">Skatedeck Paint Process - Blank Canvas 1/5</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/painting/board 02.jpg" alt="white paint base with sketch lines of shapes layout ideas and paint tape with yellow border" />
<p id="media-element-caption">Underdrawing 2/5</p>
</div>
<div class="media-element">
<img id="rotate-90" loading="lazy" src="images/galleryArt/painting/board 03.jpg" alt="lines in black paint pen on skateboard now depict geomteric shapes, surreal third eye head with organic shapes pouring out" />
<p id="media-element-caption">Linework 3/5</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/painting/board 04.jpg" alt="board fully painted outside drying with blue face red yellow purple organic shapes and black geometric shapes" />
<p id="media-element-caption">Colors and Clear Coat 4/5</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/painting/board 05.jpg" alt="board fully painted displayed on wall with blue face red yellow purple organic shapes and black geometric shapes" />
<p id="media-element-caption">Organic Dreams 5/5</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/painting/board close up bottom.jpg" alt="close up on blue third eye head with colorful organic shapes pouring out gold border" />
<p id="media-element-caption">Organic Dreams Close Up 1/3</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/painting/board close up mid.jpg" alt="close up on mid board with large geometric shapes and more organic spillage gold border" />
<p id="media-element-caption">Organic Dreams Close Up 2/3</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/painting/board close up top.jpg" alt="close up on top of board with smaller geometry, a few organic color blobs and a flower gold border" />
<p id="media-element-caption">Organic Dreams Close Up 3/3</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 center"> <!--MY digital ART FOLDER GOOD NUFF-->
<button id="galleryButton" onclick="showHideFunction('myDigitalArt')">
<img src="images/galleryArt/olderArt/Rose_Afro_2019.jpg" />
<p>digital</p>
</button>
<div id="myDigitalArt"> <!--my digital Art Drop down content-->
<div class="media-scroller with-overscroll snaps-inline snaps--individual">
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/Elephant_And_Bird.png" alt="Digital painting of bird and elephant." />
<p id="media-element-caption">Watching Nature Documentaries</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/stormy waves vector.png" alt="stormy sea waves vector drawing" />
<p id="media-element-caption">Stormy Waves</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/world icon.png" alt="earth globe icon for cafe espresso video" />
<p id="media-element-caption">Earth Icon for Animation</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/money icon.png" alt="silly fake money icon i made for class project cafe espresso video" />
<p id="media-element-caption">Silly Money Icon</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/sandy the cat fullset.jpg" alt="Sandy the cat is a free imessages sticker app avaiable on the appstore" />
<p id="media-element-caption">Sandy the Cat (Free iMessages Sticker App)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/Rose_Afro_2019.jpg" alt="A beautiful fem BIPOC with afro made of roses peering through a magnifying glass whose lens is reflecting another rose." />
<p id="media-element-caption">Discovering Mysteries of Nature (Adobe PSD Challenge)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/ps daily challenge type and texture.jpg" alt="PS Daily Challenge on adobe live to make a poster my say breath in out relax" />
<p id="media-element-caption">Hand-drawn Mandalas, Type and Texture (Adobe PSD Challenge)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/bobRossQuotePSManipulation.png" alt="Bob Ross quote on stock photo background with some photo manipulation" />
<p id="media-element-caption">Inspirational Poster (Adobe PSD Challenge)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/Alien_Adventurer_2.png" alt="alien octopus like entity examinig a shiny rock" />
<p id="media-element-caption">I Like This Shiny Rock</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/Alien_Adventurer.png" alt="BIPOC in scifi clothes, beside a crashed spaceship wrapped in vines and an alien snake that's even larger." />
<p id="media-element-caption">Trade Negotiations</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/DTIYS_Davilorium.png" alt="Character design redraw my draw this in your style challenge of davilorium character" />
<p id="media-element-caption">Character Design Redraw (Davilourium DTIYS Challenge)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/olderArt/cha moe tea commission.png" alt="Moe chamomile tea with chinese character for tea" />
<p id="media-element-caption">Moe Chamomile Tea</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Ashenkittymaid_Commission_.png" alt="Character design commission for clients oc" />
<p id="media-element-caption">Cat Maid Commission (Client OC)</p>
</div>
</div>
</div>
</div>
</div>
<div class="row"> <!--MY animation folder GOOD NUFF-->
<div class="col-sm-12 center">
<button id="galleryButton" onclick="showHideFunction('animation')">
<img src="images/galleryArt/animation/globe gif.gif" />
<p>animation</p>
</button>
<div id="animation"> <!--animation Drop down content-->
<div class="media-scroller with-overscroll snaps-inline snaps--individual">
<div class="media-element">
<video controls>
<source src="images/galleryArt/animation/Walk_Cycle_02_slower_-_mannequin-mp4.mp4" type="video/mp4">
Your browser does not support this video format.
</video>
<p id="media-element-caption">Rough Walk Cycle (Speed Test Animatic)</p>
</div>
<div class="media-element">
<video controls>
<source src="images/galleryArt/animation/cafe espresso movie clip.mp4" type="video/mp4">
Your browser does not support this video format.
</video>
<p id="media-element-caption">Coffee Infographic with Sound (Class Project)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/animation/upper half walk cycle (denji strut reference).gif" alt="rough animatic trying to analyze the Denjis strut from chainsaw man anime" />
<p id="media-element-caption">Denji's Confident Strut (Study)</p>
</div>
<div class="media-element">
<video controls>
<source src="images/galleryArt/animation/single explosion 01.mp4" type="video/mp4">
Your browser does not support this video format.
</video>
<p id="media-element-caption">2DFX Small Explosion Animatic</p>
</div>
<div class="media-element">
<video controls>
<source src="images/galleryArt/animation/dome explosion 01 6s.mp4" type="video/mp4">
Your browser does not support this video format.
</video>
<p id="media-element-caption">2DFX Large Explosion 6fps Animatic</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/animation/globe gif.gif" alt="Animated globe gif" />
<p id="media-element-caption">Globe Animation</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/animation/DSMH_motionfx.gif" alt="Animated Logo DSMH" />
<p id="media-element-caption">Hand-drawn Logo Animation</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Angles_Using_Assets_wide.png" alt="wide angle of old west saloon" />
<p id="media-element-caption">Wider Angle Storybeat (Class Project)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Angles_Using_Assets_long.png" alt="long angle of old west saloon porch deck area with cowboy" />
<p id="media-element-caption">Long Angle Storybeat (Class Project)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Angles_Using_Assets_dutchLow.png" alt="dutch low angle of old west shoot out" />
<p id="media-element-caption">Low Dutch Angle Storybeat (Class Project)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Angles_Using_Assets_close.png" alt="close up storbeat of cowboy talking" />
<p id="media-element-caption">Close Angle Storybeat (Class Project)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/Layout_practice_prep lines.png" alt="bar scene layout with grid lines in place" />
<p id="media-element-caption">Layout Redraw Bar (Class Project)</p>
</div>
<div class="media-element">
<img loading="lazy" src="images/galleryArt/animation/craftEspressoLogo.gif" alt="Vector animation logo Craft Espresso Faux coffee shop" />
<p id="media-element-caption">Animated Vector Logo (Class Project)</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sandyTheCatRow"> <!--Sandy the Cat -->
<div class="row">
<div class="col-sm-12 center"> <!--button-->
<button id="galleryButton2" onclick="showHideFunction('sandyTheCatDropDown')">
<img src="images/galleryArt/2020 - 22 digital/sandy-the-cat.jpg" alt="sandy the cat sticker"/>
</button>
<div id="sandyTheCatDropDown">
<div class="media-scroller with-overscroll snaps-inline snaps--individual">
<div class="media-element2">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/sandy the cat mockup.jpg" alt="sandy the cat mockup" />
</div>
<div class="media-element2">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/sandy-the-cat screengrab2.jpg" alt="sandy the cat applestore screencap" />
</div>
<div class="media-element2">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/sandy-the-cat screengrab1.jpg" alt="sandy the cat applestore screencap" />
</div>
<div class="media-element2">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/sandy-the-cat screengrab3.jpg" alt="sandy the cat applestore screencap" />
</div>
<div class="media-element2">
<img loading="lazy" src="images/galleryArt/2020 - 22 digital/sandy the cat appstore.jpg" alt="sandy the cat applestore screencap" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 center"> <!--embeded appstore link for free stickers-->
<a href="https://apps.apple.com/us/app/sandy-the-cat/id1619515598?itsct=apps_box_badge&itscg=30200" target="_blank" style="display: inline-block; overflow: hidden; border-radius: 13px; width: 250px; height: 83px;"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1650153600" alt="Download on the App Store" style="border-radius: 13px; width: 250px; height: 83px;"></a>
</div>
</div>
</div>
</section>
<!--END OF GALLERY-->
<!--CONTACT Section GOOD NUFF-->
<section class="jumbotron jumbotron-fluid" id="contact">
<div class="container">
<div class="row">
<h2 class="col-12">Contact Me</h2>
</div>
<div class="row">
<p class="col-12">Please direct inquiries to <strong>[email protected]</strong></p>
</div>
</div>
<div class="container">
</div>
</section>
</main>
<!--FOOTER GOOD NUFF-->
<footer class="container">
<div class="row">
<ul class="col-sm-12" id="externalPortfolioLinks">
<li>
<a href="https://www.behance.net/davidsethdesigns" target="_blank">
<img src="images/externalLink/behance-512-green-alt.png" alt="Behance Adobe logo" />
</a>
</li>
<li>
<a href="https://github.com/plantbasedcode" target="_blank">
<img src="images/externalLink/github-512-green.png" alt="Github logo" />
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/davidsethweitzel" target="_blank">
<img src="images/externalLink/iconLinkedIn.png" alt="LinkedIn logo" />
</a>
</li>
</ul>
</div> <!--other website profile icons row-->
<div class="row">
<p class="col-sm-12 center" id="small-text">Lotus blossom stock photo courtesy of Japan-based photographer <a href="https://unsplash.com/@sorasagano" target="_blank">Soras Sogano!</a></p>
</div> <!--credit citations row-->
<div class="row">
<p class="col-4 start" id="x-small-text">© 2011 - 2023 David Seth Designs (DSMH MDD & DSW)</p>
<p class="col-4 center" id="small-text">Version 1.3</p>
<p class="col-4 end" id="x-small-text"></p>
</div> <!--version and copyright-->
</footer>
<!--SPECIAL THANKS to
Temitope Ayodele https://dev.to/temmietope bluring and transparency tricks and ways to write cleaner code
Kevin Powell https://www.youtube.com/@KevinPowell horizontal media scroller with css and scroll snap
Adam Argyle https://web.dev/building-a-media-scroller-component/ horizontal media with css
Ben at codestruct https://allround.io/articles/a-nifty-alternative-to-box-shadows filter drop shadows for organic shapes wooo
alvarotrigo CSS text animation
-->
</body>
</html>