navbar ui fixed

PranavBarthwal · May 15, 2024 · 494037f · 494037f
1 parent 3bce350
commit 494037f
Show file tree

Hide file tree

Showing 2 changed files with 137 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -102,7 +102,7 @@
   </div>
 </nav> -->
 
-<nav class="navbar navbar-expand-lg fixed-top navbar_background">
+<!-- <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">
@@ -129,9 +129,42 @@
       </ul>
     </div>
   </div>
+</nav> -->
+<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">
+    </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>
+    </button>
+    <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 href="#home" class="nav-link">
+            <button class="btn contact-btn" type="submit">Home</button>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#apod" class="nav-link">
+            <button class="btn contact-btn" type="submit">APOD</button>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#mars" class="nav-link">
+            <button class="btn contact-btn" type="submit">MartianImagery</button>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#contact" class="nav-link">
+            <button class="btn contact-btn" type="submit">Contact Us</button>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
 </nav>
 
-
 <!-- HERO SECTION -->
 <div class="container col-xxl-9 px-3 py-5">
   <div class="row flex-lg-row-reverse align-items-center g-5 py-5">

diff --git a/style.css b/style.css
@@ -15,32 +15,118 @@ body {
   display: none;
 }
 
-/* NAVBAR STYLING */
+/* Navbar Styles */
+.navbar_background {
+  background-color: transparent;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  transition: background-color 0.3s ease;
+}
+
+.navbar_background.scrolled {
+  background-color: rgba(0, 0, 0, 0.8);
+}
 
-.navbar_background{
-  background-image: linear-gradient(to left, rgb(10, 0, 73) , rgb(0, 0, 0));
+.navbar-brand img {
+  transition: transform 0.3s ease;
 }
 
-/* Increase gap between nav items */
-.nav-item {
-  margin-right: 10px; /* Adjust as needed */
+.navbar-brand:hover img {
+  transform: scale(1.1) rotate(10deg);
 }
 
-/* Redesign nav-link */
 .nav-link {
-  padding: 10px 15px;
-  border-radius: 20px; 
-  transition: all ease-in .5s;
+  position: relative;
+  color: #fff !important;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  transition: text-shadow 0.3s ease;
+  margin: 0 1rem;
+  padding: 0.5rem 0;
+}
+
+.nav-link::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: transparent;
+  transition: all 0.3s ease;
+  transform: scaleX(0);
+  transform-origin: left;
+}
+
+.nav-link:hover::before,
+.nav-link.active::before {
+  transform: scaleX(1);
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+}
+
+.nav-link.active::before {
+  transform: scaleX(0); /* Reset the underline for the active link */
 }
 
-/* Redesign nav-link on hover */
 .nav-link:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
+}
+
+.nav-link:hover::after {
+  content: "";
+  position: absolute;
+  top: -20px;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
+  opacity: 0;
+  animation: sparkle 2s infinite;
+}
+
+@keyframes sparkle {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
-.contact-btn:hover{
-        color: #9000ff;
+
+.contact-btn {
+  background-color: transparent;
+  border: 2px solid transparent;
+  color: #fff;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  margin-left: 1rem;
+  padding: 0.5rem 1rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.contact-btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+  transition: left 0.5s ease;
+}
+
+.contact-btn:hover::before {
+  left: 100%;
+}
+
+.contact-btn:hover {
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
+  transform: scale(1.1);
 }
-/* HERO SECTION STYLING */
 
 .highlight {
   background: -webkit-linear-gradient(#e4d6fb, #8400ff);
@@ -90,6 +176,7 @@ body {
   padding-right: 10px;
 }
 
+
 .date_input {
   width: 700px;
   border-radius: 5px;