From ce82222533358dd5f64efda1dbfa2b6d047f8e85 Mon Sep 17 00:00:00 2001
From: Asmita Mishra <146121869+AsmitaMishra24@users.noreply.github.com>
Date: Sun, 7 Jul 2024 02:43:49 +0530
Subject: [PATCH 1/4] Redesigned "Make an Appointment" Section (#749)

* Redesigned "Make an Appointment" Section

---------

Co-authored-by: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com>
---
 Css-Files/appointment.css | 166 ++++++++++++++
 index.html                | 443 ++++++++++++++------------------------
 style.css                 | 176 ---------------
 3 files changed, 327 insertions(+), 458 deletions(-)
 create mode 100644 Css-Files/appointment.css

diff --git a/Css-Files/appointment.css b/Css-Files/appointment.css
new file mode 100644
index 00000000..cb40e605
--- /dev/null
+++ b/Css-Files/appointment.css
@@ -0,0 +1,166 @@
+#appointment {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.appointment-container {
+    width: 90%;
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: #3fbcc051;
+    text-align: center;
+    margin-bottom: 7%;
+    border-radius: 20px;
+}
+
+.section-title h2 {
+    font-size: 1.6rem;
+    margin: 15px 0 0 0;
+    color: #fff;
+    font-weight: bold;
+}
+
+.section-title p {
+    font-size: 0.8rem;
+    color: #666;
+    font-weight: normal;
+    margin: 20px 0 0 0;
+}
+
+.php-email-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+}
+
+.form-group {
+    margin-bottom: 15px;
+    width: 100%;
+    max-width: 400px;
+}
+
+.form-group label {
+    display: block;
+    text-align: start;
+    text-transform: capitalize;
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+
+.form-control {
+    width: 100%;
+    padding: 8px;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #fff;
+    color: #000;
+}
+
+.form-select {
+    width: 100%;
+    padding: 6px;
+    font-size: 0.9rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #fff;
+    color: #000;
+    box-sizing: border-box;
+    appearance: none;
+    -webkit-appearance: none; 
+    -moz-appearance: none;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14l-4.796-5.481C2.027 5.191 2.208 5 2.5 5h11c.292 0 .473.191.549.659l-4.796 5.481a.513.513 0 0 1-.702 0z"/></svg>'); /* Custom dropdown arrow */
+    background-repeat: no-repeat;
+    background-position: right 10px center; 
+    background-size: 16px 16px;
+}
+
+.form-select::placeholder {
+    color: #999;
+    opacity: 1; 
+}
+
+.btn-primary {
+    text-align: center;
+    justify-content: center;
+    background-color: #29888A;
+    color: #fff;
+    font-size: 1.2rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    text-decoration: none;
+    margin: 20px 0 30px 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s, box-shadow 0.3s; 
+}
+
+.btn-primary:hover {
+    background-color: #30a3a5;
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Responsive adjustments */
+/* For tablets and smaller screens */
+@media (max-width: 768px) {
+    .appointment-container {
+        padding: 15px;
+    }
+
+    .section-title h2 {
+        font-size: 2rem;
+    }
+
+    .section-title p {
+        font-size: 1rem;
+    }
+
+    .php-email-form {
+        padding: 15px;
+    }
+
+    .btn-primary {
+        width: 100%;
+        max-width: none;
+    }
+}
+
+/* For larger smartphones and smaller tablets */
+@media (max-width: 576px) {
+    .appointment-container {
+        padding: 10px;
+    }
+
+    .section-title h2 {
+        font-size: 1.8rem;
+    }
+
+    .section-title p {
+        font-size: 0.9rem;
+    }
+}
+
+/* For extra-large screens (desktops) */
+@media (min-width: 1200px) {
+    .appointment-container {
+        padding: 30px;
+    }
+
+    .section-title h2 {
+        font-size: 3rem; 
+    }
+
+    .section-title p {
+        font-size: 1.2rem; 
+    }
+
+    .php-email-form {
+        padding: 30px;
+    }
+}
diff --git a/index.html b/index.html
index 48b38743..94fcd749 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,7 @@
   <link href="glightbox/css/glightbox.min.css" rel="stylesheet">
   <link href="remixicon/remixicon.css" rel="stylesheet">
   <link href="swiper/swiper-bundle.min.css" rel="stylesheet">
-
+  <link href="Css-Files/appointment.css" rel="stylesheet">
   <link href="patient-portal.css" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
     integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
@@ -48,7 +48,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <style>
-    .emoji input {
+  .emoji input {
       display: none;
     }
 
@@ -292,9 +292,6 @@
       margin: 20px 100px;
       padding-left: 50px;
       padding-right: 60px;
-
-
-
     }
 
     .textbox input {
@@ -316,127 +313,44 @@
       margin-bottom: 20px;
     }
 
-    #appointment.appointment.section-bg {
-      margin: 0px 280px 100px;
-    }
-
-    #appointment.appointment.section-bg h2 {
-      margin: 0px 115px;
-    }
-
-    form.php-email-form {
-      width: 300px;
-      margin-right: 250px;
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      align-content: flex-start
-    }
-
     .loader--hidden {
       opacity: 0;
       visibility: hidden;
     }
   </style>
   <style>
