added more images, restyled home page

6 files changed, 248 insertions, 174 deletions

diff --git a/static/about.html b/static/about.html
index 6e0fc82..aa8ed48 100644
--- a/static/about.html
+++ b/static/about.html
@@ -30,12 +30,20 @@
         <h1>About this Website</h1>
     </div>
 
-    <main id="wrapper-center">
-        <span>
-            This website will contain all projects related to The
-            Odin Project online course.
-        </span>
+    <main>
+        <div class="wrapper-centered">
+            <span>
+                This website will contain all projects related to The
+                Odin Project online course.
+            </span>
+        </div>
     </main>
+
+    <footer>
+        <div class="wrapper-centered">
+            <p>Bottom Text</p> 
+        </div>
+    </footer>
 </body>
 <script src=""></script>
 
diff --git a/static/recipes/omurice.html b/static/recipes/omurice.html
index 170c00d..2f00c83 100644
--- a/static/recipes/omurice.html
+++ b/static/recipes/omurice.html
@@ -31,8 +31,8 @@
         <h1>My Omurice Recipe</h1>
     </div>
 
-    <main id="wrapper-center">
-        <div id="lists">
+    <main class="wrapper-space">
+        <div class="lists">
             <h2>Description</h2> 
             <p>
                 This is my take on Omurice, a popular japanese chicken fried rice dish with an omelette on top.
@@ -103,11 +103,17 @@
             </ol>
         </div>
 
-        <div id="img-wrapper">
+        <div class="img-wrapper img-right">
             <img src="../../images/omurice.jpg" alt="An image of oyakodon.">
         </div>
 
     </main>
+
+    <footer>
+        <div class="wrapper-centered">
+            <p>Bottom Text</p> 
+        </div>
+    </footer>
 </body>
 <script src=""></script>
 
diff --git a/static/recipes/overview.html b/static/recipes/overview.html
index 33b0fb2..6ccf1c7 100644
--- a/static/recipes/overview.html
+++ b/static/recipes/overview.html
@@ -32,20 +32,24 @@
     </div>
 
     <main>
-        <div>
-            <ul id="recipe-list">
-                <li id="recipe-item">
-                    <a href="./pizza.html">Pizza</a>
-                </li>
-                <li id="recipe-item">
-                    <a href="./oyakodon.html">Oyakodon</a>
-                </li>
-                <li id="recipe-item">
-                    <a href="./omurice.html">Omurice</a>
-                </li>
-            </ul>
-        </div>
+        <ul class="recipe-list">
+            <li class="recipe-item">
+                <a href="./pizza.html">Pizza</a>
+            </li>
+            <li class="recipe-item">
+                <a href="./oyakodon.html">Oyakodon</a>
+            </li>
+            <li class="recipe-item">
+                <a href="./omurice.html">Omurice</a>
+            </li>
+        </ul>
     </main>
+
+    <footer>
+        <div class="wrapper-centered">
+            <p>Bottom Text</p> 
+        </div>
+    </footer>
 </body>
 <script src=""></script>
 
diff --git a/static/recipes/oyakodon.html b/static/recipes/oyakodon.html
index b8a24c0..a3e3ba4 100644
--- a/static/recipes/oyakodon.html
+++ b/static/recipes/oyakodon.html
@@ -31,75 +31,83 @@
         <h1>My Oyakodon Recipe</h1>
     </div>
     
