Merge pull request #1051 from heli0707/main

feat: Footer hover effect updated
apu52 · Jul 14, 2024 · e56634c · e56634c
2 parents f7944d4 + b79f138
commit e56634c
Showing 1 changed file with 87 additions and 42 deletions.
diff --git a/styles.css b/styles.css
@@ -232,6 +232,30 @@
 }
 */
 
+.footer__link {
+  position: relative;
+  text-decoration: none;
+  color: black;
+  font-size: 18px;
+}
+.footer__link::after {
+  content: '';
+  position: absolute;
+  width: 0%;
+  height: 2px;
+  bottom: -5px;
+  left: 0;
+  background-color: black;
+  transition: all 0.3s ease-in-out;
+}
+.footer__link:hover {
+  color: red;
+}
+.footer__link:hover::after {
+  width: 100%;
+  background-color: red;
+}
+
 /* new bubble end */
 #scrollPath {
   position: fixed;
@@ -1229,18 +1253,18 @@ body, html {
   margin-left: 15px;
   flex: 1;
   display: flex;
-  max-width: 200px;
+  max-width: 220px;
   text-align: left;
   flex-direction: column;
 }
 
-.footer__text a {
+/* .footer__text a {
   margin-top: 5px;
   color: white;
 }
 .footer__text a:hover {
   color: red;
-}
+} */
 
 .footer:hover {
   background: linear-gradient(135deg, #654ea3, #eaafc8);
@@ -1256,15 +1280,15 @@ body, html {
   color: var(--primary-color);
 }
 
-.footer__link {
+/* .footer__link {
   color: white;
-  margin-right: 15px; /* Adjust spacing between icons */
-  font-size: 1em; /* Initial font size */
+  margin-right: 15px; 
+  font-size: 1em; 
 }
 
 .footer__link:hover {
-  transform: scale(10); /* Scale up the icon on hover */
-}
+  transform: scale(10);
+} */
 
 .footer__col p span {
   font-weight: 600;
@@ -2121,15 +2145,15 @@ body {
   padding: 10px 0;
 }
 
-.footer-head::before,
+/* .footer-head::before,
 .footer-head::after {
   content: "";
   position: absolute;
   width: 0;
   height: 2px;
   background-color: red;
   transition: width 0.2s ease-in;
-}
+} */
 
 .footer-head::before {
   top: 0;
@@ -2143,13 +2167,13 @@ body {
   transform: translateX(-50%);
 }
 
-.footer-head:hover::before {
-  width: 100%;
-}
-.footer-head:hover::after {
-  width: 100%;
-}
-.navLinks .link a:active {
+  /* .footer-head:hover::before {
+    width: 100%;
+  }
+  .footer-head:hover::after {
+    width: 100%;
+  } */
+.navLinks:active {
   color: red;
 }
 
@@ -2757,29 +2781,50 @@ button:hover {
   }
 }
 
-@media screen and (max-width: 425px) {
-  .footer__container {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: start;
-  }
-
-  .footer__col p {
-    font-size: 0.5rem;
-    font-weight: 100;
-  }
-
-  .footer__col h3 {
-    font-size: 0.7rem;
-  }
-
-  .footer__area h4 {
-    font-size: 0.7rem;
-  }
-
-  .footer__bar {
-    font-size: 0.6rem;
-  }
+a {
+  position: relative;
+  text-decoration: none;
+  color: black;
+  font-size: 18px;
 }
+a::after {
+  content: '';
+  position: absolute;
+  width: 0%;
+  height: 2px;
+  bottom: -5px;
+  left: 0;
+  background-color: black;
+  transition: all 0.3s ease-in-out;
+}
+a:hover {
+  color: red;
+}
+a:hover::after {
+  width: 100%;
+  background-color: red;
+}
+/* Footer specific styles */
+.footer__link {
+  position: relative;
+  text-decoration: none;
+  color: black;
+  font-size: 18px;
+}
+.footer__link::after {
+  content: '';
+  position: absolute;
+  width: 0%;
+  height: 2px;
+  bottom: -5px;
+  left: 0;
+  background-color: black;
+  transition: all 0.3s ease-in-out;
+}
+.footer__link:hover {
+  color: red;
+}
+.footer__link:hover::after {
+  width: 100%;
+  background-color: red;
+}