-    /*Appointment section Styling's to align it to center*/
-    .appointment .container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .appointment form {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 100%;
-      max-width: 600px;
-    }
-
-    .appointment .form-group {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-    }
-
-    .appointment input,
-    .appointment select,
-    .appointment button {
-      width: 100%;
-      max-width: 400px;
-    }
-
-    .appointment .text-center {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-    }
-
-    .appointment button[type="submit"] {
-      width: auto;
-      padding: 10px 20px;
-      display: block;
-      margin: 0 auto;
-    }
-
-    .php-email-form .form-group {
-      margin-bottom: 0;
-    }
-
-    .php-email-form .form-control,
-    .php-email-form .form-select {
-      margin: 0 0 0 0;
-    }
-
-    .php-email-form .row {
-      margin: 0 0 0 0;
-    }
-
-    .php-email-form .col-md-4,
-    .php-email-form .col-md-12 {
-      padding-left: 0;
-      padding-right: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .php-email-form input {
-      margin: 0 0 0 0;
-      padding: 0 0 0 0;
-    }
-
-    /* Remove bottom margin from name and email inputs */
-    #name,
-    #email {
-      margin-bottom: 0;
-    }
-
-    /* Remove top margin from email and location inputs */
-    #email,
-    #location {
-      margin-top: -50px;
-    }
-
-    /* Remove <br> tags if present in HTML */
-    #name+br,
-    #email+br {
-      display: none;
-    }
 
-    /* Optional: Add a small border or visual separator if desired */
-    #name,
-    #email {
+/* Remove bottom margin from name and email inputs */
+#name,
+#email {
+  margin-bottom: 0;
+}
+
+/* Remove top margin from email and location inputs */
+#email,
+#location {
+  margin-top: -50px;
+}
+
+/* Remove <br> tags if present in HTML */
+#name+br,
+#email+br {
+  display: none;
+}
+
+/* Optional: Add a small border or visual separator if desired */
+#name,
+#email {
       border-bottom: none;
-    }
+}
 
-    #email,
-    #location {
+#email,
+#location {
       border-top: 1px solid #ccc;
       /* Adjust color as needed */
-    }
+}
 
-    #progressBar {
+#progressBar {
       position: fixed;
       top: 0;
       left: 0;
@@ -444,7 +358,7 @@
       height: 6px;
       background-color: #3fbcc0;
       z-index: 9999;
-    }
+}
   </style>
   <link rel="stylesheet" href="chatbox.css">
   <!-- Google Fonts Link For Icons chatboxx -->
@@ -861,180 +775,145 @@ <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
       </div>
     </section><!-- End Services Section -->
     <!-- Patient Portal Section -->
-    <section id="patient-portal" class="patient-portal">
-      <div class="container-patientportal">
-        <div class="section-title" id="section-patientportal">
-          <h2>Patient Portal</h2>
-          <p>Access your medical records, lab results, and prescription history securely.</p>
-        </div>
-        <div class="container">
+<section id="patient-portal" class="patient-portal">
+  <div class="container-patientportal">
+    <div class="section-title" id="section-patientportal">
+      <h2>Patient Portal</h2>
+      <p>Access your medical records, lab results, and prescription history securely.</p>
+    </div>
+    <div class="container">
 
-          <!-- Add Login Form for Patient Portal -->
-          <div class="login-box">
-            <div class="avatar">
-              <img src="img/avatar.png" height="220px" width="263px" alt="Avatar">
-            </div>
-            <form>
-              <div class="textbox">
-                <i class="fas fa-user"></i>
-                <input type="text" placeholder="Username" name="username" required>
-              </div>
-              <br>
-              <div class="textbox">
-                <i class="fas fa-lock"></i>
-                <input type="password" placeholder="Password" name="password" required>
-              </div>
-              <br>
-              <input type="submit" class="btn" value="SUBMIT">
-              <div class="register-link">
-                <a href="#">Not registered yet? Register Here</a>
-              </div>
-              <div class="forgot-password" id="forgot-password-patient-portal">
-                <a href="forgot-password.php">Forgot Your Password?</a>
-              </div>
-            </form>
-          </div>
+      <!-- Add Login Form for Patient Portal -->
+      <div class="login-box">
+        <div class="avatar">
+          <img src="img/avatar.png" height="220px" width="263px" alt="Avatar" >
         </div>
+        <form>
+          <div class="textbox">
+            <i class="fas fa-user"></i>
+            <input type="text" placeholder="Username" name="username" required>
+          </div>
+          <br>
+          <div class="textbox">
+            <i class="fas fa-lock"></i>
+            <input type="password" placeholder="Password" name="password" required>
+          </div>
+          <br>
+          <input type="submit" class="btn" value="SUBMIT">
+          <div class="register-link">
+            <a href="#">Not registered yet? Register Here</a>
+          </div>
+          <div class="forgot-password" id="forgot-password-patient-portal">
+            <a href="forgot-password.php">Forgot Your Password?</a>
+          </div>
+        </form>
       </div>
-    </section>
+    </div>
+  </div>
+</section>
 
-    <!-- Appointment Section -->
-    <section id="appointment" class="appointment section-bg">
+<!-- ############# Appointment Section ############# -->
+<section id="appointment" class="appointment section">
 
-      <div class="container" style="border-radius: 10px;">
-        <div class="section-title">
-          <h2>Make an Appointment</h2>
-          <p>We listed the docs, we made you a form. You make us an appointment.</p>
-          <!--<div class="layout">-->
-          <form action="successful_appointment.html" method="post" class="php-email-form">
+  <div class="appointment-container">
+    <div class="section-title">
+      <h2>Make an Appointment</h2>
+      <p>We listed the docs, we made you a form. You make us an appointment.</p>
+    </div>
+    <form id="appointmentForm" action="successful_appointment.html" method="post" class="php-email-form">
+      <!-- Name -->
+      <div class="col-md-6 form-group mt-3">
+        <label for="name">Your Name</label>
+        <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
+      </div>
 
