From a6aea7c45934236d775502ef64917c2077d01c70 Mon Sep 17 00:00:00 2001
From: srishti <srishtichoudhary52@gmail.com>
Date: Tue, 15 Oct 2024 11:54:56 +0530
Subject: [PATCH 1/3] alignment and responsiveness

---
 Feedback.html     |  66 +++++++++-----
 contact.html      | 222 ++++++++++++++++++++++++++--------------------
 features.html     | 222 ++++++++++++++++++++++++++++------------------
 nearby.html       |   2 +-
 src/css/index.css |   3 +-
 team.html         | 155 +++++++++++++++++++++-----------
 6 files changed, 411 insertions(+), 259 deletions(-)

diff --git a/Feedback.html b/Feedback.html
index 147bc8a..31eae60 100644
--- a/Feedback.html
+++ b/Feedback.html
@@ -539,6 +539,38 @@
       align-items: center;
       gap: 10px;
     }
+    @media(max-width:768px) {
+      .container .buttons {
+        justify-content: center;
+        flex-direction: column;
+      }
+      .menu ul{
+                justify-content: center;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 20px 0 20px 0;
+            }
+
+    }
+    @media only screen and (min-width: 768px) and (max-width: 1024px) {
+            .container{
+                flex-direction: column;
+                gap: 1.5rem;
+            }
+            .menu{
+                width: max-content;
+                margin: auto;
+            }
+            
+        }
+
+        @media only screen and (min-width : 1024px) and (max-width:1465)
+        {
+            .container{
+                flex-direction: column;
+    gap: 2rem;
+            }
+        }
   </style>
 </head>
 
@@ -589,16 +621,16 @@
       </ul>
     </nav>
     <div class="buttons">
+      <div>
+          <a href="login.html" class="login">Log in</a>
+          <a href="up.html" class="get-started">Get started</a>
 
-      <button id="translateBtn" class="translate-btn"><i class="fas fa-language"></i> Translate</button>
-
-      <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
-        <i class="fa-solid fa-moon"></i>
-      </button>
+          <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
+              <i class="fa-solid fa-moon"></i>
+          </button>
+      </div>
 
-      <a href="login.html" class="login">Log in</a>
-      <a href="up.html" class="get-started">Get started</a>
-    </div>
+  </div>
   </div>
 </header>
 
@@ -759,15 +791,13 @@ <h3>How can hospitals benefit from AmbuFlow?</h3>
   // Add event listeners to each star label for toggling the selection
   const stars = document.querySelectorAll('.star-rating input');
   stars.forEach(star => {
-    star.addEventListener('change', function () {
+    star.addEventListener('change', function (){
       // Remove the checked state from all stars
       stars.forEach(s => {
         const label = document.querySelector(`label[for="${s.id}"]`);
         label.style.color = '#ddd'; // Reset color for unselected stars
-
-  <script src="preloader.js"></script>
-
-  <script>
+      })
+    });
     // adding code for dark mode
     document.addEventListener('DOMContentLoaded', function () {
       const toggleButton = document.getElementById('dark-mode-toggle');
@@ -801,9 +831,7 @@ <h3>How can hospitals benefit from AmbuFlow?</h3>
     });
 
     // end
-  </script>
 
-  <script>
     // Add event listeners to each star label for toggling the selection
     const stars = document.querySelectorAll('.star-rating input');
     stars.forEach(star => {
@@ -940,7 +968,7 @@ <h3>How can hospitals benefit from AmbuFlow?</h3>
     closeFaqPopup.addEventListener('click', () => {
       faqPopup.style.display = 'none';
 
-    }
+    })
   });
 
   const translateBtn = document.getElementById('translateBtn');
@@ -960,7 +988,7 @@ <h3>How can hospitals benefit from AmbuFlow?</h3>
       gTranslate.style.display = 'none';
     }
   });
-</script>
+  </script>
 
 <!-- Add this script at the end of the body -->
 <script>
@@ -972,9 +1000,7 @@ <h3>How can hospitals benefit from AmbuFlow?</h3>
   }
 </script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
