markgoho · tedcapron · Aug 2, 2017 · Aug 2, 2017 · Aug 2, 2017 · Aug 2, 2017
diff --git a/images/background.jpg b/images/background.jpg
diff --git a/images/cake1.jpg b/images/cake1.jpg
diff --git a/images/cake2.jpg b/images/cake2.jpg
diff --git a/images/cake3.jpg b/images/cake3.jpg
diff --git a/images/cake4.jpg b/images/cake4.jpg
diff --git a/images/cake5.jpg b/images/cake5.jpg
diff --git a/images/cake6.jpg b/images/cake6.jpg
diff --git a/images/cake7.jpg b/images/cake7.jpg
diff --git a/images/magic-cake.jpg b/images/magic-cake.jpg
diff --git a/images/main-background.jpg b/images/main-background.jpg
diff --git a/images/recipes-background.png b/images/recipes-background.png
diff --git a/index.html b/index.html
@@ -11,35 +11,61 @@
 </head>
 
 <body>
-  <h1 class="heading">Recipe World</h1>
-  <nav>
+
+  <header>
+    <h1 class="heading">Recipe World</h1>
+    <nav>
+      <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="recipes.html">Recipes</a></li>
+        <li><a href="suggest.html">Suggest</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+    <div class="featured-image">
+      <h3>Featured: Magic Cake</h3>
+      <img src="images/magic-cake.jpg" alt="a delicious magic cake">
+    </div>
+
+    <h2 class="heading">Magic Cake</h2>
+    <p class="body-text">Magic cake is one of the tastiest cakes the world ahs ever known. Few have tried and lived to tell about it, and these
+      are their stores.</p>
+    <p class="body-text">We also need to stress that whatever happens to you as a result of consuming Magic Cake is your responsibility. You've
+      been warned, and you can view our <a href="http://www.example.com/legal.html" target="_blank">legal page</a> for more
+      information.
+    </p>
+    <h3 class="heading">Ingredients</h3>
     <ul>
-      <li><a href="index.html">Home</a></li>
-      <li><a href="recipes.html">Recipes</a></li>
-      <li><a href="suggest.html">Suggest</a></li>
+      <li>2 eggs</li>
+      <li><a href="https://www.amazon.com/Domino-Sugar-Granulated-4LB-Canister/dp/B00HJCXX24/ref=sr_1_3_s_it?s=grocery&ie=UTF8&qid=1500938121&sr=1-3&keywords=sugar&th=1">1 pound sugar</a></li>
+      <li>3 sticks of butter</li>
     </ul>
-  </nav>
-  <h2 class="heading">Magic Cake</h2>
-  <p class="body-text">Magic cake is one of the tastiest cakes the world ahs ever known. Few have tried and lived to tell about it, and these
-    are their stores.</p>
-  <p class="body-text">We also need to stress that whatever happens to you as a result of consuming Magic Cake is your responsibility. You've
-    been warned, and you can view our <a href="http://www.example.com/legal.html" target="_blank">legal page</a> for more
-    information.
-  </p>
-  <h3 class="heading">Ingredients</h3>
-  <ul>
-    <li>2 eggs</li>
-    <li><a href="https://www.amazon.com/Domino-Sugar-Granulated-4LB-Canister/dp/B00HJCXX24/ref=sr_1_3_s_it?s=grocery&ie=UTF8&qid=1500938121&sr=1-3&keywords=sugar&th=1">1 pound sugar</a></li>
-    <li>3 sticks of butter</li>
-  </ul>
-  <h3 class="heading">Directions</h3>
-  <ol>
-    <li>Mix eggs, sugar, and butter in a large bowl</li>
-    <li>Spread into a non-stick dish</li>
-    <li>Bake at 350 degrees for 1 hour</li>
-    <li>Let sit at room temp for 20 minutes</li>
-    <li>Eat and enjoy!</li>
-  </ol>
+    <h3 class="heading">Directions</h3>
+    <ol>
+      <li>Mix eggs, sugar, and butter in a large bowl</li>
+      <li>Spread into a non-stick dish</li>
+      <li>Bake at 350 degrees for 1 hour</li>
+      <li>Let sit at room temp for 20 minutes</li>
+      <li>Eat and enjoy!</li>
+    </ol>
+    <h3>Your Photos</h3>
+    <ul class="photos group">
+      <li><img src="images/cake1.jpg" alt="round cake with vanilla frosting and rasberries"></li>
+      <li><img src="images/cake2.jpg" alt="chocolate mint cake with andes mints on top"></li>
+      <li><img src="images/cake3.jpg" alt="chocolate layer cake with almond slivers"></li>
+      <li><img src="images/cake4.jpg" alt="chocolate layer cake with almond slivers"></li>
+      <li><img src="images/cake5.jpg" alt="chocolate layer cake with almond slivers"></li>
+      <li><img src="images/cake6.jpg" alt="chocolate layer cake with almond slivers"></li>
+      <li><img src="images/cake7.jpg" alt="chocolate layer cake with almond slivers"></li>
+    </ul>
+  </main>
+
+  <footer>
+    <p>&copy; 2017 - Recipe World</p>
+  </footer>
+
 </body>
 
 </html>
diff --git a/recipes.html b/recipes.html
@@ -11,35 +11,45 @@
 </head>
 
 <body>
