Skip to content

Commit

Permalink
Merge pull request #1232 from ishakatiyar06/main
Browse files Browse the repository at this point in the history 
Added footer section in nearby.html
  • Loading branch information
@vimistify
vimistify authored Nov 10, 2024
2 parents 14f092b + d34822f commit b3b5bc4
Showing 1 changed file with 311 additions and 0 deletions.
311 changes: 311 additions & 0 deletions nearby.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -353,6 +471,198 @@ <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>

<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
<div class="scroll-top-icon">
<i class="fa-solid fa-arrow-up"></i>
Expand Down Expand Up @@ -500,6 +810,7 @@ <h2>Track or call an ambulance and check nearby hospitals for emergency services
});
});
</script>

</body>

</html>

0 comments on commit b3b5bc4

Please sign in to comment.