-    });
-
+<script>
     // Close popup when clicking outside
     window.addEventListener('click', (event) => {
       if (event.target === faqPopup) {
diff --git a/contact.html b/contact.html
index d82f3bd..af50715 100644
--- a/contact.html
+++ b/contact.html
@@ -8,14 +8,14 @@
     <link rel="stylesheet" href="src/css/index.css">
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
-    
+
     <div class="gtranslate_wrapper"></div>
-<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
-<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+    <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
     <!--Updated to latest version-->
     <style>
         body {
-            font-family: Arial, sans-serif,'Times New Roman', Times, serif;
+            font-family: Arial, sans-serif, 'Times New Roman', Times, serif;
             background-color: #f4f4f4;
             margin: 0;
             padding: 0;
@@ -349,9 +349,11 @@
             align-items: center;
             animation: logoAnimation 1s ease forwards;
         }
+
         ul li a:hover {
             color: blue !important;
         }
+
         a:hover {
             color: blue !important;
         }
@@ -389,55 +391,84 @@
         }
 
         .map {
-
-      width: 860px;
-      height: 400px;
-      border: 3px 3px 3px 3px solid #090202;
-      border-radius: 5px;
-      margin: 20px auto;
-      object-fit: cover;
-    }
-
-    .translate-btn {
-        background-color: #2980b9;
-        color: white;
-        border: none;
-        padding: 10px 15px;
-        border-radius: 5px;
-        cursor: pointer;
-        font-size: 16px;
-        transition: background-color 0.3s;
-    }
-
-    .translate-btn:hover {
-        background-color: #3498db;
-    }
-
-    .g-translate-popup {
-        position: fixed;
-        top: 60px;
-        right: 20px;
-        background-color: white;
-        border-radius: 5px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        z-index: 1000;
-        padding: 10px;
-    }
-
-    .buttons {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-    }
-
-            width: 860px;
             height: 400px;
             border: 3px 3px 3px 3px solid #090202;
             border-radius: 5px;
             margin: 20px auto;
             object-fit: cover;
+            display: flex;
+            justify-content: center;
+        }
+
+        .translate-btn {
+            background-color: #2980b9;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s;
+        }
+
+        .translate-btn:hover {
+            background-color: #3498db;
+        }
+
+        .g-translate-popup {
+            position: fixed;
+            top: 60px;
+            right: 20px;
+            background-color: white;
+            border-radius: 5px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            padding: 10px;
+        }
+
+        .buttons {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        @media(max-width:768px) {
+            .container .buttons {
+                justify-content: center;
+                flex-direction: column;
+            }
+            .map iframe{
+                width: 100%;
+            }
+            .menu ul{
+                justify-content: center;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 20px 0 20px 0;
+            }
+
+        }
+        @media only screen and (min-width: 768px) and (max-width: 1024px) {
+            .container{
+                flex-direction: column;
+                gap: 1.5rem;
+            }
+            .menu{
+                width: max-content;
+                margin: auto;
+            }
+            .map iframe{
+                width: 90%;
+            }
         }
 
+        @media only screen and (min-width : 1024px) and (max-width:1465)
+        {
+            .container{
+                flex-direction: column;
+    gap: 2rem;
+            }
+        }
     </style>
 </head>
 
@@ -471,10 +502,10 @@
                     <span class="letter" style="--letter-index: 7;">o</span>
                     <span class="letter" style="--letter-index: 8;">w</span>
                 </div>
-                <a href="./index.html" >
-                <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo"
-                    style="width: 50px; height: auto" />
-                    </a>
+                <a href="./index.html">
+                    <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo"
+                        style="width: 50px; height: auto" />
+                </a>
             </div>
 
             <nav class="menu">
@@ -492,17 +523,15 @@
                 </ul>
             </nav>
             <div class="buttons">
+                <div>
+                    <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
+                        <i class="fa-solid fa-moon"></i>
+                    </button>
 
-                <button id="translateBtn" class="translate-btn"><i class="fas fa-language"></i> Translate</button>
-
-                <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
-                    <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>
+                    <a href="login.html" class="login">Log in</a>
+                    <a href="up.html" class="get-started">Get started</a>
+                </div>
             </div>
-        </div>
     </header>
 
     <div class="content" id="main-content">
@@ -525,10 +554,13 @@ <h2>Emergency Care</h2>
             </div>
         </div>
         <!-- adding map -->
-     <div class = "map">
-        <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d241294.64898498365!2d72.79635424219836!3d19.09761203283721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s123%20Emergency%20Lane%2C%20Mumbai%2C%20India!5e0!3m2!1sen!2sin!4v1728732339444!5m2!1sen!2sin" width=860px height="400" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade" overflow="hidden" style="border :10" object-fit="cover" ;></iframe> 
-        <!--  ;"  loading="lazy" margin-top="50%"  ></iframe> -->
-    </div>
+        <div class="map">
+            <iframe
+                src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d241294.64898498365!2d72.79635424219836!3d19.09761203283721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s123%20Emergency%20Lane%2C%20Mumbai%2C%20India!5e0!3m2!1sen!2sin!4v1728732339444!5m2!1sen!2sin"
+                width="898" height="400" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade"
+                style="border :10" object-fit="cover" ;></iframe>
+            <!--  ;"  loading="lazy" margin-top="50%"  ></iframe> -->
+        </div>
     </div>
     <footer style=" color: #f3f4f6; text-align: center; width: 100%;">
         <div style="background-color: #C4D7FF; color: #f3f4f6; ">
@@ -705,40 +737,40 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
                     //end 
                 </script>
 
-    <!-- Add this div for the translator popup -->
-    <div id="gTranslate" class="g-translate-popup" style="display:none;">
-        <div class="gtranslate_wrapper"></div>
-    </div>
-
-    <script>
-        window.gtranslateSettings = {
-            "default_language": "en",
-            "detect_browser_language": true,
-            "wrapper_selector": ".gtranslate_wrapper",
-            "alt_flags": {"en": "usa"}
-        }
-    </script>
-    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
-    <script>
-        const translateBtn = document.getElementById('translateBtn');
-        const gTranslate = document.getElementById('gTranslate');
+                <!-- Add this div for the translator popup -->
+                <div id="gTranslate" class="g-translate-popup" style="display:none;">
+                    <div class="gtranslate_wrapper"></div>
+                </div>
 
-        translateBtn.addEventListener('click', function() {
-            if (gTranslate.style.display === 'none') {
-                gTranslate.style.display = 'block';
-            } else {
-                gTranslate.style.display = 'none';
-            }
-        });
+                <script>
+                    window.gtranslateSettings = {
+                        "default_language": "en",
+                        "detect_browser_language": true,
+                        "wrapper_selector": ".gtranslate_wrapper",
+                        "alt_flags": { "en": "usa" }
+                    }
+                </script>
+                <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
+                <script>
+                    const translateBtn = document.getElementById('translateBtn');
+                    const gTranslate = document.getElementById('gTranslate');
+
+                    translateBtn.addEventListener('click', function () {
+                        if (gTranslate.style.display === 'none') {
+                            gTranslate.style.display = 'block';
+                        } else {
+                            gTranslate.style.display = 'none';
+                        }
+                    });
 
-        // Close the translator popup when clicking outside
-        document.addEventListener('click', function(event) {
-            if (!gTranslate.contains(event.target) && event.target !== translateBtn) {
-                gTranslate.style.display = 'none';
-            }
-        });
-    </script>
+                    // Close the translator popup when clicking outside
+                    document.addEventListener('click', function (event) {
+                        if (!gTranslate.contains(event.target) && event.target !== translateBtn) {
+                            gTranslate.style.display = 'none';
+                        }
+                    });
+                </script>
 
 </body>
 
diff --git a/features.html b/features.html
index 3f116b1..b6d4d56 100644
--- a/features.html
+++ b/features.html
@@ -10,8 +10,8 @@
   <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
   <div class="gtranslate_wrapper"></div>
-<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
-<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+  <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
+  <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
   <!--Updated to latest version-->
   <style>
     body {
@@ -225,8 +225,9 @@
       color: white;
       background-color: #000;
     }
+
     ul li a:hover {
-    color: blue !important;
+      color: blue !important;
     }
 
     .content {
@@ -327,50 +328,60 @@
       }
     }
 
-      /* Logo Animation */
-      @keyframes logoAnimation {
-  0% {
-    opacity: 0;
-    transform: translateX(-100px); /* Start from the left */
-  }
-  50% {
-    transform: translateX(10px); /* Move slightly to the right */
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0); /* End at original position */
-  }
-}
-
-footer {
-  background-color: #C4D7FF;
-  color: white;
-  text-align: center;
-  padding: 10px 0; /* Padding for the footer */
-  
-}
-
-/* Letter Drop Animation */
-@keyframes letterDrop {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  50% {
-    transform: translateY(10px); /* Slight bounce */
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-
-#thankYouMessage {
-  margin-top: 20px;
-  font-size: 18px;
-  color: green;
-  display: none; /* Initially hidden */
-}
+    /* Logo Animation */
+    @keyframes logoAnimation {
+      0% {
+        opacity: 0;
+        transform: translateX(-100px);
+        /* Start from the left */
+      }
+
+      50% {
+        transform: translateX(10px);
+        /* Move slightly to the right */
+      }
+
+      100% {
+        opacity: 1;
+        transform: translateX(0);
+        /* End at original position */
+      }
+    }
+
+    footer {
+      background-color: #C4D7FF;
+      color: white;
+      text-align: center;
+      padding: 10px 0;
+      /* Padding for the footer */
+
+    }
+
+    /* Letter Drop Animation */
+    @keyframes letterDrop {
+      0% {
+        transform: translateY(-100%);
+        opacity: 0;
+      }
+
+      50% {
+        transform: translateY(10px);
+        /* Slight bounce */
+        opacity: 1;
+      }
+
+      100% {
+        transform: translateY(0);
+      }
+    }
+
+    #thankYouMessage {
+      margin-top: 20px;
+      font-size: 18px;
+      color: green;
+      display: none;
+      /* Initially hidden */
+    }
 
     .translate-btn {
       background-color: #2980b9;
@@ -403,7 +414,39 @@
       align-items: center;
       gap: 8px;
     }
