From 5326242fc8b7dbe6abd9a3bce37d9af7810dceb3 Mon Sep 17 00:00:00 2001
From: Isha Katiyar <katiyarisha16@gmail.com>
Date: Sun, 10 Nov 2024 17:41:19 +0530
Subject: [PATCH] Added footer section in nearby.html

---
 nearby.html | 308 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 308 insertions(+)

diff --git a/nearby.html b/nearby.html
index ad034c9..bcd1219 100644
--- a/nearby.html
+++ b/nearby.html
@@ -108,6 +108,124 @@
         .dark-mode h2 {
             color: #e7f3fe;
         }
+        footer {
+      background-color: #C4D7FF;
+      color: #f3f4f6;
+      text-align: center;
+      padding: 15px 0;
+      width: 100%;
+    }
+    footer a{
+      text-decoration: none;
+      color: #f3f4f6;
+    }
+
+    .checkbtn {
+      font-size: 30px;
+      color: #333;
+      float: right;
+      line-height: 80px;
+      margin-right: 40px;
+      cursor: pointer;
+      display: none;
+
+    }
+
+    #check {
+      display: none;
+    }
+
+    /* Added the hover animation on the footer social icons */
+    .social-icon {
+      transition: transform 0.3s ease;
+      /* Smooth transition effect */
+    }
+
+    .social-icon:hover {
+      transform: scale(1.3);
+      /* Scale the element to 1.3 times its size */
+    }
+
+    .fa-facebook:hover {
+      color: blue;
+      /* Icon color change to blue on hover */
+    }
+
+    .fa-x-twitter:hover {
+      color: black;
+      /* Icon color change to black on hover */
+    }
+
+    .fa-instagram:hover {
+      color: orangered;
+      /* Icon color change to orangered on hover */
+    }
+
+    .fa-linkedin-in:hover {
+      color: rgb(16, 13, 195);
+      /* Icon color change to rgb(16, 13, 195) on hover */
+    }
+
+    .feature p {
+      color: #555;
+    }
+
+    .team-feature {
+      background-color: #e7ffe7;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      text-align: left;
+      border-radius: 10px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      grid-column: 1 / -1;
+    }
+
+    .team-feature img {
+      width: 150px;
+      height: auto;
+      margin-right: 20px;
+      border-radius: 10px;
+    }
+
+    .contact-feature {
+      background-color: #f2e4aa;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      text-align: left;
+      border-radius: 10px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      grid-column: 1 / -1;
+    }
+
+    .contact-feature img {
+      width: 150px;
+      height: auto;
+      margin-right: 20px;
+      border-radius: 10px;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+
+
+    .container {
+      width: 98vw;
+    }
+
+    #contact-hvr:hover {
+      background: none;
+    }
+
     </style>
 </head>
 
@@ -353,6 +471,196 @@ <h2>Track or call an ambulance and check nearby hospitals for emergency services
         // Initial render
         renderHospitals(hospitals);
     </script>
+     <!-- 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>
+
+
+    <div class="l2">
+      <div>
+        <h2 style="margin-left: 1vw;">Useful 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>
+  </footer>
+  <style>
+    .fot {
+      display: flex;
+      height: 40vh;
+      width: 100%;
+      background-color: #25242a;
+    }
+
+    .l1 {
+      width: 30vw;
+    }
+
+    .l2 {
+      display: flex;
+      width: 40vw;
+      margin-left: 8vw;
+    }
+
+    .l21 {
+      margin-left: 9vw;
+    }
+
+    h2 {
+      color: darkorange;
+    }
+
+    .l1 p {
+      font-size: 1vw;
+      padding: 1vw;
+      color: white;
+    }
+
+    .l2 p {
+      font-size: 1vw;
+      padding: .5vw;
+      color: white;
+      justify-content: first baseline;
+      margin-top: -1vw;
+    }
+
+    .con {
+      margin-left: .9vw;
+    }
+
+    .l21 p {
+      font-size: 1vw;
+      padding: .5vw;
+      color: white;
+      justify-content: first baseline;
+      margin-top: -1vw;
+    }
+
+    .social-icons a {
+
+      background: darkorange;
+      width: 40px;
+      height: 40px;
+      display: inline-block;
+      margin-right: 4px;
+
+    }
+
+    .social-icons a i {
+      color: #e7f2f4;
+      padding: 13px 12px;
+      height: 20px;
+    }
+
+
+    @media (max-width: 768px) {
+      .fot {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        margin-right: 12vw;
+      }
+
+      .l1 h2 {
+        font-size: 10vw;
+        margin-left: 33vw;
+        margin-top: -1vw;
+      }
+
+      .l1 p {
+        font-size: 4vw;
+        width: 90vw;
+        padding: 5vw;
+        margin-right: 5vw;
+        margin-top: -8vw;
+      }
+
+      .l2 {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .l2 h2 {
+        font-size: 5vw;
+        width: 30vw;
+      }
+
+      .l2 p {
+        font-size: 3vw;
+      }
+
+      .l21 {
+        margin-left: 19vw;
+      }
+
+      .l3 {
+        margin-left: -17vw;
+      }
+    }
+  </style>
 </body>
 
 </html>
\ No newline at end of file