From ae85c50d866123d54f9ec3d0095231d796e06325 Mon Sep 17 00:00:00 2001
From: "krishnamverma951@gmail.com" <krishnamverma951@gmail.com>
Date: Mon, 7 Oct 2024 19:01:58 +0530
Subject: [PATCH] addedhovereffect

---
 src/components/Navbar.css | 100 +++++++++++++++++++++++++-------------
 1 file changed, 66 insertions(+), 34 deletions(-)

diff --git a/src/components/Navbar.css b/src/components/Navbar.css
index df11972..09dc5b9 100644
--- a/src/components/Navbar.css
+++ b/src/components/Navbar.css
@@ -2,8 +2,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
 
-:root{
-    --primary-color : #f84464;
+:root {
+    --primary-color: #f84464;
     --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     --light-gray: #f2f2f2;
     --text-color: #333;
@@ -23,17 +23,46 @@
     padding: 10px 200px;
     background: var(--primary-color);
     top: 0px;
-    position: fixed ;
+    position: fixed;
     z-index: 1000;
     opacity: 30;
     /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
     display: flex;
     justify-content: space-between;
     align-items: center;
-    opacity:1 ;
+    opacity: 1;
 }
 
-body{
+nav ul a {
+    position: relative;
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    color: #a0a0a0;
+
+}
+
+nav ul a:after {
+    content: "";
+    position: absolute;
+    background-color: white;
+    height: 3px;
+    width: 0;
+    left: 0;
+    bottom: -10px;
+    transition: 0.3s;
+}
+
+nav ul a:hover {
+    color: #ffffff;
+
+}
+
+nav ul a:hover:after {
+    width: 100%;
+}
+
+
+body {
     padding-top: 30px;
 }
 
@@ -45,12 +74,12 @@ body{
 }
 
 .nav-links {
-    width:fit-content;
+    width: fit-content;
     display: flex;
     justify-content: space-evenly;
 }
 
-.nav-links > li {
+.nav-links>li {
     list-style: none;
 }
 
@@ -67,28 +96,30 @@ body{
     list-style: none;
     display: inline-block;
     margin: 0 15px;
-  }
-  
-  /* Styling the active link - Blue color when selected */
-  .active-link {
+}
+
+/* Styling the active link - Blue color when selected */
+.active-link {
     font-weight: 600;
     color: blue;
     /* font-weight: bold;  */
-  }
-  
-  /* Styling the inactive link - White color when not selected */
-  .inactive-link {
+}
+
+/* Styling the inactive link - White color when not selected */
+.inactive-link {
     font-weight: 600;
-    color: white; /* Makes the text white when not selected */
-    text-decoration: none; /* Prevents underline by default */
-  }
-  
-  /* Hide div class (for conditional rendering) */
-  .hide-div {
+    color: white;
+    /* Makes the text white when not selected */
+    text-decoration: none;
+    /* Prevents underline by default */
+}
+
+/* Hide div class (for conditional rendering) */
+.hide-div {
     display: none;
-  }
-  
-  
+}
+
+
 .red {
     color: green;
 }
@@ -219,7 +250,7 @@ summary.avatar img {
     border-bottom: 1px solid var(--text-color);
 }
 
-.dropdown ul li.divider ~ li {
+.dropdown ul li.divider~li {
     border: none;
 }
 
@@ -252,7 +283,7 @@ summary.avatar img {
     font-style: italic;
 }
 
-a{
+a {
     cursor: pointer;
 }
 
@@ -262,21 +293,22 @@ a{
 }
 
 .logout-button {
-    background: none; 
-    border: none; 
-    cursor: pointer; 
-    display: flex; 
-    align-items: center; 
-    font-size: 16px; 
-    transition: color 0.3s; 
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    transition: color 0.3s;
     padding-left: 25px;
     padding-top: 10px;
     padding-bottom: 10px;
 }
+
 .logout-button:hover {
     color: var(--primary);
 }
 
 .logout-button span {
-    margin-right: 2px; 
+    margin-right: 2px;
 }
\ No newline at end of file