- 
+
+    @media(max-width:768px) {
+      .container .buttons {
+        justify-content: center;
+        flex-direction: column;
+      }
+      .menu ul{
+                justify-content: center;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 20px 0 20px 0;
+            }
+
+    }
+    @media only screen and (min-width: 768px) and (max-width: 1024px) {
+            .container{
+                flex-direction: column;
+                gap: 1.5rem;
+            }
+            .menu{
+                width: max-content;
+                margin: auto;
+            }
+            
+        }
+
+        @media only screen and (min-width : 1024px) and (max-width:1465)
+        {
+            .container{
+                flex-direction: column;
+    gap: 2rem;
+            }
+        }
   </style>
 
 </head>
@@ -438,7 +481,7 @@
           <span class="letter" style="--letter-index: 8;">w</span>
         </div>
         <a href="./index.html">
-        <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
+          <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
         </a>
       </div>
 
@@ -454,14 +497,17 @@
         </ul>
       </nav>
       <div class="buttons">
-
+        <div>
           <button id="translateBtn" class="translate-btn"><i class="fas fa-language"></i> Translate</button>
+        </div>
+        <div>
           <a href="login.html" class="login">Log in</a>
           <a href="up.html" class="get-started">Get started</a>
 
-        <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
-          <i class="fa-solid fa-moon"></i>
-        </button>
+          <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
+            <i class="fa-solid fa-moon"></i>
+          </button>
+        </div>
 
       </div>
     </div>