-  <h1>Recipe World</h1>
-  <nav>
-    <ul>
-      <li><a href="index.html">Home</a></li>
-      <li><a href="recipes.html">Recipes</a></li>
-      <li><a href="suggest.html">Suggest</a></li>
-    </ul>
-  </nav>
-
-  <h2>Recipes</h2>
-  <ul class="recipes">
-    <li>
-      <h3><a href="magic-cake.html">Magic Cake</a></h3>
-      <p>This is a dangerously delicious cake.</p>
-    </li>
-    <li>
-      <h3><a href="tacosaurus-mex.html">Tacosaurus Mex</a></h3>
-      <p>It's always taco night somewhere</p>
-    </li>
-    <li>
-      <h3><a href="florida-omelette.html">Florida Omelette</a></h3>
-      <p>Omelette you in on a little secret - this is one tasty egg.</p>
-    </li>
-    <li>
-      <h3><a href="mystery-which.html">Mystery-which</a></h3>
-      <p>It's a sandwich. That's all we can really say right now.</p>
-    </li>
-  </ul>
+  <header>
+    <h1>Recipe World</h1>
+    <nav>
+      <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="recipes.html">Recipes</a></li>
+        <li><a href="suggest.html">Suggest</a></li>
+      </ul>
+    </nav>
+  </header>
 
+  <main>
+    <h2>Recipes</h2>
+    <ul class="recipes">
+      <li>
+        <img src="" alt="">
+        <h3><a href="magic-cake.html">Magic Cake</a></h3>
+        <p>This is a dangerously delicious cake.</p>
+      </li>
+      <li>
+        <img src="" alt="">
+        <h3><a href="tacosaurus-mex.html">Tacosaurus Mex</a></h3>
+        <p>It's always taco night somewhere</p>
+      </li>
+      <li>
+        <img src="" alt="">
+        <h3><a href="florida-omelette.html">Florida Omelette</a></h3>
+        <p>Omelette you in on a little secret - this is one tasty egg.</p>
+      </li>
+      <li>
+        <img src="" alt="">
+        <h3><a href="mystery-which.html">Mystery-which</a></h3>
+        <p>It's a sandwich. That's all we can really say right now.</p>
+      </li>
+    </ul>
+  </main>
+  <footer>
+    <p>&copy; 2017 - Recipe World</p>
+  </footer>
 </body>
 
 </html>
diff --git a/styles.css b/styles.css
@@ -1,3 +1,7 @@
+/* * {
+  box-sizing: border-box;
+} */
+
 html,
 body,
 h1,
@@ -11,18 +15,24 @@ a {
   padding: 0;
   margin: 0;
   border: 0;
+  font-size: 100%;
+  font: inherit;
 }
 
 body {
-  padding: 20px;
+  font-family: Helvetica, Arial, "Times New Roman", sans-serif;
 }
 
 h1 {
   margin: 10px 0 15px 0;
 }
 
 h2 {
+  color: #7facaa;
   margin: 10px 0 20px 0;
+  text-align: center;
+  font-size: 26px;
+  font-weight: bold;
 }
 
 h3 {
@@ -48,3 +58,150 @@ nav a {
 nav li {
   display: inline;
 }
+
+.recipes {
+  list-style-type: none;
+  padding: 0;
+}
+
+.recipes li {
+  border: 1px solid #b56663;
+  padding-left: 15px;
+}
+
+.recipes h3 {
+  border-bottom: 0;
+}
+
+.recipes a {
+  color: #7facaa;
+  text-decoration: none;
+}
+
+header {
+  padding: 10px;
+  background-color: #b56663;
+}
+
+header a,
+header h1 {
+  color: #fff;
+}
+
+header h1,
+header nav {
+  text-align: center;
+}
+
+main {
+  padding: 20px;
+  border: 1px solid #ddd;
+  margin: 30px auto 0 auto;
+  width: 500px;
+}
+
+main p {
+  line-height: 26px;
+}
+
+.photos {
+  list-style-type: none;
+  padding: 0;
+}
+
+.photos img {
+  width: 100%;
+}
+
+/* Float and percentage-based layout */
+/* .photos li {
+  float: left;
+  width: 33.3%;
+}
+
+ .group:after {
+  content: "";
+  display: table;
+  clear: both;
+}    */
+
+/* Flex-based layout */
+/* .photos {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}    */
+
+/* .photos li:last-child {
+  flex-grow: 0;
+} */
+
+/* Grid-based layout */
+.photos {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+/* .featured-image {
+  width: 500px;
+  height: 300px;
+  background: #fff url(images/magic-cake.jpg) top left no-repeat;
+} */
+
+.featured-image {
+  position: relative;
+}
+
+.featured-image h3 {
+  margin: 0;
+  position: absolute;
+  border: 0;
+  top: 0;
+  right: 0;
+  background-color: rgba(25, 25, 25, 0.7);
+  color: #fff;
+  padding: 10px;
+  text-transform: uppercase;
+  font-size: 2em;
+}
+
+/* Suggest Page Styles */
+
+label,
+input {
+  display: block;
+}
+
+label {
+  margin-bottom: 10px;
+}
+
+input[type="text"] {
+  width: 100%;
+  margin-bottom: 25px;
+}
+
+input[type=submit] {
+  width: 240px;
+  font-size: 30px;
+}
+
+input[type=text] {
+  border: 2px solid #7facaa;
+  font-size: 24px;
+  padding: 7px;
+}
+
+textarea {
+  width: 100%;
+  height: 400px;
+  padding: 7px;
+  border: 2px solid #7facaa;
+  margin-bottom: 25px;
+  font-size: 24px;
+}
+
+input[type=checkbox],
+label[for=newsletter] {
+  display: inline;
+}