vikingeducation · SarahSchoonmaker · Oct 20, 2017 · Oct 20, 2017 · Oct 20, 2017 · Oct 20, 2017
diff --git a/README.md b/README.md
@@ -1,8 +1,2 @@
-assignment_viking_css_garden
-============================
-
-A place for your styling creativity to grow
-
-
-**NOTE:** *This repo is copyrighted material for your private use only and not to be shared outside of Viking Code School.*
-
+Styled an HTML template.  Here's the preview: https://sarahschoonmaker.github.io/assignment_viking_css_garden/
+Not mobile responsive yet. 
diff --git a/img/chinese.jpg b/img/chinese.jpg
diff --git a/img/dutch.jpg b/img/dutch.jpg
diff --git a/img/english.jpg b/img/english.jpg
diff --git a/img/english1.jpg b/img/english1.jpg
diff --git a/img/flowers.jpg b/img/flowers.jpg
diff --git a/img/forrest.jpg b/img/forrest.jpg
diff --git a/img/garden.jpg b/img/garden.jpg
diff --git a/img/greek.jpg b/img/greek.jpg
diff --git a/img/italian.jpg b/img/italian.jpg
diff --git a/img/japanese.jpg b/img/japanese.jpg
diff --git a/index.html b/index.html
@@ -1,80 +1,82 @@
-<!DOCTYPE html>
-<html>
+<!Doctype html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link href='https://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet'>
+    <link href='https://fonts.googleapis.com/css?family=Clicker Script' rel='stylesheet'>
+    <link href='https://fonts.googleapis.com/css?family=Caudex' rel='stylesheet'>
+    <link href='https://fonts.googleapis.com/css?family=Buda:300' rel='stylesheet'>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+    <script type = "text/javascript" language = "javascript">
+          $(document).ready(function() {
+            $(".sidebar-nav").hover(function(){
+               $(".sidebar-nav").effect( "shake", {times:1}, 500 );
+            });
+         });
+      </script>
 
     <title>Viking CSS Garden</title>
-
-    <link rel="stylesheet" href="/style.css">
-  </head>
-  <body>
-
-    <!-- Main Header -->
-    <header id="main-header">
-      <h1 class="site-title">Viking CSS Garden</h1>
-      <h2 class="tagline">A place for your styling creativity to grow</h2>
-    </header>
-
-
-    <!-- Main Content -->
-    <main id="main-content">
-      <section class="main-content-section">
+</head>
+ <body>
+  <div class="header">
+    <img src="img/garden.jpg" id="image-left" alt="field"/>
+    <img src="img/flowers.jpg" id="image-right" alt="flowers"/>
+    <h1 class="site-title">Viking CSS Garden</h1>
+    <h2 class="tagline">A place for your styling creativity to grow</h2>
+  </div>
+   <div id="main">
+      <div id="primary">
         <h2 class="section-title">Growing Your Garden</h2>
-
         <article class="section-content">
-          <p>The Viking CSS Garden is a place for you to take raw potential and turn it into something beautiful with the power of CSS. Take the seeds that are this HTML file and plant them. Water and feed them with nurishing styles, colors and images. Watch them evolve into a stunning display.</p>
+        <p>The Viking CSS Garden is a place for you to take raw potential and turn it into something beautiful with the power of CSS. Take the seeds that are this HTML file and plant them. Water and feed them with nurishing styles, colors and images. Watch them evolve into a stunning display.</p>
         </article>
-      </section>
-
-      <section class="main-content-section">
-        <h2 class="section-title">Norse mythology</h2>
-
+        <h2 class="section-title-two">Norse mythology</h2>
         <article class="section-content">
