add real colour hovering on social icons

Rakesh9100 · Aug 3, 2024 · b32072a · b32072a
1 parent 0007609
commit b32072a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -320,28 +320,28 @@ <h2>Transfer Lists</h2>
         <footer>
             <ul class="social-icon">
                 <li>
-                    <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fas fa-link"></i></a>
+                    <a id="bioa" href="https://rakesh9100.bio.link/" target="_blank"><i class="fas fa-link"></i></a>
                 </li>
                 <li>
-                    <a href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fas fa-envelope"></i></a>
+                    <a id="enve" href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fas fa-envelope"></i></a>
                 </li>
                 <li>
-                    <a href="https://www.linkedin.com/in/rakesh-roshan-9100/" target="_blank"><i class="fab fa-linkedin"></i></a>
+                    <a id="linkd" href="https://www.linkedin.com/in/rakesh-roshan-9100/" target="_blank"><i class="fab fa-linkedin"></i></a>
                 </li>
                 <li>
-                    <a href="https://github.com/Rakesh9100" target="_blank"><i class="fab fa-github"></i></a>
+                    <a id="git" href="https://github.com/Rakesh9100" target="_blank"><i class="fab fa-github"></i></a>
                 </li>
                 <li>
-                    <a href="https://www.instagram.com/rakesh250602/" target="_blank"><i class="fab fa-instagram"></i></a>
+                    <a id="insta" href="https://www.instagram.com/rakesh250602/" target="_blank"><i class="fab fa-instagram"></i></a>
                 </li>
                 <li>
-                    <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fab fa-facebook"></i></a>
+                    <a id="fb" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fab fa-facebook"></i></a>
                 </li>
                 <li>
-                    <a href="https://www.twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
+                    <a id="twit" href="https://www.twitter.com/rakeshroshan73" target="_blank"><i id="gith" class="fa-brands fa-x-twitter"></i></a>
                 </li>
                 <li>
-                    <a href="https://discord.com/users/944144134950748170" target="_blank"><i class="fab fa-discord"></i></a>
+                    <a id="disc" href="https://discord.com/users/944144134950748170" target="_blank"><i class="fab fa-discord"></i></a>
                 </li>
             </ul>
             <p>

diff --git a/style.css b/style.css
@@ -650,9 +650,37 @@ footer .social-icon li a {
     transition: transform .2s;
 }
 
-footer .social-icon li a:hover {
+footer .social-icon li #linkd:hover {
     transform: translateY(-10px);
-    color: red;
+    color:#0077B5;
+}
+footer .social-icon li #fb:hover {
+    transform: translateY(-10px);
+    color:#1877F2;
+}
+footer .social-icon li #insta:hover {
+    transform: translateY(-10px);
+    color:#C13584;
+}
+footer .social-icon li #disc:hover {
+    transform: translateY(-10px);
+    color:#7289DA;
+}
+footer .social-icon li #git:hover {
+    transform: translateY(-10px);
+    color:#181717;    
+}
+footer .social-icon li #twit:hover {
+    transform: translateY(-10px);
+    color:#000000;
+}
+footer .social-icon li #enve:hover {
+    transform: translateY(-10px);
+    color:#E53935;
+}
+footer .social-icon li #bioa:hover {
+    transform: translateY(-10px);
+    color:#87CEEB;
 }
 
 footer p {