vikingeducation · asaloff · Aug 26, 2017 · Aug 26, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/Garden-with-a-pond-icon.png b/images/Garden-with-a-pond-icon.png
diff --git a/images/garden1.jpg b/images/garden1.jpg
diff --git a/images/garden2.jpg b/images/garden2.jpg
diff --git a/images/garden3.jpg b/images/garden3.jpg
diff --git a/images/garden4.jpg b/images/garden4.jpg
diff --git a/images/garden5.jpg b/images/garden5.jpg
diff --git a/images/helmet.png b/images/helmet.png
diff --git a/images/viking_garden.jpg b/images/viking_garden.jpg
diff --git a/index.html b/index.html
@@ -6,7 +6,8 @@
 
     <title>Viking CSS Garden</title>
 
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans" rel="stylesheet">
   </head>
   <body>
 
@@ -23,7 +24,8 @@ <h2 class="tagline">A place for your styling creativity to grow</h2>
         <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 id="grow-paragraph">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>
+          <img src="images/viking_garden.jpg" alt="Viking Garden">
         </article>
       </section>
 
@@ -74,7 +76,13 @@ <h2 class="section-title">Other Gardens</h2>
           </li>
         </ul>
       </nav>
+      <img src="images/garden1.jpg">
+      <img src="images/garden2.jpg">
+      <img src="images/garden3.jpg">
+      <img src="images/garden4.jpg">
+      <img src="images/garden5.jpg">
     </aside>
+    <footer></footer>
   </body>
 </html>
 
diff --git a/style.css b/style.css
@@ -1,10 +1,120 @@
 /* ----------------------------------- *
  * Your Styles Here
+
+ * Colors:
+
+ * #F3563D - Main Red
+ * #2DB456 - Main Green
+ *
+ *
+ *
+ *
+
  * ----------------------------------- */
+* {
+  font-family: 'Open Sans', sans-serif;
+}
+
+body {
+  background-color: #DFFFE9;
+  margin-bottom: 40px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Merriweather', serif;
+}
+
+h2 {
+  color: #FF9C8C;
+}
+
+p, cite {
+  line-height: 1.7em;
+  color: #565656;
+}
+
+cite {
+  float: right;
+}
+
+ul {
+  padding-left: 0;
+}
+
+li {
+  background: url('images/helmet.png') no-repeat 5px 5px transparent;
+  list-style-type: none;
+  margin: 0;
+  padding: 0px 0px 5px 24px;
+  vertical-align: middle;
+}
+
+#main-header {
+  text-align: center;
+}
+
+#main-header h1 {
+  color: #2DB456;
+  background-repeat: no-repeat;
+}
+
+.main-content-section {
+  clear: both;
+}
+
+.section-content p#grow-paragraph {
+  width: 50%;
+  float: left;
+}
+
+.section-content img {
+  width: 40%;
+  float: right;
+  margin-top: 20px;
+}
+
+aside img {
+  margin-top: 40px;
+}
+
+a {
+  color: #057F2A;
+}
+
+a:hover {
+  color: #FF7762;
+}
+
+@media only screen and (min-width:550px){
+  #main-header h1 {
+    text-indent: -200px;
+    margin-bottom: 0;
+  }
+
+  #main-content {
+    float: left;
+    margin-left: 100px;
+    width: 50%;
+    margin-bottom: 30px;
+  }
+
+  #main-header h2.tagline {
+    margin-top: 0px;
+    text-indent: 100px;
+  }
+
+  #sidebar {
+    float: right;
+    width: 30%;
+  }
+}
 
+footer {
+  clear: both;
+  height: 40px;
+}
 
 
 
 
 
-