From 8a810674622c6f026f7726a9d8c0010b5b71e766 Mon Sep 17 00:00:00 2001
From: Sumit Kumar <sumitthakur1600@gmail.com>
Date: Tue, 31 Dec 2024 07:59:26 +0000
Subject: [PATCH] Fixed Responsiveness
---
index.html | 244 +++++++++++++++++++++++++++++++++++++----------------
1 file changed, 170 insertions(+), 74 deletions(-)
diff --git a/index.html b/index.html
index dbc5b9f..627b668 100644
--- a/index.html
+++ b/index.html
@@ -138,21 +138,7 @@
z-index: 1000;
} */
- footer {
- background-color: #C4D7FF;
- color: white;
- text-align: center;
- padding: 10px 0;
- position: relative;
- bottom: 0;
- width: 100%;
- }
-
- .social-icon {
- transition: transform 0.3s ease;
- /* Smooth transition effect */
- }
-
+
.checkbtn {
font-size: 30px;
@@ -169,18 +155,7 @@
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 {
+ .fa-facebook:hover {
color: blue;
/* Icon color change to blue on hover */
}
@@ -901,59 +876,180 @@ <h2>Contact Us</h2>
</div>
<!-- FAQ section ends here ... -->
+<!-- footer start here -->
+<!-- footer start here -->
+<!-- footer start here -->
+<footer style="color: #f3f4f6; text-align: center; width: 100%; height: 100%;">
+ <style>
+ /* Base styles for footer container */
+ .new-footer-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center; /* Ensures content is centered horizontally */
+ align-items: center; /* Ensures content is centered vertically */
+ padding: 20px 0;
+ background-color: #C4D7FF;
+ color: #f3f4f6;
+ box-sizing: border-box;
+ }
+ /* Styling for each footer section */
+ .new-footer-section {
+ flex: 1;
+ min-width: 250px;
+ background-color: black;
+ margin-bottom: 20px;
+ text-align: center;
+ align-self: center;
+ }
- <!-- footer start here -->
-
- <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>
- </footer>
+ .new-footer-section h3 {
+ font-size: 1.5rem;
+ margin-bottom: 10px;
+ color: #2980b9;
+ }
+ .new-footer-section a {
+ color: #000000;
+ text-decoration: none;
+ }
+
+ .new-footer-section a:hover {
+ text-decoration: underline;
+ }
+ .new-social-icons {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 15px;
+ height: auto;
+ }
+ .new-newsletter-input {
+ padding: 10px;
+ width: 80%;
+ border: none;
+ border-radius: 5px;
+ margin-bottom: 10px;
+ }
- <style>
+ .new-newsletter-button {
+ background-color: #e81a1a;
+ color: white;
+ padding: 10px 20px;
+ border: none;
+ cursor: pointer;
+ border-radius: 5px;
+ }
+
+ /* Media query for large screens (Desktop) */
+ @media (max-width: 1250px) {
+ .new-footer-container {
+ flex-direction: column; /* Stack sections vertically */
+ align-items: center; /* Center horizontally */
+ justify-content: center; /* Center vertically */
+ }
+
+ .new-footer-section {
+ margin-bottom: 20px; /* Space between sections */
+ width: 100%; /* Full width in column layout */
+ }
+
+ .new-newsletter-input {
+ width: 90%; /* Slightly reduce width of input field */
+ }
+ }
+
+ /* Media query for medium screens (Tablets) */
+ @media (max-width: 768px) {
+ .new-footer-container {
+ flex-direction: column;
+ align-items: center;
+ text-align: center; /* Ensures text is centered */
+ }
+
+ .new-footer-section {
+ margin-bottom: 20px;
+ text-align: center;
+ }
+
+ .new-newsletter-input {
+ width: 90%; /* Full width for smaller screens */
+ }
+ }
+
+ /* Media query for small screens (Mobile) */
+ @media (max-width: 400px) {
+ .new-footer-container {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
+ .new-footer-section {
+ margin-bottom: 15px;
+ width: 100%;
+ }
+
+ .new-newsletter-input {
+ width: 90%; /* Full width for smaller screens */
+ }
+
+ .new-social-icons {
+ gap: 10px; /* Reduce gap between social icons */
+ }
+
+ .new-newsletter-input {
+ padding: 8px;
+ font-size: 14px; /* Slightly smaller input on mobile */
+ }
+
+ .new-newsletter-button {
+ font-size: 14px; /* Smaller button text */
+ padding: 8px 16px; /* Adjust button size */
+ }
+ }
+
+ </style>
+
+ <div class="new-footer-container">
+ <div class="new-footer-section">
+ <h3>Quick Links</h3>
+ <ul style="list-style-type: none; padding: 0;">
+ <li><a href="about.html">About Us</a></li>
+ <li><a href="contact.html">Contact Us</a></li>
+ <li><a href="privacy.html">Privacy Policy</a></li>
+ <li><a href="terms.html">Terms of Service</a></li>
+ <li><a href="sitemap.html">Site Map</a></li>
+ </ul>
+ </div>
+ <div class="new-footer-section">
+ <h3>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 style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;">+91-911-1234567</a></p>
+ </div>
+ <div class="new-footer-section">
+ <h3>Follow Us</h3>
+ <div class="new-social-icons">
+ <a href="https://www.facebook.com" style="color: black; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
+ <a href="https://www.twitter.com" style="color: black; font-size: 1.5rem;"><i class="fab fa-twitter"></i></a>
+ <a href="https://www.instagram.com" style="color: black; font-size: 1.5rem;"><i class="fab fa-instagram"></i></a>
+ <a href="https://www.linkedin.com" style="color: black; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
+ </div>
+ </div>
+ <div class="new-footer-section">
+ <h3>Subscribe to Our Newsletter</h3>
+ <form action="#">
+ <input class="new-newsletter-input" type="email" placeholder="Your Email" required>
+ <button class="new-newsletter-button" type="submit">Subscribe</button>
+ </form>
+ </div>
+ </div>
+</footer>
+
+<style>
.fot {
display: flex;
height: 40vh;