Nav bar enhanced

SumaLatha2023 · Oct 15, 2024 · 1186d2f · 1186d2f
1 parent 15ee163
commit 1186d2f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 15 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -417,7 +417,7 @@ to {
   display: flex;
   margin-left: -5.6rem;
   justify-content: center;
-  background-color: #3a90dc;
+  background-color: rgba(0,0,0,0.6);
   border-radius: 10px;
   padding: 15px 30px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -735,7 +735,8 @@ p {
 }
 
 .nav-item a:hover::after {
-  width: 100%;
+  width: 96%;
+  margin: 0 2.5%;
 }
 
 .navbar-nav .nav-item a {
@@ -746,9 +747,6 @@ p {
   text-decoration: none !important;
 }
 
-#active-page::after {
-  width: 100%;
-}
 
 .sticky {
   position: fixed;

diff --git a/index.html b/index.html
@@ -71,9 +71,6 @@
     <div class="circle"></div>
     <div class="circle"></div>
   </div> -->
-  <div id="progressBarContainer">
-    <div id="progressBar"></div>
-</div>
 
   <header class="header-area">
         <div class="row">
@@ -115,7 +112,7 @@
                     <a class="page-scroll" href="./faq.html" style="color: rgb(237, 242, 244);">Help 🙋‍♂️</a>
                   </li>
                   <li class="nav-item no-underline">
-                    <a class="main-btn navbar-btn" style="padding: 2px 20px; transform: none; color: rgb(237, 242, 244);" data-scroll-nav="0" href="#" onclick="openModal()">Login/Register 💻</a>
+                    <a class="main-btn navbar-btn" style="padding: 2px 20px; color: rgb(237, 242, 244);animation-duration: 0.4s;animation-name: ease;" data-scroll-nav="0" href="#" onclick="openModal()">Login/Register 💻</a>
                   </li>
                 </ul>
               </div>

diff --git a/navbar.css b/navbar.css
@@ -46,9 +46,6 @@
     -o-transition: background-color 0.3s ease-in-out;
 } */
 
-.navbar-collapse:hover {
-    background-color: #b6bee7; 
-}
 .navbar-nav {
     display: flex;
     justify-content: space-between;
@@ -67,18 +64,27 @@
     text-transform: uppercase;
     text-decoration: none;
     padding: 10px 15px;
-    transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
+    transition: all 0.3s ease;
     white-space: nowrap;
 }
 
 /* On hover the text color was also set to the background color earlier hence I have changed to red color since all other tabs navbar text was already to red color, I have set to !important because the inline CSS has more priority compared to external CSS whether it applied on hover or without hover so the #333 should not overwrite when hovered hence I have set it to !important. */
 
 .navbar-nav .nav-item a:hover { 
-    background-color: rgba(209, 212, 208, 0.454); 
+    background-color: rgba(255,255,255,0.1); 
     border-radius: 5px;
-    color: #f60e0e !important; 
+    transform: scale(0.95);
+}
+
+.nav-item .navbar-btn{
+    background: linear-gradient(135deg,#00bfff,#ff1493);
+    transition:all 0.4s ease;
 }
 
+.nav-item .navbar-btn:hover{
+    transform: scale(0.95);
+    background: linear-gradient(135deg,#ff1493,#00bfff);
+}
 .overlay {
     width: 100%;
     height: 100%;