From 097b8c1d8b7f4c8e484fb902069748ae88494567 Mon Sep 17 00:00:00 2001
From: soumyass147 <soumyastudy147@gmail.com>
Date: Fri, 18 Oct 2024 15:43:48 +0530
Subject: [PATCH]  Changed the hover effect of navbar menu in features, team ,
 contact and feedback pages

---
 Feedback.html |  97 +++++++++++++++++++--------------
 contact.html  |  96 +++++++++++++++++---------------
 features.html | 148 +++++++++++++++++++++++++++-----------------------
 index.html    |   2 +-
 team.html     |  97 ++++++++++++++++++---------------
 5 files changed, 243 insertions(+), 197 deletions(-)

diff --git a/Feedback.html b/Feedback.html
index 8fb9ce6..c063a10 100644
--- a/Feedback.html
+++ b/Feedback.html
@@ -80,51 +80,66 @@
       /* Change logo color in dark mode */
     }
 
-    .menu ul {
+    . ul {
       list-style-type: none;
-      padding: 0;
+      padding: menu0;
       display: flex;
     }
 
-    .menu li {
-      margin-right: 20px;
-    }
-
-    .menu a {
-      color: black;
-      /* Light mode link color */
-      border: 1px solid black;
-      /* Black border */
-      padding: 5px 10px;
-      text-decoration: none;
-      transition: all 0.3s;
-    }
-
-    .menu a:hover {
-      background-color: blue;
-      /* Blue background on hover */
-      color: white;
-      /* White text on hover */
-    }
-
-    .dark-mode .menu a {
-      color: white;
-      /* Dark mode link color */
-      border: 1px solid lightgrey;
-      /* Light grey border in dark mode */
-    }
-
-    .dark-mode {
-      background-color: rgba(50, 50, 50, 0.95);
-      /* Slightly gray background with high opacity */
-    }
-
-    .dark-mode .menu a:hover {
-      background-color: white;
-      /* White background on hover in dark mode */
-      color: black;
-      /* Black text on hover in dark mode */
-    }
+    .menu ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+}
+
+.menu li {
+    margin-right: 20px;
+    position: relative; /* Required for the ::after pseudo-element */
+}
+
+.menu a {
+    color: black; /* Light mode link color */
+    padding: 5px 10px;
+    text-decoration: none;
+    position: relative; /* Needed for the animated underline */
+    transition: color 0.3s ease-in-out; /* Smooth text color change */
+}
+
+.menu a::after {
+    content: '';
+    position: absolute;
+    width: 0; /* Hidden underline initially */
+    height: 2px; /* Height of the underline */
+    left: 0; /* Start the underline from the left */
+    bottom: 0; /* Position the underline at the bottom of the text */
+    background-color: #007BFF; /* Blue underline */
+    transition: width 0.4s ease-in-out; /* Animate the width for sliding effect */
+}
+
+.menu a:hover::after {
+    width: 100%; /* Expand the underline from left to right on hover */
+}
+
+.menu a:hover {
+    color: #007BFF; /* Blue text color on hover */
+}
+
+/* Dark Mode Styling */
+.dark-mode .menu a {
+    color: white; /* Dark mode link color */
+}
+
+.dark-mode .menu a::after {
+    background-color: white; /* White underline in dark mode */
+}
+
+.dark-mode .menu a:hover::after {
+    width: 100%; /* Expand the underline in dark mode */
+}
+
+.dark-mode .menu a:hover {
+    color: rgb(102, 98, 98); /* Dark grey text color on hover */
+}
 
     .light-dark-btn {
       background-color: transparent;
diff --git a/contact.html b/contact.html
index 13da930..e3c1195 100644
--- a/contact.html
+++ b/contact.html
@@ -79,50 +79,60 @@
         }
 
         .menu ul {
-            list-style-type: none;
-            padding: 0;
-            display: flex;
-        }
-
-        .menu li {
-            margin-right: 20px;
-        }
-
-        .menu a {
-            color: black;
-            /* Light mode link color */
-            border: 1px solid black;
-            /* Black border */
-            padding: 5px 10px;
-            text-decoration: none;
-            transition: all 0.3s;
-        }
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+}
+
+.menu li {
+    margin-right: 20px;
+    position: relative; /* Required for the ::after pseudo-element */
+}
+
+.menu a {
+    color: black; /* Light mode link color */
+    padding: 5px 10px;
+    text-decoration: none;
+    position: relative; /* Needed for the animated underline */
+    transition: color 0.3s ease-in-out; /* Smooth text color change */
+}
+
+.menu a::after {
+    content: '';
+    position: absolute;
+    width: 0; /* Hidden underline initially */
+    height: 2px; /* Height of the underline */
+    left: 0; /* Start the underline from the left */
+    bottom: 0; /* Position the underline at the bottom of the text */
+    background-color: #007BFF; /* Blue underline */
+    transition: width 0.4s ease-in-out; /* Animate the width for sliding effect */
+}
+
+.menu a:hover::after {
+    width: 100%; /* Expand the underline from left to right on hover */
+}
+
+.menu a:hover {
+    color: #007BFF; /* Blue text color on hover */
+}
+
+/* Dark Mode Styling */
+.dark-mode .menu a {
+    color: white; /* Dark mode link color */
+}
+
+.dark-mode .menu a::after {
+    background-color: white; /* White underline in dark mode */
+}
+
+.dark-mode .menu a:hover::after {
+    width: 100%; /* Expand the underline in dark mode */
+}
+
+.dark-mode .menu a:hover {
+    color: rgb(102, 98, 98); /* Dark grey text color on hover */
+}
 
