Merge pull request #515 from sanikamandale17/zxc

Fix issue #510 Fix issue #510 Added hover effects

aboutus.html

@@ -201,8 +201,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">

style.css

@@ -819,34 +819,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;
@@ -858,14 +860,33 @@ 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 {
   color: white;
   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;