SUCCESSFULLY ENHANCED THE RATING FORM OF THE SITE

index.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="style.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
     <link
       href="https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@400;500&display=swap"
       rel="stylesheet"
@@ -276,15 +277,15 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
     <ul id="nav-list">
       <!-- Close button for dropdown -->
       <span class="dropdown-close-btn" id="closeBtn">×</span>
-      <li><a href="#home" class="navhover">Home</a></li>
-      <li><a href="#locations" class="navhover">Location</a></li>
-      <li><a href="#benefits" class="navhover">Benefits</a></li>
-      <li><a href="#About" class="navhover">About</a></li>
-      <li><a href="#itineraries" class="navhover">Travel Itineraries</a></li>
+      <li><i class='bx bx-home-alt'></i><a href="#home" class="navhover">Home</a></li>
+      <li><i class='bx bxs-location-plus' style='color:#ffffff' ></i><a href="#locations" class="navhover">Location</a></li>
+      <li><i class='bx bxs-down-arrow-circle' style='color:#ffffff' ></i><a href="#benefits" class="navhover">Benefits</a></li>
+      <li><i class='bx bxs-objects-vertical-top' style='color:#ffffff' ></i><a href="#About" class="navhover">About</a></li>
+      <li><i class='bx bxs-book-open' style='color:#ffffff' ></i><a href="#itineraries" class="navhover">Travel Itineraries</a></li>
 
-      <li><a href="#contact" class="navhover">Contact</a></li>
-      <li><a href="#reviews" class="navhover">Reviews</a></li>
-      <li><a href="auth.html" class="navhover">Sign In</a></li>
+      <li><i class='bx bxs-contact' style='color:#ffffff' ></i><a href="#contact" class="navhover">Contact</a></li>
+      <li><i class='bx bxs-donate-heart' style='color:#ffffff' ></i><a href="#reviews" class="navhover">Reviews</a></li>
+      <li><i class='bx bx-log-in-circle' style='color:#ffffff' ></i><a href="auth.html" class="navhover">Sign In</a></li>
 
     </ul>
 
@@ -845,7 +846,13 @@ <h2>Thank You!</h2>
       </div>
     </div>
   </main>
+
+
   <section id="reviews" class="reviews-section">
+    <div class="image">
+      <img src="/img/rating.png" alt="">
+    </div>
+
     <div class="review">
       <div class="review-form">
         <h2>Rate your experience</h2>

script.js

@@ -468,3 +468,22 @@ function googleTranslateElementInit() {
     }, 'google_translate_element');
 }
 
+//----------------------rating------------------
+const stars = document.querySelectorAll('.rating i');
+
+stars.forEach((star, idx) => {
+  star.addEventListener('click', () => {
+    stars.forEach((s, i) => {
+      if (i <= idx) {
+        s.classList.add('active');
+      } else {
+        s.classList.remove('active');
+      }
+    });
+  });
+});
+
+document.getElementById('feedbackForm').addEventListener('submit', function(e) {
+  e.preventDefault();
+  alert('Feedback submitted successfully!');
+});

style.css

@@ -211,7 +211,7 @@ button {
 nav {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-around;
   max-width: 1200px; /* Limit the width for better centering */
   width: 100%; /* Ensure nav takes full width */
   margin: 0 auto; /* Center the nav */
@@ -225,18 +225,25 @@ nav {
 #nav-list {
   display: flex;
   gap: 20px;
+  align-items: center;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
+#nav-list li{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 #nav-list li a {
   color: white;
   text-decoration: none;
   font-weight: bold;
-
 }
 
+
 .hamburger {
   display: none; /* Hidden on larger screens */
   background: none;
@@ -1097,12 +1104,19 @@ body.dark-mode {
 .reviews-section {
   padding: 50px;
   background-color: #F0F8FF;
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+.reviews-section:hover{
+  box-shadow:inset 0px 0px 15px rgb(76, 137, 202);
 }
+
 .review{
   display: flex;
 justify-content: center;
-
 }
 
 .review-p{
@@ -1133,10 +1147,22 @@ justify-content: center;
 .form{
   margin-top: 10px;
   width:30vw;
+  border: 1px solid black;
+  padding: 10px;
+  border-radius: 15px;
+  font-family: 'Times New Roman', Times, serif;
 }
-.review-form h3 {
-  font-size: 1.5em;
-  margin-bottom: 15px;
+
+.review-form h2 {
+  font-size: 3.5rem;
+  margin-bottom: 10px;
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  text-shadow: 2px 2px 2px #007bff;
+}
+
+.review-form p{
+  text-align: center;
+  color: #111827b7;
 }
 
 .review-form label {
@@ -1422,16 +1448,17 @@ justify-content: center;
 }
 
 .review-form button {
-  background-color: #333; /* Dark button background */
+  background-color: rgb(23, 207, 201); 
   color: white; /* White button text */
   border: none; /* No border */
-  padding: 10px 15px; /* Padding inside button */
-  border-radius: 4px; /* Rounded corners */
+  padding: 10px 30px; /* Padding inside button */
+  border-radius: 12px; /* Rounded corners */
   cursor: pointer; /* Pointer on hover */
+  text-align: center;
 }
 
 .review-form button:hover {
-  background-color: #444; /* Slightly lighter on hover */
+  background-color:  rgb(23, 207, 201); /* Slightly lighter on hover */
 }
 
 .cab-booking-section input,
@@ -1463,6 +1490,16 @@ justify-content: center;
   font-size: 1.2em;
 }
 
+.reviews-section .image img{
+  width:70rem;
+  filter: drop-shadow(7px 10px 1px rgb(2, 14, 50));
+}
+
+.reviews-section .image img:hover{
+  filter: drop-shadow(7px 5px 1px rgb(3, 95, 120));
+}
+
+
 /* Popup Background */
 .popup {
   display: none;