@@ -690,41 +736,41 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
     });
   </script>
 
-<!-- Add this div for the translator popup -->
-<div id="gTranslate" class="g-translate-popup" style="display:none;">
-  <div class="gtranslate_wrapper"></div>
-</div>
-
-<script>
-  window.gtranslateSettings = {
-    "default_language": "en",
-    "detect_browser_language": true,
-    "wrapper_selector": ".gtranslate_wrapper",
-    "alt_flags": {"en": "usa"}
-  }
-</script>
-<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
-<script>
-  const translateBtn = document.getElementById('translateBtn');
-  const gTranslate = document.getElementById('gTranslate');
-
-  translateBtn.addEventListener('click', function() {
-    if (gTranslate.style.display === 'none') {
-      gTranslate.style.display = 'block';
-    } else {
-      gTranslate.style.display = 'none';
-    }
-  });
-
-  // Close the translator popup when clicking outside
-  document.addEventListener('click', function(event) {
-    if (!gTranslate.contains(event.target) && event.target !== translateBtn) {
-      gTranslate.style.display = 'none';
-    }
-  });
-</script>
+  <!-- Add this div for the translator popup -->
+  <div id="gTranslate" class="g-translate-popup" style="display:none;">
+    <div class="gtranslate_wrapper"></div>
+  </div>
+
+  <script>
+    window.gtranslateSettings = {
+      "default_language": "en",
+      "detect_browser_language": true,
+      "wrapper_selector": ".gtranslate_wrapper",
+      "alt_flags": { "en": "usa" }
+    }
+  </script>
+  <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
+  <script>
+    const translateBtn = document.getElementById('translateBtn');
+    const gTranslate = document.getElementById('gTranslate');
+
+    translateBtn.addEventListener('click', function () {
+      if (gTranslate.style.display === 'none') {
+        gTranslate.style.display = 'block';
+      } else {
+        gTranslate.style.display = 'none';
+      }
+    });
+
+    // Close the translator popup when clicking outside
+    document.addEventListener('click', function (event) {
+      if (!gTranslate.contains(event.target) && event.target !== translateBtn) {
+        gTranslate.style.display = 'none';
+      }
+    });
+  </script>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/nearby.html b/nearby.html
index e6b7e55..8c08448 100644
--- a/nearby.html
+++ b/nearby.html
@@ -25,7 +25,7 @@
         }
         .container {
             display: grid;
-            grid-template-columns: repeat(4, 1fr);
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 20px;
             margin-bottom: 20px;
         }
