CodeYourFuture · Bedi06 · Feb 9, 2023 · Feb 10, 2023 · Feb 11, 2023 · Feb 11, 2023
diff --git a/cakeco.js b/cakeco.js
@@ -0,0 +1,33 @@
+$(document).ready(function () {
+    // Add smooth scrolling to all links
+    $("a").on("click", function (event) {
+        // Make sure this.hash has a value before overriding default behavior
+        if (this.hash !== "") {
+            // Prevent default anchor click behavior
+            event.preventDefault();
+
+            // Store hash
+            var hash = this.hash;
+
+            // Using jQuery's animate() method to add smooth page scroll
+            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
+            $("html, body").animate(
+                {
+                    scrollTop: $(hash).offset().top,
+                },
+                800,
+                function () {
+                    // Add hash (#) to URL when done scrolling (default click behavior)
+                    window.location.hash = hash;
+                }
+            );
+        } // End if
+    });
+});
+
+const hamburgerMenu = document.querySelector('.hamburger-menu');
+const navLinks = document.querySelector('nav ul');
+
+hamburgerMenu.addEventListener('click', function () {
+    navLinks.classList.toggle('open');
+});
diff --git a/index.html b/index.html
@@ -1,16 +1,133 @@
 <!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" />
+  </head>
+  <body>
+      <header>
+        <div class="top-header"> 
+          <img src="pics/cake_2.svg" class="logo-img" />
+            <nav class="navbar">
+              <div class="navbar-container container">
+                  <input type="checkbox" name="" id="">
+                    <div class="hamburger-lines">
+                        <span class="line line1"></span>
+                        <span class="line line2"></span>
+                        <span class="line line3"></span>
+                    </div>
+                      <ul class="menu-items">
+                        <li><a href="#home">Home</a></li>
+                        <li><a href="#cakes">Cakes</a></li>
+                        <li><a href="#orderin">Order In</a></li>
+                        <li><a href="#lessons">Lessons</a></li>
+                        <li><a href="#about">About</a></li>
+                        <li><a href="#contact">Contact</a></li>
+                      </ul>
+                    </div>
+            </nav>
+          </div>
+        <div class="header-section">
+          <p>The best cakes in town delivered to your door</p>
+        </div>  
+      </header>
+
+  <div class="grid-container">    
+      <section class="about-section">
+        <div class="about-container">
+          <h1>
+          Cakes Co <br />
+          Welcomes You
+        </h1>
+        <p>
+          Walking into our bakery means being immediately greeted by a
+          delightful<br />
+          smell of freshly baked treats that no one can resist. As a
+          neighborhood<br />
+          bakery that serves the local community, we are committed to using the
+          <br />
+          best ingredients and serving you delicious, handcrafted baked goods.<br />
+          We have used the same recipes for generations, keeping true to the
+          original<br />
+          creations and signature products you know and love. Our dedicated
+          bakers<br />
+          will make sure to always have your favorites, so come on in and have a
+          bite!<br />
+        </p>
+      </div>
+      </section>
+      <section >
+        <div class="bigimg-container">
+        <img src="sections1.png" alt="cake" class="cake0">
+        </div>
+      </section>
+
+      <section class="images-container">
+        <div class="lemon-cake">  
+           <img src="pics/a3.png" alt="lemon-cake "  class="cake1"/></div>
+          <div class="levender-cake">         
+             <img src="pics/a2.png" alt="levender-cake" class="cake2 "/>
+          </div>
+          <div class="orange-cake">          
+            <img src="pics/a4.png" alt="orange-cake" class="cake3"/>
+          </div>
+          <div class="avokado-cake">         
+             <img src="pics/avokado1.png" alt="avokado-cake" class="cake4"/>
+          </div>
+      </section>
+  </div>
+      <footer>
+          <section id="contact">    
+              <div class="form-container">
+                <h2>Contact Us</h2>
+                <input type="text" placeholder="Your Name" />
+                <input type="email" placeholder="E-Mail" />
+                <textarea
+                  cols="30"
+                  rows="6"
+                  placeholder="Type Your Message"
+                ></textarea>
+                <a href="#" class="btn btn-primary">Submit</a>
+              </div>
+            </div>
+          </section>
+          <section class="social media">
+
+          </section>
+        </footer>
+
+  </body>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+  <script>
+    $(document).ready(function () {
+      // Add smooth scrolling to all links
+      $("a").on("click", function (event) {
+        // Make sure this.hash has a value before overriding default behavior
+        if (this.hash !== "") {
+          // Prevent default anchor click behavior
+          event.preventDefault();
 
-<body>
-    <!-- Add your markup here -->
-</body>
+          // Store hash
+          var hash = this.hash;
 
-</html>
+          // Using jQuery's animate() method to add smooth page scroll
+          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
+          $("html, body").animate(
+            {
+              scrollTop: $(hash).offset().top,
+            },
+            800,
+            function () {
+              // Add hash (#) to URL when done scrolling (default click behavior)
+              window.location.hash = hash;
+            }
+          );
+        } // End if
+      });
+    });
+  </script>
+</html>
diff --git a/pics/a2.png b/pics/a2.png
diff --git a/pics/a3.png b/pics/a3.png
diff --git a/pics/a4.png b/pics/a4.png
diff --git a/pics/avokado1.png b/pics/avokado1.png
diff --git a/pics/cake_2.svg b/pics/cake_2.svg
diff --git a/sections1.png b/sections1.png