generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
358 lines (355 loc) · 21.8 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
<!DOCTYPE html>
<html lang="en">
<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>
<!-- Header Section containing Nav, logo, sticky menu-->
<header>
<div id="wrapper">
<a href="index.html#hero">
<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">
<i class="fa-solid fa-bars"></i>
<i class="fa-solid fa-bars-staggered"></i>
</label>
<nav>
<ul id="menu">
<li>
<a href="index.html#hero">
RETURN TO ASGARD
</a>
</li>
<li>
<a href="index.html#ymir">
YMIR
</a>
</li>
<li>
<a href="index.html#odin">
ODIN
</a>
</li>
<li>
<a href="index.html#thor">
THOR
</a>
</li>
<li>
<a href="index.html#tyr">
TYR
</a>
</li>
<li>
<a href="index.html#angraboda">
ANGRABODA
</a>
</li>
<li>
<a href="index.html#freyja">
FREYJA
</a>
</li>
<li>
<a href="index.html#freyr">
FREYR
</a>
</li>
<li>
<a href="index.html#yggdrassil">
YGGDRASSIL
</a>
</li>
<li>
<a href="index.html#althing">
ALTHING
</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Animated God Menu for larger devices -->
<div id="god-menu" class="menu-list">
<div>
<div class="image-item">
<a href="index.html#ymir">
<img src="assets/images/gods/ymir2_prof.webp" alt="">
<h2>YMIR</h2>
</a>
</div>
<div class="image-item">
<a href="index.html#odin">
<img src="assets/images/gods/odin_prof.webp" alt="">
<h2>ODIN</h2>
</a>
</div>
<div class="image-item">
<a href="index.html#thor">
<img src="assets/images/gods/thor2_prof.webp" alt="">
<h2>THOR</h2>
</a>
</div>
<div class="image-item">
<a href="index.html#tyr">
<img src="assets/images/gods/tyr_prof.webp" alt="">
<h2>TYR</h2>
</a>
</div>
<div class="image-item">
<a href="index.html#angraboda">
<img src="assets/images/gods/angraboda_prof.webp" alt="">
<h2>ANGRABODA</h2>
</a>
</div>
<div class="image-item">
<a href="index.html#freyja">
<img src="assets/images/gods/freyja_prof.webp" alt="">
<h2>FREYJA</h2>
</a>
</div>
<div class="image-item">
<a href="index.html#freyr">
<img src="assets/images/gods/freyr_prof.webp" alt="">
<h2>FREYR</h2>
</a>
</div>
<div class="image-item">
<a href="index.html#yggdrassil">
<img src="assets/images/gods/yggdrassil_prof.webp" alt="">
<h2>YGGDRASSIL</h2>
</a>
</div>
<div class="image-item">
<a href="index.html#althing">
<img src="assets/images/gods/althing_prof.webp" alt="">
<h2>ALTHING</h2>
</a>
</div>
</div>
</div>
<!-- Main Body containing God Menu, Sagas, and Yggdrassil -->
<main>
<section id="hero">
<div class="hero-title">
<h1>LEGENDS OF ASGARD</h1>
</div>
<div class="hero-blurb">
<h2>Welcome to the home of the great norse gods of Asgard</h2><br>
<h3>Select a God from the menu</h3>
<h3>Dare to lay eyes upon the tales of adventure, Chaos and Peace</h3>
</div>
</section>
<section id="ymir">
<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>
</section>
<section id="odin">
<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>
</section>
<section id="thor">
<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>
</section>
<section id="tyr">
<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>
</section>
<section id="angraboda">
<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>
</section>
<section id="freyja">
<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>
</section>
<section id="freyr">
<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>
</section>
<section id="yggdrassil">
<h2>YGGDRASSIL</h2>
<div class="yggy">
<h2>
The Nine Realms
</h2>
<div id="world-tree">
<div class="asgard-tooltip">
<h3>Asgard</h3>
<img src="assets/images/realms/asgard_realm.webp" alt="">
<span 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.
</span>
</div>
<div class="alfheim-tooltip">
<h3>Alfheim</h3>
<img src="assets/images/realms/alfheim_realm.webp" alt="">
<span 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.
</span>
</div>
<div class="muspelheim-tooltip">
<h3>Muspelheim</h3>
<img src="assets/images/realms/muspelheim_realm.webp" alt="">
<span 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.
</span>
</div>
<div class="midgard-tooltip">
<h3>Midgard</h3>
<img src="assets/images/realms/midguard_realm.webp" alt="">
<span 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.
</span>
</div>
<div class="vanaheim-tooltip">
<h3>Vanaheim</h3>
<img src="assets/images/realms/vanaheim_realm.webp" alt="">
<span 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.
</span>
</div>
<div class="nidavellir-tooltip">
<h3>Nidavellir</h3>
<img src="assets/images/realms/nidavellir_realm.webp" alt="">
<span 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.
</span>
</div>
<div class="jotunheimr-tooltip">
<h3>Jotunheimr</h3>
<img src="assets/images/realms/jotunheimr_realm.webp" alt="">
<span 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.
</span>
</div>
<div class="helheim-tooltip">
<h3>Helheim</h3>
<img src="assets/images/realms/hel_realm.webp" alt="">
<span 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.
</span>
</div>
<div class="niflheim-tooltip">
<h3>Niflheim</h3>
<img src="assets/images/realms/niflheim_realm.webp" alt="">
<span 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.
</span>
</div>
</div>
</div>
</section>
</main>
<!-- Footer Section Containing contact etc -->
<footer id="althing">
<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. We welcome you to do the same!</p><br>
<form id="althing-form" action="https://formdump.codeinstitute.net" method="post">
<input type="text" name="full-name" id="full-name" placeholder="Full Name...">
<input type="email" name="email" id="email" placeholder="Email Address..." required>
<textarea name="query" id="query" placeholder="Enter your query..." rows="4" wrap="soft" required></textarea>
<button>Gods Hear Me</button>
</form>
</div>
<p>Copyright © 2024 | David Kilgallon</p>
</footer>
<!-- SCRIPTS -->
<!-- FontAwesome Kit -->
<script src="https://kit.fontawesome.com/c480bc9d4e.js" crossorigin="anonymous"></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>