-          <p>Norse mythology is the body of mythology of the North Germanic people stemming from Norse paganism and continuing after the Christianization of Scandinavia and into the Scandinavian folklore of the modern period. The northernmost extension of Germanic mythology, Norse mythology consists of tales of various deities, beings, and heroes derived from numerous sources from both before and after the pagan period, including medieval manuscripts, archaeological representations, and folk tradition.</p>
-
-          <p>Numerous gods are mentioned in the source texts such as the hammer-wielding, humanity-protecting god Thor, who relentlessly fights his foes; the one-eyed, raven-flanked god Odin, who craftily pursues knowledge throughout the worlds and bestowed among humanity the runic alphabet; the beautiful, seiðr-working, feathered cloak-clad goddess Freyja who rides to battle to choose among the slain; the vengeful, skiing goddess Skaði, who prefers the wolf howls of the winter mountains to the seashore; the powerful god Njörðr, who may calm both sea and fire and grant wealth and land; the god Freyr, whose weather and farming associations bring peace and pleasure to humanity; the goddess Iðunn, who keeps apples that grant eternal youthfulness; the mysterious god Heimdallr, who is born of nine mothers, can hear grass grow, has gold teeth, and possesses a resounding horn; the jötunn Loki, who brings tragedy to the gods by engineering the death of the goddess Frigg's beautiful son Baldr; and numerous other deities.</p>
+        <p>Norse mythology is the body of mythology of the North Germanic people stemming from Norse paganism and continuing after the Christianization of Scandinavia and into the Scandinavian folklore of the modern period. The northernmost extension of Germanic mythology, Norse mythology consists of tales of various deities, beings, and heroes derived from numerous sources from both before and after the pagan period, including medieval manuscripts, archaeological representations, and folk tradition.</p>
 
-          <p>Most of the surviving mythology centers on the plights of the gods and their interaction with various other beings, such as humanity and the jötnar, beings who may be friends, lovers, foes and/or family members of the gods. The cosmos in Norse mythology consists of Nine Worlds that flank a central cosmological tree, Yggdrasil. Units of time and elements of the cosmology are personified as deities or beings. Various forms of a creation myth are recounted, where the world is created from the flesh of the primordial being Ymir, and the first two humans are Ask and Embla. These worlds are foretold to be reborn after the events of Ragnarök, when an immense battle occurs between the gods and their enemies, and the world is enveloped in flames, only to be reborn anew. There the surviving gods will meet, and the land will be fertile and green, and two humans will repopulate the world.</p>
+        <p>Numerous gods are mentioned in the source texts such as the hammer-wielding, humanity-protecting god Thor, who relentlessly fights his foes; the one-eyed, raven-flanked god Odin, who craftily pursues knowledge throughout the worlds and bestowed among humanity the runic alphabet; the beautiful, seiðr-working, feathered cloak-clad goddess Freyja who rides to battle to choose among the slain; the vengeful, skiing goddess Skaði, who prefers the wolf howls of the winter mountains to the seashore; the powerful god Njörðr, who may calm both sea and fire and grant wealth and land; the god Freyr, whose weather and farming associations bring peace and pleasure to humanity; the goddess Iðunn, who keeps apples that grant eternal youthfulness; the mysterious god Heimdallr, who is born of nine mothers, can hear grass grow, has gold teeth, and possesses a resounding horn; the jötunn Loki, who brings tragedy to the gods by engineering the death of the goddess Frigg's beautiful son Baldr; and numerous other deities.</p>
 
-          <p>Norse mythology has been the subject of scholarly discourse since the 17th century, when key texts were brought to the attention of the intellectual circles of Europe. By way of comparative mythology and historical linguistics, scholars have identified elements of Germanic mythology reaching as far back as Proto-Indo-European mythology. In the modern period, the Romanticist Viking revival re-awoke an interest in the subject matter, and references to Norse mythology may now be found throughout modern popular culture. The myths have further been revived in a religious context among adherents of Germanic Neopaganism.</p>
-        </article>
-
-        <cite class="citation">- From <a href="https://en.wikipedia.org/wiki/Norse_mythology">Norse Mythology</a></cite>
-      </section>
-    </main>
-
-
-    <!-- Sidebar -->
-    <aside id="sidebar">
-      <h2 class="section-title">Other Gardens</h2>
+        <p>Most of the surviving mythology centers on the plights of the gods and their interaction with various other beings, such as humanity and the jötnar, beings who may be friends, lovers, foes and/or family members of the gods. The cosmos in Norse mythology consists of Nine Worlds that flank a central cosmological tree, Yggdrasil. Units of time and elements of the cosmology are personified as deities or beings. Various forms of a creation myth are recounted, where the world is created from the flesh of the primordial being Ymir, and the first two humans are Ask and Embla. These worlds are foretold to be reborn after the events of Ragnarök, when an immense battle occurs between the gods and their enemies, and the world is enveloped in flames, only to be reborn anew. There the surviving gods will meet, and the land will be fertile and green, and two humans will repopulate the world.</p>
 
