Merge pull request #825 from shriyadindi/feedback

Feedback section User interface

index.html

@@ -768,22 +768,74 @@ <h2 style="color: white; text-align: left; font-size: 4rem; margin-bottom: 10px;
                 <h2>We Value Your Feedback!</h2>
                 <p>Your input helps us improve our services. Please share your thoughts with us below.</p>
                 <form>
-
+        
                     <div class="form-group">
                         <label for="name">Name</label>
                         <input type="text" id="name" name="name" placeholder="Your Name" required pattern="[a-zA-Z ]+"
                             oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
                             oninput="this.setCustomValidity('')">
                     </div>
-
-
+
                     <div class="form-group">
                         <label for="email">Email</label>
                         <input type="email" id="email" name="email" placeholder="Your Email" required>
                     </div>
-
-
+
                     <style>
+                        /* Feedback Form Section Styling */
+                        #feedback-form {
+                            background: linear-gradient(to right, #92b7e1, #ab8cd1);
+                            padding: 40px;
+                            border-radius: 10px;
+                            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+                            color: #ffffff; /* Change text color to white */
+                        }
+
+                        .container {
+                            max-width: 600px;
+                            margin: 0 auto;
+                        }
+
+                        /* Form Group Styling */
+                        .form-group {
+                            margin-bottom: 20px;
+                        }
+
+                        .form-group label {
+                            display: block;
+                            margin-bottom: 5px;
+                        }
+
+                        .form-group input,
+                        .form-group textarea {
+                            width: 100%;
+                            padding: 10px;
+                            border: none;
+                            border-radius: 5px;
+                            font-size: 1rem;
+                        }
+
+                        /* Textarea specific styling */
+                        .form-group textarea {
+                            resize: none; /* Prevent resizing */
+                        }
+
+                        /* Submit Button Styling */
+                        button[type="submit"] {
+                            background-color: #ff8c00;
+                            color: #ffffff;
+                            border: none;
+                            border-radius: 5px;
+                            padding: 15px 30px; /* Increased padding for a larger button */
+                            font-size: 1.2rem; /* Increased font size */
+                            cursor: pointer;
+                            transition: background-color 0.3s ease;
+                        }
+
+                        button[type="submit"]:hover {
+                            background-color: #e07b00; /* Darker shade on hover */
+                        }
+
                         /* Rating Section Styling */
                         .rating-group {
                             display: flex;
@@ -792,26 +844,26 @@ <h2>We Value Your Feedback!</h2>
                             font-size: 24px;
                             cursor: pointer;
                         }
-                    
+
                         /* Individual Star Styling */
                         .rating-group i {
                             color: #ccc; /* Default star color */
                             transition: color 0.3s ease;
                         }
-                    
+
                         /* Hover Effect */
                         .rating-group i:hover,
                         .rating-group i:hover ~ i {
                             color: #f4d03f; /* Highlighted star color on hover */
                         }
-                    
+
                         /* Selected Star Color */
                         .rating-group .selected,
                         .rating-group .selected ~ i {
                             color: #ff8c00; /* Color when star is selected */
                         }
                     </style>
-                    
+
                     <div class="form-group">
                         <label for="rating">Rating</label>
                         <div class="rating-group" id="rating-group">
@@ -822,15 +874,15 @@ <h2>We Value Your Feedback!</h2>
                             <i class="fas fa-star" data-value="5"></i>
                         </div>
                     </div>
-                    
+
                     <script>
                         const stars = document.querySelectorAll('#rating-group i');
-                    
+
                         stars.forEach(star => {
                             star.addEventListener('click', () => {
                                 // Remove 'selected' class from all stars
                                 stars.forEach(s => s.classList.remove('selected'));
-                                
+
                                 // Add 'selected' class to clicked star and all previous ones
                                 star.classList.add('selected');
                                 let previousSibling = star.previousElementSibling;
@@ -841,26 +893,17 @@ <h2>We Value Your Feedback!</h2>
                             });
                         });
                     </script>
-
-
-
-
+
                     <div class="form-group">
                         <label for="feedback">Your Feedback</label>
                         <textarea id="feedback" name="feedback" rows="5" placeholder="Tell us about your experience..."
                             required></textarea>
                     </div>
-
-
-                    <button type="submit" style="width: 150px; height: 70px;">Submit Feedback</button>
+
+                    <button type="submit">Submit Feedback</button>
                 </form>
             </div>
         </section>
-
-
-
-
-
         <style>
             /* Basic Reset */
 * {