Skip to content

Commit

Permalink
change to dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ishika-Gupta06
Ishika-Gupta06 committed Oct 6, 2024
1 parent 04bffcf commit 7009a85
Show file tree
Hide file tree
Showing 5 changed files with 318 additions and 1,785 deletions.
290 changes: 55 additions & 235 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AmbuFlow</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<link rel="stylesheet" href="src/css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
Expand All @@ -12,210 +14,41 @@
<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;
border-radius: 10px;
}

.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,
.contact-feature {
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 {
background-color: #e7ffe7;
}

.contact-feature {
background-color: #f2e4aa;
}

.team-feature img,
.contact-feature img {
width: 150px;
height: auto;
margin-right: 20px;
border-radius: 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;
width: 100%;
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}

}
</style>
<link rel="stylesheet" href="style1.css">
</head>

<body>
<header>
<div class="container">

<div class="logo">

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

</div>
<nav class="menu">
<ul>
<li>
<a href="/" 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>
<a href="features.html" id="features-link" onclick="changeContent('features')"><i
class="fa-solid fa-file"></i> Features</a>
</li>
<li>
<a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a>
<a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i>
Team</a>
</li>
<li>
<a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a>
<a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i
class="fa-solid fa-phone"></i> Contact</a>
</li>
</ul>
</nav>
<div class="buttons">
<button class="dark-mode-toggle" id="dark-mode-button">
<i class="fa-solid fa-moon"></i>
</button>
<a href="login.html" class="login">Log in</a>
<a href="up.html" class="get-started">Get started</a>
</div>
Expand Down Expand Up @@ -294,79 +127,66 @@ <h2>Contact Us</h2>
</div>
</div>
</div>

<footer>


<!-- Contact Information Section -->
<div class="contact-ft" style="flex: 1; ">
<h3>Contact Info</h3>
<pre>123 Emergency Lane, Mumbai, India
<footer>


<!-- Contact Information Section -->
<div class="contact-ft" style="flex: 1; ">
<h3>Contact Info</h3>
<pre>123 Emergency Lane, Mumbai, India
Phone : +91-911-1234567
Email : [email protected]</pre>
</div>

<!-- Social Media Links -->
<div class="social-ft" style="flex: 1; display: flex; flex-direction: column;">
<h3>Follow Us</h3>
<div style="display: flex; justify-content: center; gap: 1rem; font-size: 1.5rem; flex-wrap: wrap;" class="links">
<a href="https://www.facebook.com" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-facebook-f"></i></a><br>
<a href="https://www.twitter.com" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fa-brands fa-x-twitter"></i></a><br> <!--upadted-->

<a href="https://www.instagram.com" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-instagram"></i></a><br>
<a href="https://www.linkedin.com" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-linkedin-in"></i></a>
</div>
</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="
</div>

<!-- Social Media Links -->
<div class="social-ft" style="flex: 1; display: flex; flex-direction: column;">
<h3>Follow Us</h3>
<div style="display: flex; justify-content: center; gap: 1rem; font-size: 1.5rem; flex-wrap: wrap;" class="links">
<a href="https://www.facebook.com" style="color: white; text-decoration: none; margin-right: 10px;"><i
class="fab fa-facebook-f"></i></a><br>
<a href="https://www.twitter.com" style="color: white; text-decoration: none; margin-right: 10px;"><i
class="fa-brands fa-x-twitter"></i></a><br> <!--upadted-->

<a href="https://www.instagram.com" style="color: white; text-decoration: none; margin-right: 10px;"><i
class="fab fa-instagram"></i></a><br>
<a href="https://www.linkedin.com" style="color: white; text-decoration: none; margin-right: 10px;"><i
class="fab fa-linkedin-in"></i></a>
</div>
</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>
</div>
Subscribe
</button>
</form>
</div>
</div>
</div>

<!-- Copyright Section -->
<div style="
<!-- 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>
<p>&copy; 2024 Ambulance Monitoring System. 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>
<script src="script.js"></script>
</body>

</html>
</html>
Loading

0 comments on commit 7009a85

Please sign in to comment.