Skip to content

Commit a58256b

Browse files
Varshitha713Varshitha713
authored
Merge pull request #68 from Shaswat0312/UI-enhancement
Enhancement : Updated the Review Section
2 parents 1229785 + c1e389d commit a58256b

File tree

9 files changed

+405
-33
lines changed

9 files changed

+405
-33
lines changed

‎assets/business.png‎

40.7 KB
Loading

‎assets/businessman.png‎

31 KB
Loading

‎assets/businesswoman.png‎

21.7 KB
Loading

‎assets/ceo.png‎

28.6 KB
Loading

‎assets/man.png‎

31.1 KB
Loading

‎assets/woman.png‎

37.3 KB
Loading

‎index.html‎

Lines changed: 97 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<title>CodeCanvas - Showcase Front-End Projects</title>
77
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
88
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
10+
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
911
<link rel="stylesheet" href="style.css">
1012
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1113
</head>
@@ -97,40 +99,104 @@ <h3>No projects found</h3>
9799
</div>
98100
</section>
99101

100-
<!-- Developer Reviews Section -->
101-
<section class="reviews-section" id="reviews" style="padding: 80px 0; background-color: #f9f9f9;">
102-
<div class="container" style="max-width: 1100px; margin: 0 auto;">
103-
<h2 class="section-title" style="text-align: center; font-size: 3rem; font-weight: bold; margin-bottom: 50px;color:#4b0082;">Developer Reviews</h2>
104-
<div class="reviews-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;">
105-
<div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
106-
<h3>Jane Doe</h3>
107-
<p style="font-style: italic;">"CodeCanvas has completely changed the way I discover front-end projects. Super intuitive!"</p>
108-
<p style="color: #777;">Frontend Developer</p>
109-
</div>
110-
<div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
111-
<h3>Raj Patel</h3>
112-
<p style="font-style: italic;">"A must-have platform for developers looking to showcase their UI/UX skills."</p>
113-
<p style="color: #777;">Open Source Contributor</p>
114-
</div>
115-
<div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
116-
<h3>Maria Gonzales</h3>
117-
<p style="font-style: italic;">"I’ve found so many cool projects to contribute to. Highly recommended!"</p>
118-
<p style="color: #777;">Full Stack Developer</p>
119-
</div>
120-
<div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
121-
<h3>Leo Kim</h3>
122-
<p style="font-style: italic;">"Love the simplicity and design. It's like Behance but for front-end developers."</p>
123-
<p style="color: #777;">UI/UX Designer</p>
124-
</div>
125-
<div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
126-
<h3>Sara Ahmed</h3>
127-
<p style="font-style: italic;">"Great place to get feedback on your code and build your portfolio!"</p>
128-
<p style="color: #777;">JavaScript Enthusiast</p>
129-
</div>
102+
<!-- DEVELOPER REVIEW SECTION -->
103+
104+
<!-- Developer Reviews Section -->
105+
<section class="reviews-section" id="reviews" style="cursor:auto;">
106+
<h2 class="review-section-title">
107+
Developer Reviews
108+
</h2>
109+
110+
<!-- Swiper Container -->
111+
<div class="swiper review-swiper">
112+
<div class="swiper-wrapper">
113+
114+
<!-- Slide 1 -->
115+
<div class="swiper-slide">
116+
<div class="testimonial">
117+
<img src="./assets/businesswoman.png" alt="Jane Doe" class="avatar" />
118+
<div class="testimonial-content">
119+
<h3 class="review-name">Jane Doe</h3>
120+
<p class="review-role">Frontend Developer</p>
121+
<p class="testimonial-text">
122+
“CodeCanvas has completely changed the way I discover front-end
123+
projects. Super intuitive!”
124+
</p>
125+
</div>
130126
</div>
127+
</div>
128+
129+
<!-- Slide 2 -->
130+
<div class="swiper-slide">
131+
<div class="testimonial">
132+
<img src="./assets/man.png" alt="Raj Patel" class="avatar" />
133+
<div class="testimonial-content">
134+
<h3 class="review-name">Raj Patel</h3>
135+
<p class="review-role">Open Source Contributor</p>
136+
<p class="testimonial-text">
137+
“A must-have platform for developers looking to showcase their
138+
UI/UX skills.”
139+
</p>
140+
</div>
141+
</div>
142+
</div>
143+
144+
<!-- Slide 3 -->
145+
<div class="swiper-slide">
146+
<div class="testimonial">
147+
<img src="./assets/woman.png" alt="Maria Gonzales" class="avatar" />
148+
<div class="testimonial-content">
149+
<h3 class="review-name">Maria Gonzales</h3>
150+
<p class="review-role">Full Stack Developer</p>
151+
<p class="testimonial-text">
152+
“I’ve found so many cool projects to contribute to. Highly
153+
recommended!”
154+
</p>
155+
</div>
156+
</div>
157+
</div>
158+
159+
<!-- Slide 4 -->
160+
<div class="swiper-slide">
161+
<div class="testimonial">
162+
<img src="./assets/businessman.png" alt="Leo Kim" class="avatar" />
163+
<div class="testimonial-content">
164+
<h3 class="review-name">Leo Kim</h3>
165+
<p class="review-role">UI/UX Designer</p>
166+
<p class="testimonial-text">
167+
“Love the simplicity and design. It's like Behance but for
168+
front-end developers.”
169+
</p>
170+
</div>
171+
</div>
172+
</div>
173+
174+
<!-- Slide 5 -->
175+
<div class="swiper-slide">
176+
<div class="testimonial">
177+
<img src="./assets/business.png" alt="Sara Ahmed" class="avatar" />
178+
<div class="testimonial-content">
179+
<h3 class="review-name">Sara Ahmed</h3>
180+
<p class="review-role">JavaScript Enthusiast</p>
181+
<p class="testimonial-text">
182+
“Great place to get feedback on your code and build your
183+
portfolio!”
184+
</p>
185+
</div>
186+
</div>
187+
</div>
131188
</div>
189+
190+
<div class="swiper-button-prev">
191+
<span>&larr;</span>
192+
</div>
193+
<div class="swiper-button-next">
194+
<span>&rarr;</span>
195+
</div>
196+
</div>
132197
</section>
133198

199+
134200
<!-- Contact Us Section -->
135201
<section
136202
class="contact-section"
@@ -346,4 +412,4 @@ <h3>Sara Ahmed</h3>
346412
});
347413

348414
</script>
349-
</body>
415+
</body>

‎script.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -357,4 +357,24 @@ function validateForm() {
357357

358358
// Update icon
359359
icon.textContent = theme === 'dark' ? '☀️' : '🌙';
360-
});
360+
});
361+
362+
//Review Section JS
363+
const swiper = new Swiper(".review-swiper", {
364+
loop: true,
365+
slidesPerView: 1,
366+
spaceBetween: 20,
367+
navigation: {
368+
nextEl: ".swiper-button-next",
369+
prevEl: ".swiper-button-prev",
370+
},
371+
keyboard: {
372+
enabled: true,
373+
},
374+
mousewheel: {
375+
forceToAxis: true,
376+
},
377+
grabCursor: true,
378+
speed: 600,
379+
});
380+

0 commit comments

Comments
 (0)