diff --git a/index.html b/index.html
index a7481d8..5e74524 100644
--- a/index.html
+++ b/index.html
@@ -190,8 +190,14 @@
<body>
<header>
<div class="container">
+
<div class="logo">
- <img src="images/logo2-w.webp" alt="Ambulance Monitoring System" style="width: 50px; height: auto" />
+
+ <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>
@@ -288,32 +294,31 @@ <h2>Contact Us</h2>
</div>
</div>
</div>
-
+
<footer>
+
<!-- Contact Information Section -->
- <div style="flex: 1; min-width: 200px;">
+ <div class="contact-ft" style="flex: 1; ">
<h3>Contact Info</h3>
- <p>123 Emergency Lane, Mumbai, India</p>
- <p>Email:emergency@ambulanceservice.in</p>
- <p>Phone: +91-911-1234567</p>
+ <pre>123 Emergency Lane, Mumbai, India
+Phone : +91-911-1234567
+ Email : emergency@ambulanceservice.in</pre>
</div>
<!-- Social Media Links -->
- <div style="flex: 1; min-width: 200px;">
+ <div class="social-ft" style="flex: 1; display: flex; flex-direction: column;">
<h3>Follow Us</h3>
- <a href="https://www.facebook.com" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-facebook-f"></i> Facebook</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> Twitter</a><br> <!--upadted-->
- <a href="https://www.instagram.com" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-instagram"></i> Instagram</a><br>
- <a href="https://www.linkedin.com" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
- </div>
+ <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>
- </div>
- <!-- Copyright Section -->
- <p>© 2024 AmbuFlow. All rights reserved.</p>
-
-
- <!-- Newsletter Subscription -->
+ <!-- Newsletter Subscription -->
<div style="flex: 1; min-width: 200px">
<h3>Subscribe to Our Newsletter</h3>
<form action="#">
@@ -330,6 +335,7 @@ <h3>Subscribe to Our Newsletter</h3>
</form>
</div>
</div>
+ </div>
<!-- Copyright Section -->
<div style="
@@ -341,7 +347,6 @@ <h3>Subscribe to Our Newsletter</h3>
<p>© 2024 Ambulance Monitoring System. All rights reserved.</p>
</div>
</div>
- <p>© 2024 Ambulance Tracking System. All rights reserved.</p>
</footer>
<script>
diff --git a/src/css/index.css b/src/css/index.css
index 4bb1943..a51eb91 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
*{
font-family: 'Poppins', sans-serif;
@@ -35,7 +36,7 @@ header {
}
.container {
- max-width: 1280px;
+ /* max-width: 1280px; */
margin: 0 auto;
display: flex;
justify-content: space-between;
@@ -43,6 +44,21 @@ header {
padding: 10px 20px;
}
+.brand-name{
+ font-family: 'poppins', sans-serif;
+ font-weight: bold;
+ margin-right: 0.5rem;
+ font-size: 1.5rem;
+ color: #2980B9;
+}
+
+.ambu{
+ font-family: 'poppins', sans-serif;
+ font-weight: bold;
+ font-size: 1.5rem;
+ color: #e81a1a;
+}
+
.logo {
display: flex;
align-items: center;
@@ -126,6 +142,19 @@ header {
background-color: #2563eb;
}
+.quick-ft{
+ display: flex;
+ flex-direction: column;
+ /* justify-content: start; */
+ align-items: start;
+
+ margin-left: 3rem;
+
+}
+.social-ft{
+
+}
+
@media (max-width: 768px) {
.menu ul {
flex-direction: column;