MultiverseLearningProducts · idham19 · 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/img/beef.png b/img/beef.png
diff --git a/img/couscous.png b/img/couscous.png
diff --git a/img/french-cuisine.png b/img/french-cuisine.png
diff --git a/img/italian-cuisine.png b/img/italian-cuisine.png
diff --git a/img/north-african.png b/img/north-african.png
diff --git a/img/pizza.png b/img/pizza.png
diff --git a/index.html b/index.html
@@ -4,26 +4,121 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
     <title>Culinary Chronicles </title>
 </head>
 <body>
-    <h1>Culinary Chronicles: Showcasing the Best Food in the World</h1>
-    <h3>A website by: PARTNER 1 & PARTNER 2</h3>
+    <h1 class="title">Culinary Chronicles: Showcasing the Best Food in the World</h1>
+    <h3>A website by: Mahdi & Adrian</h3>
 
     <!-- Create a list of your favorite cuisines and pictures -->
+     <section>
 
+         <div class="container">
+             <div >
+                 <h1>Favorite Cuisines</h1>
+                 <ul class="fav-cuisine">
+                     <div>
+                         <li>North African cuisine</li>
+                         <img src="img/north-african.png" alt="">
+                        </div>
+
+                        <div>
+                            <li>Italian cuisine</li>
+                            <img src="img/italian-cuisine.png" alt="">
+                        </div>
+
+                        <div>
+                        <li>French Cuisine</li>
+                        <img src="img/french-cuisine.png" alt="">
+                    </div>
+
+                </ul>
+
+            </div>
+
+        </section>
+
+            <!-- Create a list of your favorite dishes with pictures -->
+       <section>
+
+           <div >
+
+               <h1>Favorite dishes</h1>
+               <ul class="fav-dishes">
+                   <div>
+                       <li>Couscous</li>
+                       <img src="img/couscous.png" alt="">
+                    </div>
+
+                    <div>
+                        <li>Pizza</li>
+                        <img src="img/pizza.png" alt="">
+                    </div>
+
+                    <div>
+                        <li>Beef bourguignon</li>
+                        <img src="img/beef.png" alt="">
+                    </div>
+
+                </ul>
+
+            </div>
+
+        </section>
+
+
+
+      <!-- Create a list of recipes with links to sites that provide the recipe -->
+       <section>
 
+           <div >
+               <h1>Favorite dishes</h1>
+
+               <div class="recipes">
+
 
-    <!-- Create a list of your favorite dishes with pictures -->
-
-
-
-
-    <!-- Create a list of recipes with links to sites that provide the recipe -->
-
-
-
-
-
-</body>
-</html>
+                    <article>
+                        <h2>Couscous</h2>
+
+                     <p>
+                         A versatile grain used in many North African dishes.
+                         Typically made from semolina and steamed.
+                         Often served with meat, vegetables, and a flavorful sauce.
+                         A healthy and nutritious grain.
+
+                     </p>
+                 </article>       
+
+                    <article>
+                        <h2>Pizza</h2>
+
+                        <p>
+                            A delicious, cheesy, and customizable treat.
+                            The perfect comfort food for any occasion.
+                            A versatile dish with endless topping possibilities.
+                            A classic Italian creation enjoyed worldwide.
+
+                        </p>
+                    </article>
+                    <article>
+                        <h2>Beef bourguignon</h2>
+                        <p>
+                            Brown beef cubes.
+                            Sauté onions, carrots, garlic.
+                            Add flour, red wine, broth, tomato paste, herbs.
+                            Simmer until tender.
+                            Add mushrooms, thicken with butter-flour mixture.
+                         </p>
+                     </article>
+
+
+                    </div>
+
+                </section>
+
+
+
+
+                </body>
+                </html>
diff --git a/style.css b/style.css
@@ -0,0 +1,68 @@
+*{
+    text-decoration: none;
+    background-color: beige;
+}
+body{
+display: block;
+align-items: center;
+justify-content: center;
+text-align: center;
+}
+
+img{
+    width: 400px;
+    height: 400px;
+    border-radius: 10%;
+    border: solid 3px black;
+}
+
+.container{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between
+}
+
+.fav-dishes{
+    display: flex;
+
+    justify-content: space-between
+}
+.fav-cuisine{
+    display: flex;
+    justify-content: space-between;
+}
+.recipes{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+ul {
+    list-style-type: none;
+  }
+li{
+    font-size: 2rem;
+    padding: 1rem;
+
+}
+article{
+    width: 400px;
+    height: 400px;
+    border-left:solid 3px saddlebrown;
+    text-align: center;
+    padding: 1rem;
+    line-height: 2.5rem;
+    font-size: 2rem;
+    border-radius: 15%;
+    background-image: linear-gradient(to right, #f5f5dc, white)
+}
+section{
+    margin-bottom: 3rem;
+}
+.title{
+    background-image: linear-gradient(to right, white, #ff6600, white);    
+    padding: 1rem;
+}
+h3{
+    margin: 1rem;
+}