Enhance Footer Social Icons with Hover Effects (#92)

## Description Details: I have modified the social icons in the footer. Expected Behavior: When a user hovers over the social icons: The Facebook icon changes to blue. The Instagram icon changes to pink. All icons increase in size slightly.  <h2>Before:</h2> https://github.com/user-attachments/assets/4c5ba593-bbed-4fd5-8712-64c8ec7efbab <h2>After:</h2> https://github.com/user-attachments/assets/5e984c82-1d0d-4e2b-a2b2-7f80d8808b94
Anjaliavv51 · Oct 2, 2024 · fcdcc91 · fcdcc91
2 parents 75e954c + b2adfab
commit fcdcc91
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 40 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/Retro.iml b/.idea/Retro.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/Css-files/content.css b/Css-files/content.css
@@ -344,42 +344,97 @@ div.deals:hover{
 
 /* footer */
 .foot-panel2{
-    background-color: transparent;
-    color:white;
-    height: 300px;
-    display: flex;
-    justify-content: space-evenly;
+  background-color: transparent;
+  color:white;
+  height: 300px;
+  display: flex;
+  justify-content: space-evenly;
 }
 
 .footer-colums{
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 .footer-colums p{
-    font-weight: 700;
+  font-weight: 700;
 }
 
 .footer-colums a{
-    display: block;
-    font-size: 0.85rem;
-    margin-top: 10px;
-    color: #dddddd;
+  display: block;
+  font-size: 0.85rem;
+  margin-top: 10px;
+  color: #dddddd;
+}
+
+.follow-us{
+  margin-bottom: 20px;
+}
+
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  /* color: white; */
 }
 
+.fa-facebook{
+  color: hsl(203, 30%, 26%);
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+}
+
+.fa-facebook:hover {
+
+  transform: scale(1.5);
+  color:#3B5998;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.fa-instagram{
+  color: hsl(203, 30%, 26%);
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+}
+.fa-instagram:hover {
+  transform: scale(1.5);
+  color:#D62976;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+.fa-x-twitter{
+  color: hsl(203, 30%, 26%);
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+
+}
+
+.fa-x-twitter:hover {
+  color:black;
+  transform: scale(1.5);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+
 .foot_panel4{
-    background-color: transparent;
-    color: white;
-    height: 160px;
-    font-size: 0.9rem;
-    text-align: center;
+  background-color: transparent;
+  /* color:hsl(203, 30%, 26%); */
+  height: 160px;
+  /* font-size: 0.9rem; */
+  text-align: center;
+  /* margin-bottom: 8px; */
 }
 
+
+
 .pages{
-    padding-top: 25px;
+  padding-top: 25px;
 }
 
 .copyright{
-   padding-top: 10px;
+  padding-top: 10px;
 }
 
 form {
@@ -418,7 +473,7 @@ textarea {
     font-size: 1.2rem;
     padding: 15px;
     text-decoration: none;
-    color: white;
+    color: hsl(203, 30%, 26%);
 }
 
 .fa-facebook:hover {
@@ -522,6 +577,8 @@ textarea {
   border: none;
 }
 
+
+
 #contactForm h3 {
   height: 30px;
   color: #141414;

diff --git a/Css-files/style.css b/Css-files/style.css
@@ -455,7 +455,7 @@ ul a{
 
 .foot_panel4{
     background-color: rgb(66, 16, 16);
-    color: white;
+    color: hsl(203, 30%, 26%);
     height: 160px;
     font-size: 0.9rem;
     text-align: center;
@@ -518,13 +518,11 @@ textarea {
     font-size: 1.2rem;
     padding: 15px;
     text-decoration: none;
-    color: white;
-}
-.fb{
-    color: #1877F2;
-    cursor: pointer;
+    color: hsl(203, 30%, 26%) ;
 }
 
+
+
 .instagram{
     color: #dd4c8d;
     cursor: pointer;
@@ -781,3 +779,8 @@ input, textarea {
     }
 }
 
+
+fa-facebook:hover {
+    font-size: 2rem !important; /* Increase the size of the icon */
+    color: #4267B2;   /* Change the color to #4267B2 */
+}
diff --git a/Html-files/Electronic.html b/Html-files/Electronic.html
@@ -243,14 +243,57 @@
               margin-top: 10px;
               color: #dddddd;
           }
+          .fa-facebook{
+                color: white;
+                font-size: 1.2rem;
+                padding: 8px;
+                margin: 15px;
+            }
+
+            .fa-facebook:hover {
+
+                transform: scale(1.5);
+                color:#3B5998;
+                transition: transform 0.2s ease, color 0.2s ease;
+            }
+
+            .fa-instagram{
+                color: white;
+                font-size: 1.2rem;
+                padding: 8px;
+                margin: 15px;
+            }
+            .fa-instagram:hover {
+                transform: scale(1.5);
+                color:#D62976;
+                transition: transform 0.2s ease, color 0.2s ease;
+            }
+
+            .fa-x-twitter{
+                color: hsl(203, 30%, 26%);
+                font-size: 1.2rem;
+                padding: 8px;
+                margin: 15px;
+
+            }
+
+            .fa-x-twitter:hover {
+                color:black;
+                transform: scale(1.5);
+                transition: transform 0.2s ease, color 0.2s ease;
+            }
+
+
 
           .foot_panel4 {
               background-color: transparent;
-              color: white;
+              /* color: white; */
               height: 160px;
               font-size: 0.9rem;
               text-align: center;
-          }
+            }
+
+
 
           form {
               padding-top: 20px;
@@ -616,7 +659,7 @@ <h3 style="font-family: var(--ff-philosopher);color: black;">Contact Us!</h3>
 
         <div class="foot_panel4"  style="font-family: Garamond;">
             <div class="pages">
-                <h4 style="font-family: var(--ff-philosopher);color: black;">Follow Us</h4>
+                <h2 style="font-family: var(--ff-philosopher);color: black;">Follow Us</h2>
 
                 <div class="social-icons">
                     <div class="social-icons">

diff --git a/Html-files/cart.html b/Html-files/cart.html
@@ -295,12 +295,12 @@ <h3 style="font-family: var(--ff-philosopher);">Contact Us!</h3>
 
         <div class="foot_panel4">
             <div class="pages">
-                <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">Follow Us</h4>
+                <h2 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);" class="follow-us">Follow Us</h2>
                 <div class="social-icons">
                     <i class="fa-brands fa-facebook"></i>&nbsp;&nbsp;&nbsp;&nbsp;
                     <i class="fa-brands fa-instagram"></i>&nbsp;&nbsp;&nbsp;&nbsp;
                     <i class="fa-brands fa-x-twitter"></i>&nbsp;&nbsp;&nbsp;
-                </div>
+                </div><br>
                 <p style="margin-bottom:0;font-family: var(--ff-philosopher);">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
                 </p>
                 <div class="copyright" style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">

diff --git a/index.html b/index.html
@@ -27,7 +27,7 @@
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="./style.css">
+        <link rel="stylesheet" href="./style.css">
 
     <style>
 
@@ -638,12 +638,12 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);font-fami
                 <div class="pages">
                     <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow Us</h4>
 
-                    <div class="social-icons" style="background-color: hsl(20, 43%, 93%);">
+                    <div class="social-icons">
 
 
-                        <a class="fa-brands fa-facebook" href="https://facebook.com" style="color: hsl(203, 30%, 26%);"></a>
-                        <a class="fa-brands fa-instagram" href="https://instagram.com" style="color: hsl(203, 30%, 26%);"></a>
-                        <a class="fa-brands fa-x-twitter" href="https://twitter.com" style="color: hsl(203, 30%, 26%);"></a>
+                        <a class="fa-brands fa-facebook" href="https://facebook.com" ></a>
+                        <a class="fa-brands fa-instagram" href="https://instagram.com" ></a>
+                        <a class="fa-brands fa-x-twitter" href="https://twitter.com" ></a>
 
                     </div>
                     <p style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);color: hsl(203, 30%, 26%);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.

diff --git a/style.css b/style.css
@@ -512,6 +512,7 @@ ul a {
     justify-content: center;
 } */
 
+
 .foot_panel4 {
   background-color: rgb(66, 16, 16);
   color: white;
@@ -568,24 +569,43 @@ textarea {
   padding: 8px;
   margin: 15px;
   text-decoration: none;
-  color: white;
+  /* color: white; */
 }
 
 .social-icons a:hover {
-  color: brown;
-  background-color: hsl(20, 43%, 93%);
+  /* color: brown; */
+  /* background-color: hsl(20, 43%, 93%); */
   border-radius: 50px;
 }
+
+.fa-facebook{
+  color: hsl(203, 30%, 26%);
+}
+
 .fa-facebook:hover {
+
+  transform: scale(1.5);
   color:#3B5998;
+  transition: transform 0.2s ease, color 0.2s ease;
 }
 
+.fa-instagram{
+  color: hsl(203, 30%, 26%);
+}
 .fa-instagram:hover {
+  transform: scale(1.5);
   color:#D62976;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+.fa-x-twitter{
+  color: hsl(203, 30%, 26%);
+
 }
 
-.fa-twitter:hover {
-  color:#00B6F1;
+.fa-x-twitter:hover {
+  color:black;
+  transform: scale(1.5);
+  transition: transform 0.2s ease, color 0.2s ease;
 }
 
 #author {