Merge pull request #251 from PriyaGhosal/revert-192-editReviewSection

Revert "Conflicts resolved in Review n Rating Section"
PriyaGhosal · Oct 8, 2024 · 417c9c3 · 417c9c3
2 parents be0c9d4 + cd2c36e
commit 417c9c3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 66 deletions.
diff --git a/index.html b/index.html
@@ -528,16 +528,16 @@ <h2>Contact US</h2>
     </main>
     <!-- ratings by user -->
     <section id="reviews" class="reviews-section">
-      <!-- <div class="reviews_h2"><h2> Reviews & Ratings</h2></div> -->
-
-
-
-      <div class="review-form">
-        <h3 class="review-h3">Rate your experience</h3>
-        <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>
-        <form class="form">
+      <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 />
 
@@ -563,9 +563,7 @@ <h3 class="review-h3">Rate your experience</h3>
             placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"
           ></textarea>
 
-          <div class="review-form-button">
-            <button type="submit">Send</button>
-          </div>
+          <button type="submit">Submit Review</button>
         </form>
       </div>
 

diff --git a/style.css b/style.css
@@ -595,57 +595,23 @@ body.dark-mode {
 }
 
 .reviews-section h2 {
-  font-size:xx-large;
-
-
-
-}
-.reviews_h2{
-  border:2px solid blue;
-  padding: 10px;
-  border-radius: 5px;
-  width:max-content;
-  background-color: #007BFF;
-  color:#e7f0fd
-}
-#reviews{
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap:10px;
-  background-color: #F0F8FF;
+  font-size: 2em;
+  margin-bottom: 20px;
 }
+
 .review-form {
-  background-color: #cce9f9;
-    padding:30px;
+  background: white;
+  padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   margin-bottom: 30px;
-  margin-top:20px;
-  width:40vw;
-  display: flex;
-  flex-direction: column;
-
 }
 
-.review-h3 {
-  font-size: 35px;
+.review-form h3 {
+  font-size: 1.5em;
   margin-bottom: 15px;
-  text-align: center;
-  font-weight: bold; /* Keep only this font-weight */
 }
 
-.review-form p{
-  font-size: 14px;
-  font-style:italic;
-  padding:20px;
-  color: #3A1078;
-  line-height:1.5em;
-}
-.form{
-  width:35vw;
-  padding:20px;
-}
 .review-form label {
   display: block;
   margin-bottom: 5px;
@@ -661,27 +627,22 @@ body.dark-mode {
   padding: 10px;
   font-size: 15px;
   margin-bottom: 15px;
-  border: 1px solid #d2d8f3;
-  border-radius: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
 }
 
-
 .review-form button {
-  background-color: #F7D160;
-  color:black;
-  padding: 10px 30px;
+  background-color: #007bff;
+  color: white;
+  padding: 10px 15px;
   border: none;
-  border-radius: 20px;
+  border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s;
-  font-size:medium;
 }
 
-.review-form-button{
-  text-align: center;
-}
 .review-form button:hover {
-  box-shadow: #003d80;
+  background-color: #0056b3;
 }
 
 .reviews-list {