CodeYourFuture · sobiawaqar · Dec 4, 2021 · Dec 4, 2021 · Dec 8, 2021 · Dec 8, 2021
diff --git a/img/Birthday-Cakes2.jpg b/img/Birthday-Cakes2.jpg
diff --git a/img/anniversarycake.jpg b/img/anniversarycake.jpg
diff --git a/img/cake-logo-name.jpg b/img/cake-logo-name.jpg
diff --git a/img/cake-logo.jpg b/img/cake-logo.jpg
diff --git a/img/facebook-icon.svg b/img/facebook-icon.svg
diff --git a/img/instagram-icon.svg b/img/instagram-icon.svg
diff --git a/img/menu-hamburger.svg b/img/menu-hamburger.svg
diff --git a/img/merry christmas.webp b/img/merry christmas.webp
diff --git a/img/thankyou.jpg b/img/thankyou.jpg
diff --git a/img/twitter-icon.svg b/img/twitter-icon.svg
diff --git a/img/wedding.jpg b/img/wedding.jpg
diff --git a/index.html b/index.html
@@ -6,11 +6,77 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Responsive Cake webpage</title>
-    <!-- Add a link to your css file here -->
+    <link rel="stylesheet" href="css/normalize.css">
+<link rel="stylesheet" href="style.css">
+
 </head>
 
 <body>
-    <!-- Add your markup here -->
-</body>
+<div class="container">
+<header>
+
+    <img src="img/cake-logo-name.jpg" alt="logo" width:auto;>
+    <h1>The best cakes in town, delivered to your door</h1>
+    <img src="img/cake-logo-name.jpg" alt="logo" width:auto;>
+
+    <menu-bar>
+        <nav>
+            <a href=""> Home</a>
+            <a href="" > Cakes</a>
+            <a href=""> Orderin</a>
+            <a href=""> Lessons</a>
+            <a href="" >About</a>
+
+        </nav>
+    </menu-bar>
+</header>
+
+<main>
+
+<section class="Introdution">
+    <div class="text">
+        <h2> Cakes by Sobia</h2>
+        <p>A cake for everyone. A slice of heaven. Art of Cakes
+            Bake Someone Happy. Baked fresh for you. Baking people happy. Cake? Cakes and bakes from the house of Queens!
+            Cakes handcrafted with care. Come in for a cake lift
+            Come see what we can do! Come taste the difference
+            Creations for Celebrations Did someone say Cake?!
+            Eat like it is your last cake Eat your heart out
+            Every batch from scratch Exceptional taste
+            Exceptional Taste, Exceptional Price Expressions with confection.
+            If in doubt. Bake a cake. Just cake! Let us create joy for you!
+        </p>
+    </div>
+    <img scr="" alt=" cake for all taste">
+
+</section>
+
+<section class="product-varieties">
+    <div class="cake-type" >
+        <img src="img/Birthday-Cakes2.jpg" alt="Birthday Cakes">
+    </div>
+    <div class="cake-type" >
+        <img src="img/wedding.jpg " alt="Wedding Cakes">
+    </div>
+    <div class="cake-type" >
+        <img src="img/anniversarycake.jpg" alt="Anniversary Cakes">
+    </div>
+    <div class="cake-type" >
+        <img src="img/thankyou.jpg" alt="Thank You Cakes">
+    </div>
 
+</section>
+</main>
+
+<footer>
+
+    <p>For updates and news, Follow us here: </p>
+
+    <img src="img/facebook-icon.svg" alt="facebook" width=25px; height=20px;>
+    <img src="img/twitter-icon.svg" alt="twitter" width=25px; height=20px;>
+    <img src="img/instagram-icon.svg" alt="instagram" width=25px; height=20px;>
+
+</footer>
+</div>
+</body>
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,70 @@
-/*  Add your styling here */
+.container{
+    display:grid;
+    grid-template-columns: repeat(4, 1fr);
+}
+
+header{
+    background-color: lightcoral;
+    grid-column: 1/-1;
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 3px;
+}
+header img {
+    width: 100px;
+}
+
+header h1{text-align: center;
+margin-top: 100px;
+margin-left: 100px;}
+main{
+    background-color: lightsalmon;
+    grid-column: 1/-1;
+}
+
+.product-varieties{
+    display: grid;
+    background-color: magenta;
+    grid-template-columns: 1fr;
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 3px;
+}
+.cake-type{
+
+    overflow: hidden;
+    ;
+}
+.cake-type img{
+    width: 100%;;  height:100%;   
+    padding: 4px;
+    margin: 5px;        
+}
+
+.introduction{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: auto;
+}
+
+.text{
+    grid-area: introduction;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-style: italic;
+}
+@media screen and (min-width:768px){
+    .product-varieties{
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: max-content;
+    }
+    header{
+        display: flex;
+    }
+}
+
+footer{
+    display:flex;
+    grid-column: 1/-1;
+    background-color: mediumorchid;
+    align-items: center;
+    justify-content: center;
+
+}