Varshitha713 · swarnacmurmu · Aug 5, 2025 · Aug 6, 2025
diff --git a/feedback.html b/feedback.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Feedback Form</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #3498db;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        .feedback-container {
+            background-color: #ffffff;
+            border: 1px solid #2980b9;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            padding: 30px;
+            width: 100%;
+            max-width: 500px;
+        }
+
+        h1 {
+            color: #3498db;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+            color: #555;
+            font-weight: 500;
+        }
+
+        input, textarea, select {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 16px;
+            transition: border-color 0.3s;
+        }
+
+        input:focus, textarea:focus {
+            outline: none;
+            border-color: #3498db;
+            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+        }
+
+        textarea {
+            height: 120px;
+            resize: vertical;
+        }
+
+        .submit-btn {
+            background-color: #2980b9;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 500;
+            width: 100%;
+            transition: background-color 0.3s;
+        }
+
+        .submit-btn:hover {
+            background-color: #2980b9;
+        }
+
+        .thank-you {
+            text-align: center;
+            display: none;
+        }
+
+        .thank-you h2 {
+            color: #3498db;
+            margin-bottom: 20px;
+        }
+
+        .thank-you p {
+            color: #555;
+            margin-bottom: 30px;
+        }
+
+        .thank-you-icon {
+            font-size: 60px;
+            color: #27ae60;
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="feedback-container">
+        <div id="feedback-form">
+            <h1>Feedback Form</h1>
+            <form id="feedbackForm">
+                <div class="form-group">
+                    <label for="name">Your Name:</label>
+                    <input type="text" id="name" name="name" required placeholder="Enter your name">
+                </div>
+
+                <div class="form-group">
+                    <label for="email">Email:</label>
+                    <input type="email" id="email" name="email" required placeholder="Enter your email">
+                </div>
+
+                <div class="form-group">
+                    <label for="feedback-type">Feedback Type:</label>
+                    <select id="feedback-type" name="feedback-type">
+                        <option value="suggestion">Suggestion</option>
+                        <option value="bug">Bug Report</option>
+                        <option value="compliment">Compliment</option>
+                        <option value="other">Other</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label for="feedback">Your Feedback:</label>
+                    <textarea id="feedback" name="feedback" required placeholder="Share your thoughts with us..."></textarea>
+                </div>
+
+                <button type="submit" class="submit-btn">Submit Feedback</button>
+            </form>
+        </div>
+
+        <div id="thank-you" class="thank-you">
+            <div class="thank-you-icon">✓</div>
+            <h2>Thank You for Your Feedback!</h2>
+            <p>We appreciate you taking the time to share your thoughts with us.</p>
+            <p><a href="#" onclick="resetForm()" style="color: #3498db; text-decoration: none;">Submit another feedback</a></p>
+        </div>
+    </div>
+
+    <script>
+        document.getElementById('feedbackForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            // Here you would typically send the data to a server
+            // For this demo, we'll just show the thank you message
+
+            // Hide form, show thank you message
+            document.getElementById('feedback-form').style.display = 'none';
+            document.getElementById('thank-you').style.display = 'block';
+        });
+
+        function resetForm() {
+            // Reset the form and show it again
+            document.getElementById('feedbackForm').reset();
+            document.getElementById('feedback-form').style.display = 'block';
+            document.getElementById('thank-you').style.display = 'none';
+        }
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -314,6 +314,12 @@ <h3>Top Categories</h3>
       </ul>
     </div>
 
+    <div class="footer-section">
+  <h3>Feedback</h3>
+  <p><a href="./feedback.html">Share your feedback</a></p>
+  <p>We would love to hear your suggestions!!</p>
+</div>
+
     <!-- Contact Info -->
     <div class="footer-section">
       <h3>Get in Touch</h3>
@@ -331,6 +337,7 @@ <h3>Get in Touch</h3>
 
 
 
+
 <script>
   const searchInput = document.getElementById('searchInput');
   const categoryCheckboxes = document.querySelectorAll('#checkboxContainer input[type="checkbox"]');
@@ -421,5 +428,10 @@ <h3>Get in Touch</h3>
 
 
 
+
+
+
+
+
 </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
@@ -376,6 +376,7 @@ footer {
 
 .footer-section a:hover {
   color: white;
+
 }
 
 .social-icons {
@@ -443,3 +444,56 @@ footer {
 .filter-dropdown.open .checkbox-dropdown {
   display: block;
 }
+
+.blue-background {
+  background-color: #27abdb;;
+  padding: 60px 20px;
+  min-height: 100vh;
+}
+
+.feedback-form {
+  max-width: 600px;
+  margin: 0 auto;
+  background-color: rgb(255,255,255,0.06);
+
+  padding: 2rem;
+  border-radius:10px; 
+  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
+}
+
+.feedback-form .form-group {
+  margin-bottom: 1.2rem;
+}
+
+.feedback-form label {
+  font-weight: 600;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.feedback-form input,
+.feedback-form select,
+.feedback-form textarea {
+  width: 100%;
+  padding: 0.9rem;
+  border-radius: 6px;
+  border: none;
+  font-size: 1rem;
+  outline: none;
+  background-color: #fefefe;
+  box-sizing: border-box;
+}
+
+.feedback-form input:focus,
+.feedback-form select:focus,
+.feedback-form textarea:focus {
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
+}
+
+.feedback-form button {
+  width: 100%;
+  padding: 0.9rem;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+}