Merge pull request #257 from Antima2004/main

Enhance the footer section

index.html

@@ -769,27 +769,39 @@ <h3 class="reviewer-name">Aditi Patel</h3>
 
 
     <footer>
-      <div class="footer-wrapper">
-        <h5>BuddyTrail &copy;</h5>
-        <ul>
-          <li>
-            <a href="#" class="twitter" id="social-icons"
-              ><img src="icons/twitter.svg"
-            /></a>
-          </li>
-          <li>
-            <a href="#" class="instagram" id="social-icons"
-              ><img src="icons/instagram.svg"
-            /></a>
-          </li>
-          <li>
-            <a href="#" class="youtube" id="social-icons"
-              ><img src="icons/youtube.svg"
-            /></a>
-          </li>
-        </ul>
+      <div class="footer-container">
+          <div class="footer-column">
+              <h3>About Us</h3>
+              <p>We are a team of passionate developers creating amazing web experiences.</p>
+          </div>
+          <div class="footer-column">
+              <h3>Quick Links</h3>
+              <ul>
+                  <li><a href="#">Home</a></li>
+                  <li><a href="#">About</a></li>
+                  <li><a href="#">Services</a></li>
+                  <li><a href="#">Contact</a></li>
+              </ul>
+          </div>
+          <div class="footer-column">
+              <h3>Contact Us</h3>
+              <p>Email: [email protected]</p>
+              <p>Phone: +123 456 7890</p>
+          </div>
+          <div class="footer-column">
+              <h3>Follow Us</h3>
+              <div class="social-icons">
+                  <a href="#"><i class="fab fa-facebook-f"></i></a>
+                  <a href="#"><i class="fa-brands fa-x-twitter"></i></i></a>
+                  <a href="#"><i class="fab fa-instagram"></i></a>
+                  <a href="#"><i class="fab fa-linkedin-in"></i></a>
+              </div>
+          </div>
+      </div>
+      <div class="footer-bottom">
+          <p>&copy; 2024 Buddy Trail. All rights reserved.</p>
       </div>
-    </footer>
+  </footer>
     <!-- Deals and Offers Popup -->
     <div id="dealsPopup" class="popup">
       <div class="popup-content">
@@ -806,6 +818,9 @@ <h2>Exclusive Deals and Offers!</h2>
         </button>
       </div>
     </div>
+    <!-- this script is for twitter icon  starts -->
+ <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
+ <!-- this script is for twitter icon  ends -->
     <script>
       // script.js
       window.onscroll = function () {

style.css

@@ -393,35 +393,115 @@ nav ul a:hover:after{
 
 /**** FOOTER ****/
 
+/* Footer Styles */
 footer {
-  color: white;
-  background-color: rgba(19, 28, 39, 1);
+    background: linear-gradient(135deg, #343a40, #212529);
+    color: #ffffff;
+    padding: 40px 0;
+    text-align: center;
 }
-.footer-wrapper {
-  display: flex;
-  padding: 2rem;
-  width: 90%;
-  margin: auto;
-  align-items: center;
-  min-height: 10vh;
-  flex-wrap: wrap;
+
+.footer-container {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    gap: 20px;
+    max-width: 1200px;
+    margin: auto;
 }
-footer h5 {
-  flex: 1 1 40rem;
+
+.footer-column {
+    flex: 1;
+    min-width: 200px;
+    margin: 10px;
 }
 
-footer ul {
-  display: flex;
-  list-style: none;
-  flex: 1 1 40rem;
-  justify-content: flex-start;
-  align-items: center;
+.footer-column h3 {
+    margin-bottom: 15px;
+    font-size: 18px;
+    color: #f39c12;
+}
+
+.footer-column p, .footer-column ul {
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.footer-column ul {
+    list-style: none;
+    padding: 0;
+}
+
+.footer-column ul li {
+    margin-bottom: 10px;
 }
 
-footer ul li{
-  margin: 0 30px;
+.footer-column ul li a {
+    color: #ffffff;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.footer-column ul li a:hover {
+    color: #f39c12;
+    text-decoration: underline;
+}
+
+.social-icons {
+    margin-top: 20px;
+}
+
+.social-icons a {
+    margin: 0 10px;
+    color: #ffffff;
+    font-size: 20px;
+    transition: color 0.3s;
+}
+
+.social-icons a:hover {
+    color: #f39c12;
+}
+
+.footer-bottom {
+    margin-top: 20px;
+    font-size: 14px;
 }
 
+
+/* for facebook */
+.social-icons .fa-facebook-f {
+  transition: color 0.3s ease, transform 0.3s ease;
+}
+.social-icons .fa-facebook-f:hover{
+  color:#4267B2;
+  transform:scale(1.1);
+}
+
+/* for twitter */
+.social-icons .fa-x-twitter {
+  transition: color 0.3s ease, transform 0.3s ease;
+}
+.social-icons .fa-x-twitter:hover{
+  color:black;
+  transform:scale(1.1);
+}
+/* for instagram */
+.social-icons .fa-instagram {
+  transition: color 0.3s ease, transform 0.3s ease;
+}
+.social-icons .fa-instagram:hover{
+  color:#c32aa3;
+  transform:scale(1.1);
+}
+
+/* for instagram */
+.social-icons .fa-linkedin-in{
+    transition: color 0.3s ease, transform 0.3s ease;
+  }
+  .social-icons .fa-linkedin-in:hover{
+    color:#0a66c2;
+    transform:scale(1.1);
+  }
 /**** MEDIA QUERY ****/
 
 @media screen and (max-width: 932px) {