-        .menu a:hover {
-            background-color: rgb(10, 61, 212);
-            /* Blue background on hover */
-            color: white;
-            /* White text on hover */
-        }
-
-        .dark-mode .menu a {
-            color: white;
-            /* Dark mode link color */
-            border: 1px solid lightgrey;
-            /* Light grey border in dark mode */
-        }
-
-        .dark-mode {
-            background-color: rgba(30, 29, 29, 0.95);
-            /* Slightly gray background with high opacity */
-        }
-
-        .dark-mode .menu a:hover {
-            background-color: white;
-            /* White background on hover in dark mode */
-            color: black;
-            /* Black text on hover in dark mode */
-        }
 
         .light-dark-btn {
             background-color: transparent;
diff --git a/features.html b/features.html
index 91f63f3..dbfdf9e 100644
--- a/features.html
+++ b/features.html
@@ -79,7 +79,7 @@
       /* Change logo color in dark mode */
     }
 
-    .menu ul {
+    /*.menu ul {
       list-style-type: none;
       padding: 0;
       display: flex;
@@ -89,49 +89,27 @@
       margin-right: 20px;
     }
 
-    .menu a {
-      color: black;
-      /* Light mode link color */
-      border: 1px solid black;
-      /* Black border */
-      padding: 5px 10px;
-      text-decoration: none;
-      transition: all 0.3s;
-    }
 
-    .menu a:hover {
-      background-color: blue;
-      /* Blue background on hover */
-      color: white;
-      /* White text on hover */
-    }
-    a:hover {
-      color: blue !important;
-    }
-
-    .dark-mode .menu a {
-      color: white;
-      /* Dark mode link color */
-      border: 1px solid lightgrey;
-      /* Light grey border in dark mode */
-    }
-
-    .dark-mode {
-      background-color: rgba(50, 50, 50, 0.95);
-      /* Slightly gray background with high opacity */
-    }
+    .menu a {
+            color: black;
+            /* Light mode link color */
+            /* Black border */
+            /*padding: 5px 10px;
+            text-decoration: none;
+            transition: all 0.3s;
+        }
+        .menu a:hover {
+            
+            /* Blue background on hover */
+            /*color: white;
+            /* White text on hover */
+        
 
-    .dark-mode .menu a:hover {
-      background-color: white;
-      /* White background on hover in dark mode */
-      color: black;
-      /* Black text on hover in dark mode */
-    }
+       
 
     .light-dark-btn {
 
       background-color: transparent;
-      border: 1px solid black;
       /* Black border */
       cursor: pointer;
       color: black;
@@ -140,30 +118,26 @@
     }
 
     .light-dark-btn {
-      background-color: transparent;
-      border: 1px solid black;
       /* Black border */
       cursor: pointer;
-      color: black;
+      color: rgb(0, 0, 0);
       /* Default button color */
     }
 
     .light-dark-btn:hover {
-      color: blue;
+      color: rgb(163, 155, 81);
       /* Change color on hover */
     }
 
     .dark-mode .light-dark-btn {
       color: white;
       /* Button color in dark mode */
-      border: 1px solid lightgrey;
       /* Light grey border */
     }
 
     .dark-mode .light-dark-btn:hover {
-      background-color: white;
-      /* Background on hover in dark mode */
-      color: black;
+      
+      color: rgb(247, 154, 15);
       /* Text color on hover in dark mode */
     }
 
@@ -223,34 +197,72 @@
       /* Change the color of letters in this class to red */
     }
 
+
     .menu ul {
-      list-style-type: none;
-      padding: 0;
-    }
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+}
 
-    .menu ul li {
-      display: inline;
-      margin-right: 7px;
-    }
+.menu li {
+    margin-right: 20px;
+    position: relative; /* Required for the ::after pseudo-element */
+}
 
