v8

eduversa · Nov 11, 2023 · c7cff65 · c7cff65
1 parent 61a39b9
commit c7cff65
Showing 1 changed file with 189 additions and 59 deletions.
diff --git a/styles/containers/landing_navbar.scss b/styles/containers/landing_navbar.scss
@@ -1,36 +1,60 @@
 .navbar {
+  background: linear-gradient(-90deg, hsl(303, 100%, 14%), hsl(240, 100%, 22%));
   position: fixed;
   width: 100%;
   z-index: 1000;
   box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);
-  transition: background 0.5s ease;
-  background: linear-gradient(-90deg, hsl(303, 100%, 14%), hsl(240, 100%, 22%));
+  transition: background 0.5s ease, background-image 0.5s ease;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
 
-  &:hover {
-    background: linear-gradient(
-      -90deg,
-      hsl(303, 100%, 20%),
-      hsl(240, 100%, 28%)
-    );
-  }
-
   .logo {
     font-size: 1.5rem;
     font-weight: bold;
+    margin-right: 1rem;
+    position: relative;
 
     a {
       text-decoration: none;
       color: #fff;
       display: flex;
       align-items: center;
-      transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
-      .logo-text {
-        margin-left: 0.5rem;
+      transition: color 0.3s ease, text-shadow 0.3s ease,
+        background-color 0.3s ease, transform 0.3s ease;
+
+      &:hover {
+        color: #ffd700;
+        text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
+        background-color: rgba(255, 215, 0, 0.2);
+        transform: rotate(5deg);
+      }
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        background: linear-gradient(-90deg, transparent, #ffd700, transparent);
+        opacity: 0;
+        transition: opacity 0.3s ease, transform 0.3s ease;
+      }
+
+      &::before {
+        top: -4px;
+      }
+
+      &::after {
+        bottom: -4px;
+      }
+
+      &:hover::before,
+      &:hover::after {
+        opacity: 1;
+        transform: scaleX(1.5);
       }
     }
   }
@@ -40,111 +64,217 @@
       list-style: none;
       display: flex;
       gap: 1rem;
-      padding: 0;
     }
 
     .nav-item {
       font-size: 1.2rem;
-      transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+      position: relative;
+      transition: color 0.3s ease, background-color 0.3s ease,
+        box-shadow 0.3s ease, transform 0.3s ease;
 
       a {
         text-decoration: none;
+        color: #fff;
         position: relative;
         overflow: hidden;
 
+        &:hover {
+          color: #ffd700;
+          background-color: rgba(255, 215, 0, 0.2);
+          box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
+          transform: translateY(-2px);
+        }
+
         &::after {
           content: "";
           position: absolute;
           bottom: 0;
           left: 0;
           width: 100%;
           height: 2px;
-          background-color: #8ab6d6;
+          background: linear-gradient(
+            -90deg,
+            transparent,
+            #ffd700,
+            transparent
+          );
           transform: scaleX(0);
-          transform-origin: bottom right;
           transition: transform 0.3s ease;
         }
 
         &:hover::after {
           transform: scaleX(1);
-          transform-origin: bottom left;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 2px;
+          background: linear-gradient(
+            -90deg,
+            transparent,
+            #ffd700,
+            transparent
+          );
+          opacity: 0;
+          transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+
+        &:hover::before {
+          opacity: 1;
+          transform: scaleX(1.5);
         }
       }
     }
   }
 
   .button-section {
-    display: flex;
-    align-items: center;
-
     button {
       margin-left: 1rem;
       padding: 0.5rem 1rem;
       font-size: 1rem;
-      border: none;
+      background: linear-gradient(
+        -90deg,
+        hsl(303, 100%, 14%),
+        hsl(240, 100%, 22%)
+      );
+      color: #fff;
+      border: 2px solid transparent;
       cursor: pointer;
       position: relative;
       overflow: hidden;
       transition: background 0.3s ease, box-shadow 0.3s ease,
-        transform 0.3s ease;
+        transform 0.3s ease, border-color 0.3s ease;
 
-      &:focus {
-        outline: none;
+      &:hover {
+        background: linear-gradient(
+          -90deg,
+          hsl(303, 100%, 20%),
+          hsl(240, 100%, 28%)
+        );
+        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+        transform: translateY(-3px);
+        border-color: #ffd700;
+        animation: pulse 1s infinite;
+      }
+
+      @keyframes pulse {
+        0% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.05);
+        }
+        100% {
+          transform: scale(1);
+        }
       }
 
       a {
         text-decoration: none;
-        color: #fff;
-        display: block;
-        width: 100%;
-        height: 100%;
-        padding: 0.5rem 1rem;
+        color: inherit;
       }
 
       &::before {
         content: "";
         position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 0;
-        height: 100%;
-        transform-origin: 100% 50%;
-        transform: translate(-50%, -50%);
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: linear-gradient(
+          -90deg,
+          hsl(303, 100%, 14%),
+          hsl(240, 100%, 22%)
+        );
         z-index: -1;
-        transition: width 0.3s ease;
+        transform: scaleX(0);
+        transform-origin: right;
+        transition: transform 0.3s ease;
+      }
+
+      &:hover::before {
+        transform: scaleX(1);
+        transform-origin: left;
       }
 
-      &.login-button,
-      &.register-button {
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         background: linear-gradient(
           -90deg,
-          hsl(303, 100%, 20%),
-          hsl(240, 100%, 28%)
+          hsl(303, 100%, 14%),
+          hsl(240, 100%, 22%)
         );
+        z-index: -1;
+        transform: scaleY(0);
+        transform-origin: top;
+        transition: transform 0.3s ease;
+      }
 
-        &:hover {
-          background: linear-gradient(
-            -90deg,
-            hsl(303, 100%, 30%),
-            hsl(240, 100%, 38%)
-          );
-          box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-          transform: translateY(-3px);
-          animation: pulse 1s infinite;
-        }
+      &:hover::after {
+        transform: scaleY(1);
+        transform-origin: bottom;
       }
     }
   }
-}
 
-@keyframes pulse {
-  0% {
-    transform: scale(1);
+  &:hover {
+    background: linear-gradient(
+      -90deg,
+      hsl(303, 100%, 20%),
+      hsl(240, 100%, 28%)
+    );
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(
+      -90deg,
+      hsl(303, 100%, 14%),
+      hsl(240, 100%, 22%)
+    );
+    z-index: -1;
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.3s ease;
   }
-  50% {
-    transform: scale(1.05);
+
+  &:hover::before {
+    transform: scaleX(1);
+    transform-origin: left;
   }
-  100% {
-    transform: scale(1);
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(
+      -90deg,
+      hsl(303, 100%, 14%),
+      hsl(240, 100%, 22%)
+    );
+    z-index: -1;
+    transform: scaleY(0);
+    transform-origin: top;
+    transition: transform 0.3s ease;
+  }
+
+  &:hover::after {
+    transform: scaleY(1);
+    transform-origin: bottom;
   }
 }