Merge pull request #225 from 4F24L/footer-fix

[FIX] Footer bug fix
vimistify · Oct 5, 2024 · 04bffcf · 04bffcf
2 parents afa1e36 + ae3dc85
commit 04bffcf
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 20 deletions.
diff --git 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:[email protected]</p>
-                  <p>Phone: +91-911-1234567</p>
+                  <pre>123 Emergency Lane, Mumbai, India
+Phone : +91-911-1234567
+          Email : [email protected]</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>&copy; 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>&copy; 2024 Ambulance Monitoring System. All rights reserved.</p>
       </div>
     </div>
-    <p>&copy; 2024 Ambulance Tracking System. All rights reserved.</p>
   </footer>
 
   <script>

diff --git 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,14 +36,29 @@ header {
 }
 
 .container {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   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;