CodeYourFuture · nataliiazab · Nov 9, 2022 · Nov 9, 2022 · Nov 9, 2022 · Nov 9, 2022
diff --git a/images/chock-white-cake.jpg b/images/chock-white-cake.jpg
diff --git a/images/chocolate-pie.jpg b/images/chocolate-pie.jpg
diff --git a/images/corn-cake.jpg b/images/corn-cake.jpg
diff --git a/images/cupcake-removebg-preview.png b/images/cupcake-removebg-preview.png
diff --git a/images/cupcake.jpg b/images/cupcake.jpg
diff --git a/images/mafin-strawberry.jpg b/images/mafin-strawberry.jpg
diff --git a/images/mafin.jpg b/images/mafin.jpg
diff --git a/images/tiramisu.jpg b/images/tiramisu.jpg
diff --git a/images/violet-cake.jpg b/images/violet-cake.jpg
diff --git a/index.html b/index.html
@@ -1,16 +1,121 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <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 -->
-</head>
+    <link rel="stylesheet" href="style.css" />
+    <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=Lora&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <section class="intro">
+      <div class="intro-img">
+        <img
+          class="intro-img-src"
+          src="./images/cupcake-removebg-preview.png"
+          alt="chocolate cupcake"
+        />
+      </div>
+      <div class="intro-text">
+        <p>The best cakes in town delivered to your door</p>
+      </div>
+    </section>
+    <div class="body">
+      <header class="header">
+        <nav class="navbar">
+          <ul class="nav-menu">
+            <li class="nav-item">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">Cakes</a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">Orderin</a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">Lessons</a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">About</a>
+            </li>
+          </ul>
+          <div class="hamburger">
+            <span class="bar"></span>
+            <span class="bar"></span>
+            <span class="bar"></span>
+          </div>
+        </nav>
+      </header>
+
+      <section class="hero">
+        <div class="welcome">
+          <h1>Welcome</h1>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
+            inventore cupiditate perferendis cumque illo nam molestiae labore
+            eaque, illum doloremque facilis, accusamus quis placeat! Fuga sed
+            animi expedita porro deserunt. Lorem ipsum dolor sit amet
+            consectetur, adipisicing elit. Doloremque, sint atque magnam, illum
+            inventore totam non ducimus amet maxime molestias id vero veritatis
+            voluptatum. Nostrum expedita quas ullam rem libero?
+          </p>
+        </div>
+        <div class="main-img">
+          <img src="./images/chock-white-cake.jpg" alt="" />
+        </div>
+        <div class="cross">
+          <div class="cross-div">
+            <img class="cross-imgs" src="./images/violet-cake.jpg" alt="" />
+          </div>
+          <div class="cross-div">
+            <img class="cross-imgs" src="./images/corn-cake.jpg" alt="" />
+          </div>
+          <div class="cross-div">
+            <img class="cross-imgs" src="./images/tiramisu.jpg" alt="" />
+          </div>
+          <div class="cross-div">
+            <img class="cross-imgs" src="./images/cupcake.jpg" alt="" />
+          </div>
+        </div>
+      </section>
+    </div>
+    <footer>
+      <div class="cnt-list">
+        <ul class="contacts">
+          <li class="contact"><b>Email: </b> <em>cakeltd@gmail.com</em></li>
+          <li class="contact"><b>Phone: </b> <em>XXX-XXX-XXX</em></li>
+          <li class="contact"><b>Address: </b> <em>London, UK</em></li>
+        </ul>
+      </div>
+      <p>The website is designed and created by Natalie Zablotska</p>
+    </footer>
+  </body>
+  <script>
+    const hamburger = document.querySelector(".hamburger");
+    const navMenu = document.querySelector(".nav-menu");
+
+    hamburger.addEventListener("click", mobileMenu);
+
+    function mobileMenu() {
+      hamburger.classList.toggle("active");
+      navMenu.classList.toggle("active");
+    }
+
+    const navLink = document.querySelectorAll(".nav-link");
 
-<body>
-    <!-- Add your markup here -->
-</body>
+    navLink.forEach((n) => n.addEventListener("click", closeMenu));
 
-</html>
+    function closeMenu() {
+      hamburger.classList.remove("active");
+      navMenu.classList.remove("active");
+    }
+  </script>
+</html>