diff --git a/src/css/index.css b/src/css/index.css
index ceb8126..336584e 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -168,7 +168,7 @@ header {
     flex-direction: column;
     background-color: #f9fafb;
     position: absolute;
-    top: 60px;
+    top: 180px;
     left: 0;
     width: 100%;
     display: none;
@@ -520,6 +520,7 @@ margin-bottom: 30px;
 
   .container {
     padding: 5px;
+    flex-direction: column;
   }
 
   .logo img{
diff --git a/team.html b/team.html
index e8f950d..890a3bd 100644
--- a/team.html
+++ b/team.html
@@ -10,8 +10,8 @@
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <div class="gtranslate_wrapper"></div>
-<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
-<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+    <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
     <!--Updated to latest version-->
     <style>
         body {
@@ -413,7 +413,40 @@
             gap: 10px;
         }
 
-        .g-translate
+        @media(max-width:768px) {
+            .container .buttons {
+                justify-content: center;
+                flex-direction: column;
+            }
+
+            .menu ul {
+                justify-content: center;
+                align-items: center;
+                gap: 1.5rem;
+                padding: 20px 0 20px 0;
+            }
+
+        }
+
+        @media only screen and (min-width: 768px) and (max-width: 1024px) {
+            .container {
+                flex-direction: column;
+                gap: 1.5rem;
+            }
+
+            .menu {
+                width: max-content;
+                margin: auto;
+            }
+
+        }
+
+        @media only screen and (min-width : 1024px) and (max-width:1465) {
+            .container {
+                flex-direction: column;
+                gap: 2rem;
+            }
+        }
     </style>
 </head>
 
@@ -446,34 +479,48 @@
                     <span class="letter" style="--letter-index: 7;">o</span>
                     <span class="letter" style="--letter-index: 8;">w</span>
                 </div>
-                <a href="./index.html" >
-                <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo"
-                    style="width: 50px; height: auto" />
-                    </a>
+                <a href="./index.html">
+                    <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo"
+                        style="width: 50px; height: auto" />
+                </a>
             </div>
 
 
-        <nav class="menu">
-            <ul>
-                <li><a href="index.html" 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></li>
-                <li><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></li>
-                <li><a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a></li>
-            </ul>
-        </nav>
-        <div class="buttons">
-            <button id="translateBtn" class="translate-btn"><i class="fas fa-language"></i> Translate</button>
-            <a href="login.html" class="login">Log in</a>
-            <a href="up.html" class="get-started">Get started</a>
+            <nav class="menu">
+                <ul>
+                    <li><a href="index.html" 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></li>
+                    <li><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></li>
+                    <li><a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i
+                                class="fa-solid fa-clipboard"></i> Feedback</a></li>
+                </ul>
+            </nav>
+            <div class="buttons">
+                <div>
+                    <button id="translateBtn" class="translate-btn"><i class="fas fa-language"></i> Translate</button>
+                </div>
+                <div>
+                    <a href="login.html" class="login">Log in</a>
+                    <a href="up.html" class="get-started">Get started</a>
+
+                    <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
+                        <i class="fa-solid fa-moon"></i>
+                    </button>
+                </div>
+
+            </div>
         </div>
-    </div>
-</header>
+    </header>
 
-<!-- Add this div for the translator popup -->
-<div id="gTranslate" class="g-translate-popup" style="display:none;">
-    <div class="gtranslate_wrapper"></div>
-</div>
+    <!-- Add this div for the translator popup -->
+    <div id="gTranslate" class="g-translate-popup" style="display:none;">
+        <div class="gtranslate_wrapper"></div>
+    </div>
 
     <div class="content" id="main-content">
         <h1>Meet Our Team</h1>
@@ -671,36 +718,36 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
         });
     </script>
 
