-
Notifications
You must be signed in to change notification settings - Fork 0
/
play.html
640 lines (619 loc) · 36.9 KB
/
play.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="PT Elliott is an artist, engineer, and developer in Raleigh, NC.">
<meta name="author" content="PT Elliott">
<meta name="Copyright" content="Copyright PT Elliott 2021">
<title>Portfolio</title>
<link rel="icon" href="images/green/myLogoP-20.png">
<!-- Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Style -->
<link href="css/cover.css" rel="stylesheet">
<!--- JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="js/functions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KJCMTKE3TT"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-KJCMTKE3TT');
</script>
</head>
<body class="body-play">
<div class="container">
<header class="container-fluid masthead cover" style="padding:0">
<div class="inner">
<h3 class="masthead-brand align ml3"> PT Elliott</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link" href="index.html">Home</a>
<a class="nav-link" href="work.html">Work</a>
<a class="nav-link active" href="#">Play</a>
<a class="nav-link" href="resume.html">About</a>
<a class="nav-link" href="contact.html">Contact</a>
</nav>
</div>
</header>
<div class="container">
<section class="row top-buffer-2 bottom-buffer-1">
<div class="col-12" style="text-align:center">
<h3>Art, Nature, Engineering, & Making shit up as I go</h3>
<p>The juxtoposition and combination of these interests relaxes me, opens my mind to new possibilities, and keeps me sane.</p>
</div>
</section>
<section class="row top-buffer-4">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="card text-black card-play mb-3">
<div class="card-body" style="text-align:center">
<p2>
I have created many things with 3D printing. However, below I am showcasing things that I both designed and printed.
Some simple, others more complex. All however, were created to solve a problem.<br><br>
I print mostly in PLA, for the best results with my printer; which is a Monoprice Select Mini v2.
</p2>
</div>
</div>
</div>
<div class="col-md-2"></div>
</section>
<section class="row">
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4 flex-fill">
<div class="card text-black card-play mb-3" style="max-width: 18rem;">
<div class="card-body">
<h4 class="card-title">Backup Camera</h4>
<p2 class="card-text">Designed a magnetic camera enclosure to provide a zero-drill solution for ease of installation.</p2><br><br>
<button type="button" class="btn btn-card" data-toggle="modal" data-target="#modalOne">
I made this
</button>
<!-- Modal One -->
<div class="modal" id="modalOne">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Backup Camera</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p1 class="card-text">
I have a relatively older vehicle (2007 Toyota Highlander Hybrid), which did not come equipped with a backup camera. I prefer buying used vehicles, so it's
a good thing that I have no issue doing small modifications as needed.<br><br>
In this case, there was not an easy means of egress to wire the camera into the ideal spot over the liscence plate without drilling, so I looked
for alternative means of completing the installation. Looking at the rear of my vehicle, my options for easily mounting a camera along it's center line
were limited to the liscence plate (which was out), around the trailer hitch, or above the rear windshield. After determining that it was easy to route
wiring from inside near the spare tire, I took that approach.<br><br>
In this location, there were a few options for attachment. I could have mounted it inside the hitch, next-to it, or above it. The higher the camera could
be off the ground, the better visibility I would have, so I aimed to mount it above the hitch (with the added benefit of not getting in the way of
actually using the hitch).
</p1><br><br>
<div id="carouselOne" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselOne" data-slide-to="0" class="active"></li>
<li data-target="#carouselOne" data-slide-to="1"></li>
<li data-target="#carouselOne" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="content/3D/backup cam/camera_enclosure_render2.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/3D/backup cam/20200716_182354.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/3D/backup cam/20200719_183617.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselOne" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselOne" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Modal close -->
<div class="modal-footer">
<button type="button" class="btn btn-card" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 flex-fill">
<img src="images/3D Work.svg" width="100%" style="max-width:500px;" class="masthead-brand">
</div>
<div class="col-md-4 flex-fill">
<div class="card text-black card-play mb-3" style="max-width: 18rem;">
<div class="card-body">
<h4 class="card-title">Printer Mods</h4>
<p2 class="card-text">Designed and built a more accessible LCD and control knob enclosure for my printer.</p2><br><br><br>
<button type="button" class="btn btn-card" data-toggle="modal" data-target="#modalTwo">
I made this
</button>
<!-- Modal Two -->
<div class="modal" id="modalTwo">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Printer Mods</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p1 class="card-text">
My printer, a Monoprice Mini v2, has been running on and off since 2017, and has been an absolute workhorse for me.<br><br>
In it's current home, about desk-height near my WFH setup, it sits at a poor angle for me to keep an eye on its screen. So, I designed a new
enclosure for the screen to provide better usability for my use-case. An additional benefit was getting to move the control knob
to a more convenient place in which I would be less likely to disrupt the print bed if I need to make adjustments.<br><br>
Rougly measuring the angle from my line-of-sight at my workstation (about -30 deg), I angled the new screen enclosure so it would face
towards me approximately perpendicular to my sight.
</p1><br><br>
<div id="carouselTwo" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselTwo" data-slide-to="0" class="active"></li>
<li data-target="#carouselTwo" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="content/3D/mods/Screen Shot 2021-11-30 at 1.22.56 PM.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/3D/mods/153652.jpg" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselTwo" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselTwo" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Modal close -->
<div class="modal-footer">
<button type="button" class="btn btn-card" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4 flex-fill">
<div class="card text-black card-play mb-3" style="max-width: 18rem;">
<div class="card-body">
<h4 class="card-title">Drain Extension</h4>
<p2 class="card-text">
Needed to design and fabricate a fitting for our shower to raise the level of the drain to sit flush with the tile.
</p2><br><br>
<button type="button" class="btn btn-card" data-toggle="modal" data-target="#modalThree">
I made this
</button>
<!-- Modal Three -->
<div class="modal" id="modalThree">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Drain Extension</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p1 class="card-text">
During the remodel of our master bath, we needed to raise the level of the floor drain to sit flush with the tile floor.
In order to make this work, I desgined a fitting to attach where the existing drain ented and raise up about 2 cm.
<br><br>
I printed, prepared, and coated the part in epoxy resin to seal, then installed so we could tile around.
<br><br>
Pictures to come, work is still in progress.
</p1><br><br>
</div>
<!-- Modal close -->
<div class="modal-footer">
<button type="button" class="btn btn-card" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 flex-fill">
<div class="card text-black card-play mb-3" style="max-width: 18rem;">
<div class="card-body">
<h4 class="card-title">Settlers Game</h4>
<p2 class="card-text">Snap-tegether variation on Settlers of Catan that could be easily played in moving vehicles.</p2><br><br>
<button type="button" class="btn btn-card" data-toggle="modal" data-target="#modalFour">
I made this
</button>
<!-- Modal Four -->
<div class="modal" id="modalFour">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Settlers Game</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p1 class="card-text">
These are the 3D models of the printed board game that can ideally be played anywhere. In 2018, my wife and myself were at an airport and
wished we could play Settlers of Catan; to which we had just been introduced on our recent trip to Chicago. However, even if we had a copy at the time,
it would not have been feasible to set it up to play at the terminal, nor would it have been smart to play while flying. <br><br>
Initially it was in my vision to create a version that was fully playable, with snap together parts, that would not be bothered by wind, water, location, or occasional movement.
<br><br>
Work is still in progress. Pictures of the initial 3D models here, but more photos of the final product after considerable prototyping still to come.
</p1><br><br>
<div id="carouselFour" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselFour" data-slide-to="0" class="active"></li>
<li data-target="#carouselFour" data-slide-to="1"></li>
<li data-target="#carouselFour" data-slide-to="2"></li>
<li data-target="#carouselFour" data-slide-to="3"></li>
<li data-target="#carouselFour" data-slide-to="4"></li>
<li data-target="#carouselFour" data-slide-to="5"></li>
<li data-target="#carouselFour" data-slide-to="6"></li>
<li data-target="#carouselFour" data-slide-to="7"></li>
<li data-target="#carouselFour" data-slide-to="8"></li>
<li data-target="#carouselFour" data-slide-to="9"></li>
<li data-target="#carouselFour" data-slide-to="10"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="content/Art/Settlers/pieces-1_orig.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Settlers/pieces-2_orig.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Settlers/towns-revs_orig.png" alt="Fourth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Settlers/towers-revs_orig.png" alt="Fifth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Settlers/rail_orig.png" alt="Sixth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Settlers/ore_orig.png" alt="Seventh slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Settlers/brick_orig.png" alt="Eighth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Settlers/sheep_orig.png" alt="Nineth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Settlers/wood_orig.png" alt="Tenth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Settlers/grain_orig.png" alt="Eleventh slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Settlers/wasteland_orig.png" alt="Twelfth slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselFour" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselFour" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Modal close -->
<div class="modal-footer">
<button type="button" class="btn btn-card" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 flex-fill">
<div class="card text-black card-play mb-3" style="max-width: 18rem;">
<div class="card-body">
<h4 class="card-title">Shelf Brackets</h4>
<p2 class="card-text">Whipped up a couple of brackets to create a shelf nect to our front door.<br>Simple, but functional.</p2><br><br>
<button type="button" class="btn btn-secondary"><a href="#">I made this</a></button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="row top-buffer-4">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="card text-black card-play mb-3">
<div class="card-body" style="text-align:center">
<p2>
When I have the time and energy, I love to experiment with food. Here is an example of one that I made up as I was going:
<br><br>
<button type="button" class="btn btn-card"><a href="/more.html">More creations</a></button>
</p2>
</div>
</div>
</div>
<div class="col-md-2"></div>
</section>
<section class="row top-buffer-4">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="card text-black card-play mb-3">
<div class="card-body" style="text-align:center">
<p2>
In addition to three-dimensional making, I also enjoy letting my imagination run wild through other mediums.
<br><br>
I have, and always will, love art.
</p2>
</div>
</div>
</div>
<div class="col-md-2"></div>
</section>
<section class="row">
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4 flex-fill">
<div class="card text-black card-play mb-3" style="max-width: 18rem;">
<div class="card-body">
<h4 class="card-title">Concept Art</h4>
<p2 class="card-text">Created concept art for a fantasy novel I want to write. I am in the process of writing/drawing out the backstory.</p2><br><br>
<button type="button" class="btn btn-card" data-toggle="modal" data-target="#modalfive">
I made this
</button>
<!-- Modal Five -->
<div class="modal" id="modalfive">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Fantastical Science</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p1 class="card-text">
The general setting here is a set of three Earths, where each has an intelligent dominant species analogous to humans. The
magic system is based around physics and organic chemistry; related to the manipulation of solid and liquid matter.
<br><br>
Plot premise:<br>
Roughly, the idea here was that alternative earths are found in order to provide the humans of
Earth Prime non-renewable resources that we otherwise may have already depleted. In the process, discovering magical capabilities on these
worlds which does not and cannot exist in the world as we know it.
<br><br>
The plot of my story is set within the third earth discovered, and will detail the journey of a family of human colonists on a strange new world.
<br><br>
<ul>
<li>Pictured here are some of my sketches, these are rather incomplete drafts of how I think some of the caracters will look.
I am a very visual person, and I want to be able to picture what I write about before I start writing. <br>
<li>The Tree-folk pictured inhabit the third earth. Inspired by primates and humans, but more the size and build of a halfling.<br>
<li>Humans are as we expect them to be. the side-by-side image shows what I had towards the end of 2021 vs the beginning... it's not
perfect, but my drawing skills are improving!<br>
</ul>
</p1><br><br>
<div id="carouselFive" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselFive" data-slide-to="0" class="active"></li>
<li data-target="#carouselFive" data-slide-to="1"></li>
<li data-target="#carouselFive" data-slide-to="2"></li>
<li data-target="#carouselFive" data-slide-to="3"></li>
<li data-target="#carouselFive" data-slide-to="4"></li>
<li data-target="#carouselFive" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="content/Art/BookArt/book-3-male_orig.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/BookArt/book-3-male-3_orig.png" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/BookArt/book-3-human-male_orig.png" alt="Fifth slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselFive" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselFive" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Modal close -->
<div class="modal-footer">
<button type="button" class="btn btn-card" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 flex-fill">
<div class="card text-black card-play mb-3" style="max-width: 18rem;">
<div class="card-body">
<h4 class="card-title">Logos</h4>
<p2 class="card-text">These are a few examples of logos that I have designed for others.</p2><br><br><br>
<button type="button" class="btn btn-card" data-toggle="modal" data-target="#modalSix">
I made this
</button>
<!-- Modal Six -->
<div class="modal" id="modalSix">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Vector design</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p1 class="card-text">
Working with vector graphics is fairly new to me, started sometime in 2019 for friends that were planning to get married this year.
(except COVID didn't like that, so here's to 2021!)<br><br>
I also made the logo that I use on this site, and various other graphics and icons used throughout.
</p1><br><br>
<div id="carouselSix" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselSix" data-slide-to="0" class="active"></li>
<li data-target="#carouselSix" data-slide-to="1"></li>
<li data-target="#carouselSix" data-slide-to="2"></li>
<li data-target="#carouselSix" data-slide-to="3"></li>
<li data-target="#carouselSix" data-slide-to="4"></li>
<li data-target="#carouselSix" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="content/Art/Logos/ferraragoose-wings_orig.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Logos/drivinggoose_orig.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Logos/linecar_orig.png" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/3D Work.svg" style="background-color:#d3d3d3" alt="Fourth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/rc mow rc.svg" style="background-color:#013220" alt="Fifth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/rc mow.svg" style="background-color:#013220" alt="Sixth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/green/myLogoP-20.png" style="background-color:#d3d3d3" alt="Seventh slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSix" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselSix" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Modal close -->
<div class="modal-footer">
<button type="button" class="btn btn-card" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 flex-fill">
<div class="card text-black card-play mb-3" style="max-width: 18rem;">
<div class="card-body">
<h4 class="card-title">Coloring Pages</h4>
<p2 class="card-text">
I created these for friends who had kids to keep busy during quarantine. <br><br>
</p2><br><br>
<button type="button" class="btn btn-card" data-toggle="modal" data-target="#modalSeven">
I made this
</button>
<!-- Modal Seven -->
<div class="modal" id="modalSeven">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Imaginary Creatures</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p1 class="card-text">
The criteria for the kids was to choose any 3 creatures, imaginary or not, for me to combine for them.
<br><br>
Pictured here is:
<ul>
<li>The Flight-Saber (Saber-tooth Tiger / Kitty / Bat)
<li>The Flying Girafficorn (Giraffe / Unicorn / Pegasus)
</ul><br><br>
These two were a hit, and now I have a backlog of requests. More here later.
</p1><br><br><br><br>
<div id="carouselSeven" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselSeven" data-slide-to="0" class="active"></li>
<li data-target="#carouselSeven" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="content/Art/Coloring/flightsaber_orig.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="content/Art/Coloring/flying girafficorn2.png" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSeven" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselSeven" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Modal close -->
<div class="modal-footer">
<button type="button" class="btn btn-card" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</section>
</div>
<footer class="row mastfoot mt-auto">
<div class="inner">
<p>Designed and built by <a target="_blank" rel="noopener noreferrer" style="text-decoration:underline;" href="https://github.com/NarcolepticEngineer">PT Elliott</a> © 2024</p>
</div>
</footer>
</div>
</body>
</html>