Add files via upload

AlizayAyesha · Jul 10, 2024 · 5e0eddc · 5e0eddc
1 parent 9b7ecb5
commit 5e0eddc
Show file tree

Hide file tree

Showing 4 changed files with 262 additions and 0 deletions.
diff --git a/aa.png b/aa.png
diff --git a/index.html b/index.html
@@ -0,0 +1,97 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Responsive Navigation Bar With Slide Effect</title>
+    <!-- Google Fonts CDN Link -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <!-- stylesheet -->
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+
+        <div class="menu-wrapper">
+            <div class="hamburger-menu">
+                <div class="menu-burger">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            </div>
+            <nav class="menu">
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">About</a></li>
+                    <li><a href="#">Category</a></li>
+                    <li><a href="#">Contact</a></li>
+                </ul>
+            </nav>
+        </div>
+
+        <!-- Your hero section and content --> 
+
+    <section class="hero-background">
+      <img src="aa.png" class="Parallax"/>
+      <h2>Responsive Navigation Bar</h2>
+      <div class="circle"></div>
+    </section>
+    <div class="content">
+      <h2>Parallax Effect</h2>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio accusamus
+        magni eum labore minus, similique dolore veniam repellat adipisci illo
+        sapiente, suscipit quibusdam laborum vitae est reprehenderit id
+        temporibus eos, quia asperiores expedita sequi. Amet odio, tenetur id
+        aliquam voluptatem ab maxime aperiam corrupti placeat a quidem
+        voluptates vel neque animi nemo delectus temporibus sunt deserunt
+        incidunt, ducimus enim quis, ipsum eveniet rerum! Molestiae amet
+        asperiores excepturi tempore voluptate, placeat architecto dolor, ipsa
+        ea nihil, voluptates dicta. Harum, voluptatibus doloribus! Modi aperiam
+        non quod necessitatibus minima similique cupiditate, vel sequi alias sit
+        eum obcaecati mollitia doloribus magnam voluptatem autem neque
+        voluptatum reiciendis odio? Molestiae maiores earum sequi accusamus
+        cumque distinctio voluptatum ullam esse, nostrum nisi! Praesentium ipsum
+        mollitia, molestiae ab iure ut temporibus deleniti fugiat, nobis culpa
+        dolorum adipisci sed dignissimos non eligendi nam quas tempore
+        doloribus, quo blanditiis necessitatibus. Commodi itaque modi
+        consectetur aut ea. Animi obcaecati omnis ad blanditiis velit cumque
+        explicabo ducimus facilis, fugiat inventore tempore dolore doloribus ea
+        atque et eos temporibus dolores aliquid libero quia sapiente ut. Ipsum
+        perferendis maiores ea eius expedita iure reiciendis in molestias
+        perspiciatis, eum officiis odio? Reprehenderit tenetur nobis nam cum
+        placeat, corporis cupiditate sint ipsa ipsum aspernatur quasi quae illo.
+        Modi officiis perspiciatis fuga delectus ullam qui exercitationem
+        reiciendis quasi obcaecati quae, repellendus voluptatem ipsam nisi,
+        omnis veniam ipsa illo? Repellat quasi sequi corrupti, soluta excepturi
+        cupiditate ipsam ex veritatis deserunt nam, delectus ad voluptates
+        distinctio vero quisquam nemo temporibus dicta laborum nesciunt possimus
+        beatae dolor. Sequi iure autem temporibus magnam tempore repellendus,
+        quod laboriosam nobis obcaecati ullam sapiente saepe quaerat sint
+        aperiam maxime id voluptates nihil corporis ab officiis? Ipsam laborum
+        sint mollitia aliquid est debitis natus voluptates itaque voluptatum
+        dicta, quam recusandae nulla aliquam numquam harum vel fuga dolor labore
+        beatae! Iure totam nesciunt beatae aspernatur suscipit rem minima nam,
+        reprehenderit vero. Quibusdam tempore voluptatibus quis impedit rerum
+        incidunt vitae totam? Aperiam commodi dicta facilis esse laboriosam
+        labore magnam dolore voluptate quas, nostrum quaerat eligendi quam,
+        tempora repudiandae! Nobis animi alias accusamus consequuntur dolorum
+        qui obcaecati, est sit explicabo molestiae doloribus quo! Minus quas
+        possimus cum soluta rem eaque. Perspiciatis minima quam quasi aut dolor
+        culpa corporis placeat dignissimos corrupti laborum dolore saepe in
+        beatae at repellendus delectus magnam necessitatibus, sapiente sit
+        molestiae totam explicabo? Consequuntur, eum necessitatibus? Amet
+        quaerat laudantium, perferendis voluptatum ipsum maiores debitis et,
+        magnam beatae, tempora molestias labore deserunt in numquam id voluptas!
+      </p>
+    </div>
+
+    <!-- jQuery CDN Link -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <!-- Custom js -->
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,21 @@
+$(document).ready(function () {
+    $(document).ready(function () {
+        // Toggle hamburger menu and slide toggle menu
+        $(".hamburger-menu").click(function () {
+            $(this).toggleClass("open");
+            $(".menu").slideToggle();
+        });
+
+        // Add an active class in <a> tag for menu items
+        $(".menu li a").click(function () {
+            $(".menu li a").removeClass("active");
+            $(this).addClass("active");
+        });
+    });
+
+    // Parallax effect on background image
+    $(window).on("scroll", function() {
+        var scrollTop = $(this).scrollTop();
+        $(".hero-background img").css('transform', 'translateY(' + -(scrollTop * 0.5) + 'px)');
+    });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,144 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: #666262;
+    margin: 0;
+    padding: 0;
+    font-family: "Poppins", sans-serif;
+  }
+
+  /* CSS for hamburger menu */
+.hamburger-menu {
+    width: 40px;
+    height: 40px;
+    padding: 10px;
+    position: absolute;
+    top: 20px; /* Adjust top position as needed */
+    left: 20px; /* Adjust left position as needed */
+    cursor: pointer;
+    z-index: 1000; /* Ensure the hamburger menu is above other content */
+}
+
+.menu {
+    display: none;
+    width: 200px; /* Adjust width as needed */
+    position: absolute;
+    top: 80px; /* Adjust top position to align with your layout */
+    left: 20px; /* Adjust left position as needed */
+    background-color: #df731b;
+    box-shadow: 0 5px 20px rgba(224, 217, 217, 0.1);
+    z-index: 999; /* Ensure the menu is above the background */
+}
+
+.menu li {
+    list-style: none;
+    padding: 10px 0;
+}
+
+.menu li a {
+    display: block;
+    padding: 10px;
+    color: #000000;
+    text-decoration: none;
+    transition: all 0.3s ease-in-out;
+}
+
+.menu li a:hover {
+    background-color: #f0f0f0;
+}
+
+/* Hamburger menu animation */
+.hamburger-menu .menu-burger span {
+    display: block;
+    width: 100%;
+    height: 2px;
+    background-color: #582b05;
+    margin: 6px auto; /* Adjust spacing between lines */
+    transition: all 0.3s ease-in-out;
+}
+
+.hamburger-menu.open .menu-burger span:nth-child(1) {
+    transform: rotate(45deg) translate(5px, 5px);
+}
+
+.hamburger-menu.open .menu-burger span:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger-menu.open .menu-burger span:nth-child(3) {
+    transform: rotate(-45deg) translate(5px, -5px);
+}
+
+.circle {
+    width: 10px;
+    height: 10px;
+    background-color: #052233;
+    border-radius: 50%;
+    position: absolute;
+    mix-blend-mode: difference;
+    transition: all 0.1s ease-out;
+    pointer-events: none;
+    transform: scale(1); /* Initial scale */
+    z-index: -1;
+  }
+
+  h2:hover + .circle {
+    transform: scale(70); /* Scale up on hover */
+  }
+
+.hero-background,
+.hero-background h2 {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0; /* Remove any margin */
+    padding: 0; /* Remove any padding */
+    color: #d67230;
+    font-size: 50px;
+    font-weight: 700;
+    text-transform: capitalize;
+    overflow: hidden;
+}
+
+.hero-background img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+    transition: transform 0.1s ease-out; /* Add transition for smooth movement */
+}
+
+  .content {
+    width: 100%;
+    padding: 80px 120px;
+    background-color: #666262;
+  }
+
+  .content h2 {
+    margin-bottom: 30px;
+    color: #df731b;
+    font-size: 70px;
+    font-weight: 500;
+    text-align: center;
+
+  }
+
+  .content p {
+    color: #381a04;
+    font-size: 18px;
+    font-weight: 300;
+    text-align: justify;
+    text-align-last: center;
+    line-height: 1.7;
+  }
+