Merge pull request #137 from codedmachine111/master

Added accurate color coding fill-in effect to social media icons in the footer.
SaptarshiSarkar12 · Oct 22, 2022 · c5b1417 · c5b1417
2 parents c808fbf + 62c2526
commit c5b1417
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 14 deletions.
diff --git a/Website/index.html b/Website/index.html
@@ -141,11 +141,10 @@ <h2>Contact Us</h2>
 
   <footer class="footer">
     <div class="social">
-      <a href="https://www.twitter.com/SSarkar2007"><i class="fab fa-twitter"></i></a>
-      <a href="https://github.com/SaptarshiSarkar12"><i class="fab fa-github"></i></a>
-
-      <a href="https://saptarshisarkar.hashnode.dev/"><i class="fa-brands fa-hashnode"></i></a>
-      <a href="https://www.bio.link/saptarshi"><i class="fa-sharp fa-solid fa-link"></i></a>
+        <a href="https://www.twitter.com/SSarkar2007" id="twitter"><i class="fab fa-twitter"></i></a>
+        <a href="https://github.com/SaptarshiSarkar12" ><i class="fab fa-github"></i></a>
+        <a href="https://saptarshisarkar.hashnode.dev/"><i class="fa-brands fa-hashnode"></i></a>
+        <a href="https://www.bio.link/saptarshi" ><i class="fa-sharp fa-solid fa-link"></i></a>
       <!--added footers -->
     </div>
     <p><i class="fa-solid fa-copyright"></i> Drifty

diff --git a/Website/style.css b/Website/style.css
@@ -680,8 +680,10 @@ header {
 }
 
 .footer .social {
-  text-align: center;
-  padding-bottom: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
 }
 
 .footer .social a {
@@ -696,19 +698,47 @@ header {
   text-align: center;
   display: inline-block;
   border-radius: 50%;
-  margin: 0 10px;
-  border-color: black;
+  margin: 0 6px;
   opacity: 0.75;
   transition: all 0.25s linear;
 }
+.footer .social .social-icons a{
+  color: #0f0f0f;
+  padding: 0.7rem;
+  border: 1px solid #0f0f0f;
+  border-radius: 50%;
+  width: auto;
+}
 
-.footer .social a:hover {
-  color: var(--maroon);
-  opacity: 1;
-  box-shadow: 2px 2px 10px var(--maroon), 2px -2px 10px var(--maroon),
-    -2px -2px 10px var(--maroon), -2px 2px 10px var(--maroon);
+#twitter:hover {
+  background-color: #00acee ;
+  color: #fff;
+  transition: 0.3s ease;
+  border: none;
+  transform: scale(1.2);
 }
 
+.footer .social :nth-child(2):hover {
+  background-color: #0f0f0f ;
+  color: #fff;
+  transition: 0.3s ease;
+  border: none;
+  transform: scale(1.2);
+}
+.footer .social :nth-child(3):hover {
+  background-color: #2962FF ;
+  color: #fff;
+  transition: 0.3s ease;
+  border: none;
+  transform: scale(1.2);
+}
+.footer .social :nth-child(4):hover {
+  background-color: var(--maroon) ;
+  color: #fff;
+  transition: 0.3s ease;
+  border: none;
+  transform: scale(1.2);
+}
 .footer > p {
   color: var(--black);
   font-size: 15px;