MultiverseLearningProducts · justinberg97 · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -34,4 +34,8 @@ Additionally, you will style this page to ensure that it entices users to read a
 - Give your images a border
 - Give your page a background image
 - Create a navigation bar at the top of your page. Style this navigation bar using CSS.
-- Check out pseudo-elements like `::before` and `::after` to try to animate your links.
+- Check out pseudo-elements like `::before` and `::after` to try to animate your links.
+// links
+https://downshiftology.com/recipes/chicken-fajitas/ (fajitas)
+red wine recipe https://www.spendwithpennies.com/beef-stew-recipe/
+pasta https://www.modernhoney.com/fettuccine-alfredo/
diff --git a/bowl.jpg b/bowl.jpg
diff --git a/coffee.jpg b/coffee.jpg
diff --git a/hamburger.jpg b/hamburger.jpg
diff --git a/index.html b/index.html
@@ -4,26 +4,62 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Culinary Chronicles </title>
+    <title>Culinary Chronicles with Rasheem and Justin </title>
+    <link rel="stylesheet" href="style.css" />
 </head>
 <body>
     <h1>Culinary Chronicles: Showcasing the Best Food in the World</h1>
-    <h3>A website by: PARTNER 1 & PARTNER 2</h3>
+    <h3>A website by: Justin & Rasheem</h3>
+    <h4>Here are our favorite 3 foods!</h4>
+    <div class ="lists">
+    <ol id="list1">
+        <p>1. Hamburger</p>
+        <img src="hamburger.jpg" alt="Hamburger">
+        <br>
 
-    <!-- Create a list of your favorite cuisines and pictures -->
+        <p>2. Tacos</p>
+        <img src="tacos.jpg" alt="Tacos">
+        <br>
 
+        <p>3. Steak</p>
+        <img src="steak.jpg" alt="Steak">
 
+    </ol>
+</div>
 
-    <!-- Create a list of your favorite dishes with pictures -->
-
-
-
-
-    <!-- Create a list of recipes with links to sites that provide the recipe -->
+    <h4>Here are our favorite Dishes!</h4>
+    <div class ="lists">
+    <ol id="list2">
+        <p>1. Bowl</p>
+        <img src="bowl.jpg" alt="Bowl">
+        <br>
 
+        <p>2. Plate</p>
+        <img src="plate.jpg" alt="Plate">
+        <br>
 
+        <p>3. Coffee Cup</p>
+        <img src="coffee.jpg" alt="Coffee Cup">
 
+    </ol>
+</div>
 
+    <h4>Here are our 3 favorite recipes!<h4>
+        <div class="lists"></div>
+        <ol id="list3">
+            <p>1. Fajitas</p>
+            <p><a href="https://downshiftology.com/recipes/chicken-fajitas/" target="_blank">View Fajita Recipe!</a></p>
+            <br>
+
+            <p>2. Beef Stew</p>
+            <p><a href="https://www.spendwithpennies.com/beef-stew-recipe/" target="_blank">View Beef Stew Recipe!</a></p>
+            <br>
+
+            <p>3. Fettuccini Alfredo</p>
+            <p><a href="https://www.modernhoney.com/fettuccine-alfredo/" target="_blank">View Fettuccini Alfredo Recipe!</a></p>
+
+        </ol>
+    </div>
 
 </body>
 </html>
diff --git a/plate.jpg b/plate.jpg
diff --git a/steak.jpg b/steak.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,69 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+
+body {
+  font-family: "Monsteratt";
+  background-color: blanchedalmond;
+  color: #333;
+  text-align: center;
+}
+
+h1 {
+  color: black;
+  padding: 5%;
+  font-size: 2em;
+  border-radius: 10px;
+}
+
+h3 {
+    color: black;
+    font-size: 1.5em
+}
+
+h4 {
+    color: black;
+    font-size: 1.5em;
+}
+
+#list1 {
+    background-color: aqua;
+    padding: 5%;
+    border-radius: 10px;
+    box-shadow: 0px 4px 6px rgba(red, green, blue, alpha);
+    display: inline-block;
+    margin: 20px;
+}
+#list2 {
+    background-color: aqua;
+    padding: 5%;
+    border-radius: 10px;
+    box-shadow: 0px 4px 6px rgba(red, green, blue, alpha);
+    display: inline-block;
+    margin: 20px;
+}
+#list3 {
+    background-color: aqua;
+    padding: 5%;
+    border-radius: 10px;
+    box-shadow: 0px 4px 6px rgba(red, green, blue, alpha);
+    display: inline-block;
+    margin: 20px;
+}
+
+.lists{
+    margin: 0 auto;
+    max-width: 800px;
+
+}
+a:hover{
+    text-decoration: wavy;
+    text-shadow: #333;
+}
+img {
+width: 100px;
+border-radius: 10px;
+opacity: 0.9;
+transition: opacity 0.3s;
+}
+img:hover {
+    opacity: 1;
+}
diff --git a/tacos.jpg b/tacos.jpg