Merge pull request #114 from rajdeepchakraborty-rc/Twitterlogo

Twitter logo Update

index.html

@@ -275,10 +275,11 @@ <h2 class="logo-text">Collect your GamingTools</h2>
                     <span><i class="fas fa-envelope"></i> &nbsp; [email protected]</span>
                 </div>
                 <div class="socials">
-                    <a href="#"><i class="fab fa-facebook"></i></a>
-                    <a href="#"><i class="fab fa-instagram"></i></a>
-                    <a href="#" ><i class="fa-brands fa-x-twitter"></i></a>
-                    <a href="#"><i class="fab fa-youtube"></i></a>
+                    <!-- Added classes to the <a> tags to add the Hover animations -->
+                    <a class="facebook" href="#"><i class="fab fa-facebook"></i></a>
+                    <a class="instagram" href="#"><i class="fab fa-instagram"></i></a>
+                    <a class="twitter" href="#" ><i class="fa-brands fa-x-twitter"></i></a>
+                    <a class="youtube" href="#"><i class="fab fa-youtube"></i></a>
                 </div>
             </div>
             <div class="footer-section links">

style.css

@@ -461,12 +461,32 @@ button:hover img {
     border-radius: 50%;
     color: #d3d3d3;
     transition: all .3s;
+    transition: transform 0.3s ease, background 0.3s ease; /* Added transform property */
 }
 
-.socials a:hover {
-    background: #4CAF50;
-    color: white;
+.socials a:hover{
+    transform: scale(1.2); /* Zoom effect on hover */
 }
+/* Hover zoom effect for facebook icon */
+.socials .facebook:hover {
+    background: blue;
+    color: white;
+ } 
+ /* Hover zoom effect for instagram icon */
+ .socials .instagram:hover {
+    background: orangered;
+    color: white;
+ } 
+ /* Hover zoom effect for twitter[X] icon */
+ .socials .twitter:hover {
+    background: black;
+    color: white;
+ } 
+ /* Hover zoom effect for youtube icon */
+ .socials .youtube:hover {
+    background: red;
+    color: white;
+ } 
 
 .links ul {
     list-style-type: none;