MultiverseLearningProducts · C1Banks · Apr 18, 2023 · Apr 18, 2023 · Apr 18, 2023
diff --git a/images/5711F470-9971-4CA9-B64E-E5091F283342.png b/images/5711F470-9971-4CA9-B64E-E5091F283342.png
diff --git a/images/Shrimp_Tacos.png b/images/Shrimp_Tacos.png
diff --git a/images/Shrimp_Tikka_Massala.png b/images/Shrimp_Tikka_Massala.png
diff --git a/images/cajun_food.jpg b/images/cajun_food.jpg
diff --git a/images/chinese_food.jpg b/images/chinese_food.jpg
diff --git a/images/gumbo.png b/images/gumbo.png
diff --git a/images/img_1.png b/images/img_1.png
diff --git a/images/indian_food.png b/images/indian_food.png
diff --git a/images/pexels-anna-tarazevich-6937455.jpg b/images/pexels-anna-tarazevich-6937455.jpg
diff --git a/images/pexels-pixabay-357756.jpg b/images/pexels-pixabay-357756.jpg
diff --git a/index.html b/index.html
@@ -5,10 +5,53 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Culinary Chronicles </title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>Culinary Chronicles: Showcasing the Best Food in the World</h1>
-    <h3>A website by: PARTNER 1 & PARTNER 2</h3>
+    <header>
+        <h1>Culinary Chronicles: Showcasing the Best Food in the World</h1>
+        <h3>A website by: Curtis & Malik</h3>
+    </header>
+
+    <main>
+        <ul>
+            <div class="curtisDishes">
+                <li>Indian</li>
+                <img src="images/indian_food.png" alt="Indian Food"/>
+                <li>Mexican</li>
+                <img src="images/5711F470-9971-4CA9-B64E-E5091F283342.png" alt="Mexican Food"/>
+            </div>
+            <div class="malikDishes">
+                <li>Cajun</li>
+                <img src="images/cajun_food.jpg" alt="Cajun Food"/>
+                <li>Chinese</li>
+                <img src="images/chinese_food.jpg" alt="Chinese Food"/>
+            </div>
+
+
+        </ul>
+        <ol>
+            <li>Shrimp Tikka Massala</li>
+            <a href="https://www.marthastewart.com/317190/shrimp-tikka-masala" target="_blank">
+                <img src="images/Shrimp_Tikka_Massala.png" alt="Indian Shrimp Tikka Massala"/>
+            </a>
+            <li>Shrimp Tacos</li>
+            <a href="https://www.gimmesomeoven.com/shrimp-tacos-recipe/" target="_blank">
+                <img src="images/Shrimp_Tacos.png" alt="Mexican Dish Shrimp Tacos"/>
+            </a>
+            <li>Gumbo</li>
+            <a href="https://www.allrecipes.com/recipe/12940/seafood-gumbo/" target="_blank">
+                <img src="images/gumbo.png" alt="Cajun Food Gumbo"/>
+            </a>
+            <li>Fried Rice</li>
+            <a href="https://thewoksoflife.com/shrimp-fried-rice/" target="_blank">
+                <img src="images/pexels-anna-tarazevich-6937455.jpg" alt="Chinese Dish Fried Rice">
+            </a>
+
+        </ol>
+
+    </main>
+
 
     <!-- Create a list of your favorite cuisines and pictures -->
 

diff --git a/styles.css b/styles.css
@@ -0,0 +1,65 @@
+body{
+    background-color:#FFD580;
+}
+img{
+    width: 35%;
+    height: 300px;
+    object-fit: cover;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+
+}
+header{
+    text-align: center;
+}
+.curtisDishes{
+    width: 90%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: orange;
+    margin-right: auto;
+    margin-left: auto;
+    font-family: sans-serif;
+    font-size: 20px;
+    text-align: center;
+    opacity: 80%;
+
+}
+.malikDishes {
+    margin-top: 3em;
+    width: 90%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: orange;
+    margin-right: auto;
+    margin-left: auto;
+    font-family: sans-serif;
+    font-size: 20px;
+    opacity: 80%;
+}
+ul li{
+    text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    list-style: none;
+    margin-left: 2em;
+}
+ol  {
+    border: 2px solid lightgrey;
+    border-radius: 5px;
+    color: white;
+    background-color: lightgrey;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 60%;
+    margin-left: auto;
+    margin-right: auto;
+    text-decoration-line: underline;
+}
+ol img{
+    width: 100%;
+    height: 50vh;
+}