From bf7bffb5dbb32898365fee44ad52730f74d24a88 Mon Sep 17 00:00:00 2001
From: Anushka Mahajan <anushkambtech@gmail.com>
Date: Fri, 8 Nov 2024 18:40:20 +0530
Subject: [PATCH] Changed footer on home page

---
 index.html | 133 +++++++++++++++++++++++------------------------------
 1 file changed, 58 insertions(+), 75 deletions(-)

diff --git a/index.html b/index.html
index e91953f..e79c489 100644
--- a/index.html
+++ b/index.html
@@ -140,16 +140,20 @@
 
     footer {
       background-color: #C4D7FF;
-      color: #f3f4f6;
+      color: white;
       text-align: center;
-      padding: 15px 0;
+      padding: 10px 0;
+      position: relative;
+      bottom: 0;
       width: 100%;
     }
-    footer a{
-      text-decoration: none;
-      color: #f3f4f6;
+
+    .social-icon {
+      transition: transform 0.3s ease;
+      /* Smooth transition effect */
     }
 
+
     .checkbtn {
       font-size: 30px;
       color: #333;
@@ -703,80 +707,59 @@ <h2>Contact Us</h2>
 
 
   <!-- footer start here -->
-  <footer class="fot">
-
-
-    <div class="l1">
-      <h2>About</h2>
-      <p>AmbuFlow is ambulance tracking site which helps you to find the nearest hospitals and get access to nearest
-        ambulances and save lives</p>
-    </div>
-
+  <footer style=" color: #f3f4f6; text-align: center; width: 100%;">
+    <div style="background-color: #C4D7FF; color: #f3f4f6; ">
+      <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
+        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
+          <ul style="list-style-type: none; padding: 0;">
+            <li><a href="about.html" style="color: #000000; text-decoration: none;">About Us</a></li>
+            <li><a href="contact.html" style="color: #000000; text-decoration: none;">Contact Us</a></li>
+            <li><a href="privacy.html" style="color: #000000; text-decoration: none;">Privacy Policy</a></li>
+            <li><a href="terms.html" style="color: #000000; text-decoration: none;">Terms of Service</a></li>
+            <li><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site Map</a></li>
+          </ul>
+        </div>
+        <div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
+          <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
+          <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
+          <a href="mailto:emergency@ambulanceservice.in" style="color: #000000;">emergency@ambulanceservice.in</a></p>
+          <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;">+91-911-1234567</a>
+          </p>
+        </div>
+        <div style="text-align: center; min-width: 200px; color: black;">
+          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
+          <div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
+            <a href="https://www.facebook.com" class="social-icon facebook"
+              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
+            <a href="https://www.twitter.com" class="social-icon twitter"
+              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fa-brands fa-x-twitter"></i></a>
+            <a href="https://www.instagram.com" class="social-icon instagram"
+              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-instagram"></i></a>
+            <a href="https://www.linkedin.com" class="social-icon linkedin"
+              style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
+          </div>
+        </div>
+        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
+          <form action="#">
+            <input type="email" placeholder="Your Email"
+              style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
+            <button type="submit"
+              style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
+          </form>
+        </div>
 
-    <div class="l2">
-      <div>
-        <h2 style="margin-left: 1vw;">Usefull link</h2>
-        <p><a href="index.html">Home</a></p>
-        <p style="margin-left: 1.3vw;"><a href="features.html">Features</a></p>
-        <p><a href="team.html">Team</a></p>
-        <p style="margin-left: 3.5vw;"><a href="privacy.html">Privacy Policy</a></p>
-        <p style="margin-left: 4.5vw;"><a href="terms.html">Terms of Service</a></p>
       </div>
-      <div class="l21">
-        <h2>Help Desk</h2>
-        <p><a href="contact.html">Support</a></p>
-        <p><a href="Contactus.html">Contact Us</a></p>
-        <p><a href="#faq-section">FAQ</a></p>
-        <p><a href="nearby.html">Near by</a></p>
-        <p><a href="contact.html">Phone</a></p>
-      </div>
-    </div>
 
-      <!-- Newsletter Subscription -->
-      <div style="min-width: 200px; margin-bottom: 20px;">
-        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: darkorange;">
-          Subscribe to Our Newsletter</h3>
-        <form id="newsletter-form" novalidate>
-          <i class="fas fa-envelope" style="position: absolute; bottom: -142.6rem; right: 18.3rem; color: rgb(129, 128, 128); font-size: 13px;"></i>
-          <input type="email" placeholder="Your Email" style="padding: 10px; width: 80%; border: none; border-radius: 7px; padding-left: 27px;"
-            required><br><br>
-          <button type="submit"
-            style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
-        </form>
-        <!-- Toast Notification -->
-        <div id="toast"
-          style="display: none; position: fixed; bottom: 20px; right: 60px; background-color: #333; color: white; padding: 10px; border-radius: 5px; z-index: 1000;">
-        </div>
-      </div>
     </div>
-  <script>
-    function showToast(message,type) {
-      const toast = document.getElementById('toast');
-      toast.textContent = message;
-      toast.style.display = "block"; // Show the toast
-      toast.style.backgroundColor = type==='success' ? 'green':'red'
-      toast.style.color = 'white';
-      setTimeout(() => {
-        toast.style.display = "none"; // Hide after 3 seconds
-      }, 3000);
-    }
-
-    document.getElementById('newsletter-form').addEventListener('submit', function (event) {
-      event.preventDefault(); // Prevent form submission
-      const emailInput = this.querySelector('input[type="email"]');
-      const email = emailInput.value;
-
-      // Basic email validation
-      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-      if (emailPattern.test(email)) {
-        showToast("Thank you for subscribing!",'success'); // Show success message
-        emailInput.value = ""; // Clear the input field
-      } else {
-        showToast("Please enter a valid email address.",'error'); // Show error message
-      }
-    });
-  </script>
+    <hr>
+    <div
+      style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;">
+      <strong>
+        <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
+      </strong>
+    </div>
   </footer>