Updated the Developer Review Section

Shaswat0312 · Shaswat0312 · commit 36103148d566 · 2025-08-04T23:50:40.000+05:30
diff --git a/index.html b/index.html
@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
@@ -98,8 +97,43 @@ <h3>No projects found</h3>
             </div>
         </section>
 
-
         <!-- Developer Reviews Section -->
+        <section class="reviews-section" id="reviews" style="padding: 80px 0; background-color: #f9f9f9;">
+            <div class="container" style="max-width: 1100px; margin: 0 auto;">
+                <h2 class="section-title" style="text-align: center; font-size: 3rem; font-weight: bold; margin-bottom: 50px;color:#4b0082;">Developer Reviews</h2>
+                <div class="reviews-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;">
+                    <div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
+                        <h3>Jane Doe</h3>
+                        <p style="font-style: italic;">"CodeCanvas has completely changed the way I discover front-end projects. Super intuitive!"</p>
+                        <p style="color: #777;">Frontend Developer</p>
+                    </div>
+                    <div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
+                        <h3>Raj Patel</h3>
+                        <p style="font-style: italic;">"A must-have platform for developers looking to showcase their UI/UX skills."</p>
+                        <p style="color: #777;">Open Source Contributor</p>
+                    </div>
+                    <div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
+                        <h3>Maria Gonzales</h3>
+                        <p style="font-style: italic;">"I’ve found so many cool projects to contribute to. Highly recommended!"</p>
+                        <p style="color: #777;">Full Stack Developer</p>
+                    </div>
+                    <div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
+                        <h3>Leo Kim</h3>
+                        <p style="font-style: italic;">"Love the simplicity and design. It's like Behance but for front-end developers."</p>
+                        <p style="color: #777;">UI/UX Designer</p>
+                    </div>
+                    <div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
+                        <h3>Sara Ahmed</h3>
+                        <p style="font-style: italic;">"Great place to get feedback on your code and build your portfolio!"</p>
+                        <p style="color: #777;">JavaScript Enthusiast</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- DEVELOPER REVIEW SECTION -->
+
+              <!-- Developer Reviews Section -->
         <section class="reviews-section" id="reviews">
           <h2 class="review-section-title">
             Developer Reviews
@@ -368,8 +402,6 @@ <h3 class="review-name">Sara Ahmed</h3>
         </div>
     </footer>
     <button id="scrollToTopBtn" title="Go to top">↑</button>
-
-    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
     <script src="script.js"></script>
     <script>
     const toggle = document.getElementById('darkModeToggle');
@@ -412,4 +444,4 @@ <h3 class="review-name">Sara Ahmed</h3>
 });
 
 </script>
-  </body>
+  </body>
diff --git a/script.js b/script.js
@@ -345,6 +345,7 @@ function validateForm() {
         icon.textContent = theme === 'dark' ? '☀️' : '🌙';
     });
 
+    //Review Section JS
     const swiper = new Swiper(".review-swiper", {
     loop: true, 
     slidesPerView: 1, 
diff --git a/style.css b/style.css
@@ -489,8 +489,9 @@
             box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
         }
 
+        /* REVIEW SECTION */
 
-
+        
         /* REVIEW SECTION */
         .reviews-section {
           padding: 60px 0;
@@ -1102,4 +1103,4 @@ body.dark-theme .fill-btn:hover {
 #scrollToTopBtn:hover {
     background-color: #5a67d8;
     transform: scale(1.1);
-}
+}
