-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
561 lines (509 loc) · 30.3 KB
/
index.html
File metadata and controls
561 lines (509 loc) · 30.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<title>The Kingdom of Ancient Egypt</title>
<meta name="description" content="Explore the ancient Egyptian dynasties and their remarkable artifacts">
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js" defer></script>
<!-- Import the component -->
<!-- <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script> -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body>
<header class="header">
<nav class="nav-container">
<a href="/" aria-label="Home">
<div class="logo">
<img src="./img/logo.svg">
</div>
</a>
<ul class="nav-links">
<li><a href="#timeline">Dynasties</a></li>
<li><a href="#artifacts">Artifacts</a></li>
<li><a href="#contact">FAQs</a></li>
</ul>
</nav>
<!-- Mobile Hamburger Menu Icon -->
<div class="mob-nav" id="hamburger-icon" aria-label="Toggle menu">
<!-- This is the hamburger icon -->
<i class="fa-solid fa-bars hamburger"></i>
</div>
</header>
<main>
<section class="timeline-container" aria-label="Dynasty timeline">
<div class="hero-title">
<h2>Step Into</h2>
<h1> The Kingdom of Ancient Egypt</h1>
</div>
<div class="overview">
<p class="overview-intro">Welcome to our virtual museum, where the past comes to life through
cutting-edge technology and
immersive storytelling.
Explore the fascinating legacies of four iconic Egyptian kings — <a href="#id1">Khafre</a>, <a
href="#id2">Amenemhat III</a>, <a href="#id3">Ramesses II</a>, and
<a href="#id4">Ramesses III</a> — brought to you in stunning 3D detail.
</p>
<p>Each model offers a window into the grandeur of ancient Egypt, showcasing the artistry, power, and
influence of these
legendary pharaohs. With interactive 3D displays, you can examine intricate details, learn about
their
history, and
uncover the stories behind their reigns.</p>
<p>Whether you’re a history enthusiast, a student, or simply curious, this website invites you to embark
on
a journey
through time and experience the wonders of Egypt like never before.</p>
<div class="audio-wrapper">
<p class="audio-title">Museum Podcast EP#1: The History of Ancient Egypt Kings</p>
<audio controls>
<source src="./img/The_Kingdom_of_Ancient_Egypt.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
</div>
<h1 id="timeline">Dynasties of Egypt</h1>
<div class="king-container">
<div class="king-col" style="grid-area: item1;">
<div class="king-timeline">
<h5>Old Kingdom</h5>
<small>(ca. 2686-2181 BC)</small>
</div>
<a href="#id1" class="profile-link">
<article class="king-profile">
<img src="./img/Khafre_thumb.jpg" alt="Representation of Khafre" class="king-img">
<h3>Khafre</h3>
<small>(ca. 2570-2544 BCE, 4th Dynasty)</small>
<img class="click-icon" src="./img/noun-pointer-6608267.svg" alt="click icon">
</article>
</a>
</div>
<div class="king-col" style="grid-area: item2;">
<div class="king-timeline-2">
<h5>Middle Kingdom</h5>
<small>(ca. 2055-1650 BC)</small>
</div>
<a href="#id2" class="profile-link">
<article class="king-profile">
<img src="./img/AmenemhatIII_thumb.jpg" alt="Representation of Khafre" class="king-img">
<h3>Amenemhat III</h3>
<small>(ca. 1860-1814 BCE, 12th Dynasty)</small>
<img class="click-icon" src="./img/noun-pointer-6608267.svg" alt="click icon">
</article>
</a>
</div>
<div class="king-col-2" style="grid-area: item3;">
<div class="king-timeline">
<h5>New Kingdom</h5>
<small>(ca. 1550-1069 BC)</small>
</div>
<div class="two-kings">
<a href="#id3" class="profile-link">
<article class="king-profile">
<img src="./img/RamessesII_thumb.jpg" alt="Representation of Khafre" class="king-img">
<h3>Ramesses II</h3>
<small>(ca. 1292-1189 BCE, 19th Dynasty)</small>
<img class="click-icon" src="./img/noun-pointer-6608267.svg" alt="click icon">
</article>
</a>
<a href="#id4" class="profile-link">
<article class="king-profile">
<img src="./img/RamessesIII_thumb.jpg" alt="Representation of Khafre" class="king-img">
<h3>Ramesses III</h3>
<small>(ca. 1189-1069 BCE, 20th Dynasty)</small>
<img class="click-icon" src="./img/noun-pointer-6608267.svg" alt="click icon">
</article>
</a>
</div>
</div>
</div>
</section>
<section class="artifact-container" aria-labelledby="artifact-title">
<h1 id="artifacts">Artifacts of Egyptian Kingdom</h1>
<!-- Khafre -->
<!-- Khafre -->
<!-- Khafre -->
<div class="artifact-item" id="id1">
<div class="artifact-item-col">
<div class="artifact-item-info">
<h3>Seated Statue of Khafre</h3>
<p class="period">(ca. 2613–2498 BCE, 4th Dynasty)</p>
</div>
<div class="artifact-item-gallery">
<div class="gallery-container" id="gallery-1" tabindex="0">
<img src="./img/model_Khafre_1.png" alt="Seated Statue of Khafre"
class="gallery-image active">
<div class="gallery-controls">
<button class="gallery-dot active" aria-label="View image 1"></button>
<button class="gallery-dot" aria-label="View image 2"></button>
<button class="gallery-dot" aria-label="View image 3"></button>
<button class="gallery-dot" aria-label="View image 4"></button>
</div>
</div>
</div>
<div class="artifact-item-info">
<p class="king-content">
Khafre, a prominent pharaoh of Egypt’s 4th Dynasty during the Old Kingdom (circa 2570 BC),
is renowned for his lasting
contributions to the Giza Plateau, including the second-largest pyramid and the iconic Great
Sphinx, believed to bear
his likeness. His reign symbolizes the architectural and cultural advancements of ancient
Egypt’s pyramid age, as seen
in artifacts like the seated diorite statue. <b>The statue</b> <i
class="fa-regular fa-eye eye-icon"></i> emphasizes Khafre’s divine authority and
enduring legacy,
with
<b>a falcon</b> <i class="fa-regular fa-eye eye-icon"></i> at the back of his head
symbolizing
protection by the god Horus. The use of diorite underscores its symbolic
significance of eternal strength, while the throne’s intricate carvings, including <b>the
Sema Tawy symbol</b> <i class="fa-regular fa-eye eye-icon"></i> of lotus and
papyrus plants, represent the unification of Upper and Lower Egypt.
</p>
</div>
</div>
<!-- 3D Model Viewer -->
<model-viewer src="./img/01_Khafre.glb" alt="A 3D model of Seated Statue of Khafre" ar
ar-modes="webxr scene-viewer quick-look" shadow-intensity="2" touch-action="pan-y" exposure="3"
camera-controls skybox-image="./img/skybox_sand.jpg" skybox-height="2m"
poster="./img/loading_poster.gif">
<button class="Hotspot" slot="hotspot-k1"
data-position="0.06063405059009419m 1.616801240911001m -0.4158848257500747m"
data-normal="0.8135079862667562m 0.5006779161255588m -0.2958485771207551m"
data-visibility-attribute="visible">
<div class="annotation">The Falcon</div>
</button>
<button class="Hotspot" slot="hotspot-k2"
data-position="0.29673525636429776m 0.8379000313574652m -0.3935067173489495m"
data-normal="0.9987751672891342m -0.031129037753544322m 0.0384596959829427m"
data-visibility-attribute="visible">
<div class="annotation">The Statue's Material</div>
</button>
<button class="Hotspot" slot="hotspot-k3"
data-position="-0.28454107916519256m 0.4037929806625653m -0.32059876831554623m"
data-normal="-0.9900229293716885m -0.10845417068853944m -0.08995716857795141m"
data-visibility-attribute="visible">
<div class="annotation">The Throne</div>
</button>
<button slot="ar-button" id="ar-button" class="view-btn">
<i class="fa-solid fa-street-view"></i> View in your space
</button>
</model-viewer>
<!-- End of 3D Model Viewer -->
<div class="detail-info-left">
<h5 class="about-model">About the model</h5>
<ul>
<li>Dimensions: Approximately 1.68 meters tall (~5.5 feet)</li>
<li>Provenance: Discovered in the Valley Temple of Khafre, Giza Plateau.</li>
<li>Material: Diorite (a durable and prestigious stone symbolizing permanence).</li>
</ul>
</div>
<div class="detail-info-right">
<ul>
<li>Current Location: Egyptian Museum, Cairo.</li>
<li>Notes: This iconic statue portrays Khafre seated on a throne with the falcon god Horus
protecting him from behind. The craftsmanship reflects the artistry and divine symbolism
of the Old Kingdom.</li>
</ul>
</div>
</div>
<!-- Amenemhat III -->
<!-- Amenemhat III -->
<!-- Amenemhat III -->
<div class="artifact-item" id="id2">
<div class="artifact-item-col">
<div class="artifact-item-info">
<h3>Granite Head of Amenemhat III</h3>
<p class="period">(ca. 1991-1803 BCE, 12th Dynasty)</p>
</div>
<div class="artifact-item-gallery">
<div class="gallery-container" id="gallery-2">
<img src="./img/model_AmenemhatIII_1.png" alt="Granite head of Amenemhat III"
class="gallery-image active">
<div class="gallery-controls">
<button class="gallery-dot active" aria-label="View image 1"></button>
<button class="gallery-dot" aria-label="View image 2"></button>
<button class="gallery-dot" aria-label="View image 3"></button>
<button class="gallery-dot" aria-label="View image 4"></button>
</div>
</div>
</div>
<div class="artifact-item-info">
<p class="king-content">Amenemhat III was a pharaoh of the 12th Dynasty who ruled Egypt from
1860 to 1814 BC. A granite head from <b>a colossal
statue</b> <i class="fa-regular fa-eye eye-icon"></i> of the king wearing the nemes
headdress and
uraeus was found in the Temple of Bastet
at Bubastis. <b>The prominent ears</b> <i class="fa-regular fa-eye eye-icon"></i> of the
Granite Head
of Amenemhat III, which symbolize the
pharaoh’s attentiveness to his people. Also, Amenemhat III is known for his ambitious
building
projects, including his pyramid complex in general and the development of the Fayum Oasis.
His reign is considered a
golden age of the Middle Kingdom.</p>
</div>
</div>
<!-- 3D Model Viewer -->
<!-- <model-viewer src="./img/02_Amenemhat_III.glb" alt="A 3D model of Granite Head of Amenemhat III" ar
auto-rotate shadow-intensity="3" touch-action="pan-y" exposure="0.6" camera-controls
poster="./img/poster_AmenemhatIII.jpg">
<button slot="hotspot-A1" data-position="0m 0.2841127316098108m 0.08512106822826737m"
data-normal="0.2795998205839675m 0.6292598565969714m 0.7251592743701016m"
data-visibility-attribute="visible">
<i class="fa-regular fa-eye"></i> The Royal Headdress
</button>
<button slot="hotspot-A2"
data-position="0.07068722847843578m 0.1753458094041926m 0.031544808683981795m"
data-normal="0.5367368957197188m -0.4972475605105368m 0.6816585423358824m"
data-visibility-attribute="visible">
<i class="fa-regular fa-eye"></i> The Prominent Ears
</button>
<button slot="ar-button" id="ar-button" class="view-btn">
<i class="fa-solid fa-street-view"></i> View in your space
</button>
</model-viewer> -->
<model-viewer src="./img/02_Amenemhat_III.glb" alt="A 3D model of Granite Head of Amenemhat III" ar
ar-modes="webxr scene-viewer quick-look" camera-controls shadow-intensity="3" exposure="0.75"
touch-action="pan-y" auto-rotate poster="./img/loading_poster.gif">
<button class="Hotspot" slot="hotspot-amen1"
data-position="0m 0.2841127316098108m 0.08512106822826737m"
data-normal="0.2795998205839675m 0.6292598565969714m 0.7251592743701016m"
data-visibility-attribute="visible">
<div class="annotation">The Royal Headdress</div>
</button>
<button class="Hotspot" slot="hotspot-amen2"
data-position="0.06782491622119635m 0.1751771198271299m 0.033176995912532536m"
data-normal="0.3929088519731807m 0.13763000019600444m 0.9092197848084724m"
data-visibility-attribute="visible">
<div class="annotation">The Prominent Ears</div>
</button>
<button slot="ar-button" id="ar-button" class="view-btn">
<i class="fa-solid fa-street-view"></i> View in your space
</button>
</model-viewer>
<!-- End of 3D Model Viewer -->
<div class="detail-info-left">
<h5 class="about-model">About the model</h5>
<ul>
<li>Dimensions: Fragment; the original colossal statue is estimated to have been over 4 meters
tall (~6.5 feet).</li>
<li>Provenance: Found in the Temple of Bastet at Bubastis.</li>
<li>Material: Granite.</li>
</ul>
</div>
<div class="detail-info-right">
<ul>
<li>Current Location: British Museum, London.</li>
<li>Notes: This head features the nemes headdress and uraeus, emphasizing Amenemhat III’s royal
authority. His statues are
celebrated for their realism, reflecting the artistic tendencies of the Middle Kingdom.
</li>
</ul>
</div>
</div>
<!-- Ramesses II -->
<!-- Ramesses II -->
<!-- Ramesses II -->
<div class="artifact-item" id="id3">
<div class="artifact-item-col">
<div class="artifact-item-info">
<h3>Colossal Statue of Ramesses II</h3>
<p class="period">(ca. 1292-1189 BCE, 19th Dynasty)</p>
</div>
<div class="artifact-item-gallery">
<div class="gallery-container" id="gallery-3">
<img src="./img/model_RamessesII_1.png" alt="Colossal Statue of Ramesses II"
class="gallery-image active">
<div class="gallery-controls">
<button class="gallery-dot active" aria-label="View image 1"></button>
<button class="gallery-dot" aria-label="View image 2"></button>
<button class="gallery-dot" aria-label="View image 3"></button>
<button class="gallery-dot" aria-label="View image 4"></button>
<button class="gallery-dot" aria-label="View image 5"></button>
</div>
</div>
</div>
<div class="artifact-item-info">
<p class="king-content">Ramesses II, famously known as Ramesses the Great, reigned as pharaoh
during Egypt’s 19th Dynasty from 1279 to 1213 BCE.
Celebrated for his exceptional military prowess and diplomatic acumen, he fortified Egypt’s
borders and secured its
influence through decisive campaigns and alliances. Among his notable achievements was the
signing of the historic peace
treaty with the Hittites, one of the earliest recorded treaties in history.
</p>
<p class="king-content">
Symbolizing his divine authority and role as the unifier of Egypt, Ramesses II often adorned
the <b>double crown</b> <i class="fa-regular fa-eye eye-icon"></i>,
representing the unification of Upper and Lower Egypt, and the iconic <b>false beard</b> <i
class="fa-regular fa-eye eye-icon"></i>, signifying his connection to the
gods. His reign marked an era of prosperity, innovation, and a lasting legacy in Egypt’s
illustrious New Kingdom.</p>
</div>
</div>
<!-- 3D Model Viewer -->
<model-viewer src="./img/03_Ramesses_II.glb" alt="A 3D model of Colossal Statue of Ramesses II" ar
auto-rotate shadow-intensity="2" touch-action="pan-y" exposure="0.5" camera-controls
poster="./img/loading_poster.gif">
<button class="Hotspot" slot="hotspot-RI01"
data-position="0.9843638925630191m 4.906503220746487m 0.21684025080334202m"
data-normal="0.9959495985918398m -0.017491598853206256m 0.08819547059975104m"
data-visibility-attribute="visible">
<div class="annotation">The Double Crown</div>
</button>
<button class="Hotspot" slot="hotspot-RI02"
data-position="0.3m 2.1448242427422555m 1.3469201326509381m"
data-normal="-0.5599126180755201m 0.19142522613293322m 0.8061353750579192m"
data-visibility-attribute="visible">
<div class="annotation">The False Beard</div>
</button>
<button slot="ar-button" id="ar-button" class="view-btn">
<i class="fa-solid fa-street-view"></i> View in your space
</button>
</model-viewer>
<!-- End of 3D Model Viewer -->
<div class="detail-info-left">
<h5 class="about-model">About the model</h5>
<ul>
<li>Dimensions: Approximately 11 meters tall (~36 feet).</li>
<li>Provenance: Originally stood at the Great Temple of Ptah in Memphis.</li>
<li>Material: Red granite.</li>
</ul>
</div>
<div class="detail-info-right">
<ul>
<li>Current Location: Grand Egyptian Museum (Giza). Previously displayed in Ramses Square,
Cairo.</li>
<li>Notes: This towering statue exemplifies Ramesses II’s grandeur and is one of the many
colossal representations of him found
throughout Egypt. Its relocation highlights its significance as a cultural artifact.</li>
</ul>
</div>
</div>
<!-- Ramesses III -->
<!-- Ramesses III -->
<!-- Ramesses III -->
<div class="artifact-item" id="id4">
<div class="artifact-item-col">
<div class="artifact-item-info">
<h3>Standing Statue of Ramesses III</h3>
<p class="period">(ca. 1189-1069 BCE, 20th Dynasty)</p>
</div>
<div class="artifact-item-gallery">
<div class="gallery-container" id="gallery-4">
<img src="./img/model_RamessesIII_1.png" alt="Standing Statue of Ramesses III"
class="gallery-image active">
<div class="gallery-controls">
<button class="gallery-dot active" aria-label="View image 1"></button>
<button class="gallery-dot" aria-label="View image 2"></button>
<button class="gallery-dot" aria-label="View image 3"></button>
<button class="gallery-dot" aria-label="View image 4"></button>
<button class="gallery-dot" aria-label="View image 5"></button>
</div>
</div>
</div>
<div class="artifact-item-info">
<p class="king-content">amesses III, a prominent pharaoh of Egypt’s 20th Dynasty, ruled from
1186 to 1155 BCE. He is renowned for his decisive
victories over the Sea Peoples, a nomadic confederation whose invasions threatened the
stability of ancient
civilizations. Through his military prowess, Ramesses III safeguarded Egypt during a time of
significant upheaval,
preserving its territorial integrity and cultural heritage.</p>
<p class="king-content">Symbolizing divine protection and sovereignty, the Uraeus—a rearing
cobra—adorned his <b>headdress</b> <i class="fa-regular fa-eye eye-icon"></i>, affirming his
role as
the chosen ruler of the gods. Additionally, <b>the traditional pleated kilt</b> <i
class="fa-regular fa-eye eye-icon"></i> worn by the pharaoh
was often inscribed with
symbols of kingship, underscoring his authority and connection to Egypt’s enduring
traditions. Despite challenges in the
later years of his rule, Ramesses III is remembered as Egypt’s last great pharaoh, embodying
the resilience and grandeur
of the New Kingdom.</p>
</div>
</div>
<!-- 3D Model Viewer -->
<model-viewer src="./img/04_Ramesses_III.glb" alt="A 3D model of Standing Statue of Ramesses III" ar
auto-rotate shadow-intensity="3" touch-action="pan-y" exposure="0.75"
skybox-image="./img/skybox_sand.jpg" skybox-height="2m" camera-controls
poster="./img/loading_poster.gif">
<button class="Hotspot" slot="hotspot-RII01" data-position="0.09m 2.945m -0.17934568476444035m"
data-normal="-0.9927213700212781m 0.009288925390463724m 0.12007496561801334m"
data-visibility-attribute="visible">
<div class="annotation">The Uraeus on the Headdress</div>
</button>
<button class="Hotspot" slot="hotspot-RII02"
data-position="0.37572689347225974m 1.4422418188705755m 0.5179749827148861m"
data-normal="0.9137584118463173m 0.22698703199076972m 0.3369309307382112m"
data-visibility-attribute="visible">
<div class="annotation">The Traditional Pleated Kilt</div>
</button>
<button slot="ar-button" id="ar-button" class="view-btn">
<i class="fa-solid fa-street-view"></i> View in your space
</button>
</model-viewer>
<!-- End of 3D Model Viewer -->
<div class="detail-info-left">
<h5 class="about-model">About the model</h5>
<ul>
<li>Dimensions: Approximately 3 meters tall (~10 feet).</li>
<li>Provenance: Medinet Habu (mortuary temple).</li>
<li>Material: Sandstone.</li>
</ul>
</div>
<div class="detail-info-right">
<ul>
<li>Current Location: Luxor Museum, Luxor.</li>
<li>Notes: This statue depicts Ramesses III in a traditional standing pose, emphasizing his role
as a warrior and protector. It is
part of the impressive collection of artifacts from his mortuary temple, which is richly
adorned with inscriptions and
reliefs.</li>
</ul>
</div>
</div>
</section>
<section class="disclaimer-container">
<div>
</div>
</section>
</main>
<footer>
<div class="footer-logo">
<img src="./img/logo_w.svg" alt="Logo">
<span>The Kingdom of Ancient Egypt</span>
</div>
<div class="disclaimer">
<h5>Disclaimer</h5>
<p>This website is created for educational and experiential purposes only. The information presented
is
partially generated
by AI and aims to showcase the integration of technology in web design and historical storytelling.
</p>
</div>
<div class="disclaimer">
<h5>Attributions</h5>
<p>The “Pointer” icon is designed by Kosong Tujuh from <a
href="https://thenounproject.com/browse/icons/term/pointer/" target="_blank"
title="Pointer Icons">Noun Project</a> and is licensed under CC BY 3.0.
</p>
</div>
</footer>
<script src="./js/script.js" defer></script>
<script>
const audio = document.getElementById('custom-audio');
const playBtn = document.querySelector('.play-btn');
const pauseBtn = document.querySelector('.pause-btn');
playBtn.addEventListener('click', () => {
audio.play();
});
pauseBtn.addEventListener('click', () => {
audio.pause();
});
</script>
</body>
</html>