generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
492 lines (484 loc) · 29.2 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
<!DOCTYPE html>
<html lang="en">
<!-- The below code is an HTML snippet that sets up the head section of a web page. It includes meta tags
for character set, viewport settings, description, and keywords. It also includes links to favicons
for different devices and a title for the web page. Additionally, it links to a custom stylesheet
for styling the web page. -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Learn of the of the chaos surrounding the Legends of Asgard, told within these thrilling Sagas from old Norse mythology!">
<meta name="keywords"
content="norse, old norse, mythology, nordic, scandinavian, danish, danelaw, legends, asgard, odin, tyr, thor, freyja, freyr">
<!-- Favicons for major devices -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/icons/favicon-16x16.png">
<title>
Legends of Asgard | Welcome
</title>
<!-- Custom Styles -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Load screen animation -->
<aside class="loader loader-active" aria-label="loading" role="progressbar">
</aside>
<!-- Header Section containing Nav, logo, sticky menu-->
<header>
<div id="wrapper" aria-label="navbar">
<a href="index.html#hero" aria-label="go back to the top of the page">
<img src="assets/images/icons/asgard_icon.png" alt="Logo depicting the Norse symbol for Asgard">
</a>
<input type="checkbox" name="nav-toggle" id="nav-toggle">
<label for="nav-toggle" class="text-label"
aria-label="hamburger menu (click this to open the mobile menu and select the gods)">
<i class="fa-solid fa-bars" aria-hidden="true"></i>
<i class="fa-solid fa-bars-staggered" aria-hidden="true"></i>
</label>
<nav aria-label="mobile navigation (choose from the menu)">
<ul id="menu">
<li>
<a href="index.html#hero" aria-label="return to the top of the page">
RETURN TO ASGARD
</a>
</li>
<li>
<a href="index.html#ymir" aria-label="learn more about the god ymir">
YMIR
</a>
</li>
<li>
<a href="index.html#odin" aria-label="learn more about the god odin">
ODIN
</a>
</li>
<li>
<a href="index.html#thor" aria-label="learn more about the god thor">
THOR
</a>
</li>
<li>
<a href="index.html#tyr" aria-label="learn more about the god tyr">
TYR
</a>
</li>
<li>
<a href="index.html#angraboda" aria-label="learn more about the goddess angraboda">
ANGRABODA
</a>
</li>
<li>
<a href="index.html#freyja" aria-label="learn more about the goddess freya">
FREYJA
</a>
</li>
<li>
<a href="index.html#freyr" aria-label="learn more about the god freyr">
FREYR
</a>
</li>
<li>
<a href="index.html#yggdrassil" aria-label="learn more about yggdrassil">
YGGDRASSIL
</a>
</li>
<li>
<a href="index.html#althing" aria-label="learn more about the althing">
ALTHING
</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Animated God Menu for larger devices -->
<aside id="god-menu" class="menu-list" aria-label="god menu (use this to select a god)" role="navigation">
<ul>
<li class="b2t">
<a href="index.html#hero" aria-label="return to the top of the page"><i class="fa-solid fa-circle-up"
aria-hidden="true"></i></a>
</li>
<li class="image-item">
<a href="index.html#ymir" aria-label="the god ymir (click to visit this section)">
<img src="assets/images/gods/ymir2_prof.avif" alt="a smaller image of the god ymir">
<figcaption aria-label="ymir">YMIR</figcaption>
</a>
</li>
<li class="image-item">
<a href="index.html#odin" aria-label="the god odin (click to visit this section)">
<img src="assets/images/gods/odin_prof.avif" alt="a smaller image of the god odin">
<figcaption aria-label="odin">ODIN</figcaption>
</a>
</li>
<li class="image-item">
<a href="index.html#thor" aria-label="the god thor (click to visit this section)">
<img src="assets/images/gods/thor2_prof.avif" alt="a smaller image of the god thor">
<figcaption aria-label="thor">THOR</figcaption>
</a>
</li>
<li class="image-item">
<a href="index.html#tyr" aria-label="the god tyr (click to visit this section)">
<img src="assets/images/gods/tyr_prof.avif" alt="a smaller image of the god tyr">
<figcaption aria-label="tyr">TYR</figcaption>
</a>
</li>
<li class="image-item">
<a href="index.html#angraboda" aria-label="the god angraboda (click to visit this section)">
<img src="assets/images/gods/angraboda_prof.avif" alt="a smaller image of the god angraboda">
<figcaption aria-label="angraboda">ANGRABODA</figcaption>
</a>
</li>
<li class="image-item">
<a href="index.html#freyja" aria-label="the god freya (click to visit this section)">
<img src="assets/images/gods/freyja_prof.avif" alt="a smaller image of the god freyja">
<figcaption aria-label="freya">FREYJA</figcaption>
</a>
</li>
<li class="image-item">
<a href="index.html#freyr" aria-label="the god freyr (click to visit this section)">
<img src="assets/images/gods/freyr_prof.avif" alt="a smaller image of the god freyr">
<figcaption aria-label="freyr">FREYR</figcaption>
</a>
</li>
<li class="image-item">
<a href="index.html#yggdrassil" aria-label="yggdrassil (click to visit this section)">
<img src="assets/images/gods/yggdrassil_prof.avif" alt="a smaller image of yggdrassil">
<figcaption aria-label="yggdrassil">YGGDRASSIL</figcaption>
</a>
</li>
<li class="image-item">
<a href="index.html#althing" aria-label="the althing(click to visit this section)">
<img src="assets/images/gods/althing_prof.avif" alt="a smaller image of an althing">
<figcaption aria-label="althing">ALTHING</figcaption>
</a>
</li>
</ul>
</aside>
<!-- Main Body containing God Menu, Sagas, and Yggdrassil -->
<main>
<section>
<article id="hero" aria-label="hero section">
<div class="hero-title">
<h1>LEGENDS OF ASGARD</h1>
</div>
<div class="hero-blurb">
<h3>Odin gave an eye for wisdom. Be careful you don't lose part of yourself on your quest for wisdom
of your own.</h3>
</div>
</article>
<article id="ymir" aria-label="ymir section">
<h2>YMIR</h2>
<div>
<p>
In the timeless void of Ginnungagap, frost from the icy realm of Niflheim met the searing flames
of Muspellheim. From the melting ice emerged Ymir, a towering figure born of chaos. Ymir slept,
and from his armpits and legs sprang other giants, representing the unbridled forces of nature.
Ymir’s existence was unruly, his presence a threat to the ordered cosmos yet to come.
<br><br>
Nearby, the great cow Audhumla appeared, licking the salty ice. From the ice emerged Búri, the
first of the gods, who begot Borr, father to Odin, Vili, and Ve. Recognizing Ymir’s
uncontrollable power, the three brothers plotted to end his reign. In a titanic battle, they
slew Ymir, whose blood gushed out to drown most of his giant offspring.
<br><br>
From Ymir’s body, the gods created the world: <br>
His skull became the sky, where stars were fixed.
His flesh formed the land.
His blood created the oceans, and his teeth and bones became mountains and cliffs.
His eyelashes were fashioned into the walls of Midgard, the world of humans.
Yet Ymir’s kin, the surviving jötnar, fled to Jötunheim and bore an everlasting grudge, sowing
the seeds of conflict between gods and giants.
</p>
</div>
</article>
<article id="odin" aria-label="odin section">
<h2>ODIN</h2>
<div>
<p>
Odin, chief of the Æsir, was defined by his relentless pursuit of knowledge and power. Early in
his reign, Odin sought the wisdom of Mímir, guardian of the well beneath Yggdrasil. To drink
from its waters, Odin offered one of his eyes. The sacrifice left him with unmatched insight
into the workings of the cosmos, though he was forever marked by the price of knowledge.
<br><br>
Later, Odin sought mastery of runes, magical symbols holding the secrets of creation, destiny,
and power. To attain them, he performed a greater sacrifice: he pierced himself with his spear,
Gungnir, and hung from Yggdrasil’s branches for nine nights and nine days, teetering on the edge
of life and death. As he hung, the tree whispered its secrets, and Odin grasped the runes,
becoming the god of magic, poetry, and prophecy.
<br><br>
But even Odin’s knowledge brought sorrow. Through his visions, he foresaw the events of
Ragnarök, where he would fall to Fenrir, Loki’s monstrous wolf-son. Knowing his fate, Odin
tirelessly prepared for the end, assembling the Einherjar (warriors chosen from the slain) and
plotting strategies to delay the inevitable.
</p>
</div>
</article>
<article id="thor" aria-label="thor section">
<h2>THOR</h2>
<div>
<p>
Thor, son of Odin and the earth goddess Jörð, embodied strength and protection. With his hammer
Mjölnir, Thor waged unceasing war against the jötnar, who threatened the stability of the
realms. Yet Thor was not just a warrior—he was also a protector of Midgard and a symbol of
unyielding determination.
<br><br>
One of Thor’s greatest trials involved the Utgard-Loki, a giant who tricked him through
illusions. Thor was challenged to drink from a horn, unaware it was connected to the sea; his
efforts created the tides. He tried to lift a massive cat, not realizing it was Jörmungandr, the
World Serpent in disguise. Lastly, he wrestled an old crone who was Elli, the personification of
old age, and found her unbeatable. These tests taught Thor humility, though they also
foreshadowed his final battle with Jörmungandr at Ragnarök.
<br><br>
Another famous tale recounts the theft of Mjölnir by Thrym, who demanded Freyja as his bride.
Disguised as Freyja, Thor infiltrated the giant’s hall, and when Mjölnir was brought to bless
the marriage, Thor seized it and unleashed his fury, slaying Thrym and restoring his hammer to
protect the worlds.
</p>
</div>
</article>
<article id="tyr" aria-label="tyr section">
<h2>TYR</h2>
<div>
<p>
Tyr was revered for his unwavering commitment to law and sacrifice. In the age of prophecy, the
gods learned that Loki’s son, Fenrir, would grow to devour Odin during Ragnarök. They sought to
bind the wolf, first with chains of iron, which Fenrir easily shattered. Finally, they
commissioned the dwarves to forge Gleipnir, a silken ribbon imbued with impossible elements: the
roots of a mountain, the beard of a woman, the sound of a cat’s footsteps, and the breath of a
fish.
<br><br>
Fenrir, sensing trickery, agreed to be bound only if one god placed their hand in his mouth.
Tyr, knowing the cost, stepped forward. As the ribbon tightened, Fenrir thrashed and bit off
Tyr’s hand, leaving the god maimed. Though Tyr bore the loss stoically, his act ensured Fenrir’s
restraint until Ragnarök, when the wolf would break free.
<br><br>
Tyr’s sacrifice embodied the ideals of honor and justice, showing that the preservation of order
often demands personal loss.
</p>
</div>
</article>
<article id="angraboda" aria-label="angraboda section">
<h2>ANGRABODA</h2>
<div>
<p>
Angrboða, a fearsome jötunn from Jötunheim, lived apart from the gods, shrouded in mystery and
power. Her union with Loki resulted in three fateful children:
<br><br>
Fenrir, the wolf destined to kill Odin.
Jörmungandr, the serpent who encircles the world and battles Thor.
Hel, the somber ruler of the underworld.
The gods, fearing the prophecy of Ragnarök, acted swiftly. They bound Fenrir with Gleipnir, cast
Jörmungandr into the ocean, and banished Hel to Niflheim, granting her dominion over the dead.
Angrboða, devastated by the loss of her children, became an enduring symbol of grief and
vengeance.
<br><br>
Her prophetic abilities shaped the course of events, and her children fulfilled their roles
during Ragnarök, fulfilling her warnings to the gods.
</p>
</div>
</article>
<article id="freyja" aria-label="freya section">
<h2>FREYJA</h2>
<div>
<p>
Freyja, goddess of love and war, was also a practitioner of seiðr, a form of magic dealing with
fate and transformation. She taught this craft to Odin, making it a central aspect of Norse
mysticism. Freyja’s beauty captivated gods and mortals alike, but it was her necklace,
Brísingamen, that symbolized her power.
<br><br>
When Freyja sought to acquire the necklace, she encountered four dwarves who demanded she spend
a night with each of them in exchange. Freyja agreed, valuing the treasure above all else. The
necklace became her most prized possession, a symbol of her dual nature as a goddess of love and
fierce independence.
<br><br>
As a leader of the Valkyries, Freyja claimed half the warriors who died in battle, welcoming
them to her hall, Fólkvangr. Freyja’s domain over life, death, and magic made her one of the
most complex deities in Norse mythology.
</p>
</div>
</article>
<article id="freyr" aria-label="freyr section">
<h2>FREYR</h2>
<div>
<p>
Freyr, the twin brother of Freyja, was a god of abundance and peace, revered for bringing
prosperity to the land. One day, Freyr spied Gerðr, a beautiful jötunn, and fell deeply in love.
Overcome with desire, he sent his servant Skírnir to woo her. Skírnir used both threats and
promises, eventually convincing Gerðr to marry Freyr.
<br><br>
To secure Gerðr’s hand, Freyr gave away his magical sword, which could fight on its own. This
sacrifice ensured Freyr’s happiness but left him vulnerable. During Ragnarök, Freyr faced the
fire giant Surtr without his weapon and was slain, a symbol of the price of love and peace.
<br><br>
Freyr’s story embodies the balance between passion and responsibility, as well as the sacrifices
required to sustain harmony in a turbulent world.
</p>
</div>
</article>
<article id="yggdrassil" aria-label="yggdrassil section">
<h2>YGGDRASSIL</h2>
<div class="info-tooltip" aria-label="The nine realms info tooltip">
<h3>
The Nine Realms
</h3>
<i class="fa-solid fa-circle-info" aria-label="info tooltip icon, hover for more info"></i>
<figcaption class="info-tooltext">
<strong>Info</strong><br>Hover over each of the following realms to learn more about them.
</figcaption>
</div>
<div class="yggy">
<div class="asgard-tooltip">
<h3>Asgard</h3>
<img src="assets/images/realms/asgard_realm.avif" alt="">
<figcaption class="asgard-tooltext">
<strong>Asgard</strong><br>The celestial home of the Aesir gods, ruled by
Odin.<br><br>It is a realm of divine governance, order, and power, connected to Midgard
by the rainbow bridge, Bifrost.<br><br>Asgard represents strength and wisdom, often
depicted as a majestic, fortified city.
</figcaption>
</div>
<div class="alfheim-tooltip">
<h3>Alfheim</h3>
<img src="assets/images/realms/alfheim_realm.avif" alt="">
<figcaption class="alfheim-tooltext">
<strong>Alfheim</strong><br>The ethereal realm of the light elves, beings of beauty and
magic.<br><br>Known for their wisdom and benevolence, the elves maintain harmony in the
cosmos.<br><br>Alfheim is often depicted as a luminous, verdant paradise filled with
otherworldly light and enchantment.
</figcaption>
</div>
<div class="muspelheim-tooltip">
<h3>Muspelheim</h3>
<img src="assets/images/realms/muspelheim_realm.avif" alt="">
<figcaption class="muspelheim-tooltext">
<strong>Muspelheim</strong><br>The fiery realm ruled by the fire giant Surtr.<br><br>It
is a land of molten lava, flames, and scorching heat, representing destruction and
chaos.<br><br>Muspelheim is destined to play a pivotal role in Ragnarok, the prophesied
end of the world.
</figcaption>
</div>
<div class="midgard-tooltip">
<h3>Midgard</h3>
<img src="assets/images/realms/midguard_realm.avif" alt="">
<figcaption class="midgard-tooltext">
<strong>Midgard</strong><br>The world of humans, located at the center of Yggdrasil, the
great world tree.<br><br>Protected by the gods, it serves as the bridge between the
divine and mortal realms.<br><br>Surrounded by an impassable ocean, it is the heart of
human existence in Norse mythology.
</figcaption>
</div>
<div class="vanaheim-tooltip">
<h3>Vanaheim</h3>
<img src="assets/images/realms/vanaheim_realm.avif" alt="">
<figcaption class="vanaheim-tooltext">
<strong>Vanaheim</strong><br>The home of the Vanir gods, associated with fertility,
nature, and wealth.<br><br>Peaceful and harmonious, it contrasts with Asgard’s warrior
ethos.<br><br>After the Aesir-Vanir war, the two pantheons formed a truce, with Vanaheim
embodying a balance of prosperity and serenity.
</figcaption>
</div>
<div class="nidavellir-tooltip">
<h3>Nidavellir</h3>
<img src="assets/images/realms/nidavellir_realm.avif" alt="">
<figcaption class="nidavellir-tooltext">
<strong>Nidavellir</strong><br>The underground home of the dwarves, master craftsmen and
artisans who forge the gods' most powerful artifacts, including Thor's hammer,
Mjölnir.<br><br>Nidavellir is depicted as a dark, labyrinthine realm filled with glowing
forges, embodying ingenuity, craftsmanship, and the transformative power of fire and
metal.
</figcaption>
</div>
<div class="jotunheimr-tooltip">
<h3>Jotunheimr</h3>
<img src="assets/images/realms/jotunheimr_realm.avif" alt="">
<figcaption class="jotunheimr-tooltext">
<strong>Jotunheimr</strong><br>The untamed land of the giants, or Jotnar, who often
rival the gods.<br><br>It is a harsh, rocky realm with dense forests and icy peaks,
symbolizing chaos and primordial nature. The giants represent ancient forces,
challenging the order of Asgard.
</figcaption>
</div>
<div class="helheim-tooltip">
<h3>Helheim</h3>
<img src="assets/images/realms/hel_realm.avif" alt="">
<figcaption class="helheim-tooltext">
<strong>Helheim</strong><br>The shadowy underworld ruled by Hel, daughter of
Loki.<br><br>It is a realm for those who die of old age or illness, distinct from
Valhalla.<br><br>Helheim is a somber place of rest, embodying the inevitability of death
and the quiet end of mortal life.
</figcaption>
</div>
<div class="niflheim-tooltip">
<h3>Niflheim</h3>
<img src="assets/images/realms/niflheim_realm.avif" alt="">
<figcaption class="niflheim-tooltext">
<strong>Niflheim</strong><br>A primordial realm of ice, fog, and eternal cold.<br><br>It
is one of the first worlds to form in Norse mythology and the source of icy
rivers.<br><br>Overlapping with Helheim, it is a land of death, symbolizing desolation
and the origins of life itself.
</figcaption>
</div>
</div>
</article>
</section>
<aside id="socials" role="navigation">
<div class="social-icons">
<a href="https://x.com" target="_blank" rel="noopener" aria-label="visit our twitter page"><i
class="fa-brands fa-twitter" aria-hidden="true"></i></a>
<a href="https://instagram.com" target="_blank" rel="noopener" aria-label="visit our instagram page"><i
class="fa-brands fa-square-instagram" aria-hidden="true"></i></a>
<a href="https://github.com" target="_blank" rel="noopener" aria-label="visit our github repo"><i
class="fa-brands fa-github" aria-hidden="true"></i></a>
<a href="https://linkedin.com" target="_blank" rel="noopener" aria-label="visit our linkedin page"><i
class="fa-brands fa-linkedin" aria-hidden="true"></i></a>
</div>
</aside>
</main>
<!-- Footer Section Containing contact etc -->
<footer id="althing" aria-label="althing section">
<h2>THE ALTHING!</h2>
<h3>Send us your feedback!</h3>
<div>
<p>The Althing was a gathering of nations within the nordic world, where people could air their opinions,
ask questions and settle disputes.
<br>We welcome you to do the same!</p><br>
<form id="althing-form" action="thankyou.html" method="get" target="_blank" name="althing-form"
aria-label="althing contact form">
<label for="full-name" aria-hidden="true" hidden>Full Name</label>
<input type="text" name="full-name" id="full-name" placeholder="Full Name..."
aria-label="enter your full name this is an optional field">
<label for="email" aria-hidden="true" hidden>Email Address</label>
<input type="email" name="email" id="email" placeholder="Email Address..."
aria-label="enter your email this is a required field)" required>
<label for="query" aria-hidden="true" hidden>Enter your Query</label>
<textarea name="query" id="query" placeholder="Enter your query..." rows="4" wrap="soft"
aria-label="enter your query this is a required field" required></textarea>
<button aria-label="click to submit this form">Gods Hear Me</button>
</form>
</div>
</footer>
<!-- SCRIPTS -->
<!-- FontAwesome Kit -->
<script src="https://kit.fontawesome.com/c480bc9d4e.js" crossorigin="anonymous"></script>
<!-- Custom script to present a loader page until site is fully loaded -->
<script>
window.addEventListener("load", () => {
document.querySelector(".loader").classList.remove("loader-active");
});
</script>
<!-- Custom script to fix issue closing nav menu whenever link is clicked (mobile devices only) -->
<script>
// Get all links in the list
const links = document.querySelectorAll("#wrapper li a");
// Attach click event to each link
links.forEach((link) => {
link.addEventListener("click", function (event) {
const checkbox = document.getElementById("nav-toggle");
// Trigger a click on the checkbox to toggle content
checkbox.click();
});
});
</script>
</body>
</html>