Merge pull request #833 from 4F24L/review-form

[FIX] Review form fixed

index.html

@@ -1543,7 +1543,7 @@ <h4>Traveller</h4>
 
 
   <section id="reviews" class="reviews-section">
-    <div class="revieww">
+    <div class="revieww">  
       <div class="review-form">
         <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
         <p class="review-p">
@@ -1552,10 +1552,10 @@ <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
           and help fellow travelers make informed decisions.
         </p>
 
-        <div style="margin-top: 20px">
+        <div style="display: flex;">
           <form class="form" id="reviewForm">
             <label for="name" id="darkbtn">Your Name:</label>
-            <input type="text" id="name" name="name" required required pattern="[a-zA-Z ]+"
+            <input type="text" id="name" name="name" required pattern="[a-zA-Z ]+"
             oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
             oninput="this.setCustomValidity('')"/>
 

style.css

@@ -1506,21 +1506,18 @@ body.light-mode {
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   margin-bottom: 30px;
+  margin-top: 30px;
   display: flex;
   flex-direction: column;
-  width: 40vw;
+  width: 70vw;
   align-items: center;
   justify-items: center;
   transition: transform 0.3s ease; /* Transition for hover effect */
 }
 
-.review-form:hover {
-  transform: scale(1.02); /* Scale effect on hover */
-}
-
 .form {
-  margin-top: 10px;
-  width: 30vw;
+  /* margin-top: 100px; */
+  width: 60vw;
 }
 
 .review-form h3 {
@@ -1530,9 +1527,9 @@ body.light-mode {
 
 .review-form label {
   display: block;
-  margin-bottom: 5px;
+  /* margin-bottom: 5px; */
   font-weight: bold;
-  font-size: 15px;
+  font-size: 1.5rem;
 }
 
 .review-form input,
@@ -1541,9 +1538,9 @@ body.light-mode {
   min-width: 100%;
   max-width: 100%;
   font-weight: 600;
-  padding: 10px;
+  /* padding: 10px; */
   font-size: 15px;
-  margin-bottom: 15px;
+  /* margin-bottom: 15px; */
   border: 1px solid #ccc;
   border-radius: 5px;
   transition: border-color 0.3s ease; /* Transition for input fields */