Add Feedback/Rate Us section done !

public/css/style.css

@@ -1561,6 +1561,7 @@ ul {
   width: 22%;
   padding: 0 15px;
   margin-bottom: 40px;
+  margin-right: -50px;
 }
 
 /* Footer headers */
@@ -2245,3 +2246,183 @@ body {
   color: rgb(255, 255, 255); /* Set text color to white */
 
 }
+
+
+
+.footer-section {
+
+  padding: 20px;
+  max-width: 300px;
+  margin-top: -22px;
+
+}
+
+.contact-form h2 {
+
+  margin-bottom: 15px;
+  font-size: 20px;
+    color: #ffffff;
+    text-transform: uppercase;
+    margin-bottom: 35px;
+    font-weight: 500;
+    position: relative;
+
+}
+
+.contact-form h2:hover {
+
+  color: #ed8309;
+
+}
+
+.contact-form h2::before {
+
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -10px;
+  height: 3px;
+  width: 60px;
+  background: #e91e63;
+  border-radius: 10px;
+
+}
+
+.text-input {
+
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+
+}
+
+.contact-btn {
+
+  background-color: #007bff;
+  color: white;
+  padding: 10px 15px; /* Padding for the button */
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-left: 180px;
+  margin-top: -33px; /* Consider adjusting this */
+  display: flex; /* Flex display */
+  align-items: center; /* Center items vertically */
+  justify-content: center; /* Center items horizontally */
+
+}
+
+/* Add styles for the <i> tag inside the button */
+.contact-btn i {
+
+  padding: 0 3px; /* Horizontal padding for the icon */
+
+}
+
+.contact-btn:hover {
+
+  background-color: #0056b3;
+
+}
+
+
+.star-rating {
+
+  display: flex;
+  justify-content: left; 
+  flex-direction: row-reverse;
+  width: 160px;
+
+}
+
+.star-rating input {
+
+  display: none; 
+
+}
+
+.star-rating label {
+
+  font-size: 26px; 
+  color: #ffffff; 
+  cursor: pointer; 
+  transition: color 0.2s;
+  margin: 0 5px; /* Add margin for gaps between stars */
+
+}
+
+.star-rating input:checked ~ label {
+
+  color: #fa2b4d; 
+
+}
+
+.star-rating label:hover,
+.star-rating label:hover ~ label {
+
+  color: #fa2b4d; 
+
+}
+
+.popupp {
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+
+}
+
+.popupp-content {
+
+  background: linear-gradient(135deg, #0e1722, #ebf3ff, #0e1722);
+  padding: 20px;
+  border-radius: 5px;
+  text-align: center;
+  position: relative; /* For positioning close button */
+
+}
+
+.popupp-content h2 {
+  color: #333; /* Change this to your desired color for the title */
+}
+
+.popupp-content p {
+  color: #000000;
+    font-size: 15px;
+}
+
+
+.close {
+
+  cursor: pointer;
+  float: right;
+  font-size: 20px;
+
+}
+
+.ok-button {
+
+  padding: 10px 20px;
+  margin-top: 20px;
+  background-color: #007bff; /* Change to desired color */
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+
+}
+
+.ok-button:hover {
+
+  background-color: #0056b3; /* Darker shade for hover */
+
+}

public/index.html

@@ -811,6 +811,49 @@ <h4 id="custom-follow-heading">Follow Us</h4>
                         </div>
                     </div>
                 </div>
+
+
+                <div class="footer-section contact-form">
+                    <h2>Feedback Form</h2>
+                    <form id="feedback-form" action="#" method="post" onsubmit="handleSubmit(event)">
+                        <label for="email">Email:</label>
+                        <input type="email" id="email" name="email" class="text-input contact-input" placeholder="Your email address..." required>
+
+                        <label for="message">Message:</label>
+                        <textarea id="message" name="message" class="text-input contact-input" placeholder="Your message..." required></textarea>
+
+
+                        <!-- Star Rating Section -->
+                        <div class="star-rating" aria-label="Rating" role="radiogroup">
+                            <input type="radio" id="star5" name="rating" value="5" required>
+                            <label for="star5" title="5 stars">★</label>
+                            <input type="radio" id="star4" name="rating" value="4">
+                            <label for="star4" title="4 stars">★</label>
+                            <input type="radio" id="star3" name="rating" value="3">
+                            <label for="star3" title="3 stars">★</label>
+                            <input type="radio" id="star2" name="rating" value="2">
+                            <label for="star2" title="2 stars">★</label>
+                            <input type="radio" id="star1" name="rating" value="1">
+                            <label for="star1" title="1 star">★</label>
+                        </div>
+
+                        <button type="submit" class="btn btn-big contact-btn">
+                            <i class="fas fa-envelope"></i>
+                            Send
+                        </button>
+                    </form>
+                </div>
+
+                <!-- Popup -->
+                <div id="thank-you-popup" class="popupp" style="display:none;">
+                    <div class="popupp-content">
+                        <span class="close" onclick="closePopup()">&times;</span>
+                            <h2>🎉 Thank You! 👏</h2> <!-- Added emoji here -->
+                            <p>Your feedback has been submitted successfully.</p>
+                        <button class="ok-button" onclick="closePopup()">OK</button>
+                    </div>
+                </div>
+
 
                 <script>// Facebook click event
                     document.getElementById("custom-facebook-icon").addEventListener("click", function () {

public/script/script.js

@@ -325,4 +325,23 @@ document.addEventListener('DOMContentLoaded', function() {
       event.preventDefault();
       document.getElementById('popup-nl').style.display = 'none';
   });
-});
+feedback
+});
+
+
+function handleSubmit(event) {
+  event.preventDefault(); // Prevent the default form submission
+
+  // Show the thank-you popup
+  document.getElementById('thank-you-popup').style.display = 'flex';
+
+  // Optionally, reset the form
+  document.getElementById('feedback-form').reset();
+}
+
+function closePopup() {
+  document.getElementById('thank-you-popup').style.display = 'none';
+}
+
+
+ main