-<script>
-    window.gtranslateSettings = {
-        "default_language": "en",
-        "detect_browser_language": true,
-        "wrapper_selector": ".gtranslate_wrapper",
-        "alt_flags": {"en": "usa"}
-    }
-</script>
-<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
-<script>
-    const translateBtn = document.getElementById('translateBtn');
-    const gTranslate = document.getElementById('gTranslate');
-
-    translateBtn.addEventListener('click', function() {
-        if (gTranslate.style.display === 'none') {
-            gTranslate.style.display = 'block';
-        } else {
-            gTranslate.style.display = 'none';
+    <script>
+        window.gtranslateSettings = {
+            "default_language": "en",
+            "detect_browser_language": true,
+            "wrapper_selector": ".gtranslate_wrapper",
+            "alt_flags": { "en": "usa" }
         }
-    });
+    </script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 
-    // Close the translator popup when clicking outside
-    document.addEventListener('click', function(event) {
-        if (!gTranslate.contains(event.target) && event.target !== translateBtn) {
-            gTranslate.style.display = 'none';
-        }
-    });
-</script>
+    <script>
+        const translateBtn = document.getElementById('translateBtn');
+        const gTranslate = document.getElementById('gTranslate');
+
+        translateBtn.addEventListener('click', function () {
+            if (gTranslate.style.display === 'none') {
+                gTranslate.style.display = 'block';
+            } else {
+                gTranslate.style.display = 'none';
+            }
+        });
+
+        // Close the translator popup when clicking outside
+        document.addEventListener('click', function (event) {
+            if (!gTranslate.contains(event.target) && event.target !== translateBtn) {
+                gTranslate.style.display = 'none';
+            }
+        });
+    </script>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file

From a65a1e06d774d3d2869010c8ffd3e2aec1421b87 Mon Sep 17 00:00:00 2001
From: srishti <srishtichoudhary52@gmail.com>
Date: Wed, 16 Oct 2024 13:44:54 +0530
Subject: [PATCH 2/3] Updated responsiveness in home page

---
 index.html | 219 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 157 insertions(+), 62 deletions(-)

diff --git a/index.html b/index.html
index 7730612..8f5af37 100644
--- a/index.html
+++ b/index.html
@@ -206,6 +206,7 @@
       transform: scale(1.3);
       /* Scale the element to 1.3 times its size */
     }
+
     .fa-facebook:hover {
       color: blue;
       /* Icon color change to blue on hover */
@@ -225,6 +226,7 @@
       color: rgb(16, 13, 195);
       /* Icon color change to rgb(16, 13, 195) on hover */
     }
+
     .feature p {
       color: #555;
     }
@@ -264,6 +266,7 @@
       margin-right: 20px;
       border-radius: 10px;
     }
