Computer Science 318

Practice

Experiment Try moving the items around the grid using the image above as a guide. Use grid-area, grid-column, grid-row, grid-row-start, grid-column-start, grid-row-end, or grid-column-end to move the items.

Complete Grid Garden

Open GitHub Desktop (you may need to download the program again if the computers get wiped.)

Couple of things to check in GitHub Desktop.

• Check to see if it says Pull Origin. If it does, click Pull Origin. Why? A pull occurs if you or a collaborator made a change to the repository and pushed the changes. ALWAYS MAKE SURE TO PULL BEFORE CODING!
• If the computers were wiped you made need to reclone your repository to the computer.

With your cs-318 repository selected, Click open in Visual Studio code.

Create a new folder called lab14

Create a new files called index.html, nine-worlds.html, and ragnarok.html in the lab14 folder

Setup your HTML files

Create your stylesheet

Link your stylesheet to the HTML

Change Document in the <title> element to "Norse Mythology"

Add a <header>, <div class="sidenav"> and <main> on every document

All HTML documents will have the same header

Add a <h1> "Norse Mythology"

Add a <nav> with three <a>

<a> setup.

• Norse Gods - href="index.html"
• Nine Worlds & Yggdrasil - href="nine-worlds.html
• Ragnarök & Valhalla - href="ragnarok.html"

Index.html

In the <div> add eight <a> with the following content:

• Odin
• Thor
• Loki
• Frigg
• Baldr
• Freyja
• Freyr
• Heimdallr

In the <main> add 10 <section>

Section 1

Add class="title"

h2 "The Norse Gods & Goddesses"

Section 2

h3 "A Guide to Norse Gods and Goddesses"

Add a div with three paragraphs

• Before the beginning of time, there was Ginnungagap a bottomless abyss, which separated the icy land of Niflheim and the fiery land of Muspelheim. These two realms rose in power and clashed; the burning frost turned into water drops and the water drops turned into life.
• The first living being was Ymir, a hermaphroditic giant who was created from those life-giving drops of water and whose death was brought about by Odin and his brothers. Odin, Vili, and Vä, Ymirá's descendants, fashioned the Nordic mythological universe from his blood, bones, flesh, teeth, hair, eyelashes, brains and skull.
• The Norse gods belong to two major clans: Æsir and Vanir. Odin, Frigg, Thor, Loki, Balder, Hod, Heimdall and Tyr are the most elevated representatives of Æsir and are known as the main gods. The second clan, Vanir, contains the fertility gods and count Njord, Freyr, and Freyja as their most notable members. Despite the antagonism between them, it was necessary for the two families to combine their powers and ideals for all to prosper.

Section 3

Add an id to the section with the value "odin"

h3 "Odin"

h4 "(from Old Norse: Odinn)"

Add a paragraph

• The supreme deity of Norse mythology and the greatest among the Norse gods was Odin, the Allfather of the Aesir. He was the awe inspiring ruler of Asgard, and most revered immortal, who was on an unrelenting quest for knowledge with his two ravens, two wolves and the Valkyries. He is the god of war and, being delightfully paradoxical, the god of poetry and magic. He is famous for sacrificing one of his eyes in order to be able to see the cosmos more clearly and his thirst for wisdom saw him hang from the World Tree, Yggdrasil, for nine days and nine nights until he was blessed with the knowledge of the runic alphabet. His unyielding nature granted him the opportunity to unlock numerous mysteries of the universe.

Section 4

Add an id to the section with the value "thor"

h3 "Thor"

h4 "(from Old Norse: Pórr)"

Add a paragraph

• Thor was Odin's most widely-known son. He was the protector of humanity and the powerful god of thunder who wielded a hammer named Mjölnir. Among the Norse gods, he was known for his bravery, strength, healing powers and righteousness.

Section 5

Add an id to the section with the value "loki"

h3 "Loki"

h4 "(Old Norse: loki)"

Add a paragraph

• Loki was a mischievous god who could shape-shift and can take up animalistic forms. He conceived a scheme to cause the death of Balder. Upon learning that mistletoe was the only thing that could hurt Balder, he placed a branch into the hands of the blind god, Hod, and tricked him into throwing it at Balder, killing him.

Section 6

Add an id to the section with the value "frigg"

h3 "Frigg"

h4 "(From Old High German Frija)"

Add a paragraph

• Odin's wife, Frigg, was a paragon of beauty, love, fertility and fate. She was the mighty queen of Asgard, a venerable Norse goddess, who was gifted with the power of divination, and yet, was surrounded by an air of secrecy. She was the only goddess allowed to sit next to her husband. Frigg was a very protective mother, so she took an oath from the elements, beasts, weapons and poisons, that they would not injure her brilliant and loving son, Balder. Her trust was betrayed by Loki, a most deceitful god.