-            <div class="col-md-4 form-group">
-              <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
-            </div>
-            <br>
-            <div class="col-md-4 form-group mt-3 mt-md-0">
-              <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
-            </div>
-            <br>
-            <div class="col-md-4 form-group mt-3">
-              <select name="location" id="location" class="form-select" required>
-                <option value="">Your Location</option>
-                <option value="Mumbai">Mumbai</option>
-                <option value="Delhi">Delhi</option>
-                <option value="Chennai">Chennai</option>
-                <!-- Add more locations as needed -->
-              </select>
-            </div>
-            <!-- Time Slot Section -->
-
-            <div class="col-md-12 form-group mt-3">
-              <select name="time-slot" id="time-slot" class="form-select" required>
-
-                <!-- ############# Appointment Section ############# -->
-                <section id="appointment" class="appointment section-bg">
-                  <div class="container">
-                    <div class="section-title">
-                      <h2>Make an Appointment</h2>
-                      <p>We listed the docs, we made you a form. You make us an appointment.</p><br><br>
-                    </div>
-                    <div class="layout">
-                      <form action="" role="form" class="php-email-form">
-                        <div class="row">
-                          <div class="col-md-4 form-group mt-3">
-                            <input type="date" name="date" class="form-control datepicker" id="date"
-                              placeholder="Appointment Date">
-                            <script>
-                              //To set value of minimum date in calendar
-                              var currentDate = new Date();
-                              var year = currentDate.getFullYear();
-                              var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
-                              var day = currentDate.getDate().toString().padStart(2, '0');
-                              var formattedDate = `${year}-${month}-${day}`;
-                              document.getElementById('date').setAttribute('min', formattedDate);
-                            </script>
-                          </div>
-                          <div class="col-md-4 form-group mt-3">
-                            <select name="age" id="age" class="form-select">
-                              <option value="">Select Age</option>
-                              <option value="Department 1">18 or below</option>
-                              <option value="Department 2">18 to 55</option>
-                              <option value="Department 3">55 above</option>
-                            </select>
-                          </div>
-                          <div class="col-md-4 form-group mt-3">
-                            <select name="doctor" id="doctor" class="form-select">
-                              <option value="">Your Location</option>
-                              <option value="Doctor 1">Mumbai</option>
-                              <option value="Doctor 2">Delhi</option>
-                              <option value="Doctor 3">Chennai</option>
-                            </select>
-                          </div>
-                        </div>
-                        <!-- Time Slot Section -->
-                        <div class="row">
-                          <div class="col-md-12 form-group mt-3">
-                            <select name="time-slot" id="time-slot" class="form-select">
-                              <option value="">Select Time Slot</option>
-                              <option value="9:00 AM">9:00 AM</option>
-                              <option value="11:00 AM">11:00 AM</option>
-                              <option value="2:00 PM">2:00 PM</option>
-                            </select>
-                          </div>
-                          <div class="col-md-12 form-group mt-3">
-                            <select name="hospital" id="hospital" class="form-select">
-                              <option value="">Select Hospital</option>
-                              <option value="Hospital 1">Hospital 1</option>
-                              <option value="Hospital 2">Hospital 2</option>
-                              <option value="Hospital 3">Hospital 3</option>
-                            </select>
-                          </div>
-                          <!-- OPD Section -->
-                          <div class="col-md-12 form-group mt-3">
-
-                            <select name="opd-section" id="opd-section" class="form-select">
-                              <option value="">Select OPD Section</option>
-                              <!-- Populate with available OPD sections -->
-                              <option value="ENT">ENT</option>
-                              <option value="Gynecologist">Gynecologist</option>
-                              <!-- Add more OPD sections as needed -->
-                            </select>
-                          </div>
-                          <div class="col-md-4 form-group mt-3">
-                            <select name="age" id="age" class="form-select" required>
-                              <option value="">Select Age</option>
-                              <option value="18 or below">18 or below</option>
-                              <option value="18 to 55">18 to 55</option>
-                              <option value="55 above">55 above</option>
-                            </select>
-                          </div>
-
-                          <!-- OPD Section -->
-                          <div class="row">
-                            <div class="col-md-12 form-group mt-3">
-                              <select name="opd-section" id="opd-section" class="form-select">
-                                <option value="">Select OPD Section</option>
-                                <!-- Populate with available OPD sections -->
-                                <option value="ENT">ENT</option>
-                                <option value="Gynecologist">Gynecologist</option>
-                                <!-- Add more OPD sections as needed -->
-                              </select>
-                            </div>
-                          </div>
-                          <div class="text-center">
-                            <a href="successful_appointment.html" style="text-decoration: none;">
-                              <button type="submit">Make an Appointment</button>
-                            </a>
-                          </div>
-                        </div>
-
-
-
-                    </div>
-          </form>
-        </div>
+      <!-- Email -->
+      <div class="col-md-6 form-group mt-3">
+        <label for="email">Your Email</label>
+        <input type="email" name="email" class="form-control" id="email" placeholder="Your Email" required>
       </div>
