Enhanced social media icons with dynamic glow effect (#821)

assets/about/about.css

@@ -31,4 +31,59 @@
     color: white;
     padding: 0 3rem;
     margin-bottom: 2rem;
-}
+}
+
+.footer-basic .social {
+    text-align: center;
+    padding-bottom: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.social {
+    font-size: 3.5rem;
+    text-decoration: none;
+    margin: 0 1rem;
+    transition: transform 0.3s ease-in-out;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.social a i {
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Pop up effect */
+
+.social a:hover i {
+    transform: translateY(-8px);
+}
+
+.social a {
+    color: var(--secondary);
+}
+
+.social a.user:hover {
+    color: #4af3b5;
+}
+
+.social a.message:hover {
+    color: #73408f;
+}
+
+.social a.github:hover {
+    color: #21d061;
+}
+
+.social a.twitter:hover {
+    color: #00fff7;
+}
+
+.social a.facebook:hover {
+    color: #0026ff;
+}

assets/about/about.html

@@ -52,8 +52,8 @@
                 <li class="nav-item">
                     <a href="../contact/contact.html" class="nav-link"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a>
                 </li>
-
             </ul>
+
             <div class="hamburger">
                 <span class="bar"></span>
                 <span class="bar"></span>
@@ -93,14 +93,11 @@ <h1>Join Us</h1>
     <div class="footer-basic">
         <footer>
             <div class="social">
-                <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
-                <a href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
-                <a href="https://www.github.com/Rakesh9100" target="_blank"><i
-                        class="fa-brands fa-square-github"></i></a>
-                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i
-                        class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i
-                        class="fa-brands fa-square-facebook"></i></a>
+                <a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
+                <a class="message" href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+                <a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
+                <a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
+                <a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
             </div>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="../../index.html">Home</a></li>

assets/contact/contact.css

@@ -80,7 +80,7 @@ textarea {
 
 textarea {
     border: 1px solid #ccc;
-    resize: vertical; 
+    resize: vertical;
 }
 
 input:hover,
@@ -177,3 +177,58 @@ button:hover {
     color: rgb(255, 255, 255);
     margin-bottom: 0;
 }
+
+.footer-basic .social {
+    text-align: center;
+    padding-bottom: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.social {
+    font-size: 3.5rem;
+    text-decoration: none;
+    margin: 0 1rem;
+    transition: transform 0.3s ease-in-out;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.social a i {
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Pop up effect */
+
+.social a:hover i {
+    transform: translateY(-8px);
+}
+
+.social a {
+    color: var(--secondary);
+}
+
+.social a.user:hover {
+    color: #4af3b5;
+}
+
+.social a.message:hover {
+    color: #73408f;
+}
+
+.social a.github:hover {
+    color: #21d061;
+}
+
+.social a.twitter:hover {
+    color: #00fff7;
+}
+
+.social a.facebook:hover {
+    color: #0026ff;
+}

assets/contact/contact.html

@@ -83,11 +83,11 @@ <h2>Contact Us</h2>
     <div class="footer-basic">
         <footer>
             <div class="social">
-                <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
-                <a href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
-                <a href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
-                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
+                <a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
+                <a class="message" href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+                <a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
+                <a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
+                <a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
             </div>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="../../index.html#home">Home</a></li>

assets/contributors/contributor.css

@@ -167,26 +167,57 @@ div {
 .footer-basic .social {
     text-align: center;
     padding-bottom: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
 }
 
 .social {
     font-size: 3.5rem;
     text-decoration: none;
     margin: 0 1rem;
-    transition: 0.3s ease-in-out;
+    transition: transform 0.3s ease-in-out;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 2rem;
 }
 
+.social a i {
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Pop up effect */
+
+.social a:hover i {
+    transform: translateY(-8px);
+}
+
+
 .social a {
     color: var(--secondary);
 }
 
-.social a:hover {
-    color: var(--primary);
+.social a.user:hover {
+    color: #4af3b5;
+}
+
+.social a.message:hover {
+    color: #73408f;
+}
+
+.social a.github:hover {
+    color: #21d061;
+}
+
+.social a.twitter:hover {
+    color: #00fff7;
+}
+
+.social a.facebook:hover {
+    color: #0026ff;
 }
 
 .footer-basic .copyright {
@@ -212,7 +243,6 @@ div {
     cursor: pointer;
 }
 
-
 #progress-value {
     display: block;
     height: calc(100% - 15px);

assets/contributors/contributor.html

@@ -181,11 +181,11 @@ <h1>Faces of Dedication: Our Contributing Heroes</h1>
     <div class="footer-basic">
         <footer>
             <div class="social">
-                <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
-                <a href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
-                <a href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
-                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
+                <a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
+                <a class="message" href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+                <a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
+                <a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
+                <a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
             </div>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="../../index.html#home">Home</a></li>

assets/faq/faq.css

@@ -75,7 +75,63 @@
     text-decoration: underline;
 }
 
+.footer-basic .social {
+    text-align: center;
+    padding-bottom: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.social {
+    font-size: 3.5rem;
+    text-decoration: none;
+    margin: 0 1rem;
+    transition: transform 0.3s ease-in-out;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.social a i {
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Pop up effect */
+
+.social a:hover i {
+    transform: translateY(-8px);
+}
+
+.social a {
+    color: var(--secondary);
+}
+
+.social a.user:hover {
+    color: #4af3b5;
+}
+
+.social a.message:hover {
+    color: #73408f;
+}
+
+.social a.github:hover {
+    color: #21d061;
+}
+
+.social a.twitter:hover {
+    color: #00fff7;
+}
+
+.social a.facebook:hover {
+    color: #0026ff;
+}
+
 /* Responsive Media Query */
+
 @media screen and (max-width: 768px) {
     .faqs_container {
         grid-template-columns: 1fr;
@@ -90,4 +146,4 @@
         padding: 0 0.5rem;
         text-align: center;
     }
-}
+}

assets/faq/faq.html

@@ -80,14 +80,11 @@
     <div class="footer-basic">
         <footer>
             <div class="social">
-                <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
-                <a href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
-                <a href="https://www.github.com/Rakesh9100" target="_blank"><i
-                        class="fa-brands fa-square-github"></i></a>
-                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i
-                        class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i
-                        class="fa-brands fa-square-facebook"></i></a>
+                <a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
+                <a class="message" href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+                <a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
+                <a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
+                <a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
             </div>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="../../index.html">Home</a></li>
@@ -112,4 +109,4 @@
 
 </body>
 
-</html>
+</html>

index.html

@@ -3541,11 +3541,11 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
     <div class="footer-basic">
         <footer>
             <div class="social">
-                <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
-                <a href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
-                <a href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
-                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
+                <a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
+                <a class="message" href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+                <a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
+                <a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
+                <a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
             </div>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>