-    <main id="wrapper-center">
-        <div id="lists">
-            <h2>Description</h2> 
-            <p>
-                This is my take on Oyakodon, a japanese chicken and egg rice bowl.
-            </p>
-
-            <h2>Ingredients</h2>
-            <ul>
-                <li>100g Chicken Thigh</li>
-                <li>30g Soy Sauce</li>
-                <li>30g Mirin</li>
-                <li>30g Sake</li>
-                <li>100g Dashi Stock</li>
-                <li>Half an Onion</li>
-                <li>1 Spring Onion</li>
-                <li>Half a Bowl of Rice</li>
-                <li>1 Whole Egg</li>
-                <li>Optional: 1 Egg Yolk</li>
-            </ul>
-
-            <h2>Instructions</h2>
-            <ol>
-                <li>
-                    <p>
-                       Cut half an onion from tip to root into strips.
-                       Cut the chicken thigh into bite-sized pieces.
-                       Thinly cut the spring onion as garnish for later.
-                    </p>
-                </li>
-                <li>
-                    <p>
-                        Fry the chicken over medium heat until the outside is beginning to brown.
-                    </p>
-                </li>
-                <li>
-                    <p>
-                        Add the soy sauce, mirin, sake and dashi stock into the pan.
-                        At this point, also add the cut onion.
-                        Cover with a lid and let it simmer for 5 minutes.
-                    </p>
-                </li>
-                <li>
-                    <p>
-                        Lightly mix the egg in a bowl.
-                        Add half of the egg into the pan, cover and let it simmer for half a minute.
-                    </p>
-                </li>
-                <li>
-                    <p>
-                        After half a minute, add the rest of the egg and some of the spring onion.<br>
-                        Let it simmer for an additional minute.
-                    </p>
-                </li>
-                <li>
-                    <p>
-                        Pour everything in the pan over the bowl of rice.
-                        Add the rest of the spring onion on top.
-                        If raw eggs are safe to eat where you live, you can add an egg yolk on top.
-                    </p>
-                </li>
-            </ol>
-        </div>
-
-        <div id="img-wrapper">
-            <img src="../../images/oyakodon.jpg" alt="An image of oyakodon.">
+    <main>
+        <div class="wrapper-space">
+            <div class="lists">
+                <h2>Description</h2> 
+                <p>
+                    This is my take on Oyakodon, a japanese chicken and egg rice bowl.
+                </p>
+    
+                <h2>Ingredients</h2>
+                <ul>
+                    <li>100g Chicken Thigh</li>
+                    <li>30g Soy Sauce</li>
+                    <li>30g Mirin</li>
+                    <li>30g Sake</li>
+                    <li>100g Dashi Stock</li>
+                    <li>Half an Onion</li>
+                    <li>1 Spring Onion</li>
+                    <li>Half a Bowl of Rice</li>
+                    <li>1 Whole Egg</li>
+                    <li>Optional: 1 Egg Yolk</li>
+                </ul>
+    
+                <h2>Instructions</h2>
+                <ol>
+                    <li>
+                        <p>
+                           Cut half an onion from tip to root into strips.
+                           Cut the chicken thigh into bite-sized pieces.
+                           Thinly cut the spring onion as garnish for later.
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            Fry the chicken over medium heat until the outside is beginning to brown.
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            Add the soy sauce, mirin, sake and dashi stock into the pan.
+                            At this point, also add the cut onion.
+                            Cover with a lid and let it simmer for 5 minutes.
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            Lightly mix the egg in a bowl.
+                            Add half of the egg into the pan, cover and let it simmer for half a minute.
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            After half a minute, add the rest of the egg and some of the spring onion.<br>
+                            Let it simmer for an additional minute.
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            Pour everything in the pan over the bowl of rice.
+                            Add the rest of the spring onion on top.
+                            If raw eggs are safe to eat where you live, you can add an egg yolk on top.
+                        </p>
+                    </li>
+                </ol>
+            </div>
+    
+            <div class="img-wrapper img-right">
+                <img src="../../images/oyakodon.jpg" alt="An image of oyakodon.">
+            </div>
         </div>
 
     </main>
+
+    <footer>
+        <div class="wrapper-centered">
+            <p>Bottom Text</p> 
+        </div>
+    </footer>
 </body>
 <script src=""></script>
 
diff --git a/static/recipes/pizza.html b/static/recipes/pizza.html
index 663ecd2..b503959 100644
--- a/static/recipes/pizza.html
+++ b/static/recipes/pizza.html
@@ -31,85 +31,93 @@
         <h1>My Pizza Recipe</h1>
     </div>
 
