From f712c54ca52786e5733048cbee36945c525b5987 Mon Sep 17 00:00:00 2001
From: "sanikamandale177@gmail.com" <sanikamandale17>
Date: Thu, 17 Oct 2024 10:52:08 +0530
Subject: [PATCH] Fix issue #510 Added hover effects

---
 aboutus.html |  3 ++-
 style.css    | 45 +++++++++++++++++++++++++++++++++------------
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/aboutus.html b/aboutus.html
index 3694ef7d..0ded10ff 100644
--- a/aboutus.html
+++ b/aboutus.html
@@ -198,8 +198,9 @@ <h2 class="logo-text">Collect your GamingTools</h2>
                     <!-- 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="twitter" href="#"><i class="fab fa-twitter"></i></a>
                     <a class="youtube" href="#"><i class="fab fa-youtube"></i></a>
+
                 </div>
             </div>
             <div class="footer-section links">
diff --git a/style.css b/style.css
index 196b359e..2439f75a 100644
--- a/style.css
+++ b/style.css
@@ -782,34 +782,36 @@ button {
   line-height: 40px;
   border-radius: 50%;
   color: #d3d3d3;
-  transition: all 0.3s;
-  transition: transform 0.3s ease, background 0.3s ease; /* Added transform property */
+  transition: all 0.3s ease, transform 0.3s ease, background 0.3s ease;
 }
 
 .socials a:hover {
-  transform: scale(1.2); /* Zoom effect on hover */
+  transform: scale(1.2) rotate(10deg); /* Zoom and rotate effect */
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
 }
-/* Hover zoom effect for facebook icon */
+
+/* Hover zoom and color change effect for social icons */
 .socials .facebook:hover {
-  background: blue;
+  background: linear-gradient(to right, #3b5998, #192f6a); /* Gradient background */
   color: white;
 }
-/* Hover zoom effect for instagram icon */
+
 .socials .instagram:hover {
-  background: orangered;
+  background: linear-gradient(to right, #e1306c, #f77737); /* Instagram gradient */
   color: white;
 }
-/* Hover zoom effect for twitter[X] icon */
+
 .socials .twitter:hover {
-  background: black;
+  background: linear-gradient(to right, #1da1f2, #14171a); /* Gradient for X (Twitter) */
   color: white;
 }
-/* Hover zoom effect for youtube icon */
+
 .socials .youtube:hover {
-  background: red;
+  background: linear-gradient(to right, #ff0000, #cc0000); /* YouTube gradient */
   color: white;
 }
 
+/* Links hover effect */
 .links ul {
   list-style-type: none;
   padding: 0;
@@ -821,7 +823,21 @@ button {
   font-size: 1.1em;
   color: #d3d3d3;
   text-decoration: none;
-  transition: all 0.3s;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.links ul a::before {
+  content: "";
+  position: absolute;
+  width: 5px;
+  height: 100%;
+  background-color: white;
+  left: 0;
+  top: 0;
+  transform: scaleY(0);
+  transition: transform 0.3s ease;
+  transform-origin: top;
 }
 
 .links ul a:hover {
@@ -829,6 +845,11 @@ button {
   padding-left: 10px;
 }
 
+.links ul a:hover::before {
+  transform: scaleY(1); /* Add a vertical line effect on hover */
+}
+
+
 .contact-form .text-input {
   background: #272727;
   color: #bebdbd;