+
     @keyframes fadeIn {
       from {
         opacity: 0;
@@ -402,9 +405,12 @@
       overflow: hidden;
       transition: background-color 0.3s ease;
     }
+
     .faq:hover {
-      background-color: #e31616; /* Slight hover effect for FAQs */
+      background-color: #e31616;
+      /* Slight hover effect for FAQs */
     }
+
     .faq-question {
       background-color: #e7ffe7;
       color: #333;
@@ -421,9 +427,12 @@
       align-items: center;
       transition: background-color 0.3s ease;
     }
+
     .faq-question:hover {
-      background-color: #d5f0d5; /* Lighter green on hover */
+      background-color: #d5f0d5;
+      /* Lighter green on hover */
     }
+
     .faq-question::after {
       content: '';
       display: inline-block;
@@ -444,11 +453,14 @@
 
     .faq-answer {
       opacity: 0;
-      max-height: 0; /* Initially hidden */
-      overflow: hidden; /* Hide content when not visible */
+      max-height: 0;
+      /* Initially hidden */
+      overflow: hidden;
+      /* Hide content when not visible */
       padding: 0 10px;
       background-color: #fff;
-      transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition */
+      transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
+      /* Smooth transition */
       border-top: 1px solid #ccc;
     }
 
@@ -463,6 +475,7 @@
       padding: 10px;
       /* Adds padding when expanded */
     }
+
     .faq.active .faq-answer p {
       transition: opacity 0.3s ease-in-out;
     }
@@ -524,10 +537,12 @@
       /* Dark mode navbar */
       /* color: white; */
     }