-    .menu ul li a {
-      padding: 10px 15px;
-      color: black;
-      text-decoration: none;
-      transition: background-color 0.3s, color 0.3s;
-    }
+.menu a {
+    color: black; /* Light mode link color */
+    padding: 5px 10px;
+    text-decoration: none;
+    position: relative; /* Needed for the animated underline */
+    transition: color 0.3s ease-in-out; /* Smooth text color change */
+}
 
-    .menu ul li a:hover {
-      background-color: blue;
-      color: white;
-    }
+.menu a::after {
+    content: '';
+    position: absolute;
+    width: 0; /* Hidden underline initially */
+    height: 2px; /* Height of the underline */
+    left: 0; /* Start the underline from the left */
+    bottom: 0; /* Position the underline at the bottom of the text */
+    background-color: #007BFF; /* Blue underline */
+    transition: width 0.4s ease-in-out; /* Animate the width for sliding effect */
+}
 
-    .menu ul li a.active {
-      color: white;
-      background-color: #000;
-    }
-    
+.menu a:hover::after {
+    width: 100%; /* Expand the underline from left to right on hover */
+}
+
+.menu a:hover {
+    color: #007BFF; /* Blue text color on hover */
+}
+
+/* Dark Mode Styling */
+.dark-mode .menu a {
+    color: white; /* Dark mode link color */
+}
+
+.dark-mode .menu a::after {
+    background-color: white; /* White underline in dark mode */
+}
 
+.dark-mode .menu a:hover::after {
+    width: 100%; /* Expand the underline in dark mode */
+}
+
+.dark-mode .menu a:hover {
+    color: rgb(102, 98, 98); /* Dark grey text color on hover */
+}
+
+        .menu ul li a {
+            padding: 10px 15px;
+            color: black;
+            text-decoration: none;
+        }
+
+        .menu ul li a.active {
+            color: white;
+            background-color: #000;
+        }
     .content {
       margin: 20px;
       padding: 20px;
diff --git a/index.html b/index.html
index 76386ce..ecb5c68 100644
--- a/index.html
+++ b/index.html
@@ -145,7 +145,7 @@
     }
 
     .feature h2 {
-      color: #2980b9;
+      color: #27c2ba;
       margin-bottom: 10px;
     }
 
diff --git a/team.html b/team.html
index 19de16d..520d9d2 100644
--- a/team.html
+++ b/team.html
@@ -80,50 +80,59 @@
         }
 
         .menu ul {
-            list-style-type: none;
-            padding: 0;
-            display: flex;
-        }
-
-        .menu li {
-            margin-right: 20px;
-        }
-
-        .menu a {
-            color: black;
-            /* Light mode link color */
-            border: 1px solid black;
-            /* Black border */
-            padding: 5px 10px;
-            text-decoration: none;
-            transition: all 0.3s;
-        }
-
-        .menu a:hover {
-            background-color: blue;
-            /* Blue background on hover */
-            color: white;
-            /* White text on hover */
-        }
-
-        .dark-mode .menu a {
-            color: white;
-            /* Dark mode link color */
-            border: 1px solid lightgrey;
-            /* Light grey border in dark mode */
-        }
-
-        .dark-mode {
-            background-color: rgba(50, 50, 50, 0.95);
-            /* Slightly gray background with high opacity */
-        }
-
-        .dark-mode .menu a:hover {
-            background-color: white;
-            /* White background on hover in dark mode */
-            color: black;
-            /* Black text on hover in dark mode */
-        }
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+}
+
+.menu li {
+    margin-right: 20px;
+    position: relative; /* Required for the ::after pseudo-element */
+}
+
+.menu a {
+    color: black; /* Light mode link color */
+    padding: 5px 10px;
+    text-decoration: none;
+    position: relative; /* Needed for the animated underline */
+    transition: color 0.3s ease-in-out; /* Smooth text color change */
+}
+
+.menu a::after {
+    content: '';
+    position: absolute;
+    width: 0; /* Hidden underline initially */
+    height: 2px; /* Height of the underline */
+    left: 0; /* Start the underline from the left */
+    bottom: 0; /* Position the underline at the bottom of the text */
+    background-color: #007BFF; /* Blue underline */
+    transition: width 0.4s ease-in-out; /* Animate the width for sliding effect */
+}
+
+.menu a:hover::after {
+    width: 100%; /* Expand the underline from left to right on hover */
+}
+
+.menu a:hover {
+    color: #007BFF; /* Blue text color on hover */
+}
+
+/* Dark Mode Styling */
+.dark-mode .menu a {
+    color: white; /* Dark mode link color */
+}
+
+.dark-mode .menu a::after {
+    background-color: white; /* White underline in dark mode */
+}
+
+.dark-mode .menu a:hover::after {
+    width: 100%; /* Expand the underline in dark mode */
+}
+
+.dark-mode .menu a:hover {
+    color: rgb(102, 98, 98); /* Dark grey text color on hover */
+}
 
         .light-dark-btn {
             background-color: transparent;