.

harshalmore31 · Feb 1, 2024 · 2f33007 · 2f33007
1 parent 138e9f8
commit 2f33007
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -3,17 +3,21 @@
 <head>
     <meta charset="UTF-8">
     <title>Odin Recipes</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>Odin Recipes</h1>
-    <img src="images/Indian_food.jpg" alt="Image of Indian Food">
-    <p>
+    <div id="intro"><h1>Odin Recipes</h1></div>
+    <div class="container">
+        <div id="image"> <img src="images/Indian_food.jpg" alt="Image of Indian Food" width="700px" height="400px"  ></div>   
+    <div id="content"> 
+        <p>
         Some of the most famous and delicious Indian Food and Desert! 
     </p>
     <ul>
         <li><a href="recipes/Samosas.html">Easy Baked Indian Samosas</a></li>
         <li><a href="recipes/Lassi.html">Indian Lassi</a></li>
         <li><a href="recipes/Shahi_Tukra.html">Shahi_Tukra</a></li>
-    </ul>
+    </ul></div>  
+    </div>
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,46 @@
+body{
+    margin: 45px;
+    border: 2px solid black;
+    padding: 3px;
+    background-color: lightcyan;
+}
+
+#intro{
+
+    text-align: center;
+    border: 2px solid black;
+    border-radius: 30px;
+    padding: 5px;
+    margin: 10px;
+    margin-top: 20px;
+    margin-left: 50px;
+    margin-right: 50px;
+    background-color: lightgreen;
+}
+.container{
+    display: flex;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: lightcyan;
+}
+
+.container #image{
+    align-items:flex-start;
+    width: 700px;
+    height: 400px;
+    text-align: center;
+    /*border: 2px solid black;*/
+    padding: 5px;
+    margin: 10px;
+    clip-path: circle(95% at 20% 50%);    
+}
+
+.container #content{
+    font-size: larger;
+    align-content: flex-end;
+    border: 2px;
+    border-radius: 30px;
+    padding: 25px;
+    margin: 10px;;
+}