-    </section>
-    <!-- End Appointment Section -->
+      
+      <!-- Date -->
+      <div class="col-md-4 form-group mt-3">
+        <label for="date">Appointment Date</label>
+        <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date" required>
+        <script>
+          // Set minimum date in calendar
+          var currentDate = new Date();
+          var year = currentDate.getFullYear();
+          var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+          var day = currentDate.getDate().toString().padStart(2, '0');
+          var formattedDate = `${year}-${month}-${day}`;
+          document.getElementById('date').setAttribute('min', formattedDate);
+        </script>
+      </div>
+      
+      <!-- Age -->
+      <div class="col-md-4 form-group mt-3">
+        <label for="age">Select Age</label>
+        <select name="age" id="age" class="form-select" required>
+          <option value="">Select Age</option>
+          <option value="18 or below">18 or below</option>
+          <option value="18 to 55">18 to 55</option>
+          <option value="55 above">55 above</option>
+        </select>
+      </div>
+      
+      <!--location-->
+      <div class="col-md-4 form-group mt-3">
+        <label for="location" class="form-label">Your Location</label>
+        <select name="location" id="location" class="form-select" required>
+            <option value="">Choose your location</option>
+            <option value="Mumbai">Mumbai</option>
+            <option value="Delhi">Delhi</option>
+            <option value="Chennai">Chennai</option>
+        </select>
+    </div>
+
+      <!-- Time -->
+      <div class="col-md-6 form-group mt-3">
+        <label for="time-slot">Select Time Slot</label>
+        <input type="time" name="time-slot" id="time-slot" class="form-control" placeholder="Select Time Slot" required>
+      </div>
+
+      <!-- Hospital -->
+      <div class="col-md-6 form-group mt-3">
+        <label for="hospital">Select Hospital</label>
+        <select name="hospital" id="hospital" class="form-select" required>
+          <option value="">Select Hospital</option>
+          <option value="Hospital 1">Hospital 1</option>
+          <option value="Hospital 2">Hospital 2</option>
+          <option value="Hospital 3">Hospital 3</option>
+        </select>
+      </div>
+
+      <!-- OPD Section -->
+      <div class="col-md-12 form-group mt-3">
+        <label for="opd-section">Select OPD</label>
+        <select name="opd-section" id="opd-section" class="form-select" required>
+          <option value="">Select OPD Section</option>
+          <option value="ENT">ENT</option>
+          <option value="Gynecologist">Gynecologist</option>
+          <!-- Add more OPD sections as needed -->
+        </select>
+      </div>
+      
+      <!--submit button-->
+      <div class="text-center mt-4">
+        <button type="submit" class="btn-primary">Submit Appointment</button>
+      </div>
+    </form>
+  </div>
+</section>
+
+<script>
+  document.getElementById('appointmentForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+    window.open('successful_appointment.html', '_blank');
+    document.getElementById('appointmentForm').reset();
+  });
+</script>
+<!-- End Appointment Section -->
 
     <!-- ################# Doctors Section ################# -->
     <section id="doctors" class="doctors">
diff --git a/style.css b/style.css
index 74e5d2f3..26c82153 100644
--- a/style.css
+++ b/style.css
@@ -125,37 +125,6 @@ h6 {
   z-index: -1;
 }
 
-/**
-* Appointment Button *
-*/
-.appointment-btn {
-  /* /* margin-left: 60rem; */
-  margin-top: 1rem;
-  background: #55a5ea;
-  color: #fff;
-  border-radius: 50px;
-  padding: 8px 25px;
-  white-space: nowrap;
-  transition: 0.3s;
-  font-size: 16px;
-  font-weight: 600;
-  /* z-index: -1; */
-  display: inline-block;
-}
-
-.appointment-btn:hover {
-  z-index: -1;
-  background-color: green;
-  color: white;
-}
-
-@media (max-width: 768px) {
-  .appointment-btn {
-    margin: 0 15px 0 0;
-    padding: 6px 18px;
-  }
-}
-
 /*################----Navigation----################*/
 
 
@@ -920,151 +889,6 @@ section {
   }
 }
 
