Skip to content

Commit

Permalink
Fixed About Page Home and Removed Doble headers and footers
Browse files Browse the repository at this point in the history
  • Loading branch information
@devanshar
devanshar committed Oct 8, 2024
1 parent 671f80b commit 4d1d954
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 255 deletions.
2 changes: 1 addition & 1 deletion about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@
<nav class="menu">
<ul>
<li>
<a href="/" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a>
<a href="./index.html" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a>
</li>
<li>
<a href="features.html" id="features-link" onclick="changeContent('features')"><i class="fa-solid fa-file"></i> Features</a>
Expand Down
335 changes: 81 additions & 254 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,61 +416,7 @@
</header>


<div class="logo">
<div class="brand-name">
<span class="letter red" style="--letter-index: 1">A</span>
<span class="letter red" style="--letter-index: 2">m</span>
<span class="letter red" style="--letter-index: 3">b</span>
<span class="letter red" style="--letter-index: 4">u</span>
<span class="letter" style="--letter-index: 5">F</span>
<span class="letter" style="--letter-index: 6">l</span>
<span class="letter" style="--letter-index: 7">o</span>
<span class="letter" style="--letter-index: 8">w</span>
</div>
<a href="./index.html"
><img
src="images/logo2-w.webp"
alt="Ambulance Monitoring System Logo"
style="width: 50px; height: auto"
/></a>
</div>


<nav class="menu">
<ul>
<li>
<a href="index.html" id="home-link"
><i class="fa-solid fa-house"></i> Home</a
>
</li>
<li>
<a href="features.html" id="features-link" class="active"
><i class="fa-solid fa-file"></i> Features</a
>
</li>
<li>
<a href="team.html" id="team-link"
><i class="fa-solid fa-user-group"></i> Team</a
>
</li>
<li>
<a href="contact.html" id="contact-link"
><i class="fa-solid fa-clipboard"></i> Contact</a
>
</li>
<li>
<a href="Feedback.html" id="team-link"
><i class="fa-solid fa-user-group"></i> Feedback</a
>
</li>
</ul>
</nav>
<div class="buttons">
<a href="login.html" class="login">Log in</a>
<a href="up.html" class="get-started">Get started</a>
</div>
</div>
</header>
<div class="content" id="main-content" >
<h1>Welcome to the Ambulance Monitoring System</h1>
<div class="grid">
Expand Down Expand Up @@ -542,219 +488,100 @@ <h2>Contact Us</h2>
</div>
</div>
</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;">

<!-- Quick Links Section -->
<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;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li>
<li><a href="contact.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li>
<li><a href="privacy.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li>
<li><a href="terms.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a></li>
<li><a href="sitemap.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li>
</ul>
</div>

<footer>
<!-- Newsletter Subscription -->
<div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
<h3>Subscribe to Our Newsletter</h3>
<form action="#">
<input type="email" placeholder="Your Email" style="padding: 10px; width: 80%;" required /><br /><br />
<button type="submit" style="
background-color: #ff5733;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
">
Subscribe
</button>
</form>
</div>

<!-- Footer Container -->
<div class="footer-container" style="display: flex; justify-content: space-between; align-items: flex-start;">
<!-- Contact Information Section -->
<div class="contact-ft" style="flex: 1; min-width: 200px;">
<h3>Contact Info</h3>
<pre>123 Emergency Lane, Mumbai, India
Phone : +91-911-1234567
Email : [email protected]</pre>
<div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
<h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
<p style="color: #000000;">123 Emergency Lane, Mumbai, India</p>
<p><a href="mailto:[email protected]" style="color: #000000;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">[email protected]</a></p>
<p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">+91-911-1234567</a></p>
</div>

<!-- Social Media Links -->
<div class="social-ft"
style="flex: 1; display: flex; flex-direction: column; align-items: flex-end; padding-right: 220px;">
<h3>Get in Touch</h3>
<div style="display: flex; justify-content: center; gap: 1rem; font-size: 1.9rem; flex-wrap: wrap; "
class="links">
<a href="https://www.facebook.com" style="color: white; text-decoration: none;"><i
class="fab fa-facebook-f"></i></a>
<a href="https://www.twitter.com" style="color: white; text-decoration: none;"><i
class="fa-brands fa-x-twitter"></i></a>
<a href="https://www.instagram.com" style="color: white; text-decoration: none;"><i
class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com" style="color: white; text-decoration: none;"><i
class="fab fa-linkedin-in"></i></a>
</div>
<div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
<h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
<a href="https://www.facebook.com" class="hover-link"><i class="fab fa-facebook-f"></i> Facebook</a><br>
<a href="https://www.twitter.com" class="hover-link"><i class="fab fa-twitter"></i> Twitter</a><br>
<a href="https://www.instagram.com" class="hover-link"><i class="fab fa-instagram"></i> Instagram</a><br>
<a href="https://www.linkedin.com" class="hover-link"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
</div>
</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;">

