From 786353a6841e2a9dcc46438220e45d168250f45a Mon Sep 17 00:00:00 2001
From: laxmi47 <laxmikandivalasa47@gmail.com>
Date: Wed, 2 Oct 2024 18:34:50 +0530
Subject: [PATCH 1/2] enhanced footer icons color and size

---
 style.css | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/style.css b/style.css
index 9d984726..00fa1bf6 100644
--- a/style.css
+++ b/style.css
@@ -571,17 +571,19 @@ textarea {
   color: brown;
   background-color: hsl(20, 43%, 93%);
   border-radius: 50px;
+  transform: scale(1.5); /* Increase size */
+  transition: transform 0.3s ease; /* Smooth transition effect */
 }
-.fa-facebook:hover {
-  color:#3B5998;
+.fa-brands.fa-facebook:hover {
+  color: #3B5998 !important;
 }
 
-.fa-instagram:hover {
-  color:#D62976;
+.fa-brands.fa-instagram:hover {
+  color: #D62976 !important;
 }
 
-.fa-twitter:hover {
-  color:#00B6F1;
+.fa-brands.fa-x-twitter:hover {
+  color: #181e20 !important;
 }
 
 #author {

From 145ac78a73c0595630c2b6da22d0250d600ad599 Mon Sep 17 00:00:00 2001
From: laxmi47 <laxmikandivalasa47@gmail.com>
Date: Wed, 2 Oct 2024 20:58:40 +0530
Subject: [PATCH 2/2] enhanced footer icons color and size in all html pages
 with footers

---
 Coverpage.html             |  1 +
 Html-files/Electronic.html | 48 ++++++++++++++++++++++++++------------
 Html-files/cart.html       | 46 ++++++++++++++++++++++++++++++------
 Html-files/contact.html    | 34 +++++++++++++++++++++++----
 Html-files/menu.html       | 32 ++++++++++++++++++++++++-
 Html-files/services.html   | 35 ++++++++++++++++++++++++---
 style.css                  |  6 ++---
 7 files changed, 169 insertions(+), 33 deletions(-)

diff --git a/Coverpage.html b/Coverpage.html
index 8e0f0c61..1a0ca0de 100644
--- a/Coverpage.html
+++ b/Coverpage.html
@@ -6,6 +6,7 @@
     <title>Retro</title>
     <meta http-equiv="refresh" content="30">
     <link rel="shortcut icon" type="image/x-icon" href="./Favicon image/favicon-32x32.png">
+    <link rel="stylesheet" href="./style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style id="background-color">
         body {
diff --git a/Html-files/Electronic.html b/Html-files/Electronic.html
index e6ea624f..78f66e18 100644
--- a/Html-files/Electronic.html
+++ b/Html-files/Electronic.html
@@ -279,16 +279,33 @@
             background-color: rgb(196, 89, 89);
           }
   
-          .social-icons a {
-              font-size: 1.2rem;
-              padding: 15px;
-              text-decoration: none;
-              color: white;
-          }
-  
-          .fa-facebook:hover { color: #3B5998; }
-          .fa-instagram:hover { color: #D62976; }
-          .fa-twitter:hover { color: #00B6F1; }
+         
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: rgb(248, 243, 243);
+}
+
+.social-icons a:hover {
+  color: brown;
+  background-color: hsl(203%, 29%, 91%);
+  border-radius: 10px;
+  transform: scale(1.5); /* Increase size */
+  transition: transform 0.3s ease; /* Smooth transition effect */
+}
+.fa-brands.fa-facebook:hover {
+  color: #3B5998 !important;
+}
+
+.fa-brands.fa-instagram:hover {
+  color: #D62976 !important;
+}
+
+.fa-brands.fa-x-twitter:hover {
+  color: #181e20 !important;
+}
   
           #sr {
               display: none;
@@ -618,12 +635,13 @@ <h3 style="font-family: var(--ff-philosopher);color: black;">Contact Us!</h3>
             <div class="pages">
                 <h4 style="font-family: var(--ff-philosopher);color: black;">Follow Us</h4>
 
+               
                 <div class="social-icons">
-                    <div class="social-icons">
-                        <a class="fa-brands fa-facebook" href="https://facebook.com" target="_blank"></a>
-                        <a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a>
-                        <a class="fa-brands fa-x-twitter" href="https://twitter.com" target="_blank"></a>
-                    </div>
+                    <a class="fa-brands fa-facebook" href="https://facebook.com" style="color: hsl(203, 29%, 91%);"></a>
+                    <a class="fa-brands fa-instagram" href="https://instagram.com" style="color: hsl(203, 29%, 91%);"></a>
+                    <a class="fa-brands fa-x-twitter" href="https://twitter.com" style="color: hsl(203, 29%, 91%);"></a>
+                </div>
+
                 </div>
                 <p style="margin-bottom:0;font-family: var(--ff-philosopher);color: white;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
                 </p>
diff --git a/Html-files/cart.html b/Html-files/cart.html
index 4dacaffb..999385b6 100644
--- a/Html-files/cart.html
+++ b/Html-files/cart.html
@@ -162,6 +162,34 @@
             --ff-philosopher: "Philosopher", sans-serif;
             --ff-poppins: "Poppins", sans-serif;
         }
+
+  .social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: rgb(17, 13, 13);
+}
+.social-icons a:hover {
+  color: brown;
+  background-color: hsl(22, 76%, 85%);
+  border-radius: 10px;
+  transform: scale(1.5); /* Increase size */
+  transition: transform 0.3s ease; /* Smooth transition effect */
+}
+.fa-brands.fa-facebook:hover {
+  color: #3B5998 !important;
+}
+
+.fa-brands.fa-instagram:hover {
+  color: #D62976 !important;
+}
+
+.fa-brands.fa-x-twitter:hover {
+  color: #151b1c !important;
+}
+
+        
     </style>
 </head>
 
@@ -295,15 +323,19 @@ <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>
+                <h4 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher); margin: 10px;">Follow Us</h4>
                 <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>
-                <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.
+
+
+                  <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>
+
+              </div>
+              
+                <p style="margin-bottom:0;font-family: var(--ff-philosopher); margin-top: 5px;">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);">
+                <div class="copyright" style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher); margin: 3px;">
                     © 2024 Retro . All Rights Reserved. | <span id="author">
                         <a href="https://www.linkedin.com" target="_blank" style="text-decoration: none;">Retro Team</a>
                     </span><p></p>