-#appointment.appointment.section-bg {
-  background-color: #022a2d;
-  padding: 50px 0;
-  box-sizing: border-box;
-  width: 90%;
-  max-width: 900px;
-}
-
-/*################----Appointments----################*/
-.layout {
-  background-color: #3fbcc051;
-  border-radius: 30px;
-  padding: 50px;
-  width: 90%;
-  /* Changed width to 90% for better responsiveness */
-  max-width: 1200px;
-  /* Added max-width for better control */
-  margin: 0 auto;
-  padding: 20px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  text-align: center;
-  margin-bottom: 7%;
-  border-radius: 20px;
-  display: grid;
-  width: 30;
-}
-
-.section-title p {
-  color: #fff;
-  text-align: center;
-  font-size: 16px;
-  margin-bottom: 30px;
-
-}
-
-
-/* Form styling */
-.php-email-form {
-  display: flex;
-  flex-wrap: wrap;
-  color: #badaf7;
-
-}
-
-.appointment .php-email-form input,
-.appointment .php-email-form textarea,
-.appointment .php-email-form select {
-  display: block;
-  /* Added display block to ensure full-width elements */
-  margin: 10px auto;
-  /* Centering elements */
-  border-radius: 10px;
-  box-shadow: none;
-  font-size: 14px;
-  background: #badaf7;
-  padding: 10px !important;
-  color: #6c757d;
-  width: 80%;
-  /* Adjusted width for better layout */
-}
-
-.col-md-4.form-group {
-  width: calc(50% - 15px);
-}
-
-.form-group {
-  margin-bottom: 15px;
-
-  width: calc(50% - 15px);
-  color: #badaf7;
-}
-
-.form-group.d-flex {
-  display: flex;
-  flex-wrap: wrap;
-  color: #badaf7;
-}
-
-
-.form-control,
-.form-select {
-  border: 1px solid #ccc;
-  padding: 10px;
-  border-radius: 4px;
-  height: 50px;
-  width: 50%;
-
-}
-
-.php-email-form .form-control,
-.php-email-form .form-select {
-  background-color: #baf7ec;
-}
-
-.form-control:focus,
-.form-select:focus {
-  border-color: #999;
-  outline: none;
-  color: #badaf7;
-}
-
-/* Text area styling */
-.form-group textarea {
-  resize: none;
-}
-
-/* Submit button styling */
-.text-center button {
-  background-color: #55a5ea;
-  color: #000;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: 0.3s ease;
-  margin-left: 120px;
-}
-
-.appointment .php-email-form input:focus,
-.appointment .php-email-form textarea:focus,
-.appointment .php-email-form select:focus {
-  border-color: rgba(63, 188, 192, 0.651);
-}
-
-.appointment .php-email-form button[type="submit"] {
-  display: block;
-  margin: 20px auto;
-  background: hsla(182, 51%, 50%, 0.651);
-  border: 0;
-  padding: 10px 35px;
-  color: #fff;
-  transition: 0.4s;
-  border-radius: 50px;
-
-}
-
-.text-center button:hover {
-  background-color: #4bb6b7;
-}
-
-
-
-
-
-
 /*################----Doctors----################*/
 
 .doctors {

From 620845f71ea7c741518e27c8bb3586fb13f66064 Mon Sep 17 00:00:00 2001
From: Radhika Malpani <163530398+RadhikaMalpani1702@users.noreply.github.com>
Date: Sun, 7 Jul 2024 02:59:41 +0530
Subject: [PATCH 2/4] fixed navigation link (#768)

Co-authored-by: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com>
---
 Html-Files/news.html | 43 ++++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/Html-Files/news.html b/Html-Files/news.html
index 570957e0..f52369dd 100644
--- a/Html-Files/news.html
+++ b/Html-Files/news.html
@@ -444,15 +444,15 @@
       <nav class="nav_menu">
 
         <ul class="nav_link">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="Html-Files/news.html">News</a></li>
-          <a href="dex.html">Service</a>
-          <li><a href="#patient-portal">Patient Portal</a></li>
-          <li><a href="#doctors">Doctor</a></li>
-          <li><a href="Html-Files/contact.html">Contact us</a></li>
-
-          <a href="login.html">Sign in/Sign up</a>
+          <li><a href="/index.html">Home</a></li>
+          <li><a href="/index.html/#about">About</a></li>
+          <li><a href="/Html-Files/news.html">News</a></li>
+          <a href="/dex.html">Service</a>
+          <li><a href="/index.html#patient-portal">Patient Portal</a></li>
+          <li><a href="/index.html#doctors">Doctor</a></li>
+          <li><a href="/Html-Files/contact.html">Contact us</a></li>
+
+          <a href="/login.html">Sign in/Sign up</a>
           <a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
 
         </ul>
@@ -632,32 +632,33 @@ <h3>RapiDoc's Research Team Publishes Groundbreaking Study on Preventive Healthc
                 <section>
                     <h4>Quick Links</h4><br>
                       <ul class="links">
-                        <li><a href="./index.html">Home</a></li>
-                        <li><a href="#about">About Us</a></li>
-                        <li><a href="./Html-Files/contact.html">Contact Us</a></li>
-                        <li><a href="#services">Services</a></li>
-                        <li><a href="#doctors">Doctors</a></li>
-                        <li><a href="./faq.html">FAQ</a></li>
+                        <li><a href="/index.html">Home</a></li>
+                        <li><a href="/index.html#about">About Us</a></li>
+                        <li><a href="/Html-Files/contact.html">Contact Us</a></li>
+                        <li><a href="/index.html#services">Services</a></li>
+                        <li><a href="/index.html#doctors">Doctors</a></li>
+                        <li><a href="/faq.html">FAQ</a></li>
                     </ul>
                 </section>
                 <section>
                   <h4>Explore</h4><br>
                   <ul class="links">
-                    <li><a href="#">Appointment</a></li>
-                    <li><a href="#">Patient Portal</a></li>
-                    <li><a href="#">Login account</a></li>
+                    <li><a href="/index.html#appointment">Appointment</a></li>
+                    <li><a href="/index.html#patient-portal">Patient Portal</a></li>
+                    <li><a href="/login.html">Login account</a></li>
                     <li><a href="#">Helplines</a></li>
-                    <li><a href="#">Location</a></li>
+                    <li><a href="/index.html#contact">Location</a></li>
                   </ul>
                 </section>
                 <section>
                   <h4>Legal</h4><br>
                   <ul class="links">
                     <li><a href="#">Customer Agreement</a></li>
-                    <li><a href="#">Privacy Policy</a></li>
+                    <li><a href="/Html-Files/privacy_policy_page.html">Privacy Policy</a></li>
+                    <li><a href="/Html-Files/terms_and_conditions.html">Terms and Conditions</a></li>
                     <li><a href="#">GDPR</a></li>
                     <li><a href="#">Security</a></li>
-                    <li><a href="#">Testimonials</a></li>
+                    <li><a href="/index.html#test">Testimonials</a></li>
                   </ul>
                 </section>
                 <section class="footer-col">

From 3ff5dbc6ca4d632d250bff5a61019a44c3fe761b Mon Sep 17 00:00:00 2001
From: Pradnya Gaitonde <116059908+PradnyaGaitonde@users.noreply.github.com>
Date: Sun, 7 Jul 2024 03:00:12 +0530
Subject: [PATCH 3/4] Github and location icon on contact page clickable (#771)

Make the github icon and location icon in contact page clickable

Co-authored-by: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com>
---
 Html-Files/contact.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Html-Files/contact.html b/Html-Files/contact.html
index c84a7ede..991717db 100644
--- a/Html-Files/contact.html
+++ b/Html-Files/contact.html
@@ -161,7 +161,7 @@ <h2>Contact Info</h2>
                     <ul class="info">
                         <li>
                             <span><img src="images/location.png"></span>
-                            <span>IGDTUW, Delhi</span>
+                            <span><a href="https://maps.app.goo.gl/c7YtMSCaWVQzoXX38">IGDTUW, Delhi</a></span>
                         </li>
                         <li>
                             <span><img src="images/mail.png"></span>
@@ -169,7 +169,7 @@ <h2>Contact Info</h2>
                         </li>
                         <li>
                             <span><img src="images/call.png"></span>
-                            <span>+91 1234567890</span>
+                            <span>+91-1234567890</span>
                         </li>
                     </ul>
                 </div>
@@ -178,7 +178,7 @@ <h2>Contact Info</h2>
                     <li class="social-icon"><a href="https://www.twitter.com" target="_blank"><img src="images/x-twitter.svg"></a></li>
                      <li><a href="https://www.linkedin.com" target="_blank"><img src="images/5.png"></a></li>
                     <li><a href="https://www.instagram.com" target="_blank"><img src="images/3.png"></a></li>
-                    <li><a href="https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-" target="_blank"></a><img src="images/logo.png" style="width: 25px;"></a></li>
+                    <li><a href="https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-" target="_blank"><img src="images/logo.png" style="width: 25px;"></a></li>
                     <!-- <li><a href="#"><img src="images/phone.png"></a></li>
                     <li><a href=""><img src="images/mail2.png"></a></li> -->
 

From 632950a05feb3889fdfb838de2958a67c63e0344 Mon Sep 17 00:00:00 2001
From: Mastan Sayyad <101971980+MastanSayyad@users.noreply.github.com>
Date: Sun, 7 Jul 2024 03:46:15 +0530
Subject: [PATCH 4/4] Fixed Alignment Issues for Some Sections (#772)

* Update index.html

* Update

---------

Co-authored-by: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com>
---
 Css-Files/testimonial.css |   3 +-
 index.html                | 385 ++++++++++++++++++++++----------------
 2 files changed, 230 insertions(+), 158 deletions(-)

diff --git a/Css-Files/testimonial.css b/Css-Files/testimonial.css
index 807a036b..58e5cfb9 100644
--- a/Css-Files/testimonial.css
+++ b/Css-Files/testimonial.css
@@ -12,7 +12,8 @@
     color: white !important;
     font-size: 48px;
     margin-bottom: 2rem;
-  }
+    margin-top: 40px;
+}
   
   .rating__star {
     font-size: 20px;
diff --git a/index.html b/index.html
index 94fcd749..9da875aa 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,6 @@
   <link href="glightbox/css/glightbox.min.css" rel="stylesheet">
   <link href="remixicon/remixicon.css" rel="stylesheet">
   <link href="swiper/swiper-bundle.min.css" rel="stylesheet">
-  <link href="Css-Files/appointment.css" rel="stylesheet">
   <link href="patient-portal.css" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
     integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
@@ -48,7 +47,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <style>
-  .emoji input {
+    .emoji input {
       display: none;
     }
 
@@ -313,44 +312,131 @@
       margin-bottom: 20px;
     }
 
+    #appointment.appointment.section-bg {
+      margin: 0px 280px 100px;
+    }
+
+    #appointment.appointment.section-bg h2 {
+      margin: 0px 115px;
+    }
+
+    form.php-email-form {
+      width: 300px;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-content: flex-start
+    }
+
     .loader--hidden {
       opacity: 0;
       visibility: hidden;
     }
   </style>
   <style>
+   
 
-/* Remove bottom margin from name and email inputs */
-#name,
-#email {
-  margin-bottom: 0;
-}
+    /* Appointment section Styling to align it to center */
+    .appointment .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      /* Center container contents */
+      border-radius: 10px;
+      margin: auto;
+    }
 
