diff --git a/style.css b/style.css index e1f5b321..a1b8395b 100644 --- a/style.css +++ b/style.css @@ -654,7 +654,6 @@ section { footer { background-color: #2b0038; - font-weight: 900; color: #fefefe; padding: 20px 0; width: 100%; @@ -671,47 +670,11 @@ footer { padding: 0 20px; } -.footer-ul li a { - text-decoration: none; - padding: 5px 0; - transition: color 0.3s ease-in-out; - position: relative; -} - -.footer-ul li a::after { - content: ""; - display: block; - width: 0; - height: 3px; - background: #d76cc2; /* Color of the underline */ - transition: width 0.3s ease-in-out; - position: absolute; - bottom: -2px; - left: 50%; - transform: translateX(-50%); -} - -.footer-ul li a:hover { - color: #ec685c; /* Color of the text on hover */ -} - -.footer-ul li a:hover::after { - width: 100%; /* Fully expand the underline */ -} - .company-info { font-weight: 600; flex: 1 1 30%; } -.quick-links { - flex: 1 1 30%; -} - -.send-message { - flex: 1 1 30%; -} - .company-name { font-size: 24px; margin-bottom: 10px; @@ -730,52 +693,57 @@ footer { text-align: center; } -.quick-links h2, -.send-message h2 { - font-size: 18px; - margin-bottom: 10px; +.quick-links { + flex: 1 1 30%; } -.quick-links ul, -.send-message form { - list-style: none; - padding: 0; - margin: 0; +.heading { + font-size: 24px; + margin-bottom: 20px; + background: #00F260; + background: -webkit-linear-gradient(to right, #f70479, #cccccc); + background: linear-gradient(to right, #f70479, #cccccc); + background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; } -.quick-links li, -.send-message button { - margin-bottom: 10px; +.footer-ul { + justify-items: center; + align-items: center; + text-align: center; } -.quick-links a, -.send-message button { +.footer-ul li a { text-decoration: none; + padding: 5px 0; + transition: color 0.3s ease-in-out; + position: relative; } -.send-message input[type="email"] { - width: 100%; - padding: 10px; - border: 1px solid #cccccc; - border-radius: 4px; +.footer-ul li a::after { + content: ""; + display: block; + width: 0; + height: 3px; + background: #d76cc2; /* Color of the underline */ + transition: width 0.3s ease-in-out; + position: absolute; + bottom: -2px; + left: 50%; + transform: translateX(-50%); } -.copyright { - margin-top: 30px; - text-align: center; - padding: 0 20px; - color: #cccccc; +.footer-ul li a:hover { + color: #ec685c; } -.heading { - font-size: 24px; - margin-bottom: 20px; - background: #00F260; - background: -webkit-linear-gradient(to right, #f70479, #CCCCCC); - background: linear-gradient(to right, #f70479, #CCCCCC); - background-clip: text; - -webkit-text-fill-color: transparent; - text-align: center; +.footer-ul li a:hover::after { + width: 100%; /* Fully expand the underline */ +} + +.send-message { + flex: 1 1 30%; } .form-group { @@ -788,6 +756,13 @@ footer { gap: 10px; } +.send-message input[type="email"] { + width: 100%; + padding: 10px; + border: 1px solid #cccccc; + border-radius: 4px; +} + .send-message input, .send-message textarea { width: 100%; @@ -816,12 +791,6 @@ footer { font-weight: bold; } -.footer-ul { - justify-items: center; - align-items: center; - text-align: center; -} - .social { font-size: 3.5rem; text-decoration: none; @@ -838,7 +807,30 @@ footer { transition: transform 0.3s ease-in-out; } -/* Pop up effect */ +.copyright { + color: #cccccc; + padding: 0 20px; + margin-top: 30px; + font-weight: 900; + text-align: center; +} + +.quick-links ul, +.send-message form { + list-style: none; + padding: 0; + margin: 0; +} + +.quick-links li, +.send-message button { + margin-bottom: 10px; +} + +.quick-links a, +.send-message button { + text-decoration: none; +} .social a:hover i { transform: translateY(-8px); @@ -853,11 +845,11 @@ footer { } .social a.message:hover { - color: #D44638; + color: #d44638; } .social a.linkedin:hover { - color: #0A66C2; + color: #0a66c2; } .social a.github:hover { @@ -865,19 +857,19 @@ footer { } .social a.instagram:hover { - color: #E1306C; + color: #e1306c; } .social a.facebook:hover { - color: #1877F2; + color: #1877f2; } .social a.twitter:hover { - color: #1DA1F2; + color: #1da1f2; } .social a.discord:hover { - color: #5865F2; + color: #5865f2; } #progress {