-    <main id="wrapper-center">
-        <div id="lists">
-            <h2>Description</h2> 
-            <p>
-                This is my take on a classic margherita pizza.<br>
-                We will make our own pizza dough and sauce!
-            </p>
-
-            <h2>Ingredients</h2>
-            <ul>
-                <li>500g Flour</li>
-                <li>325g Water</li>
-                <li>10g Salt</li>
-                <li>7g Active Dry Yeast</li>
-                <li>400g Canned Tomatoes (~1 Can)</li>
-                <li>100g Mozzarella</li>
-            </ul>
-
-            <h2>Instructions</h2>
-            <ol>
-                <li>
-                    <p>
-                        Mix all dry ingredients in a bowl.
-                    </p>
-                </li>
-                <li>
-                    <p>
-                        Add the water and knead the dough until no dry flour is left.
-                    </p>
-                </li>
-                <li>
-                    <p>
-                        Cover the bowl and let it rest a couple hours, until doubled in size.
-                        You can also let it rest overnight.
-                    </p>
-                </li>
-                <li>
-                    <p>
-                        Once the dough has finished resting, take it out of the bowl onto your working surface
-                        and knead it a bit more, about 2-3 minutes.
-                    </p>
-                </li>
-                <li>
-                    <p>
-                        Divide the dough into four equally sized portions. Take one portion and lightly cover it
-                        with a damp towel to let it rest for an additional hour.
-                        You can put the other portions into the fridge or freezer.
-                        While the dough is resting one final time, preheat your oven as high as it can go.<br>
-                    </p>
-                </li>
-                <li>
-                    <p>
-                        Meanwhile, it's time to make the pizza sauce.
-                        For this, I usually just use canned tomatoes. You can use
-                        your hands to crush them or puree it with a stick blender.
-                        Add some salt and pepper to your liking.
-                        If you're feeling fancy, you can add oregano and thyme,
-                        or any other additional seasonings you like.<br>
-                        This makes enough sauce for multiple pizzas. You can also use it for pasta.
-                    </p>
-                </li>
-                <li>
-                    <p>
-                        Stretch out the dough as big as you can.
-                        Put the sauce and mozzarella on top. I like to rip the mozzarella by hand.
-                        Then the pizza goes into the oven for about 7-10 minutes,
-                        depending how hot you oven can go.
-                        Once the mozzarella starts bubbling and is a nice golden
-                        brown it's done!
-                    </p>
-                </li>
-            </ol>
-        </div>
-
-        <div id="img-wrapper">
-            <img src="../../images/pizza.jpg" alt="An image of a classic margherita pizza.">
+    <main>
+        <div class="wrapper-space">
+            <div class="lists">
+                <h2>Description</h2> 
+                <p>
+                    This is my take on a classic margherita pizza.<br>
+                    We will make our own pizza dough and sauce!
+                </p>
+    
+                <h2>Ingredients</h2>
+                <ul>
+                    <li>500g Flour</li>
+                    <li>325g Water</li>
+                    <li>10g Salt</li>
+                    <li>7g Active Dry Yeast</li>
+                    <li>400g Canned Tomatoes (~1 Can)</li>
+                    <li>100g Mozzarella</li>
+                </ul>
+    
+                <h2>Instructions</h2>
+                <ol>
+                    <li>
+                        <p>
+                            Mix all dry ingredients in a bowl.
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            Add the water and knead the dough until no dry flour is left.
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            Cover the bowl and let it rest a couple hours, until doubled in size.
+                            You can also let it rest overnight.
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            Once the dough has finished resting, take it out of the bowl onto your working surface
+                            and knead it a bit more, about 2-3 minutes.
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            Divide the dough into four equally sized portions. Take one portion and lightly cover it
+                            with a damp towel to let it rest for an additional hour.
+                            You can put the other portions into the fridge or freezer.
+                            While the dough is resting one final time, preheat your oven as high as it can go.<br>
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            Meanwhile, it's time to make the pizza sauce.
+                            For this, I usually just use canned tomatoes. You can use
+                            your hands to crush them or puree it with a stick blender.
+                            Add some salt and pepper to your liking.
+                            If you're feeling fancy, you can add oregano and thyme,
+                            or any other additional seasonings you like.<br>
+                            This makes enough sauce for multiple pizzas. You can also use it for pasta.
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            Stretch out the dough as big as you can.
+                            Put the sauce and mozzarella on top. I like to rip the mozzarella by hand.
+                            Then the pizza goes into the oven for about 7-10 minutes,
+                            depending how hot you oven can go.
+                            Once the mozzarella starts bubbling and is a nice golden
+                            brown it's done!
+                        </p>
+                    </li>
+                </ol>
+            </div>
+    
+            <div class="img-wrapper img-right">
+                <img src="../../images/pizza.jpg" alt="An image of a classic margherita pizza.">
+            </div>
         </div>
 
     </main>
+
+    <footer>
+        <div class="wrapper-centered">
+            <p>Bottom Text</p> 
+        </div>
+    </footer>
 </body>
 <script src=""></script>
 
diff --git a/static/style.css b/static/style.css
index 9824d4c..2b3aef9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -13,18 +13,42 @@ body {
 
 header {
     text-align: center;
-    color: white;
 }
 
 main {
     min-height: 100%;
 }
 
-#wrapper-center {
+.top-gap {
+    padding-top: 3%;
+}
+
+.bottom-gap {
+    padding-bottom: 3%;
+}
+
+.wrapper-space,
+.wrapper-centered,
+.flex-stack {
     display: flex;
+}
+
+.wrapper-space {
+    justify-content: space-between;
+}
+
+.wrapper-centered {
     justify-content: center;
 }
 
+.align-center {
+    align-items: center;
+}
+
+.flex-stack {
+    flex-direction: column; 
+}
+
 main, #headerwrapper {
     background-color: #fafafa;
     color: black;
@@ -36,6 +60,10 @@ main, #headerwrapper {
     padding-bottom: 2%;
 }
 
+.text-centered {
+    text-align: center;
+}
+
 nav ul {
     margin: 0;
     padding: 0;
@@ -53,31 +81,43 @@ nav a {
     color: white;
 }
 
-#lists {
+footer p {
+    display: block;
+    color: white;
+    margin: 7px;
+}
+
+.lists {
     margin-left: 2%;
     flex: 1;
 }
 
-#img-wrapper {
-    text-align: right;
+img {
+    max-width: 100%;
+}
+
+.img-wrapper {
     margin-right: 2%;
     margin-left: 2%;
-    flex: 1;
+    flex: 0.5;
 }
 
-img {
-    max-height: 400px;
-    max-width: 400px;
+.img-right {
+    text-align: right;
 }
 
-#recipe-list {
+.recipe-list {
     float: left;
     padding-left: 38%;
     list-style-type: none;
 
 }
 
-#recipe-item {
+.recipe-item {
     padding: 5px;
     font-size: 26px;
 }
+
+div.flex-stack.top-gap {
+    background-color: #a0a0a0;
+}