From debfc9bc039a47f29e7639ccc1abd9de6bd7e771 Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Fri, 18 Aug 2023 18:59:24 -0600
Subject: [PATCH] Add styles and edit link structure

---
 README.md                         |  4 +++-
 index.html                        |  4 +++-
 recipes/avocado-toast.html        | 19 ++++++++++++++-----
 recipes/greenbean-casserole.html  | 19 ++++++++++++++-----
 recipes/stove-popped-popcorn.html | 20 +++++++++++++++-----
 style.css                         | 29 +++++++++++++++++++++++++++++
 6 files changed, 78 insertions(+), 17 deletions(-)
 create mode 100644 style.css

diff --git a/README.md b/README.md
index 3626028..e6754ea 100644
--- a/README.md
+++ b/README.md
@@ -7,4 +7,6 @@ In this particular project, I will showcase some HTML skills I've learned:
 - lists
 - links and images
 
-This is going to be a very bare bones project, at least to start, until I get further along. Apparently, some CSS will be added later down the road, so stay tuned! 
+This is going to be a very bare bones project, at least to start, until I get further along. 
+
+Alright! CSS has been added!
\ No newline at end of file
diff --git a/index.html b/index.html
index dfcf4f4..70e9da2 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Recipes</title>
+    <link rel="stylesheet" href="style.css" />
 </head>
 <body>
     <h1>Odin Recipes</h1>
-    <ul>
+    <ul class="recipe-menu">
+        <li><a href="index.html">Home</a></li>
         <li><a href="./recipes/greenbean-casserole.html"> Green Bean Casserole</a></li>
         <li><a href="./recipes/avocado-toast.html">Avocado Toast</a></li>
         <li><a href="./recipes/stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
diff --git a/recipes/avocado-toast.html b/recipes/avocado-toast.html
index 7c1bf48..67b1250 100644
--- a/recipes/avocado-toast.html
+++ b/recipes/avocado-toast.html
@@ -4,13 +4,22 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Recipes - Avocado Toast</title>
+    <link rel="stylesheet" href="../style.css" />
 </head>
 <body>
-    <h1>Avocado Toast</h1>
-    <p><a href="../index.html">Return Home</a></p>
+    <h1>Odin Recipes</h1>
+
+    <h2>Avocado Toast</h2>
+
+    <ul class="recipe-menu">
+        <li><a href="../index.html">Home</a></li>
+        <li><a href="./greenbean-casserole.html"> Green Bean Casserole</a></li>
+        <li><a href="./avocado-toast.html">Avocado Toast</a></li>
+        <li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
+    </ul>
     <img src="../images/avocado-toast.jpg" alt="Avocado Toast">
     
-    <h2>Description</h2>
+    <h3>Description</h3>
     <p>
         Yes, I'm a millenial and yes I love me some avocado toast.
         Bite me. :p What I love even more, though, is just how versatile
@@ -26,7 +35,7 @@
     </p>
     <p>And with that in mind, let's get to it!</p>
 
-    <h2>Ingredients</h2>
+    <h3>Ingredients</h3>
     <ul>
         <li>One medium to large avocado</li>
         <li>A couple slices of nice quality bread</li>
@@ -34,7 +43,7 @@
         <li>Optional toppings and condiments of your choosing</li>
     </ul>
 
-    <h2>Steps</h2>
+    <h3>Steps</h3>
     <ol>
        <li>Heat up some butter or olive oil in a pan.</li>
        <li>Soak up that melted butter or oil with the bread.</li>
diff --git a/recipes/greenbean-casserole.html b/recipes/greenbean-casserole.html
index f4429cf..67f4ca0 100644
--- a/recipes/greenbean-casserole.html
+++ b/recipes/greenbean-casserole.html
@@ -4,13 +4,22 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Recipes - Green Bean Casserole</title>
+    <link rel="stylesheet" href="../style.css" />
 </head>
 <body>
