Merge pull request #429 from srishti023/main

Hamburger working, navbar implemented on everypage, contribution page alignment fix
ankit071105 · Oct 19, 2024 · 9f22db7 · 9f22db7
2 parents 74d06f2 + 65ede34
commit 9f22db7
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 4 deletions.
diff --git a/about.html b/about.html
@@ -5,8 +5,86 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About Us - Ticket Booking</title>
     <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <style>
+        .nav-container{
+      display: flex;
+}
+    </style>
 </head>
 <body>
+    <nav class="navbar">
+        <a href="./index.html" id="logo-href">
+            <div class="logo-container">
+                <img src="images/4.jpeg" alt="Ticket Booking Logo" class="logo-image">
+                <div class="logo">Ticket Booking</div>
+            </div>
+        </a>
+
+        <div class="nav-container">
+            <div class="menu-toggle">
+                <span class="bar"></span>
+                <span class="bar"></span>
+                <span class="bar"></span>
+            </div>
+
+            <ul class="nav-links">
+                <li><a href="about.html"><i class="fas fa-info-circle"></i> About Us</a></li>
+                <li><a href="buy.html"><i class="fas fa-shopping-cart"></i> Buy</a></li>
+                <li><a href="sell.html"><i class="fas fa-tag"></i> Sell</a></li>
+                <li><a href="#contact"><i class="fas fa-envelope"></i> Contact</a></li>
+                <li><a href="contributors.html"><i class="fas fa-users"></i> Our Contributors</a></li>
+
+                <li><a href="/client/register.html" class="login-btn"><i class="fas fa-user"></i></a></li>
+            </ul>
+
+            <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
+        </div>
+    </nav>
+    <script>
+              const darkModeToggle = document.getElementById('darkModeToggle');
+        const body = document.querySelector('body');
+        if (darkModeToggle) {
+            darkModeToggle.addEventListener('click', () => {
+                document.body.classList.toggle('dark-mode');
+                if (body.classList.contains('dark-mode')) {
+                    darkModeToggle.innerHTML = "🔆";
+                }
+                else {
+                    darkModeToggle.innerHTML = "🌙";
+                }
+            });
+        }
+        // change icon of the dark/light mode
+      const menuToggle = document.querySelector('.menu-toggle');
+        const navLinks = document.querySelector('.nav-links');
+        menuToggle.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+            menuToggle.classList.toggle('active');
+            // Special effect for hamburger icon
+            const bars = menuToggle.querySelectorAll('.bar');
+            bars.forEach((bar, index) => {
+                if (menuToggle.classList.contains('active')) {
+                    bar.style.transform = index === 1 ? 'scale(0)' : `rotate(${index === 0 ? '45deg' : '-45deg'})`;
+                } else {
+                    bar.style.transform = 'none';
+                }
+            });
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener('click', (event) => {
+            if (!navLinks.contains(event.target) && !menuToggle.contains(event.target)) {
+                navLinks.classList.remove('active');
+                menuToggle.classList.remove('active');
+                menuToggle.querySelectorAll('.bar').forEach(bar => {
+                    bar.style.transform = 'none';
+                });
+            }
+        });
+    </script>
     <section id="about-us">
         <div class="about-container">
             <h1>About Us</h1>

diff --git a/index.html b/index.html
@@ -56,10 +56,8 @@
 
     <!-- cursor -->
 
-    <body>
         <div id="scrollProgressBar" class="progress-bar"></div>
         <!-- Your existing content goes here -->
-    </body>
     <div class="gtranslate_wrapper"></div>
     <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
     <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>

diff --git a/pqr.css b/pqr.css
@@ -32,7 +32,6 @@ body {
   .contributor-card {
     width: 220px;
     position: relative;
-    max-width: calc(25% - 16px);
     display: flex;
     flex-direction: column;
     align-items: center;

diff --git a/styles.css b/styles.css
@@ -1140,7 +1140,8 @@ img {
     }
 
     .nav-links.active {
-        right: 0;
+        left: 75px;
+        top: 100px;
     }
 
     #darkModeToggle {