diff --git a/Html-files/contact.html b/Html-files/contact.html
index 6fbb4296..de9b2275 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -178,6 +178,32 @@
     100% {
         transform: rotate(360deg);
     }
+}
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: rgb(18, 16, 16);
+}
+
+.social-icons a:hover {
+  color: brown;
+  background-color: hsl(22, 76%, 85%);
+  border-radius: 10px;
+  transform: scale(1.5); /* Increase size */
+  transition: transform 0.3s ease; /* Smooth transition effect */
+}
+.fa-brands.fa-facebook:hover {
+  color: #3B5998 !important;
+}
+
+.fa-brands.fa-instagram:hover {
+  color: #D62976 !important;
+}
+
+.fa-brands.fa-x-twitter:hover {
+  color: #181e20 !important;
 }
         </style>
 </head>
@@ -460,12 +486,12 @@ <h3 style="text-align: center; margin-bottom: 15px;">Contact Us!</h3>
 
         <div class="foot_panel4" style="color: black;background-color: transparent;">
             <div class="pages" style="background-color: transparent;">
-                <h4>Follow Us</h4>
+                <h3>Follow Us</h3>
 
                 <div class="social-icons">
-                    <i class="fa-brands fa-facebook"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                    <i class="fa-brands fa-instagram"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                    <i class="fa-brands fa-x-twitter"></i>
+                    <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>
                 </div>
                 <p style="margin-bottom:0;">Stay connected with us on social media for the latest updates, recipes, and foodie adventures.
                 </p>
diff --git a/Html-files/menu.html b/Html-files/menu.html
index 59189197..1a94abb0 100644
--- a/Html-files/menu.html
+++ b/Html-files/menu.html
@@ -202,6 +202,33 @@
         transform: rotate(360deg);
     }
 }
+
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: rgb(18, 16, 16);
+}
+
+.social-icons a:hover {
+  color: brown;
+  background-color: hsl(22, 76%, 85%);
+  border-radius: 10px;
+  transform: scale(1.5); /* Increase size */
+  transition: transform 0.3s ease; /* Smooth transition effect */
+}
+.fa-brands.fa-facebook:hover {
+  color: #3B5998 !important;
+}
+
+.fa-brands.fa-instagram:hover {
+  color: #D62976 !important;
+}
+
+.fa-brands.fa-x-twitter:hover {
+  color: #181e20 !important;
+}
     </style>
 </head>
 
@@ -568,9 +595,12 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);font-fami
                 <h4 style="font-family: var(--ff-philosopher);color: hsl(304, 14%, 46%);">Follow Us</h4>
 
                 <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-twitter" href="https://twitter.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>
+
                 </div>
                 <p style="font-family: var(--ff-philosopher);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
                 </p>
diff --git a/Html-files/services.html b/Html-files/services.html
index 5039f699..58da5ae9 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -170,6 +170,32 @@
     100% {
         transform: rotate(360deg);
     }
+}
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: rgb(18, 16, 16);
+}
+
+.social-icons a:hover {
+  color: brown;
+  background-color: hsl(22, 76%, 85%);
+  border-radius: 10px;
+  transform: scale(1.5); /* Increase size */
+  transition: transform 0.3s ease; /* Smooth transition effect */
+}
+.fa-brands.fa-facebook:hover {
+  color: #3B5998 !important;
+}
+
+.fa-brands.fa-instagram:hover {
+  color: #D62976 !important;
+}
+
+.fa-brands.fa-x-twitter:hover {
+  color: #181e20 !important;
 }
     </style>
 </head>
@@ -397,9 +423,12 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
 
                 <div class="social-icons">
                     <div class="social-icons">
-                        <a class="fa-brands fa-facebook" href="https://facebook.com" target="_blank"></a>
-                        <a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a>
-                        <a class="fa-brands fa-x-twitter" href="https://twitter.com" target="_blank"></a>
+
+
+                        <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>
+
                     </div>
                 </div>
                 <p style="margin-bottom:0;font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
diff --git a/style.css b/style.css
index 00fa1bf6..ab53a790 100644
--- a/style.css
+++ b/style.css
@@ -564,13 +564,13 @@ textarea {
   padding: 8px;
   margin: 15px;
   text-decoration: none;
-  color: white;
+  color: rgb(18, 16, 16);
 }
 
 .social-icons a:hover {
   color: brown;
-  background-color: hsl(20, 43%, 93%);
-  border-radius: 50px;
+  background-color: hsl(22, 76%, 85%);
+  border-radius: 10px;
   transform: scale(1.5); /* Increase size */
   transition: transform 0.3s ease; /* Smooth transition effect */
 }