From 43c85fdbde7d6dd1807f6a9aff283cdaa62a3a61 Mon Sep 17 00:00:00 2001
From: Bhumika <sharmabhmi@gmail.com>
Date: Tue, 8 Oct 2024 10:58:24 +0530
Subject: [PATCH] UI ENhanced

---
 index.html | 77 ++++++++++++++++++++++++++++--------------------------
 style.css  | 46 +++++++++++++++++++++++++-------
 2 files changed, 76 insertions(+), 47 deletions(-)

diff --git a/index.html b/index.html
index 8ac9e068..4ca9fcc7 100644
--- a/index.html
+++ b/index.html
@@ -528,43 +528,46 @@ <h2>Contact US</h2>
     </main>
     <!-- ratings by user -->
     <section id="reviews" class="reviews-section">
-      <h2>User Reviews and Ratings</h2>
-      <p>
-        Read what others have to say about their experiences with various
-        destinations, hotels, flights, and activities. Share your own reviews
-        and help fellow travelers make informed decisions.
-      </p>
-
-      <div class="review-form" style="margin-top: 20px">
-        <h1 style="margin-bottom: 10px">Leave a Review</h1>
-        <form>
-          <label for="name">Your Name:</label>
-          <input type="text" id="name" name="name" required />
-
-          <label for="destination">Destination/Service:</label>
-          <input type="text" id="destination" name="destination" required />
-
-          <label for="rating">Rating:</label>
-          <select id="rating" name="rating">
-            <option value="5">⭐⭐⭐⭐⭐</option>
-            <option value="4">⭐⭐⭐⭐</option>
-            <option value="3">⭐⭐⭐</option>
-            <option value="2">⭐⭐</option>
-            <option value="1">⭐</option>
-          </select>
-
-          <label for="review">Your Review:</label>
-          <textarea id="review" name="review" rows="4" required></textarea>
-          <label for="complaint">Complaint (if any):</label>
-          <textarea
-            id="complaint"
-            name="complaint"
-            rows="3"
-            placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"
-          ></textarea>
-
-          <button type="submit">Submit Review</button>
-        </form>
+      <div class="revieww">
+      <div class="review-form">
+        <h2>Rate your experience</h2>
+        <p class="review-p"> 
+          Read what others have to say about their experiences with various
+          destinations, hotels, flights, and activities. Share your own reviews
+          and help fellow travelers make informed decisions.
+        </p>
+  
+        <div  style="margin-top: 20px">
+          <form class="form">
+            <label for="name">Your Name:</label>
+            <input type="text" id="name" name="name" required />
+  
+            <label for="destination">Destination/Service:</label>
+            <input type="text" id="destination" name="destination" required />
+  
+            <label for="rating">Rating:</label>
+            <select id="rating" name="rating">
+              <option value="5">⭐⭐⭐⭐⭐</option>
+              <option value="4">⭐⭐⭐⭐</option>
+              <option value="3">⭐⭐⭐</option>
+              <option value="2">⭐⭐</option>
+              <option value="1">⭐</option>
+            </select>
+  
+            <label for="review">Your Review:</label>
+            <textarea id="review" name="review" rows="4" required></textarea>
+            <label for="complaint">Complaint (if any):</label>
+            <textarea
+              id="complaint"
+              name="complaint"
+              rows="3"
+              placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"
+            ></textarea>
+  
+<div class="form-button">            <button type="submit">Send</button>
+</div>          </form>
+        </div>
+      </div>
       </div>
 
       <div class="reviews-list">
diff --git a/style.css b/style.css
index 5a624c39..be09b81c 100644
--- a/style.css
+++ b/style.css
@@ -588,25 +588,48 @@ body.dark-mode {
   border: 1px solid #0056b3; /* Darker blue border */
 }
 
+
 /* user rating */
 .reviews-section {
   padding: 50px;
-  background-color: #f4f4f4;
+  background-color: #F0F8FF;
+ 
+}
+.revieww{
+  display: flex;
+justify-content: center;
+
+}
+
+.review-p{
+  font-size:small;
+  color:#543db0;
+  font-style: italic;
+  font-weight: 500;
 }
 
 .reviews-section h2 {
-  font-size: 2em;
+  font-size: 3em;
   margin-bottom: 20px;
 }
 
 .review-form {
-  background: white;
-  padding: 20px;
+  background: #CCE9F9;
+  padding: 30px;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   margin-bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  width:40vw;
+  align-items: center;
+  justify-items: center;
 }
 
+.form{
+  margin-top: 10px;
+  width:30vw;
+}
 .review-form h3 {
   font-size: 1.5em;
   margin-bottom: 15px;
@@ -632,17 +655,20 @@ body.dark-mode {
 }
 
 .review-form button {
-  background-color: #007bff;
-  color: white;
-  padding: 10px 15px;
+  background-color: #F7D160;
+  padding: 10px 30px;
   border: none;
-  border-radius: 5px;
+  border-radius: 30px;
   cursor: pointer;
   transition: background-color 0.3s;
+  color:black;
+  font-size:14px;
+  
 }
 
-.review-form button:hover {
-  background-color: #0056b3;
+.form-button{
+  text-align: center;
+  
 }
 
 .reviews-list {