CodeYourFuture · RobCso · Jul 23, 2022 · Jul 23, 2022 · Jul 25, 2022 · Jul 25, 2022
diff --git a/images/birth-cake.jpg b/images/birth-cake.jpg
diff --git a/images/cake-logo.jpg b/images/cake-logo.jpg
diff --git a/images/cakes-group.jpg b/images/cakes-group.jpg
diff --git a/images/cupcake.jpg b/images/cupcake.jpg
diff --git a/images/fruit-cake.jpg b/images/fruit-cake.jpg
diff --git a/images/swirl.jpg b/images/swirl.jpg
diff --git a/index.html b/index.html
@@ -7,10 +7,88 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Responsive Cake webpage</title>
     <!-- Add a link to your css file here -->
+    <link href="style.css" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+SC&family=Lobster&display=swap" rel="stylesheet">
 </head>
 
 <body>
     <!-- Add your markup here -->
+    <header class="header">
+        <img class="logo" src="images/cake-logo.jpg" alt="logo">
+
+        <navbar class="navbar">
+            <input id="menu-toggle" type="checkbox" />
+            <label class="menu-btn" for="menu-toggle">
+                <span></span>
+            </label>
+            <ul class="nav-list">
+                <li class="nav-link"><a href="#">HOME</a></li>
+                <li class="nav-link"><a href="#">CAKES</a></li>
+                <li class="nav-link"><a href="#">ORDERING</a></li>
+                <li class="nav-link"><a href="#">LESSONS</a></li>
+                <li class="nav-link"><a href="#">ABOUT</a></li>
+            </ul>
+        </navbar>
+
+        <p class="header-text">The best cakes in town delivered to your door</p>
+    </header>
+
+    <ul class="desktop">
+        <li class="navigation"><a href="#">HOME</a></li>
+        <li class="navigation"><a href="#">CAKES</a></li>
+        <li class="navigation"><a href="#">ORDERING</a></li>
+        <li class="navigation"><a href="#">LESSONS</a></li>
+        <li class="navigation"><a href="#">ABOUT</a></li>
+    </ul>
+
+    <img class="image-name" src="images/cakes-group.jpg" alt="welcome image">
+
+    <div class="welcome-text">
+        <h1>Welcome</h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A quos corrupti, nihil quibusdam libero facere?
+            Quisquam qui corrupti atque dolore distinctio nostrum quas corporis, placeat dolores, cupiditate voluptatum.
+            Molestiae, voluptatum?</p>
+    </div>
+
+
+
+
+    <section class="thumbnail1">
+        <img class="birth-cake thumbnail" src="images/birth-cake.jpg">
+    </section>
+
+
+    <section class="thumbnail2">
+        <img class="fruit-cake thumbnail" src="images/fruit-cake.jpg">
+    </section>
+
+
+    <section class="thumbnail3">
+        <img class="cupcake thumbnail" src="images/cupcake.jpg">
+    </section>
+
+
+    <section class="thumbnail4">
+        <img class="swirl thumbnail" src="images/swirl.jpg">
+    </section>
+
+
+
+
+    <footer class="footer">
+        <section class="about">
+            <div class="about1"><a href="#"> About</a></div>
+            <div class="about1"><a href="#"> Contact us</a></div>
+            <div class="about1"><a href="#"> Surprise</a></div>
+        </section>
+        <section class="copyright">
+            <div class="copyright1"><a href="#"> Copyright</a></div>
+        </section>
+    </footer>
+
+
 </body>
 
 </html>