<!-- Quick Links Section -->
<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; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li>
<li><a href="contact.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li>
<li><a href="privacy.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li>
<li><a href="terms.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a></li>
<li><a href="sitemap.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li>
</ul>
</div>

<!-- Contact Information Section -->
<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; background:none; cursor: pointer;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">[email protected]</a></p>
<p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000; background: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">+91-911-1234567</a></p>
</div>

<!-- Social Media Links -->
<div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
<h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>

<a href="https://www.facebook.com" class="hover-link">
<i class="fab fa-facebook-f"></i> Facebook
</a><br>

<a href="https://www.twitter.com" class="hover-link">
<i class="fa-brands fa-x-twitter"></i> Twitter
</a><br>

<a href="https://www.instagram.com" class="hover-link">
<i class="fab fa-instagram"></i> Instagram
</a><br>

<a href="https://www.linkedin.com" class="hover-link">
<i class="fab fa-linkedin-in"></i> LinkedIn
</a>
</div>

<style>
.hover-link {
color: #000000;
text-decoration: none;
margin-right: 10px;
background:none;
cursor: pointer;
transition: color 0.3s ease;
}

.hover-link:hover {
color: blue;
background:none;
}
</style>



<!-- Newsletter Subscription -->
<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>


<style>
.hover-link {
color: #000000;
text-decoration: none;
margin-right: 10px;
cursor: pointer;
transition: color 0.3s ease;
}

.hover-link:hover {
color: blue;
}
</style>

<!-- Newsletter Subscription -->
<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 id="subscribeForm">
<input id="emailInput" 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>
<p id="thankYouMessage" style="display:none; color: green;">Thank you for subscribing!</p>
</div>

</div>
<hr>
<!-- Copyright Section -->
<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>

<!-- Back to Top Button -->
<button id="backToTopBtn" style="
background-color: #e81a1a;
color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
">↑</button>
</div>
</footer>

<script>
// Back to Top Button functionality
document.addEventListener('DOMContentLoaded', function() {
var backToTopBtn = document.getElementById("backToTopBtn");

backToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
</script>
<script>
function changeContent(page) {
var links = document.querySelectorAll(".menu ul li a");
links.forEach((link) => link.classList.remove("active"));
document.getElementById(page + "-link").classList.add("active");
}

window.onload = function () {
document.getElementById("home-link").classList.add("active");

// Add delay to each letter drop
const letters = document.querySelectorAll('.letter');
letters.forEach((letter, index) => {
letter.style.animationDelay = `${index * 0.1}s`;
});
};
</div>

const thankYouMessage = document.getElementById("thankYouMessage");
const form = document.getElementById("subscribeForm");
<hr>

form.addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form from refreshing the page
<!-- Copyright Section -->
<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>

<!-- Back to Top Button -->
<button id="backToTopBtn" style="background-color: #e81a1a; color: white; border: none; border-radius: 5px; padding: 10px 15px; font-size: 16px; cursor: pointer;">↑</button>
</div>
</footer>

// Show Thank You Message after subscribing
thankYouMessage.style.display = 'block';
<script>
// Back to Top Button functionality
document.addEventListener('DOMContentLoaded', function() {
var backToTopBtn = document.getElementById("backToTopBtn");

// Optionally clear the input field after subscribing
document.getElementById("emailInput").value = '';
backToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});

</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const faqButtons = document.querySelectorAll('.faq-question');


<!-- Copyright Section -->
<div style="
text-align: center;
margin-top: 20px;
border-top: 1px solid white;
padding-top: 10px;
">
<p>&copy; 2024 Ambulance Monitoring System. All rights reserved.</p>
</div>
</footer>


<!-- Back to Top Button -->
<button id="back-to-top">
<i class="fas fa-chevron-up" style="font-size: 30px;"></i>
</button>

<script src="script.js"></script>

</body>


</html>

// Newsletter subscription functionality
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById("subscribeForm");
const thankYouMessage = document.getElementById("thankYouMessage");

form.addEventListener("submit", function(event) {
event.preventDefault();
thankYouMessage.style.display = 'block';
document.getElementById("emailInput").value = '';
});
});
</script>

0 comments on commit 4d1d954

Please sign in to comment.