Merge pull request #289 from siddharthisrani/Update-UI

Enhance Navbar and Card Hover Animations to Match Website Theme.
amyyalex · Aug 2, 2024 · 85704e3 · 85704e3
2 parents 222862d + 9dbf236
commit 85704e3
Showing 1 changed file with 85 additions and 95 deletions.
diff --git a/style/style.css b/style/style.css
@@ -64,7 +64,7 @@ section {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  text-decoration: underline;
+  text-decoration:none;
 }
 
 #navbar-link-list-container {
@@ -80,8 +80,49 @@ section {
   margin: 0px 12px;
 }
 
+@keyframes color-change {
+  0% {
+    color: rgb(10, 3, 50);
+  }
+  25% {
+    color: rgb(255, 0, 0);
+  }
+  50% {
+    color: rgb(0, 255, 0);
+  }
+  75% {
+    color: rgb(0, 0, 255);
+  }
+  100% {
+    color: rgb(255, 165, 0);
+  }
+}
+
 .navbar a {
   color: rgb(10, 3, 50);
+  position: relative;
+  transition: color 0.3s ease;
+}
+.navbar a::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background: rgb(10, 3, 50);
+  left: 0;
+  bottom: -5px;
+  transform: scaleX(0);
+  transform-origin: right;
+  transition: transform 0.3s ease;
+}
+
+.navbar a:hover {
+  animation: color-change 1s infinite alternate;
+}
+
+.navbar a:hover::after {
+  transform: scaleX(1);
+  transform-origin: left;
 }
 
 .navbar h3 {
@@ -98,6 +139,11 @@ section {
 #navbar-menu-icon-1 {
   width: 35px;
   display: none;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+#navbar-menu-icon-1:hover {
+  transform: rotate(90deg);
 }
 
 .navbar-mobile-icon {
@@ -350,7 +396,8 @@ section {
 .search-section i {
   font-size: 30px;
 }
-/*card section styling*/
+
+/* Card section styling */
 .card {
   display: flex;
   justify-content: center;
@@ -364,11 +411,11 @@ section {
   border-radius: 25px;
   background-color: #fff;
   height: 400px;
-  transition: 1s box-shadow;
+  transition: all 0.5s ease;
   position: relative;
 }
 
-.cards{
+.cards {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
@@ -377,7 +424,6 @@ section {
   margin: 0 auto;
 }
 
-
 .card-details h1 {
   font-family: "Space Mono", cursive;
   text-transform: capitalize;
@@ -392,108 +438,42 @@ section {
   font-size: 15px;
 }
 
-.card:hover{
-  box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
+.card:hover {
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  scale:1.05;
+  transition: 1s ease !important ;
+  background: linear-gradient(145deg, #f0f0f0, #ffffff);
 }
 
-.card:hover::before, .card:hover::after {
-  display: block;
+.card::before, .card::after {
   content: '';
   position: absolute;
-  width: 325px;
-  height: 400px;
-  background: rgb(151, 95, 255);
-  box-shadow: 0 5px 35px 0px rgba(151, 95, 255, 0.289);
-  border-radius: 25px;
+  width: 0;
+  height: 0;
+  border: 2px solid transparent;
+  transition: all 0.3s ease;
   z-index: -10;
-  animation: 1s clockwise infinite;
 }
 
-.card:hover:after {
-  background: rgb(200, 124, 238);
-  box-shadow: 0 5px 35px 0px rgba(200, 124, 238, 0.298);
-  animation: 2s counterclockwise infinite;
+.card::before {
+  top: 0;
+  left: 0;
+  border-top-color: #975fff;
+  border-left-color: #975fff;
 }
 
-@keyframes clockwise {
-  0% {
-    top: -5px;
-    left: 0;
-  }
-  12% {
-    top: -2px;
-    left: 2px;
-  }
-  25% {
-    top: 0;
-    left: 5px;    
-  }
-  37% {
-    top: 2px;
-    left: 2px;
-  }
-  50% {
-    top: 5px;
-    left: 0;    
-  }
-  62% {
-    top: 2px;
-    left: -2px;
-  }
-  75% {
-    top: 0;
-    left: -5px;
-  }
-  87% {
-    top: -2px;
-    left: -2px;
-  }
-  100% {
-    top: -5px;
-    left: 0;    
-  }
+.card::after {
+  bottom: 0;
+  right: 0;
+  border-bottom-color: #c87cee;
+  border-right-color: #c87cee;
 }
 
-@keyframes counterclockwise {
-  0% {
-    top: -5px;
-    right: 0;
-  }
-  12% {
-    top: -2px;
-    right: 2px;
-  }
-  25% {
-    top: 0;
-    right: 5px;    
-  }
-  37% {
-    top: 2px;
-    right: 2px;
-  }
-  50% {
-    top: 5px;
-    right: 0;    
-  }
-  62% {
-    top: 2px;
-    right: -2px;
-  }
-  75% {
-    top: 0;
-    right: -5px;
-  }
-  87% {
-    top: -2px;
-    right: -2px;
-  }
-  100% {
-    top: -5px;
-    right: 0;    
-  }
+.card:hover::before, .card:hover::after {
+  width: 100%;
+  height: 100%;
 }
 
-
 .social-icon a {
   font-size: 1.5rem;
   width: 3rem;
@@ -508,7 +488,7 @@ section {
 }
 
 .social-icon a:hover {
-  color: rgb(170, 166, 191);
+  color: rgb(255, 255, 255);
   background: rgb(10, 3, 50);
 }
 
@@ -518,6 +498,15 @@ section {
   display: inline-block;
   padding: 5px 10px;
   margin-top: 1.5rem;
+  background-color: rgba(10, 3, 50, 0.1);
+  color: rgb(10, 3, 50);
+  transition: all 300ms ease;
+  cursor: pointer;
+}
+
+.connect:hover {
+  background-color: rgb(10, 3, 50);
+  color: rgb(255, 255, 255);
 }
 
 .connect::before {
@@ -543,6 +532,7 @@ section {
   background: rgb(10, 3, 50);
   box-shadow: -5px -8px 0 rgb(10, 3, 50), -5px 8px 0 rgb(10, 3, 50);
 }
+
 /* pagination section style */
 .pagination {
   display: flex;