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;