Enhance Feedback Form UI with Card Layout and Reduced Spacing

frontend/css/feedback.css

@@ -1,8 +1,15 @@
+body {
+  margin: 0;
+}
+
 .feedback-header {
   text-align: center;
-  padding: 80px 20px 40px;
+  padding: 40px 20px 0px; /* remove bottom gap */
+  margin-bottom: 0;
 }
 
+
+
 .feedback-header h1 {
   font-size: 2.5rem;
   color: var(--deep-navy);
@@ -15,10 +22,12 @@
 
 .feedback-container {
   max-width: 600px;
-  margin: auto;
-  padding: 30px;
+  margin: 0 auto 60px; /* removes top gap */
+  padding: 0 20px 40px;
 }
 
+
+
 form {
   display: flex;
   flex-direction: column;
@@ -61,3 +70,64 @@ button:hover {
   margin-top: 10px;
   font-weight: 600;
 }
+
+/* ===== Card Layout Enhancement ===== */
+
+.feedback-container {
+  max-width: 700px;
+  margin: auto;
+  padding: 40px 20px 80px;
+  display: flex;
+  justify-content: center;
+}
+
+.feedback-card {
+  width: 100%;
+  background: #ffffff;
+  padding: 35px 30px;
+  border-radius: 14px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* Hover effect for modern UI depth */
+.feedback-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
+}
+
+/* Improve input styling consistency */
+.feedback-card input,
+.feedback-card select,
+.feedback-card textarea {
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid #dcdcdc;
+  font-size: 1rem;
+  transition: border 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Focus interaction */
+.feedback-card input:focus,
+.feedback-card select:focus,
+.feedback-card textarea:focus {
+  outline: none;
+  border-color: var(--primary-gold);
+  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
+}
+
+/* Better button polish */
+.feedback-card button {
+  margin-top: 10px;
+  font-size: 1rem;
+  letter-spacing: 0.3px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.feedback-card button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
+}
+

frontend/pages/feedback.html

@@ -33,6 +33,15 @@
         --radius: 18px;
       }
 
+  <!-- Feedback Form -->
+<!-- Feedback Form -->
+<section class="feedback-container">
+  <div class="feedback-card">
+    <form id="feedbackForm">
+
+
+      <label for="name">Name (optional)</label>
+      <input id="name" type="text" placeholder="Your name">
       * {
         box-sizing: border-box;
       }
@@ -96,6 +105,10 @@
         animation-duration: 16s;
       }
 
+        </form>
+  </div>
+</section>
+
       @keyframes float {
         0%,
         100% {

index.html

@@ -901,6 +901,49 @@ <h3>Open Source Opportunities</h3>
         <p>Curated programs with historical success rates and maintainer insights.</p>
       </div>
 
+        <div class="card-grid">
+          <div class="card fade-in">
+            <h4><i class="fas fa-snowflake"></i> Social Winter of Code</h4>
+            <p>India's premier winter program with strong mentorship culture.</p>
+            <span class="badge">Jan 2026</span>
+          </div>
+          <div class="card fade-in">
+            <h4><i class="fas fa-sun"></i> GirlScript Summer of Code</h4>
+            <p>Large-scale program with mentors, tasks, and community learning.</p>
+            <span class="badge">Summer 2026</span>
+          </div>
+          <div class="card fade-in">
+            <h4><i class="fab fa-google"></i> Google Summer of Code</h4>
+            <p>Global standard for student contributors and open source orgs.</p>
+            <span class="badge">Advanced</span>
+          </div>
+          <div class="card fade-in">
+            <h4><i class="fas fa-leaf"></i> Outreachy</h4>
+            <p>Paid internships supporting underrepresented people in tech.</p>
+            <span class="badge">Internship</span>
+          </div>
+          <div class="card fade-in">
+            <h4><i class="fas fa-mountain"></i> MLH Fellowship</h4>
+            <p>Work in pods on real projects with guided mentorship.</p>
+            <span class="badge">Spring</span>
+          </div>
+          <div class="card fade-in">
+            <h4><i class="fab fa-linux"></i> Linux Foundation Mentorship</h4>
+            <p>Paid mentorships across major Linux Foundation projects.</p>
+            <span class="badge">Professional</span>
+          </div>
+          <div class="card fade-in">
+  <h4><i class="fas fa-desktop"></i> Season of KDE</h4>
+  <p>Mentorship program by the KDE community for contributing to desktop and Qt-based open source projects.</p>
+  <span class="badge">Jan – Apr</span>
+</div>
+<div class="card fade-in">
+  <h4><i class="fas fa-link"></i> Hyperledger Mentorship</h4>
+  <p>Blockchain-focused mentorship program under the Hyperledger open source ecosystem.</p>
+  <span class="badge">Paid Mentorship</span>
+</div>
+
+     </section>
       <div class="card-grid">
         <div class="card fade-in">
           <h4><i class="fas fa-snowflake"></i> Social Winter of Code</h4>