Merge pull request #1092 from VidhanThakur09/vidhan

improve social media icons
aditya-bhaumik · Oct 29, 2024 · 50b6a4e · 50b6a4e
2 parents cf169c9 + 3db10a3
commit 50b6a4e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 12 deletions.
diff --git a/components/Footer/Footer.html b/components/Footer/Footer.html
@@ -57,27 +57,27 @@ <h3>Quick links</h3>
         <h3>Follow us on</h3>
         <ul class="social-icons">
           <li>
-            <a href="https://github.com" target="_blank"
+            <a href="https://github.com" id="github" target="_blank"
               ><i class="fab fa-github"></i
             ></a>
           </li>
           <li>
-            <a href="https://instagram.com" target="_blank"
+            <a href="https://instagram.com" id="instagram"target="_blank"
               ><i class="fab fa-instagram"></i
             ></a>
           </li>
           <li>
-            <a href="https://x.com" target="_blank"
+            <a href="https://x.com" id="twitter" target="_blank"
               ><i class="fa-brands fa-x-twitter"></i
             ></a>
           </li>
           <li>
-            <a href="https://facebook.com" target="_blank"
+            <a href="https://facebook.com" id="facebook" target="_blank"
               ><i class="fab fa-facebook"></i
             ></a>
           </li>
           <li>
-            <a href="https://linkedin.com" target="_blank"
+            <a href="https://linkedin.com" id="linkedin" target="_blank"
               ><i class="fab fa-linkedin"></i
             ></a>
           </li>

diff --git a/styles/styles.css b/styles/styles.css
@@ -765,16 +765,45 @@ footer {
   font-size: 1.2rem;
   border-radius: 50%;
   margin: 0.2rem 0.5rem 0.2rem 0;
-  transition: 0.3s ease;
+  transition: 5s;
   color: var(--secondary-color) #b74b4b;
   text-decoration: none;
 }
 
 .social-icons a:hover {
-  color: black;
-  transform: scale(1.3) translateY(-5px);
-  background-color: #fffefe;
-  box-shadow: 0 0 25px #0c0909ef;
+    color: white;
+    transform: scale(1.1);
+    padding: 2px 2px;
+    border-radius: 4px;
+    border: none;
+}
+#github, #linkedin, #instagram,#facebook,#twitter{
+  transition: all .38s ease;
+}
+#github:hover{
+  color: white;
+  background-color:#3a383c ;
+  font-size: 1.5rem;
+}
+#linkedin:hover{
+  color: white;
+  background-color:#0a66c2 ;
+  font-size: 1.5rem;
+}
+#instagram:hover{
+  color: white;
+  background-color: #e1306c;
+  font-size: 1.5rem;
+}
+#twitter:hover{
+  color: white;
+  background-color: #14171A;
+  font-size: 1.5rem;
+}
+#facebook:hover{
+  color: white;
+  background-color: #106bcb;
+  font-size: 1.5rem;
 }
 .copyright {
   display: flex;
@@ -843,7 +872,7 @@ footer {
     color: var(--secondary-color);
   }
 
-  .social-icons a {
+  /* .social-icons a {
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -864,7 +893,7 @@ footer {
     transform: scale(1.3) translateY(-5px);
     background-color: #fffefe;
     box-shadow: 0 0 25px #0c0909ef;
-  }
+  } */
 
   @media (max-width: 768px) {
     .footer-container {