Merge pull request #699 from Rohit72099/main

Active Nav Links effect Done

about.html

@@ -437,7 +437,7 @@
 
                 </li>
                 <li class="tab">
-                    <a href="about.html">About</a>
+                    <a href="about.html" class="active">About</a>
                     <div class="cursor"></div>
                 </li>
                 <li class="tab">
@@ -821,6 +821,7 @@ <h2>Subscription Successful!</h2>
   })();
   </script>
 <script src="script/progressbar.js"></script>
+<script src="active.js"></script>
 
 </body>
 </html> 

active.js

@@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const tabs = document.querySelectorAll(".tab a");
+    const currentPage = window.location.pathname;
+
+    tabs.forEach(tab => {
+        // Check if the link matches the current page URL
+        if (tab.getAttribute("href") === currentPage.split('/').pop()) {
+            tab.classList.add("active");
+        }
+    });
+});

contact.html

@@ -92,7 +92,7 @@
                         </ul>
                     </li>
                     <li class="tab" style="margin-left: 15px;">
-                        <a href="contact.html">Contact Us</a>
+                        <a href="contact.html" class="active">Contact Us</a>
                         <div class="cursor"></div>
                     </li>
                 </ul>
@@ -281,6 +281,7 @@ <h1>Subscribe to Newsletter</h1>
 </script>
 
 <script src="script/progressbar.js"></script>
+<script src="active.js"></script>
 
 </body>
 

features.html

@@ -89,7 +89,7 @@
                         <div class="cursor"></div>
                     </li>
                     <li class="tab">
-                        <a href="features.html">Features</a>
+                        <a href="features.html" class="active">Features</a>
                         <div class="cursor"></div>
                     </li>
                     <li class="dropdown tab">
@@ -323,6 +323,7 @@ <h2>Subscription Successful!</h2>
     })();
     </script>
 <script src="script/progressbar.js"></script>
+<script src="active.js"></script>
 
 </body>
 

index.html

@@ -44,7 +44,7 @@
             <div class="tabs-container">
                 <ul id="tabs" class="tabs">
                     <li class="tab">
-                        <a href="index.html">Home</a>
+                        <a href="index.html" class="active">Home</a>
                         <div class="cursor"></div>
                     </li>
                     <li class="tab">
@@ -847,6 +847,8 @@ <h2>Subscription Successful!</h2>
     });
     </script>
 <script src="./script/popup.js"></script>
+<script src="active.js"></script>
+
 
 </body>
 

mens.html

@@ -1314,5 +1314,6 @@ <h2>Subscription Successful!</h2>
 <script src="script/progressbar.js"></script>
 
 
+
 </body>
 </html>

style.css

@@ -210,6 +210,16 @@ html {
   font-size: 20px;
 }
 
+/* navbar active ----------------*/
+.tab a.active {
+  background-color: black;
+  color: white;
+  padding: 10px px; /* Add padding if needed */
+  border-radius: 30px; /* Add border-radius for rounded corners if desired */
+}
+
+
+
 .utils {
   width: 8%;
   height: 70px;