Update features.html

features.html

@@ -366,6 +366,42 @@
       align-items: center;
       gap: 8px;
     }
+
+    /* Navbar Styles */
+    .menu {
+      display: flex;
+      justify-content: center;
+      margin: 20px 0;
+    }
+
+    .nav-links {
+      list-style: none;
+      display: flex;
+      padding: 10px; /* Adjust padding for better spacing */
+      background-color: rgba(255, 255, 255, 0.9); /* Light background with transparency */
+      border-radius: 30px; /* More rounded corners */
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
+    }
+
+    .nav-links li {
+      margin: 0 15px; /* Space between links */
+    }
+
+    .nav-links a {
+      text-decoration: none;
+      color: #333; /* Dark text color */
+      font-weight: 400; /* Regular font weight */
+      font-size: 16px; /* Adjust font size */
+      padding: 10px 15px; /* Add padding for clickable area */
+      border: none; /* Remove border */
+      border-radius: 20px; /* Rounded corners for links */
+      transition: color 0.3s; /* Smooth transition */
+    }
+
+    /* Hover effect */
+    .nav-links a:hover {
+      color: #007bff; /* Change text color on hover */
+    }
   </style>
 
 </head>
@@ -406,19 +442,25 @@
       </div>
 
       <nav class="menu">
-        <ul>
-          <li><a href="index.html" id="home-link" onclick="changeContent('home')"><i
-
-            class="fa-solid fa-house"></i> Home</a></li>
-<li><a href="features.html" id="features-link" onclick="changeContent('features')"><i
-            class="fa-solid fa-file"></i> Features</a></li>
-<li><a href="team.html" id="team-link" onclick="changeContent('team')"><i
-            class="fa-solid fa-user-group"></i> Team</a></li>
-<li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i
-            class="fa-solid fa-phone"></i> Contact</a></li>
-<li><a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i
-
-            class="fa-solid fa-clipboard"></i> Feedback</a></li>
+        <ul class="nav-links">
+          <li>
+            <a href="./index.html" id="home-link" onclick="changeContent('home')">Home</a>
+          </li>
+          <li>
+            <a href="features.html" id="features-link" onclick="changeContent('features')">Features</a>
+          </li>
+          <li>
+            <a href="team.html" id="team-link" onclick="changeContent('team')">Team</a>
+          </li>
+          <li>
+            <a href="contact.html" id="contact-link" onclick="changeContent('contact')">Contact</a>
+          </li>
+          <li>
+            <a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')">Feedback</a>
+          </li>
+          <li>
+            <a href="nearby.html" id="nearby-link" onclick="changeContent('nearby')">Nearby</a>
+          </li>
         </ul>
       </nav>
       <div class="buttons">
@@ -655,4 +697,4 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
   </script>
 </body>
 
-</html>
+</html>