-/* Remove top margin from email and location inputs */
-#email,
-#location {
-  margin-top: -50px;
-}
+    .appointment form {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      /* Center form contents */
+      width: 100%;
+      max-width: 500px;
+    }
 
-/* Remove <br> tags if present in HTML */
-#name+br,
-#email+br {
-  display: none;
-}
+    .appointment .form-group {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      margin-bottom: 15px;
+    }
+
+    .appointment input,
+    .appointment select,
+    .appointment button {
+      width: 100%;
+      max-width: 500px;
+      border-radius: 10px;
+    }
 
-/* Optional: Add a small border or visual separator if desired */
-#name,
-#email {
+    .appointment .text-center {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+    }
+
+    .appointment button[type="submit"] {
+      width: auto;
+      padding: 10px 20px;
+      display: block;
+      margin: 0 auto;
+    }
+
+    .php-email-form .form-control,
+    .php-email-form .form-select {
+      margin: 0;
+      padding: 10px;
+    }
+
+    .php-email-form .form-group,
+    .php-email-form .row {
+      margin: 0;
+      padding: 10px;
+    }
+
+    #name,
+    #email {
+      margin-bottom: 10px;
       border-bottom: none;
-}
+      height: 7vh;
+    }
 
-#email,
-#location {
+    #email,
+    #location {
       border-top: 1px solid #ccc;
       /* Adjust color as needed */