+        <p>Norse mythology has been the subject of scholarly discourse since the 17th century, when key texts were brought to the attention of the intellectual circles of Europe. By way of comparative mythology and historical linguistics, scholars have identified elements of Germanic mythology reaching as far back as Proto-Indo-European mythology. In the modern period, the Romanticist Viking revival re-awoke an interest in the subject matter, and references to Norse mythology may now be found throughout modern popular culture. The myths have further been revived in a religious context among adherents of Germanic Neopaganism.</p>
+      </article>
+      <cite class="citation">- From <a href="https://en.wikipedia.org/wiki/Norse_mythology">Norse Mythology</a></cite>   
+  </div>
+    <hr class="vline" />
+      <aside> 
+        <h2 class="section-title-right">List of Gardens</h2>
       <nav class="sidebar-nav">
         <ul class="nav-links">
           <li class="nav-link-list-item">
-            <a class="nav-link" href="https://en.wikipedia.org/wiki/Chinese_garden">Chinese Garden</a>
+            <h3 id="chinese">Chinese Garden</h3>
+            <a class="nav-link" href="https://en.wikipedia.org/wiki/Chinese_garden"><img src="img/chinese.jpg" id="chinese-image" alt="chinese"/></a>
           </li>
           <li class="nav-link-list-item">
-            <a class="nav-link" href="https://en.wikipedia.org/wiki/Dutch_garden">Dutch Garden</a>
-          </li>
-          <li class="nav-link-list-item">
-            <a class="nav-link" href="https://en.wikipedia.org/wiki/English_gardens">English Gardens</a>
-          </li>
+            <h3 id="dutch">Dutch Garden</h3>
+            <a class="nav-link" href="https://en.wikipedia.org/wiki/Dutch_garden"><img src="img/dutch.jpg" id="dutch-image" alt="dutch"/></a>
+          </li> 
           <li class="nav-link-list-item">
-            <a class="nav-link" href="https://en.wikipedia.org/wiki/Greek_gardens">Greek Gardens</a>
+            <h3 id="english">English Gardens</h3>
+            <a class="nav-link" href="https://en.wikipedia.org/wiki/English_gardens"><img src="img/english.jpg" id="english-image" alt="english"/></a>
           </li>
           <li class="nav-link-list-item">
-            <a class="nav-link" href="https://en.wikipedia.org/wiki/Italian_gardens">Italian Gardens</a>
+            <h3 id="greek">Greek Gardens</h3>
+            <a class="nav-link" href="https://en.wikipedia.org/wiki/Greek_gardens"><img src="img/greek.jpg" id="greek-image" alt="greek"/></a>
           </li>
           <li class="nav-link-list-item">
-            <a class="nav-link" href="https://en.wikipedia.org/wiki/Japanese_gardens">Japanese Gardens</a>
+            <h3 id="italian">Italian Gardens</h3>
+            <a class="nav-link" href="https://en.wikipedia.org/wiki/Italian_gardens"><img src="img/italian.jpg" id="italian-image" alt="italian"/></a>
           </li>
           <li class="nav-link-list-item">
-            <a class="nav-link" href="https://en.wikipedia.org/wiki/Spanish_gardens">Spanish Gardens</a>
+            <h3 id="japanese">Japanese Gardens</h3>
+            <a class="nav-link" href="https://en.wikipedia.org/wiki/Japanese_gardens"><img src="img/japanese.jpg" id="japanese-image" alt="japanese"/></a>
           </li>
         </ul>
       </nav>
     </aside>
-  </body>
-</html>
-
+   </div>
+    <div id="footer"></div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -1,10 +1,230 @@
-/* ----------------------------------- *
- * Your Styles Here
- * ----------------------------------- */
+body {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 100%;
+  margin: auto;
+  background:#D3C9C1;
 
+}
 
+.header {
+  background-color: #BFCBC6;
+  border: 2px solid #1f1f2e;
+  text-align: center;
+  color: #006400;
+  height: 112px;
+  position: fixed;
+  margin-top: 0;
+  padding-top: 0px;
 
+}
 
