changed the Ui of footer

index.html

@@ -120,47 +120,50 @@ <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
-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>
-        <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">
+    <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
       <h3>Subscribe to Our Newsletter</h3>
       <form action="#">
-        <input type="email" placeholder="Your Email" style="padding: 10px; width: 80%" required /><br /><br />
+        <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;
-                ">
+                      background-color: #ff5733;
+                      color: white;
+                      padding: 10px 20px;
+                      border: none;
+                      cursor: pointer;
+                    ">
           Subscribe
         </button>
       </form>
     </div>
+
+    <!-- Footer Container -->
+    <div class="footer-container" style="display: flex; justify-content: space-between; align-items: flex-start;">
+      <!-- Contact Information Section -->
+      <div class="contact-ft" style="flex: 1; min-width: 200px;">
+        <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; align-items: flex-end; padding-right: 220px;">
+        <h3>Get in Touch</h3>
+        <div style="display: flex; justify-content: center; gap: 1rem; font-size: 1.9rem; flex-wrap: wrap; "
+          class="links">
+          <a href="https://www.facebook.com" style="color: white; text-decoration: none;"><i
+              class="fab fa-facebook-f"></i></a>
+          <a href="https://www.twitter.com" style="color: white; text-decoration: none;"><i
+              class="fa-brands fa-x-twitter"></i></a>
+          <a href="https://www.instagram.com" style="color: white; text-decoration: none;"><i
+              class="fab fa-instagram"></i></a>
+          <a href="https://www.linkedin.com" style="color: white; text-decoration: none;"><i
+              class="fab fa-linkedin-in"></i></a>
+        </div>
+      </div>
     </div>
 
     <!-- Copyright Section -->
@@ -172,9 +175,9 @@ <h3>Subscribe to Our Newsletter</h3>
           ">
       <p>&copy; 2024 Ambulance Monitoring System. All rights reserved.</p>
     </div>
-    </div>
   </footer>
 
+
   <!-- Back to Top Button -->
   <button id="back-to-top">
     <i class="fas fa-chevron-up" style="font-size: 30px;"></i>

style1.css

@@ -241,6 +241,48 @@ footer {
     width: 100%;
 }
 
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.contact-ft {
+  flex: 1;
+  min-width: 200px;
+}
+
+.social-ft {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding-right: 20px; /* Adjust this value for right padding */
+}
+
+.links {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  font-size: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.links a {
+  color: white;
+  text-decoration: none;
+}
+.contact-ft {
+  flex: 1;
+  min-width: 200px;
+  padding-left: 20px; /* Add left padding for alignment */
+}
+
+pre {
+  margin: 0; /* Remove default margin from pre element */
+  white-space: pre-wrap; /* Ensure the content wraps as needed */
+}
+
 @keyframes fadeIn {
     from {
         opacity: 0;