+      margin-top: 0;
+    }
+
+    /* Remove <br> tags if present in HTML */
+    #name+br,
+    #email+br {
+      display: none;
+    }
+
+    .section-bg {
+    background-color: #1c413b;
+    width: 700px;
+    padding: 40px;
+}
+
+#appointment.appointment.section-bg {
+    margin: auto;
 }
 
-#progressBar {
+select {
+    padding: 1px;
+    background-color: #f8f8f8;
+    color: #374151;
+    height: 7vh;
+    width: 17vh;
+}
+
+
+
+    #progressBar {
       position: fixed;
       top: 0;
       left: 0;
@@ -358,7 +444,12 @@
       height: 6px;
       background-color: #3fbcc0;
       z-index: 9999;
-}
+    }
+
+    .contact .php-email-form {
+      width: 300%;
+      background: #000;
+    }
   </style>
   <link rel="stylesheet" href="chatbox.css">
   <!-- Google Fonts Link For Icons chatboxx -->
@@ -775,145 +866,126 @@ <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
       </div>
     </section><!-- End Services Section -->
     <!-- Patient Portal Section -->
-<section id="patient-portal" class="patient-portal">
-  <div class="container-patientportal">
-    <div class="section-title" id="section-patientportal">
-      <h2>Patient Portal</h2>
-      <p>Access your medical records, lab results, and prescription history securely.</p>
-    </div>
-    <div class="container">
+    <section id="patient-portal" class="patient-portal">
+      <div class="container-patientportal">
+        <div class="section-title" id="section-patientportal">
+          <h2>Patient Portal</h2>
+          <p>Access your medical records, lab results, and prescription history securely.</p>
+        </div>
+        <div class="container">
+
+          <!-- Add Login Form for Patient Portal -->
+          <div class="login-box">
+            <div class="avatar">
+              <img src="img/avatar.png" height="220px" width="263px" alt="Avatar">
+            </div>
+            <form>
+              <div class="textbox">
+                <i class="fas fa-user"></i>
+                <input type="text" placeholder="Username" name="username" required>
+              </div>
+              <br>
+              <div class="textbox">
+                <i class="fas fa-lock"></i>
+                <input type="password" placeholder="Password" name="password" required>
+              </div>
+              <br>
+              <input type="submit" class="btn" value="SUBMIT">
+              <div class="register-link">
+                <a href="#">Not registered yet? Register Here</a>
+              </div>
+              <div class="forgot-password" id="forgot-password-patient-portal">
+                <a href="forgot-password.php">Forgot Your Password?</a>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
 
-      <!-- Add Login Form for Patient Portal -->
-      <div class="login-box">
-        <div class="avatar">
-          <img src="img/avatar.png" height="220px" width="263px" alt="Avatar" >
+
+    <!-- Appointment Section -->
+    <section id="appointment" class="appointment section-bg">
+      <div class="container" style="border-radius: 10px;">
+        <div class="section-title">
+          <h2>Make an Appointment</h2>
+          <p>We listed the docs, we made you a form. You make us an appointment.</p>
         </div>
-        <form>
-          <div class="textbox">
-            <i class="fas fa-user"></i>
-            <input type="text" placeholder="Username" name="username" required>
+        <form action="successful_appointment.html" method="post" class="php-email-form">
+          <div class="form-group">
+            <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
+          </div>
+          <div class="form-group">
+            <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
+          </div>
+          <div class="form-group">
+            <select name="location" id="location" class="form-select" required>
+              <option value="">Your Location</option>
+              <option value="Mumbai">Mumbai</option>
+              <option value="Delhi">Delhi</option>
+              <option value="Chennai">Chennai</option>
+            </select>
           </div>
-          <br>
-          <div class="textbox">
-            <i class="fas fa-lock"></i>
-            <input type="password" placeholder="Password" name="password" required>
+          <div class="form-group">
+            <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date"
+              required>
+            <script>
+              // To set value of minimum date in calendar
+              var currentDate = new Date();
+              var year = currentDate.getFullYear();
+              var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+              var day = currentDate.getDate().toString().padStart(2, '0');
+              var formattedDate = `${year}-${month}-${day}`;
+              document.getElementById('date').setAttribute('min', formattedDate);
+            </script>
           </div>
-          <br>
-          <input type="submit" class="btn" value="SUBMIT">
-          <div class="register-link">
-            <a href="#">Not registered yet? Register Here</a>
+          <div class="form-group">
+            <select name="age" id="age" class="form-select" required>
+              <option value="">Select Age</option>
+              <option value="18 or below">18 or below</option>
+              <option value="18 to 55">18 to 55</option>
+              <option value="55 above">55 above</option>
+            </select>
           </div>
