diff --git a/styles.css b/styles.css index d34ca62c..db90a13f 100644 --- 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,7 +2145,7 @@ body { padding: 10px 0; } -.footer-head::before, +/* .footer-head::before, .footer-head::after { content: ""; position: absolute; @@ -2129,7 +2153,7 @@ body { 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; +} \ No newline at end of file