+#image-left {
+  background-repeat: no-repeat;  
+  width: 25%;
+  height: 100%;
+  float: left;
+  margin-bottom: 20px;
+}
 
+#image-right {
+  background-repeat: no-repeat;  
+  width: 25%;
+  height: 100%;
+  float: right;
+  margin-bottom: 20px;
+}
 
-
+.site-title {
+  margin-top: .5em;
+  margin-right: 20%;
+  margin-bottom: 1em;
+  font-family: 'Cinzel';font-size: 22px;
+}
+
+.tagline {
+  margin-top: .5em;
+  margin-right: 20%;
+  margin-bottom: 1em;
+  font-family: 'Cinzel';font-size: 18px;
+}
+
+#primary {
+ float: left;
+ width: 50%;
+ bottom: 40px;
+ clear:both;
+}
+
+cite {
+  padding-bottom: 20%;
+}
+
+
+aside {
+ display: block; 
+ float: right;
+ width: 50%;
+ margin-top: -30%;
+
+}
+
+cite {
+  padding-left:3em;
+  font-family: 'Buda';font-size: 15px;
+
+}
+cite a {
+  text-decoration: none;
+
+}
+
+.section-title {
+  margin-top: 20%;
+  text-align: center;
+  color: #006400;
+  font-family: 'Caudex';font-size: 22px;
+  padding-top: 1em;
+}
+
+.section-content {
+  margin:1em;
+  font-family: 'Buda';font-size: 22px;
+
+}
+
+.section-title-two {
+  margin-top: 2em;
+  text-align: center;
+  color: #006400;
+  font-family: 'Caudex';font-size: 22px;
+
+}
+
+.section-title-right {
+  text-align: center;
+  margin-top: 80%;
+  margin-left: 10%;
+  color: #006400;
+  font-family: 'Caudex';font-size: 22px;
+  padding-top: 1em;
+}
+
+#chinese-image {
+  padding-top: 15px;
+  padding-right: 30%;
+  margin-left: 1em;
+
+}
+
+#chinese {
+  float: left;
+  margin-left: 10%;
+  margin-top: 7%;
+
+}
+
+#dutch {
+  margin-top: -42.5%;
+
+  padding-right: 8%;
+  margin-left: 65%;
+
+}
+
+#dutch-image {
+  margin-top: .73em;
+  margin-left: 57%;
+  margin-bottom: 40%;
+  height: 200px;
+  width: 250px;
+
+}
+
+#english {
+float: left;
+margin-left: 10%;
+margin-top: -30%;
+
+}
+
+#english-image {
+  margin-top: -17%;
+  margin-left: 1em;
+  height: 230px;
+  width: 250px;
+}
+
+#greek {
+ float: right;
+ margin-top: -313px;
+ padding-right: 10%;
+ margin-left: 20%;
+}
+
+#greek-image {
+  margin-top: -233px;
+  margin-left: 57%;
+  margin-right: 1em;
+  margin-bottom: 40%;
+  height: 230px;
+  width: 250px;
+}
+
+#italian {
+float: left;
+margin-left: 10%;
+margin-top: -35%;
+}
+
+#italian-image {
+  margin-top: -20%;
+  padding-right: 30%;
+  margin-left: 1em;
+  height: 250px;
+  width: 250px;
+}
+
+#japanese {
+ float: right;
+ margin-top: -355px;
+ padding-right: 8%;
+ margin-left: 20%;
+}
+
+#japanese-image {
+  margin-top: -255px;
+  margin-left: 57%;
+  margin-bottom: 40%;
+  height: 250px;
+  width: 250px;
+}
+
+ul {
+  list-style: none;
+}
+
+h3 {
+  color: #006400;
+  font-family: 'Caudex';font-size: 22px;
+
+}
+
+#footer { 
+position:fixed;
+   bottom:0;
+   width:100%;
+   height:60px;
+  background-color: #232330;
+}
+
+.vline
+{
+    position:fixed;
+    top:21%;
+    left:50%;
+    bottom:10%; margin:0;
+    border:none;
+    border-right:solid 1px black;
+    z-index:10;
+}