-    <h1>Green Bean Casserole</h1>
-    <p><a href="../index.html">Return Home</a></p>
+    <h1>Odin Recipes</h1>
+    
+    <h2>Green Bean Casserole</h2>
+
+    <ul class="recipe-menu">
+        <li><a href="../index.html">Home</a></li>
+        <li><a href="./greenbean-casserole.html"> Green Bean Casserole</a></li>
+        <li><a href="./avocado-toast.html">Avocado Toast</a></li>
+        <li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
+    </ul>
     <img src="../images/GreenBeanCasserole.jpg" alt="Green Bean Casserole">
     
-    <h2>Description</h2>
+    <h3>Description</h3>
     <p>
         Green bean casserole has been a favorite of mine since childhood.
         It's creamy, cheesy, crunchy, fresh and <em>super</em> easy to make!
@@ -19,7 +28,7 @@
     </p>
     <p>So without further ado, let's dive in to the recipe!</p>
 
-    <h2>Ingredients</h2>
+    <h3>Ingredients</h3>
     <ul>
         <li>One large can of cream of mushroom soup</li>
         <li>Four small cans of green beans</li>
@@ -27,7 +36,7 @@
         <li>Cheddar cheese</li>
     </ul>
 
-    <h2>Steps</h2>
+    <h3>Steps</h3>
     <ol>
         <li>Preheat your oven to 350 degrees.</li>
         <li>Carefully open all the cans</li>
diff --git a/recipes/stove-popped-popcorn.html b/recipes/stove-popped-popcorn.html
index 34171c9..854b271 100644
--- a/recipes/stove-popped-popcorn.html
+++ b/recipes/stove-popped-popcorn.html
@@ -4,13 +4,23 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Recipes - Stove Popped Popcorn</title>
+    <link rel="stylesheet" href="../style.css" />
 </head>
 <body>
-    <h1>Stove Popped Popcorn</h1>
-    <p><a href="../index.html">Return Home</a></p>
+    <h1>Odin Recipes</h1>
+
+    <h2>Stove Popped Popcorn</h2>
+
+    <ul class="recipe-menu">
+        <li><a href="../index.html">Home</a></li>
+        <li><a href="./greenbean-casserole.html"> Green Bean Casserole</a></li>
+        <li><a href="./avocado-toast.html">Avocado Toast</a></li>
+        <li><a href="./stove-popped-popcorn.html">Stove Popped Popcorn</a></li>
+    </ul>    
+    
     <img src="../images/popcorn.jpg" alt="Stove Popped Popcorn">
     
-    <h2>Description</h2>
+    <h3>Description</h3>
     <p>
        This one is <em>extremely</em> easy! All you need is vegetable oil, 
        salt, and popcorn kernals. That's it! Of course if you <i>want</i> to
@@ -21,14 +31,14 @@
     </p>
     <p>So let's dive in!</p>
 
-    <h2>Ingredients</h2>
+    <h3>Ingredients</h3>
     <ul>
         <li>Popcorn kernals</li>
         <li>Vegetable oil</li>
         <li>Salt and/or other preferred seasonings</li>
     </ul>
 
-    <h2>Steps</h2>
+    <h3>Steps</h3>
     <ol>
        <li>Cover the bottom of a small pot generously with vegetable oil.</li>
        <li>Put the oil on medium heat and add 3-4 kernals to the pan.</li>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..cf0eaa4
--- /dev/null
+++ b/style.css
@@ -0,0 +1,29 @@
+body{
+    max-width: 60%;
+    margin: auto;
+    background-color: rgb(203, 247, 203);
+}
+
+img{
+    width:100%;
+    height: auto;
+}
+
+ul{
+    list-style-type: none;
+}
+
+a{
+   text-decoration: none; 
+}
+
+.recipe-menu{
+    padding: 0;
+    border: 5px solid green;
+    text-align: center;
+}
+
+.recipe-menu li{
+    margin: 8px;
+    display: inline-block;
+}
\ No newline at end of file