Section 7

Add an id to the section with the value "baldr"

h3 "Baldr"

h4 "(Old Norse:baldz)"

Add a paragraph

• Frigg and Odin are the parents of Balder, who was described as living between heaven and earth. Balder was the epitome of radiance, beauty, kindness and fairness. He was believed to be immortal, but he was killed with mistletoe the golden bough that contained both his life and his death.

Section 8

Add an id to the section with the value "freyja"

h3 "Freyja"

h4 "(Old Norse for "the Lady")"

Add a paragraph

• Freya was one of the most sensual and passionate goddesses in Norse mythology. She is a goddess associated with war, death, love, sex, beauty, fertility, gold, and seiÃr. Freyja is the owner of the necklace Brí­singamen, rides a chariot pulled by two cats, is accompanied by the boar Hildisví­ni, and possesses a cloak of falcon feathers. By her husband Odr, she is the mother of two daughters, Hnoss and Gersemi. Along with her brother Freyr, her father Njördr, and her mother (Njördr's sister, unnamed in sources), she is a member of the Vanir.

Section 9

Add an id to the section with the value "freyr"

h3 "Freyr"

h4 "(Old Norse: 'Lord')"

Add a paragraph

• Freyr was the god of fertility and one of the most respected gods for the Vanir clan. Freyr was a symbol of prosperity and pleasant weather conditions. He was frequently portrayed with a large phallus.

Section 10

Add an id to the section with the value "heimdallr"

h3 "Heimdallr"

h4 "(from Old Norse Heimdallr)"

Add a paragraph

• Heimdallr, known as the shiniest of all gods due to him having the whitest skin, was a son of Odin who sat atop the Bifrost (the rainbow bridge that connects Asgard, the world of the Aesir tribe of gods, with Midgard, the world of humanity) and remained forever on alert; guarding Asgard against attack.

Add the corresponding svg (provided in the Lab 14 Canvas assignment) to each god section after the h3.

Connect the <a> in the sidenav with the corresponding id for each section.

Nine-worlds.html

In the div add ten <a>

• Yggdrasil
• Asgard
• Vanaheimr
• Alfheimr
• Midgard
• Jötunheimr
• Muspelheim
• Svartá¡lfar
• Niflheim
• Nidavellir

In the <main> add twelve <section>

Section 1

Add class="title"

h2 "The Nine Worlds & Yggdrasil"

Section 2

h3 "Völuspá"

h4 "Stanzas 1-5"

Add five <p>, in each paragraph you will need to use <br> to create the line breaks in the stanzas.

• Hearing I ask | from the holy races,
  From Heimdall's sons, | both high and low;
  Thou wilt, Valfather, | that well I relate
  Old tales I remember | of men long ago.
• I remember yet | the giants of yore,
  Who gave me bread | in the days gone by;
  Nine worlds I knew, | the nine in the tree
  With mighty roots | beneath the mold.
• Of old was the age | when Ymir lived;
  Sea nor cool waves | nor sand there were;
  Earth had not been, | nor heaven above,
  But a yawning gap, | and grass nowhere.
• Then Bur's sons lifted | the level land,
  Mithgarth the mighty | there they made;
  The sun from the south | warmed the stones of earth,
  And green was the ground | with growing leeks.
• The sun, the sister | of the moon, from the south
  Her right hand cast | over heaven's rim;
  No knowledge she had | where her home should be,
  The moon knew not | what might was his,
  The stars knew not | where their stations were.

Section 3

Add id of "yggdrasil"

h3 "Yggdrasil"

p

• Yggdrasil is a tree central to the Norse concept of the cosmos. The tree's branches extend into various realms, and various creatures dwell on and around it. The gods go to Yggdrasil daily to assemble at their things, traditional governing assemblies. The branches of Yggdrasil extend far into the heavens, and the tree is supported by three roots that extend far away into other locations; one to the well Uröarbrunnr in the heavens, one to the spring Hvergelmir, and another to the well Mö­misbrunnr. Creatures live within Yggdrasil, including the dragon Nidhöggr, an unnamed eagle, and the stags Dá¡inn, Dvalinn, Duneyrr and Duraprór.

Section 4

Add id of "asgard"

h3 "Asgard"

p

• In Norse mythology, Asgard (Old Norse ásgardr) is one of the Nine Realms and home to the ádir, tribe of gods. It is surrounded by an incomplete wall attributed to a Hrimthurs riding the stallion Svaöilfari, according to Gylfaginning. Odin and his wife, Frigg, are the rulers of Asgard.

Section 5

Add id of "vanaheimr"

h3 "Vanaheimr"

p

• Vanaheimr (Vanaheim) is the dwelling of the Vanir gods. Vanaheimr is linked to the other Realms of the World Tree. It's residents, the Vanir gods, were once at war with the other clan of gods, the ádsir.

Section 6

Add id of "alfheim"

h3 "Alfheim"

p

• Alfheimr (Old Norse: álfheimr, "elf home") is one of the Nine Realms and the Light Elves' álfar or just Elves) homeworld in Norse mythology. It was ruled over by Freyr . It appears also in Anglo-Scottish ballads under the name Elfhame (Elphame, Elfame) as a fairyland, sometimes modernized as Elfland (Elfinland, Elvenland).

Section 7

Add id of "midgard"

h3 "Midgard"

p

• Midgard (Old Norse: Midgardr meaning "middle enclosure") is one of the Nine Realms of Norse mythology. It is the realm of humans (mortals) and is the only realm fully visible to mankind, though other realms intersect with it. Midgard is bordered by Niflheim to the north and Muspelheim to the south. It is surrounded by an ocean inhabited by the world-encircling Jörmungandr, often referred to as "Midgardsormr" or the "Midgard serpent". It is also connected to Asgard, the realm of the ádsir, by the Bifröst.

Section 8

Add id of "jotunheimr"

h3 "Jötunheimr"

p

• From Jötunheimr, the giants menace the humans in Midgard and the gods in Asgard. The river Ifing (Old Norse, áfingr) separates Asgard, the realm of the gods, from Jötunheimr, the land of giants. Gastropnir, the protection wall to the home of Menglad, and ärymheimr, home of äjazi, were both located in Jötunheimr, which was ruled by King Thrym. Gladsisvellir was a location in Jötunheimr, where lived the giant Gudmund, father of Höfund. Utgard was a stronghold surrounding the land of the giants.

Section 9

Add id of "muspelheim"

h3 "Muspelheim"

p

• Muspelheim (Old Norse: Müspellsheimr), also called Muspell (Old Norse: Müspell), is one of the Nine Realms and is the realm of fire in Norse mythology. It is the homeworld of the fire jötunn (giants) or the "sons of Muspell", and Surtr (Surtur), their ruler. Muspelheim is fire; and the land to the North, Niflheim, is ice. The two mixed and created water from the melting ice in Ginnungagap, from which Ymir was born.

Section 10

Add id of "svartalfar"

h3 "Svart¡lfar"

p

• In Norse mythology, Svartáilfar (Old Norse "black elves", sing. svartáilfr), also called myrköilfar ("dark elves", "dusky elves", "murky elves", sing. myrköilfr), are beings who dwell in Svartalfheim (Svartáilfaheimr, "home of the black-elves"). Both the svartáilfar and Svartáilfaheimr are primarily attested in the Prose Edda, written in the 13th century by Snorri Sturluson. Scholars have noted that the svartáilfar appear to be synonymous with the dwarves and potentially also the dökköilfar ("dark elves"). As dwarfs, the home of the svartÃilfar could possibly be another description for Nidavellir (Nià avellir, "dark fields").

Section 11

Add id of "niflheim"

h3 "Niflheim"

p

• Niflheim is one of the Nine Realms, and is the realm of the dishonored dead and is ruled by Hel, daughter of Loki, who is described as having half her body alive and the other half a rotting corpse. Only the dead who die in sleep of cowardly (not in battle) end up here. It is the home of the Niddhog, a dragon who eats at the roots of the tree that bind it.

Section 12

Add id of "nidavellir"

h3 "Nidavellir"

p

• Nidavellir is one of the Nine Realms of Norse cosmology. It is the realm of the Dwarves. Hreiömarr is the king of Nidavellir.

Add the corresponding svg (provided in canvas assignment) to each realm section before the h3.

Connect the <a> in the sidenav with the corresponding id for each section.

Ragnarok.html

In the <div> add two <a>

• Ragnarök
• Valhalla

On the <main> add class=ragnarok

In the <main> add six <section>

Section 1

add id="ragnarok" and class="title"

h2 "Ragnarök"

Section 2

h3 "Völuspá"

h4 "Stanzas 40-58"

Add 18 <p>, in each paragraph you will need to use <br> to create the line breaks in the stanzas.

• The giantess old | in Ironwood sat,
  In the east, and bore | the brood of Fenrir;
  Among these one | in monster's guise
  Was soon to steal | the sun from the sky.
• There feeds he full | on the flesh of the dead,
  And the home of the gods | he reddens with gore;
  Dark grows the sun, | and in summer soon
  Come mighty storms: | would you know yet more?
• On a hill there sat, | and smote on his harp,
  Eggther the joyous, | the giants' warder;
  Above him the cock | in the bird-wood crowed,
  Fair and red | did Fjalar stand.
  Then to the gods | crowed Gollinkambi,
  He wakes the heroes | in Othin's hall;
  And beneath the earth | does another crow,
  The rust-red bird | at the bars of Hel.
• Now Garm howls loud | before Gnipahellir,
  The fetters will burst, | and the wolf run free;
  Much do I know, | and more can see
  Of the fate of the gods, | the mighty in fight.
• Brothers shall fight | and fell each other,
  And sisters' sons | shall kinship stain;
  Hard is it on earth, | with mighty whoredom;
  Axe-time, sword-time, | shields are sundered,
  Wind-time, wolf-time, | ere the world falls;
  Nor ever shall men | each other spare.
• Fast move the sons | of Mim, and fate
  Is heard in the note | of the Gjallarhorn;
  Loud blows Heimdall, | the horn is aloft,
  In fear quake all | who on Hel-roads are.
• Yggdrasil shakes, | and shiver on high
  The ancient limbs, | and the giant is loose;
  To the head of Mim | does Othin give heed,
  But the kinsman of Surt | shall slay him soon.
• How fare the gods? | how fare the elves?
  All Jotunheim groans, | the gods are at council;
  Loud roar the dwarfs | by the doors of stone,
  The masters of the rocks: | would you know yet more?
• Now Garm howls loud | before Gnipahellir,
  The fetters will burst, | and the wolf run free
  Much do I know, | and more can see
  Of the fate of the gods, | the mighty in fight.
• From the east comes Hrym | with shield held high;
  In giant-wrath | does the serpent writhe;
  O'er the waves he twists, | and the tawny eagle
  Gnaws corpses screaming; | Naglfar is loose.
• O'er the sea from the east | there sails a ship
  With the people of Muspell, | at the helm stands Loki;
  After the wolf | do wild men follow,
  And with them the brother | of Byleist goes.
• Surt fares from the south | with the scourge of branches,
  The sun of the battle-gods | shone from his sword;
  The crags are sundered, | the giant-women sink,
  The dead throng Hel-way, | and heaven is cloven.
• Now comes to Hlin | yet another hurt,
  When Othin fares | to fight with the wolf,
  And Beli's fair slayer | seeks out Surt,
  For there must fall | the joy of Frigg.
• Then comes Sigfather's | mighty son,
  Vithar, to fight | with the foaming wolf;
  In the giant's son | does he thrust his sword
  Full to the heart: | his father is avenged.
• Hither there comes | the son of Hlothyn,
  The bright snake gapes | to heaven above;
  . . . . . . . . . .
  Against the serpent | goes Othin's son.
• In anger smites | the warder of earth,--
  Forth from their homes | must all men flee;-
  Nine paces fares | the son of Fjorgyn,
  And, slain by the serpent, | fearless he sinks.
• The sun turns black, | earth sinks in the sea,
  The hot stars down | from heaven are whirled;
  Fierce grows the steam | and the life-feeding flame,
  Till fire leaps high | about heaven itself.
• Now Garm howls loud | before Gnipahellir,
  The fetters will burst, | and the wolf run free;
  Much do I know, | and more can see
  Of the fate of the gods, | the mighty in fight.

Section 3

h3 "Ragnarök"

p

• In Norse mythology, Ragnarök is a series of events, including a great battle, foretold to lead to the death of a number of great figures (including the Gods Odin, Thor, Tör, Freyr, Heimdallr and Loki), natural disasters and the submersion of the world in water. After these events, the world will resurface anew and fertile, the surviving and returning gods will meet and the world will be repopulated by two human survivors. Ragnarök is an important event in Norse mythology and has been the subject of scholarly discourse and theory in the history of Germanic studies.

Section 4

Add id="valhalla" and class="title"

h2 "Valhalla"

Section 5

h3 "Völuspá"

h4 "Stanzas 1-5"

Add five <p>, in each paragraph you will need to use <br> to create the line breaks in the stanzas.

• Maiden, awake! | wake thee, my friend,
  My sister Hyndla, | in thy hollow cave!
  Already comes darkness, | and ride must we
  To Valhall to seek | the sacred hall.
• The favor of Heerfather | seek we to find,
  To his followers gold | he gladly gives;
  To Hermoth gave he | helm and mail-coat,
  And to Sigmund he gave | a sword as gift.
• Triumph to some, | and treasure to others,
  To many wisdom | and skill in words,
  Fair winds to the sailor, | to the singer his art,
  And a manly heart | to many a hero.
• Thor shall I honor, | and this shall I ask,
  That his favor true | mayst thou ever find;
  . . . . . . . . . .
  Though little the brides | of the giants he loves.
• From the stall now | one of thy wolves lead forth,
  And along with my boar | shalt thou let him run;
  For slow my boar goes | on the road of the gods,
  And I would not weary | my worthy steed.

Section 6

h3 "Valhalla"

p

• In Norse mythology, Valhalla ("hall of the slain") is a majestic, enormous hall located in Asgard, ruled over by the god Odin. Chosen by Odin, half of those who die in combat travel to Valhalla upon death, led by valkyries, while the other half go to the goddess Freyja's field Fölkvangr. In Valhalla, the dead warriors join the masses of those who have died in combat (known as the Einherjar) and various legendary Germanic heroes and kings, as they prepare to aid Odin during the events of Ragnarök. Before the hall stands the golden tree Glasir, and the hall's ceiling is thatched with golden shields. Various creatures live around Valhalla, such as the stag Eikpyrnir and the goat Heidrun, both described as standing atop Valhalla.

Add the corresponding svg (provided in canvas assignment) before the h3 for Ragnarok and Vallhala.

Connect the <a> in the sidenav with the corresponding id for each section.

In the <head> add the following code to link to two different Google Fonts we will be using

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@900&family=EB+Garamond:wght@400;800&display=swap" rel="stylesheet">

CSS

Set your browser width to about 500px

body

background color #330202

font color #fff

font-family: 'EB Garamond', serif;

margin 0

h1, h2

font-family: 'Cinzel Decorative', cursive;

font color #d9ba6c

header

background color #161d2d

padding 1rem

nav>a

font color #d9ba6c

border 1px solid #d9ba6c

text-decoration none

padding 1rem

font-weight 800

display inline-block.
Hint: Changing from inline to inline-block will let the margin on the top and bottom of the anchors take effect

margin 1rem 1rem 1rem 0.
Hint: When using four values for margin the values apply in this order: top | right | bottom | left

nav>a:hover

border-color transparent

background color #d9ba6c

font color #161d2d

.sidenav

Background color #374a76

padding .5rem 1rem

.sidenav>a

background color #fae2c0

font color #0f0f0f

padding .5rem 1rem

display inline-block

margin .5rem .5rem 0 0

text-decoration none

.sidenav>a:hover

opacity: .8;

main

padding 1rem

section

padding 1rem

margin 1rem 0

border 1px solid #d9ba6c

.title

margin 0

padding 2rem 1rem

background color #5f1818

h4

margin 0

section

display grid

grid-template-columns 12rem 1fr

section:nth-child(2)

Hint: This will select the second section with out using a class

display block

section>img

max-height 10rem

Using the guide above and grid-item properties below to achieve the arrangement of the image, h3, h4 and paragraph in the section.

Grid-Item Properties:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end
• grid-row
• grid-column
• grid-area

Hint: You don't need to use all of the properties above.

If you look at the Ragnarok page some of the section look terrible. Let's fix that with some CSS.

.ragnarok section:nth-child(5)

display block

Desktop CSS

Add a media query for a minimum width of 800px

All CSS from here on will be in the media query

main

display grid

grid-template-columns 1fr 1fr

gap 1rem

.title

Use grid-column to make the title span the two column in the grid.

section:nth-child(2)

Use grid-column to make the information section span the two column in the grid.

.ragnarok

display block

Add a media query for a minimum width of 1100px

body

display grid

grid-template-columns 20rem auto

Using the guide above and grid-item properties to achieve the arrangement of the header, sidenav, and main based on the image below.

Grid-Item Properties:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end
• grid-row
• grid-column
• grid-area

Hint: You don't need to use all of the properties above.

header

display flex

use justify-content with one of the following values to achieve the layout pictured below

• flex-start
• flex-end
• center
• space-around
• space-evenly
• space-between

.sidenav>a

display block.
Hint: This will force the links to take up the full width of the sidenav container and stack top to bottom, rather than left to right.

text align right

Final Steps

Validate your HTML.

• Navigate to W3C Validator You will probably get a few errors for the weird characters in the names. Just ignore them.
• Select the validate by file upload tab at the top of the page

Lint your CSS at Jigsaw.w3.org

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab14 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

Your are Done with Lab15