-    .dark-mode .main_content p{
+
+    .dark-mode .main_content p {
       color: wheat;
     }
-    .dark-mode .content h1{
+
+    .dark-mode .content h1 {
       color: wheat;
 
     }
@@ -559,11 +574,13 @@
       /* Dark mode link color */
       /* Light grey border in dark mode */
     }
+
     .dark-mode .menu a.active {
       color: white;
       /* Dark mode link color */
       /* Light grey border in dark mode */
     }
+
     .dark-mode .menu a.active:before {
       color: white;
       background: none;
@@ -608,6 +625,84 @@
       color: black;
       /* Text color on hover in dark mode */
     }
+
+    @media (max-width:660px) {
+      .container {
+        padding: 0px;
+      }
+
+
+      .main_content {
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      .main_heading {
+        width: min-content;
+        margin: 0.5rem;
+      }
+
+      .main_heading h1 {
+        font-size: 3rem;
+      }
+
+      .main_heading h2 {
+        font-size: 3rem;
+      }
+
+      .main_content img {
+        width: auto;
+      }
+
+      .content {
+        padding: 0px;
+      }
+
+      .dark-mode .content {
+        padding: 0px;
+      }
+
+      .grid {
+        grid-template-columns: 1fr;
+        /* 1 column */
+        grid-template-rows: repeat(auto, 1fr);
+        /* Adjust rows as needed */
+      }
+
+      ul li {
+        font-size: 0.9rem;
+      }
+
+      a {
+        font-size: 0.9rem;
+      }
+      .foot_inner{
+        display: flex;
+    color: #f3f4f6;
+    align-items: center;
+    justify-content: center;
+    position: static;
+    left: 2.5rem;
+    flex-direction: column;
+      }
+    }
+    @media (min-width: 660px) and (max-width: 990px) {
+      .main_content{
+        flex-direction: column;
+      }
+      .main_heading {
+        margin: 10px;
+        width: 35rem;
+        align-items: center;
+      }
+      .grid{
+        grid-template-columns: 1fr 1fr;
+      }
+      .foot_inner{
+        flex-wrap: wrap;
+      }
+  
+}
   </style>
 </head>
 
@@ -781,72 +876,71 @@ <h2>Contact Us</h2>
             possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
         </div>
       </div>
-    
-    <div class="faq">
-      <button class="faq-question">How do I track an ambulance in real-time?</button>
-      <div class="faq-answer">
-        <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
-          live map feature.</p>
-        <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
-          live map feature.</p>
+
+      <div class="faq">
+        <button class="faq-question">How do I track an ambulance in real-time?</button>
+        <div class="faq-answer">
+          <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
+            live map feature.</p>
+          <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
+            live map feature.</p>
+        </div>
       </div>
-    </div>
-    <div class="faq">
-      <button class="faq-question">What are the emergency protocols if an ambulance is delayed?</button>
-      <div class="faq-answer">
-        <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
-          please contact emergency services for further instructions.</p>
-        <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
-          please contact emergency services for further instructions.</p>
+      <div class="faq">
+        <button class="faq-question">What are the emergency protocols if an ambulance is delayed?</button>
+        <div class="faq-answer">
+          <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
+            please contact emergency services for further instructions.</p>
+          <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
+            please contact emergency services for further instructions.</p>
+        </div>
       </div>
-    </div>
-    <div class="faq">
-      <button class="faq-question">Can I provide medical information for the patient in advance?</button>
-      <div class="faq-answer">
-        <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
-          the situation.</p>
-        <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
-          the situation.</p>
+      <div class="faq">
+        <button class="faq-question">Can I provide medical information for the patient in advance?</button>
+        <div class="faq-answer">
+          <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
+            the situation.</p>
+          <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
+            the situation.</p>
+        </div>
       </div>
-    </div>
-    <div class="faq">
-      <button class="faq-question">Are there any charges for using the ambulance tracking service?</button>
-      <div class="faq-answer">
-        <p>The ambulance tracking service is free of charge, but regular ambulance service fees may apply depending
-          on the provider.</p>
+      <div class="faq">
+        <button class="faq-question">Are there any charges for using the ambulance tracking service?</button>
+        <div class="faq-answer">
+          <p>The ambulance tracking service is free of charge, but regular ambulance service fees may apply depending
+            on the provider.</p>
+        </div>
       </div>
-    </div>
-    <div class="faq">
-      <button class="faq-question">How can I request special medical equipment or personnel on the
-        ambulance?</button>
-      <div class="faq-answer">
-        <p>During your request, you can specify if the patient needs specific medical equipment or personnel, such
-          as a ventilator or a specialized doctor.</p>
+      <div class="faq">
+        <button class="faq-question">How can I request special medical equipment or personnel on the
+          ambulance?</button>
+        <div class="faq-answer">
+          <p>During your request, you can specify if the patient needs specific medical equipment or personnel, such
+            as a ventilator or a specialized doctor.</p>
+        </div>
       </div>
-    </div>
-    <div class="faq">
-      <button class="faq-question">What should I do if the location of the ambulance is not updating?</button>
-      <div class="faq-answer">
-        <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
-          technical issue through the system or contact support.</p>
-        <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
-          technical issue through the system or contact support.</p>
+      <div class="faq">
+        <button class="faq-question">What should I do if the location of the ambulance is not updating?</button>
+        <div class="faq-answer">
+          <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
+            technical issue through the system or contact support.</p>
+          <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
+            technical issue through the system or contact support.</p>
+        </div>
       </div>
-    </div>
-    <div class="faq">
-      <button class="faq-question">Can I schedule an ambulance in advance?</button>
-      <div class="faq-answer">
-        <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
-        <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
+      <div class="faq">
+        <button class="faq-question">Can I schedule an ambulance in advance?</button>
+        <div class="faq-answer">
+          <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
+          <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
+        </div>
       </div>
     </div>
   </div>
-  </div>
 
   <!-- FAQ section ends here -->
   <footer style="margin-top: 1.5rem; color: #f3f4f6; text-align: center; width: 100%;">
-    <div
-      style="display: flex;color: #f3f4f6;justify-content: space-evenly;position: relative;left: 2.5rem;">
+    <div class="foot_inner" style="display: flex;color: #f3f4f6;justify-content: space-evenly;left: 2.5rem;">
 
       <!-- Quick Links Section -->
       <div>
@@ -1085,7 +1179,8 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
   <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
   <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
   <script src="https://apis.google.com/js/platform.js" async defer></script>
-  <meta name="google-signin-client_id" content="756798891791-69vfi6rfu9lkoo8r6iup9ce2k3dsddo6.apps.googleusercontent.com">
+  <meta name="google-signin-client_id"
+    content="756798891791-69vfi6rfu9lkoo8r6iup9ce2k3dsddo6.apps.googleusercontent.com">
 
 </body>
 

From fba2195c2283ab1749286cca3b3ce304479fdbba Mon Sep 17 00:00:00 2001
From: srishti <srishtichoudhary52@gmail.com>
Date: Wed, 16 Oct 2024 13:48:36 +0530
Subject: [PATCH 3/3] updated home page

---
 index.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 8f5af37..59e8946 100644
--- a/index.html
+++ b/index.html
@@ -701,8 +701,12 @@
       .foot_inner{
         flex-wrap: wrap;
       }
-  
 }
+@media (min-width: 990px) and (max-width: 1300px) {
+  .main_content{
+    width: inherit;
+  }
+      }
   </style>
 </head>