fixed navbar navigagtion

dishaagarwal04 · Oct 29, 2024 · 79d919b · 79d919b
1 parent b04d615
commit 79d919b
Showing 1 changed file with 40 additions and 6 deletions.
diff --git a/about.html b/about.html
@@ -151,6 +151,37 @@
           font-size: 1.8rem;
         }
       }
+
+      /* Navbar Styles */
+      .menu {
+        display: flex;
+        justify-content: center;
+        margin: 20px 0;
+      }
+
+      .nav-links {
+        list-style: none;
+        display: flex;
+        padding: 10px;
+        background-color: #f0f0f0; /* Light background color */
+        border-radius: 25px; /* Rounded corners */
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+      }
+
+      .nav-links li {
+        margin: 0 15px; /* Space between links */
+      }
+
+      .nav-links a {
+        text-decoration: none;
+        color: #333; /* Dark text color */
+        font-weight: 500; /* Medium font weight */
+        transition: color 0.3s; /* Smooth color transition */
+      }
+
+      .nav-links a:hover {
+        color: #007bff; /* Change color on hover */
+      }
     </style>
   </head>
   <body>
@@ -166,21 +197,24 @@
 
           </div>
           <nav class="menu">
-            <ul>
+            <ul class="nav-links">
+              <li>
+                <a href="./index.html" id="home-link" onclick="changeContent('home')">Home</a>
+              </li>
               <li>
-                <a href="./index.html" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a>
+                <a href="features.html" id="features-link" onclick="changeContent('features')">Features</a>
               </li>
               <li>
-                <a href="features.html" id="features-link" onclick="changeContent('features')"><i class="fa-solid fa-file"></i> Features</a>
+                <a href="team.html" id="team-link" onclick="changeContent('team')">Team</a>
               </li>
               <li>
-                <a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a>
+                <a href="contact.html" id="contact-link" onclick="changeContent('contact')">Contact</a>
               </li>
               <li>
-                <a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a>
+                <a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')">Feedback</a>
               </li>
               <li>
-                <a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a>
+                <a href="nearby.html" id="nearby-link" onclick="changeContent('nearby')">Nearby</a>
               </li>
             </ul>
           </nav>