Skip to content

Commit

Permalink
made it responsive and also created style.css for better usage for pp…
Browse files Browse the repository at this point in the history 
…l who contribute
  • Loading branch information
@keerthana2-005
keerthana2-005 committed Oct 7, 2024
1 parent 96f1455 commit 6e0e34d
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 275 deletions.
299 changes: 24 additions & 275 deletions home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,288 +3,37 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>AmbuFlow</title>
<link rel="stylesheet" href="src/css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* .logo span {
font-size: 28px;
font-weight: bold;
background: linear-gradient(45deg, #ff5733, #33ff57, #3357ff);
-webkit-background-clip: text;
color: transparent;
letter-spacing: 2px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
font-family: 'Arial', sans-serif;
} */

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
color: #333;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.menu ul li a {
padding: 10px 15px;
color: black;
text-decoration: none;
}
.menu ul li a.active {
color: white;
background-color: #000;
}
.content {
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
flex-grow: 1;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-template-rows: auto auto;
gap: 20px;
animation: fadeIn 1s ease-in-out;
}
.feature {
background-color: #e7f3fe;
border-radius: 10px;
padding: 15px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.feature:hover {
transform: translateY(-5px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.feature img {
width: 100px;
height: 100px;
object-fit: cover;
margin-bottom: 10px;
border-radius: 50%;
}
.feature h2 {
color: #2980b9;
margin-bottom: 10px;
}
.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;
}

footer {
background-color: #000;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>

<header>
<div class="container">


<div class="logo">
<img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width:50px; height:auto;">

</div>


<nav class="menu">
<ul>
<li><a href="home.html" id="home-link" onclick="changeContent('home')">Home</a></li>
<li><a href="features.html" id="features-link" onclick="changeContent('features')">Features</a></li>
<li><a href="team.html" id="team-link" onclick="changeContent('team')">Team</a></li>
<li><a href="contact.html" id="contact-link" onclick="changeContent('contact')">Contact</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 AmbuFlow</h1>
<div class="grid">
<div class="feature">
<img src="images/emergency-w.jpg" alt="Emergency Response">
<h2>Quick Emergency Response</h2>
<p>Ensures patients receive timely medical assistance by locating the nearest hospitals and ambulances.</p>
</div>
<div class="feature">
<img src="images/ambulance-w.jpg" alt="Real-Time Tracking">
<h2>Real-Time Tracking</h2>
<p>Provides real-time updates on ambulance locations and traffic conditions, optimizing route management.</p>
</div>
<div class="feature">
<img src="images/24-w.jpg" alt="24/7 Availability">
<h2>24/7 Availability</h2>
<p>Ensures round-the-clock service, making sure that help is just a call away, anytime, anywhere.</p>
</div>
<div class="feature">
<img src="images/doctor-w.jpg" alt="Enhanced Communication">
<h2>Enhanced Communication</h2>
<p>Facilitates seamless communication between patients, hospitals, and ambulance drivers.</p>
</div>
<div class="feature">
<img src="images/hospital-w.jpg" alt="Resource Management">
<h2>Resource Management</h2>
<p>Helps hospitals manage their resources efficiently by providing critical information and analytics.</p>
</div>

<!-- Team Section in Full Row -->
<div class="team-feature">
<img src="images/team-w.png" alt="Meet the Team">
<div>
<h2>Meet the Team</h2>
<p>Learn more about our dedicated team working tirelessly to ensure efficient ambulance monitoring and resource management.</p>
<a href="team.html" class="button">Go to Team</a>
<header>
<div class="container">
<div class="logo">
<img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width:50px; height:auto;">
</div>
</div>

<!-- Contact Section in Full Row -->
<div class="contact-feature">
<img src="images/contact-w.avif" alt="Contact Us">
<div>
<h2>Contact Us</h2>
<p>Reach out to us for any inquiries or assistance. We're here to help you 24/7 with our emergency services.</p>
<a href="contact.html" class="button">Go to Contact</a>
</div>
</div>
</div>
</div>

<footer>

<div style="background-color: #333; color: white; padding: 20px;">
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
<!-- Quick Links Section -->
<div style="flex: 1; min-width: 200px;">
<h3>Quick Links</h3>
<ul style="list-style-type: none; padding: 0;">
<li><a href="about.html" style="color: white; text-decoration: none;">About Us</a></li>
<li><a href="contact.html" style="color: white; text-decoration: none;">Contact Us</a></li>
<li><a href="privacy.html" style="color: white; text-decoration: none;">Privacy Policy</a></li>
<li><a href="terms.html" style="color: white; text-decoration: none;">Terms of Service</a></li>
<li><a href="sitemap.html" style="color: white; text-decoration: none;">Site Map</a></li>
<nav class="menu">
<ul>
<li><a href="home.html" id="home-link" onclick="changeContent('home')">Home</a></li>
<li><a href="features.html" id="features-link" onclick="changeContent('features')">Features</a></li>
<li><a href="team.html" id="team-link" onclick="changeContent('team')">Team</a></li>
<li><a href="contact.html" id="contact-link" onclick="changeContent('contact')">Contact</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>

<!-- Contact Information Section -->
<div style="flex: 1; min-width: 200px;">
<h3>Contact Info</h3>
<p>AmbuFlow
White road St, Newyork City, USA</p>
<p>Email:[email protected]</p>
<p>Phone: 9633700598</p>
<div class="menu-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>

<!-- Social Media Links -->
<div style="flex: 1; min-width: 200px;">
<h3>Follow Us</h3>
<a href="#" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-facebook-f"></i> Facebook</a><br>
<a href="#" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-twitter"></i> Twitter</a><br>
<a href="#" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-instagram"></i> Instagram</a><br>
<a href="#" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
</div>

<!-- Newsletter Subscription -->
<div style="flex: 1; min-width: 200px;">
<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>
</div>

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

</footer>

<script>
// Function to handle the active state of navbar items
function changeContent(page) {
// Get all navigation links
var links = document.querySelectorAll('.menu ul li a');

// Remove the active class from all links
links.forEach(link => link.classList.remove('active'));

// Add the active class to the clicked link
document.getElementById(page + '-link').classList.add('active');
}

// Make "Home" the default active page on load
window.onload = function() {
document.getElementById('home-link').classList.add('active');
};
</script>

</header>
<main>
<div id="content"> <!-- Content will change dynamically here --> </div>
</main>
<script src="script.js"></script>
</body>
</html>
Loading

0 comments on commit 6e0e34d

Please sign in to comment.