-          <div class="forgot-password" id="forgot-password-patient-portal">
-            <a href="forgot-password.php">Forgot Your Password?</a>
+          <div class="form-group">
+            <select name="doctor" id="doctor" class="form-select" required>
+              <option value="">Select Doctor</option>
+              <option value="Doctor 1">Doctor 1</option>
+              <option value="Doctor 2">Doctor 2</option>
+              <option value="Doctor 3">Doctor 3</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <select name="time-slot" id="time-slot" class="form-select" required>
+              <option value="">Select Time Slot</option>
+              <option value="9:00 AM">9:00 AM</option>
+              <option value="11:00 AM">11:00 AM</option>
+              <option value="2:00 PM">2:00 PM</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <select name="hospital" id="hospital" class="form-select" required>
+              <option value="">Select Hospital</option>
+              <option value="Hospital 1">Hospital 1</option>
+              <option value="Hospital 2">Hospital 2</option>
+              <option value="Hospital 3">Hospital 3</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <select name="opd-section" id="opd-section" class="form-select" required>
+              <option value="">Select OPD Section</option>
+              <option value="ENT">ENT</option>
+              <option value="Gynecologist">Gynecologist</option>
+            </select>
+          </div>
+          <div class="text-center">
+            <button type="submit">Make an Appointment</button>
           </div>
         </form>
       </div>
-    </div>
-  </div>
-</section>
-
-<!-- ############# Appointment Section ############# -->
-<section id="appointment" class="appointment section">
-
-  <div class="appointment-container">
-    <div class="section-title">
-      <h2>Make an Appointment</h2>
-      <p>We listed the docs, we made you a form. You make us an appointment.</p>
-    </div>
-    <form id="appointmentForm" action="successful_appointment.html" method="post" class="php-email-form">
-      <!-- Name -->
-      <div class="col-md-6 form-group mt-3">
-        <label for="name">Your Name</label>
-        <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
-      </div>
-
-      <!-- Email -->
-      <div class="col-md-6 form-group mt-3">
-        <label for="email">Your Email</label>
-        <input type="email" name="email" class="form-control" id="email" placeholder="Your Email" required>
-      </div>
-      
-      <!-- Date -->
-      <div class="col-md-4 form-group mt-3">
-        <label for="date">Appointment Date</label>
-        <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date" required>
-        <script>
-          // Set minimum date in calendar
-          var currentDate = new Date();
-          var year = currentDate.getFullYear();
-          var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
-          var day = currentDate.getDate().toString().padStart(2, '0');
-          var formattedDate = `${year}-${month}-${day}`;
-          document.getElementById('date').setAttribute('min', formattedDate);
-        </script>
-      </div>
-      
-      <!-- Age -->
-      <div class="col-md-4 form-group mt-3">
-        <label for="age">Select Age</label>
-        <select name="age" id="age" class="form-select" required>
-          <option value="">Select Age</option>
-          <option value="18 or below">18 or below</option>
-          <option value="18 to 55">18 to 55</option>
-          <option value="55 above">55 above</option>
-        </select>
-      </div>
-      
-      <!--location-->
-      <div class="col-md-4 form-group mt-3">
-        <label for="location" class="form-label">Your Location</label>
-        <select name="location" id="location" class="form-select" required>
-            <option value="">Choose your location</option>
-            <option value="Mumbai">Mumbai</option>
-            <option value="Delhi">Delhi</option>
-            <option value="Chennai">Chennai</option>
-        </select>
-    </div>
-
-      <!-- Time -->
-      <div class="col-md-6 form-group mt-3">
-        <label for="time-slot">Select Time Slot</label>
-        <input type="time" name="time-slot" id="time-slot" class="form-control" placeholder="Select Time Slot" required>
-      </div>
-
-      <!-- Hospital -->
-      <div class="col-md-6 form-group mt-3">
-        <label for="hospital">Select Hospital</label>
-        <select name="hospital" id="hospital" class="form-select" required>
-          <option value="">Select Hospital</option>
-          <option value="Hospital 1">Hospital 1</option>
-          <option value="Hospital 2">Hospital 2</option>
-          <option value="Hospital 3">Hospital 3</option>
-        </select>
-      </div>
-
-      <!-- OPD Section -->
-      <div class="col-md-12 form-group mt-3">
-        <label for="opd-section">Select OPD</label>
-        <select name="opd-section" id="opd-section" class="form-select" required>
-          <option value="">Select OPD Section</option>
-          <option value="ENT">ENT</option>
-          <option value="Gynecologist">Gynecologist</option>
-          <!-- Add more OPD sections as needed -->
-        </select>
-      </div>
-      
-      <!--submit button-->
-      <div class="text-center mt-4">
-        <button type="submit" class="btn-primary">Submit Appointment</button>
-      </div>
-    </form>
-  </div>
-</section>
+    </section>
+    <!-- End Appointment Section -->
 
-<script>
-  document.getElementById('appointmentForm').addEventListener('submit', function(event) {
-    event.preventDefault();
-    window.open('successful_appointment.html', '_blank');
-    document.getElementById('appointmentForm').reset();
-  });
-</script>
-<!-- End Appointment Section -->
 
     <!-- ################# Doctors Section ################# -->
     <section id="doctors" class="doctors">
@@ -1021,8 +1093,7 @@ <h2>Contact</h2>
             }
           </style>
         </div><br>
-        <div class="row mt-2"
-          style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-around;">
+        <div class="row mt-2" style="display: flex; flex-direction: row; align-items: stretch;">
           <div class="col-lg-4">
             <div class="info">
               <div class="address">