Updated Nearby Section

Created block like structure having image of hospitals with clickable name for tracking location
tushargupta1504 · Oct 6, 2024 · 8231c9c · 8231c9c
1 parent 10238e3
commit 8231c9c
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 94 deletions.
diff --git a/img/h1.jpg b/img/h1.jpg
diff --git a/img/h2.jpg b/img/h2.jpg
diff --git a/img/h3.jpg b/img/h3.jpg
diff --git a/img/h4.jpg b/img/h4.jpg
diff --git a/img/h5.jpg b/img/h5.jpg
diff --git a/img/h6.jpg b/img/h6.jpg
diff --git a/nearby.html b/nearby.html
@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -12,39 +11,96 @@
   <title>Swasthya Point</title>
 
   <style>
+    body {
+      background-color: #e8f5e9;
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+
     h2 {
-      font-size: 3rem;
+      font-size: 3.5rem;
       margin-top: 20px;
       color: #333;
+      font-weight: bold;
+      text-align: center;
     }
 
     .lead {
-      font-size: 1.5rem;
-      line-height: 1.6;
-      color: #555;
+      font-size: 3rem;
+      color: #311f1f;
+      font-weight: bold;
+      text-align: center;
+    }
+    .logo {
+         font-size: large;
+    }
+
+    .hospital-block {
+      margin-bottom: 30px;
+      padding: 25px 15px;
+    }
+
+    .hospital-card {
+      border: none;
+      text-align: center;
+      transition: transform 0.2s;
+      padding: 10px;
+      height: 100%;
+      background: linear-gradient(135deg, #bdffde, #ffffff);
+      border-radius: 5px;
+      box-shadow: 4px 4px 10px rgba(175, 231, 175, 0.6);
+    }
+
+    .hospital-card:hover {
+      transform: scale(1.05);
+    }
+
+    .hospital-card img {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      border-radius: 15px;
+    }
+
+    .hospital-name {
+      font-size: 1.8rem;
+      font-weight: bold;
+      margin-top: 10px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
 
     .hospitals-link {
-      font-size: 1.5rem;
-      color: #4385a9;
+      color: #020608;
       text-decoration: none;
     }
 
     .hospitals-link:hover {
       text-decoration: underline;
-      /* Underline on hover */
+    }
+
+    footer {
+      margin-top: auto;
+      padding: 1rem 0;
+      background-color: #2e2e2e;
+      color: white;
+      text-align: center;
+    }
+
+    .container {
+      margin-bottom: 20px;
     }
   </style>
 </head>
 
 <body>
   <!-- header section starts -->
-
   <header>
-
     <input type="checkbox" name="" id="toggler">
     <label for="toggler" class="fas fa-bars"></label>
-    <a href="#" class="logo">Swasthya<span>.</span></a>
+    <a href="#" class="logo">Swasthya Point<span>.</span></a>
 
     <nav class="navbar">
       <a href="index.html">Home</a>
@@ -53,110 +109,97 @@
       <a href="index.html#contact">Contact</a>
       <a href="index.html#blogs">Blogs</a>
       <a href="index.htmlnearby.html">Nearby</a>
-
-      <div class="dark-btn-navbar">
-        <label id="dark-change"></label>
-      </div>
     </nav>
-
   </header>
   <!-- header section ends -->
+
+  <!-- Nearby Hospitals Section -->
   <section class="about" id="about">
-    <p class="lead">Find nearby Clinics and Hospitals</p>
-    </div>
-    </header>
-    <section id="about"></section>
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-8 mx-auto">
-          <h2>Click to view their location</h2>
-          <p class="lead">We have wide Varieties of Hospitals and Clinics for you incase of any kind of emergencies.
-          </p>
-          <ul></ul>
-          <li>
-            <a class="hospitals-link"
-              href="https://www.google.com/maps/place/Fortis+Hospital,+Shalimar+Bagh/@28.7095568,77.0978152,13z/data=!4m10!1m2!2m1!1shospitals+delhi!3m6!1s0x390d02206e9e71cf:0xb096542618cd68b4!8m2!3d28.7095568!4d77.169913!15sCg9ob3NwaXRhbHMgZGVsaGmSARBwcml2YXRlX2hvc3BpdGFs4AEA!16s%2Fg%2F1tq6hg7k?entry=ttu&g_ep=EgoyMDI0MDkyOS4wIKXMDSoASAFQAw%3D%3D"
-              target="_blank">
-              Fortis Hospital, Shalimar Bagh
-            </a>
-          </li>
-          <li>
-            <a class="hospitals-link"
-              href="https://www.google.com/maps/place/Maharaja+Agrasen+Hospital/@28.6741349,77.0473016,12z/data=!4m10!1m2!2m1!1shospitals+near+Delhi!3m6!1s0x390d02394159d409:0x96dac81bc4be56b1!8m2!3d28.6741408!4d77.1339386!15sChRob3NwaXRhbHMgbmVhciBEZWxoaVoWIhRob3NwaXRhbHMgbmVhciBkZWxoaZIBEHByaXZhdGVfaG9zcGl0YWyaASNDaFpEU1VoTk1HOW5TMFZKUTBGblNVUlRiVjk1WmtSbkVBReABAA!16s%2Fm%2F04n5_4_?entry=ttu&g_ep=EgoyMDI0MDkyOS4wIKXMDSoASAFQAw%3D%3D"
-              target="_blank">
-              Maharaja Agrasen Hospital,Punjabi Bagh
+    <p class="lead">Find Nearby Hospitals</p>
+  </section>
+
+  <div class="container">
+    <div class="row">
+      <!-- Hospital 1 -->
+      <div class="col-md-4 hospital-block">
+        <div class="card hospital-card">
+          <img src="img/h1.jpg" alt="Fortis Hospital Image">
+          <div class="card-body">
+            <a class="hospitals-link" href="https://www.google.com/maps/place/Fortis+Hospital" target="_blank">
+              <p class="hospital-name">Fortis Hospital, Shalimar Bagh</p>
             </a>
-          </li>
-          <li>
-            <a class="hospitals-link"
-              href="https://www.google.com/maps/place/Nulife+Multi+Specialty+Hospital/@28.6741349,77.0473016,12z/data=!4m10!1m2!2m1!1shospitals+near+Delhi!3m6!1s0x390cfdefa1489b2b:0x34bd0ebf8e5e5a69!8m2!3d28.7008834!4d77.208628!15sChRob3NwaXRhbHMgbmVhciBEZWxoaVoWIhRob3NwaXRhbHMgbmVhciBkZWxoaZIBCGhvc3BpdGFsmgEjQ2haRFNVaE5NRzluUzBWSlEwRm5TVU5zWDJaNmFFaG5FQUXgAQA!16s%2Fg%2F1tj50zst?entry=ttu&g_ep=EgoyMDI0MDkyOS4wIKXMDSoASAFQAw%3D%3D"
+          </div>
+        </div>
+      </div>
+      <!-- Hospital 2 -->
+      <div class="col-md-4 hospital-block">
+        <div class="card hospital-card">
+          <img src="img/h2.jpg" alt="Maharaja Agrasen Hospital Image">
+          <div class="card-body">
+            <a class="hospitals-link" href="https://www.google.com/maps/place/Maharaja+Agrasen+Hospital"
               target="_blank">
-              Nulife Multi Specialty Hospital,GTB Nagar
+              <p class="hospital-name">Maharaja Agrasen Hospital, Punjabi Bagh</p>
             </a>
-          </li>
-          <li>
-            <a class="hospitals-link"
-              href="https://www.google.com/maps/place/DELHI+MULTI+SPECIALITY+HOSPITAL/@28.7118178,76.9505985,12z/data=!4m12!1m4!2m3!1shospitals+near+Delhi!5m1!4e9!3m6!1s0x390d06aef7ac4177:0xacd81a55e6d7dbce!8m2!3d28.7118178!4d77.0947941!15sChRob3NwaXRhbHMgbmVhciBEZWxoaVoWIhRob3NwaXRhbHMgbmVhciBkZWxoaZIBCGhvc3BpdGFsmgEjQ2haRFNVaE5NRzluUzBWSlEwRm5TVU5ITFhCWFJFaG5FQUXgAQA!16s%2Fg%2F11c2nbsntj?entry=ttu&g_ep=EgoyMDI0MDkyOS4wIKXMDSoASAFQAw%3D%3D"
+          </div>
+        </div>
+      </div>
+      <!-- Hospital 3 -->
+      <div class="col-md-4 hospital-block">
+        <div class="card hospital-card">
+          <img src="img/h3.jpg" alt="Nulife Hospital Image">
+          <div class="card-body">
+            <a class="hospitals-link" href="https://www.google.com/maps/place/Nulife+Multi+Specialty+Hospital"
               target="_blank">
-              Delhi Multi Speciality Hospital,Rohini
+              <p class="hospital-name">Nulife Multi Specialty Hospital, GTB Nagar</p>
             </a>
-          </li>
-          <li>
-            <a class="hospitals-link"
-              href="https://www.google.com/maps/place/Apollo+Spectra+Hospitals/@28.6452228,77.0513202,12z/data=!4m12!1m4!2m3!1shospitals+near+Delhi!5m1!4e9!3m6!1s0x390d0282817c9b0f:0xcdaffdc709b563!8m2!3d28.6452228!4d77.1955158!15sChRob3NwaXRhbHMgbmVhciBEZWxoaVoWIhRob3NwaXRhbHMgbmVhciBkZWxoaZIBEHByaXZhdGVfaG9zcGl0YWyaASNDaFpEU1VoTk1HOW5TMFZKUTBGblNVUmxibHBpYlVsbkVBReABAA!16s%2Fg%2F119wl9wj6?entry=ttu&g_ep=EgoyMDI0MDkyOS4wIKXMDSoASAFQAw%3D%3D"
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <!-- Hospital 4 -->
+      <div class="col-md-4 hospital-block">
+        <div class="card hospital-card">
+          <img src="img/h4.jpg" alt="Delhi Multi Specialty Hospital Image">
+          <div class="card-body">
+            <a class="hospitals-link" href="https://www.google.com/maps/place/DELHI+MULTI+SPECIALITY+HOSPITAL"
               target="_blank">
-              Apollo Spectra Hospitals,Karol Bagh
+              <p class="hospital-name">Delhi Multi Speciality Hospital, Rohini</p>
             </a>
-          </li>
-          <li>
-            <a class="hospitals-link"
-              href="https://www.google.com/maps/place/JDS+Hospital/@28.7258682,77.1013919,12z/data=!4m12!1m4!2m3!1shospitals+near+Delhi!5m1!4e9!3m6!1s0x390cfe8692afe401:0x54afc18879bea567!8m2!3d28.7258682!4d77.2455875!15sChRob3NwaXRhbHMgbmVhciBEZWxoaVoWIhRob3NwaXRhbHMgbmVhciBkZWxoaZIBEGdlbmVyYWxfaG9zcGl0YWyaASNDaFpEU1VoTk1HOW5TMFZKUTBGblNVTkVPR0ZUVVdaM0VBReABAA!16s%2Fg%2F11sb6pvv2r?entry=ttu&g_ep=EgoyMDI0MDkyOS4wIKXMDSoASAFQAw%3D%3D"
-              target="_blank">
-              JDS Hospital,New Delhi
+          </div>
+        </div>
+      </div>
+      <!-- Hospital 5 -->
+      <div class="col-md-4 hospital-block">
+        <div class="card hospital-card">
+          <img src="img/h5.jpg" alt="Apollo Spectra Hospital Image">
+          <div class="card-body">
+            <a class="hospitals-link" href="https://www.google.com/maps/place/Apollo+Spectra+Hospitals" target="_blank">
+              <p class="hospital-name">Apollo Spectra Hospitals, Karol Bagh</p>
             </a>
-          </li>
-
-          </ul>
+          </div>
         </div>
       </div>
-    </div>
-  </section>
-
-  <section id="services" class="bg-light">
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-8 mx-auto">
-          <h2>Services we offer</h2>
-          <p class="lead"> We provide a wide range of healthcare services, including emergency and inpatient care,
-            outpatient services, and advanced surgical options. Our specialties include maternal and pediatric care,
-            diagnostic imaging, and laboratory services for accurate diagnoses. We also offer rehabilitation, pharmacy,
-            mental health support, and nutritional counseling. With preventive care and telemedicine services, we strive
-            to ensure accessible, high-quality healthcare for our community. Your health is our priority, and we are
-            committed to delivering exceptional care.</p>
+      <!-- Hospital 6 -->
+      <div class="col-md-4 hospital-block">
+        <div class="card hospital-card">
+          <img src="img/h6.jpg" alt="JDS Hospital Image">
+          <div class="card-body">
+            <a class="hospitals-link" href="https://www.google.com/maps/place/JDS+Hospital" target="_blank">
+              <p class="hospital-name">JDS Hospital, New Delhi</p>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-  </section>
-
+  </div>
 
   <!-- Footer -->
-  <footer class="py-3 bg-dark">
-    <div class="container">
-      <p class="m-0 text-center text-white">Copyright &copy; Swasthya Point</p>
-    </div>
+  <footer>
+    <p class="m-0">&copy; 2024 Swasthya Point</p>
   </footer>
 
-
-
 </body>
 
-<script>
-  var content = document.getElementsByTagName('body')[0];
-  var darkMode = document.getElementById('dark-change');
-  darkMode.addEventListener('click', function () {
-    darkMode.classList.toggle('active');
-    content.classList.toggle('night');
-  })
-</script>
-
 </html>