Merge pull request #140 from StutiRajput07/main

Enhanced UI of Patient Portal section

index.html

@@ -294,18 +294,18 @@ <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
     <div class="container">
 
       <div class="section-title">
-        <h2>Patient Portal</h2>
+        <h1>Patient Portal</h1>
         <p>Access your medical records, lab results, and prescription history securely.</p>
       </div>
 
       <!-- Add Login Form for Patient Portal -->
       <div class="login-form">
         <form action="login.php" method="post">
           <div class="form-group">
-            <input type="email" class="form-control" name="email" placeholder="Your Email" required>
+            <input type="email" class="form-control2" name="email" placeholder="Your Email" required>
           </div>
           <div class="form-group">
-            <input type="password" class="form-control" name="password" placeholder="Your Password" required>
+            <input type="password" class="form-control2" name="password" placeholder="Your Password" required>
           </div>
           <div class="text-center"><button type="submit">Login</button></div>
         </form>

style.css

@@ -1363,4 +1363,76 @@ footer {
 .back-to-top.active {
   visibility: visible;
   opacity: 1;
+
+
+
+/* Style for pateint portal  */
+/* -----***************************************-----  */
+ .patient-portal {
+  width: 90%;
+  max-width: 600px; /* Maximum width of the container */
+  margin: 0 auto; /* Centers the container */
+   padding: 20px; 
+   box-shadow: 0 4px 8px rgba(0,0,0,0.1);  
+   background-color: white;
+   text-align: center; 
+   margin-bottom: 7%;
+} 
+/* Section title styling */
+.section-title h1 {
+  color: #29888a; /* Sets a blue color for the heading */
+  text-align: center;
+}
+.section-title p {
+  text-align: center;
+  color: #000;
+  font-size: 16px;
+}
+/* Form styling */
+.form-group {
+  margin-bottom: 15px; /* Adds bottom margin for form-group */
+}
+.form-control2 {
+  width: 60%; /* Full width */
+  padding: 10px;
+  border: 1px solid #ccc; /* Light gray border */
+  border-radius: 4px; /* Rounded corners */
+  text-align: center;
+}
+button {
+  background-color: #29888a; /* Blue background for the button */
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #1c413b; /* Darker blue on hover */
+}
+
+/* Forgot password link styling */
+.forgot-password {
+  text-align: center; /* Center-aligns the forgot password link */
+  margin-top: 10px;
+}
+.forgot-password a {
+  color: #29888a;
+  text-decoration: none;
 }
+.forgot-password a:hover {
+  text-decoration: underline;
+}
+/* Text centering */
+.text-center {
+  text-align: center; /* Centers the login button */
+}
+.login-form {
+  width: 100%;
+  margin: auto 0 ;
+  text-align: center;
+}
+
+/* -----***************************************-----  */
+
+