Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changed footer on home page #1211

Merged
merged 2 commits into from
Nov 10, 2024
Merged

Changed footer on home page #1211

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bf7bffb
Changed footer on home page
Anushkam09 Nov 8, 2024
870c0e3
Merge branch 'main' into footers
mansiruhil13 Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 64 additions & 48 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -896,6 +900,51 @@ <h2>Contact Us</h2>


<!-- 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:[email protected]" style="color: #000000;">[email protected]</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>


<footer class="fot">

<div class="l1">
Expand Down Expand Up @@ -923,16 +972,9 @@ <h2 style="margin-left: 1vw;">Usefull link</h2>
<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>




Expand Down Expand Up @@ -971,35 +1013,15 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: darkorange;">

</div>
</div>

</div>
<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>
<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>


Expand Down Expand Up @@ -1120,12 +1142,6 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: darkorange;">
}
</style>







<a href="chatbot.html">
<div class="fixed bottom-0 right-2 chatbot-container">
<button class="chatbot-button group">
Expand Down