From b6a87438e89d8f854608e056cdd6587995d091ae Mon Sep 17 00:00:00 2001
From: Nehakumari1208 <nknehanisha@gmail.com>
Date: Wed, 15 May 2024 08:08:42 +0530
Subject: [PATCH] Updated navbar

---
 index.html | 16 ++++++++--------
 style.css  | 22 +++++++++++++++++++++-
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index b14f110..4bd3888 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,7 @@
 <nav class="navbar navbar-expand-lg fixed-top navbar_background">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">
-      <img src="./assets/logo_white.png" alt="Bootstrap" width="370">
+      <img src="./assets/logo_white.png" alt="Bootstrap" width="370" style="margin-left: 3rem;">
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon "></span>
@@ -47,19 +47,19 @@
     <div class="collapse navbar-collapse pe-5" id="navbarSupportedContent">
       <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
         <li class="nav-item">
-          <a class="nav-link text-light decorate-text" href="#">Home</a>
+          <a class="nav-link" href="#">Home</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link text-light decorate-text" href="#apod">APoD</a>
+          <a class="nav-link" href="#apod">APoD</a>
         </li>
-        <li class="nav-item ">
-          <a class="nav-link text-light decorate-text" href="#mars">MartianImagery</a>
+        <li class="nav-item">
+          <a class="nav-link" href="#mars">MartianImagery</a>
         </li>
-        <li class="nav-item ">
-          <a class="nav-link text-light decorate-text" href="./Pages/asteroid-info/index.html">NeoWs</a>
+        <li class="nav-item">
+          <a class="nav-link" href="./Pages/asteroid-info/index.html">NeoWs</a>
         </li>
         <li class="nav-item">
-         <a href="#contact"> <button class="btn btn-outline-light rounded-pill decorate-text" type="submit">Contact Us</button></a>
+         <a href="#contact" class="nav-link contact">Contact Us</a>
         </li>
     </div>
   </div>
diff --git a/style.css b/style.css
index 4507ca9..280a57b 100644
--- a/style.css
+++ b/style.css
@@ -327,4 +327,24 @@ body {
   transition-delay: 0.2s; 
   transform: scale(1.1);
   transition: color 0.2s ease; /* Smooth transition for color change */
-}
\ No newline at end of file
+}
+.navbar-nav{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 1rem;
+}
+.nav-item{
+  border:transparent;
+  background-color: rgb(191, 0, 255);
+  border-radius: 1.1rem;
+  padding:0rem 0.5rem;
+}
+.nav-link{
+  font-weight: bolder;
+  color: white;
+}
+.nav-item:hover{
+  color:black;
+  background-color: white;
+}