Skip to content

Commit a35afe6

Browse files
shivenyadavsshivenyadavs
authored
Added testimonials section to showcase user feedback (#63)
1 parent 1cc7a93 commit a35afe6

File tree

3 files changed

+279
-1
lines changed

3 files changed

+279
-1
lines changed

‎index.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,117 @@ <h1 class="section-title">Upcoming Events</h1>
8888
</section>
8989
</main>
9090

91+
<!-- Testimonials section -->
92+
<section id="testimonials" class="testimonials">
93+
<div class="testimonial-container">
94+
<h1 class="section-title">What People Are Saying</h1>
95+
<div class="testimonial-grid initial-testimonials">
96+
<div class="testimonial-card blue">
97+
<div class="rating">⭐⭐⭐⭐⭐</div>
98+
<p class="testimonial-text">Eventica is my go-to platform for discovering tech meetups and cultural events in Bangalore. The interface is so intuitive!</p>
99+
<div class="profile">
100+
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Ananya Sharma" class="profile-img">
101+
<div class="profile-info">
102+
<h4>Ananya Sharma</h4>
103+
<div class="role">Tech Enthusiast</div>
104+
</div>
105+
</div>
106+
</div>
107+
108+
<div class="testimonial-card red">
109+
<div class="rating">⭐⭐⭐⭐⭐</div>
110+
<p class="testimonial-text">I love how organized Eventica is! I never miss out on exciting events happening in the city.</p>
111+
<div class="profile">
112+
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Karthik Raj" class="profile-img">
113+
<div class="profile-info">
114+
<h4>Karthik Raj</h4>
115+
<div class="role">Event Attendee</div>
116+
</div>
117+
</div>
118+
</div>
119+
120+
<div class="testimonial-card green">
121+
<div class="rating">⭐⭐⭐⭐⭐</div>
122+
<p class="testimonial-text">As an event organizer, Eventica has helped me reach a larger audience. Highly recommend it to everyone!</p>
123+
<div class="profile">
124+
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Priya Reddy" class="profile-img">
125+
<div class="profile-info">
126+
<h4>Priya Reddy</h4>
127+
<div class="role">Event Organizer</div>
128+
</div>
129+
</div>
130+
</div>
131+
132+
<div class="testimonial-card purple">
133+
<div class="rating">⭐⭐⭐⭐⭐</div>
134+
<p class="testimonial-text">Bangalore's dynamic culture is perfectly captured here. Thanks to Eventica, I always have something to look forward to.</p>
135+
<div class="profile">
136+
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Ravi Kumar" class="profile-img">
137+
<div class="profile-info">
138+
<h4>Ravi Kumar</h4>
139+
<div class="role">Regular Attendee</div>
140+
</div>
141+
</div>
142+
</div>
143+
</div>
144+
145+
<div class="testimonial-grid hidden extra-testimonials">
146+
<!-- Additional testimonials from your second page -->
147+
<div class="testimonial-card blue">
148+
<div class="rating">⭐⭐⭐⭐⭐</div>
149+
<p class="testimonial-text">Working with Eventica was an absolute pleasure. Their attention to detail and professional service made our corporate conference truly memorable.</p>
150+
<div class="profile">
151+
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Lance Jarvis" class="profile-img">
152+
<div class="profile-info">
153+
<h4>Lance Jarvis</h4>
154+
<div class="role">Marketing Director</div>
155+
</div>
156+
</div>
157+
</div>
158+
159+
<div class="testimonial-card red">
160+
<div class="rating">⭐⭐⭐⭐⭐</div>
161+
<p class="testimonial-text">The team at Eventica went above and beyond our expectations. They created an unforgettable experience that our guests are still talking about.</p>
162+
<div class="profile">
163+
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah Chen" class="profile-img">
164+
<div class="profile-info">
165+
<h4>Sarah Chen</h4>
166+
<div class="role">Non-profit Director</div>
167+
</div>
168+
</div>
169+
</div>
170+
171+
<div class="testimonial-card green">
172+
<div class="rating">⭐⭐⭐⭐⭐</div>
173+
<p class="testimonial-text">The team at Eventica went above and beyond our expectations. They created an unforgettable experience that our guests are still talking about.</p>
174+
<div class="profile">
175+
<img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Sarah Chen" class="profile-img">
176+
<div class="profile-info">
177+
<h4>Tim Wilson</h4>
178+
<div class="role">Director</div>
179+
</div>
180+
</div>
181+
</div>
182+
183+
<div class="testimonial-card purple">
184+
<div class="rating">⭐⭐⭐⭐⭐</div>
185+
<p class="testimonial-text">The team at Eventica went above and beyond our expectations. They created an unforgettable experience that our guests are still talking about.</p>
186+
<div class="profile">
187+
<img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Sarah Chen" class="profile-img">
188+
<div class="profile-info">
189+
<h4>Michael Angolo</h4>
190+
<div class="role">Event Coordinator</div>
191+
</div>
192+
</div>
193+
</div>
194+
</div>
195+
196+
<button id="see-more-btn" class="see-more-btn">
197+
See More <i class="fas fa-chevron-down"></i>
198+
</button>
199+
</div>
200+
</section>
201+
91202
<!-- Footer section -->
92203
<footer>
93204
<p class="copyright">Created By Rakesh Roshan ❤️ | ©

‎script.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,4 +313,24 @@ if (searchButton && searchInput) {
313313

314314
searchButton.addEventListener('click', handleSearch);
315315
searchInput.addEventListener('input', handleSearch);
316-
}
316+
}
317+
318+
// Testimonials expansion functionality
319+
document.addEventListener("DOMContentLoaded", () => {
320+
const seeMoreBtn = document.getElementById("see-more-btn");
321+
const extraTestimonials = document.querySelector(".extra-testimonials");
322+
323+
if (seeMoreBtn && extraTestimonials) {
324+
seeMoreBtn.addEventListener("click", () => {
325+
// Toggle the "hidden" class
326+
extraTestimonials.classList.toggle("hidden");
327+
328+
// Update button text and icon
329+
if (extraTestimonials.classList.contains("hidden")) {
330+
seeMoreBtn.innerHTML = 'See More <i class="fas fa-chevron-down"></i>';
331+
} else {
332+
seeMoreBtn.innerHTML = 'See Less <i class="fas fa-chevron-up"></i>';
333+
}
334+
});
335+
}
336+
});

‎style.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,24 @@ body.dark-mode .event-date,
9090
color: var(--light-text-color) !important;
9191
}
9292

93+
body.dark-mode .testimonial-card {
94+
background-color: #000000;
95+
color: #f4f4f4;
96+
}
97+
98+
body.dark-mode .profile-info h4 {
99+
color: #f4f4f4;
100+
}
101+
102+
body.dark-mode .profile-info .role,
103+
body.dark-mode .social-links a {
104+
color: #bbbbbb;
105+
}
106+
107+
body.dark-mode .profile {
108+
border-top-color: #444444;
109+
}
110+
93111
body.dark-mode footer {
94112
background-color: #000000;
95113
}
@@ -606,6 +624,135 @@ body.dark-mode footer {
606624
transform: scale(1.4);
607625
}
608626

627+
/* Testimonials Section Css */
628+
629+
.testimonials {
630+
padding: 50px 20px;
631+
}
632+
633+
.testimonial-container {
634+
margin: 0 auto;
635+
width: 90%;
636+
}
637+
638+
.testimonials .section-title {
639+
font-size: 2rem;
640+
margin-bottom: 30px;
641+
}
642+
643+
.testimonial-grid {
644+
display: grid;
645+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
646+
gap: 20px;
647+
}
648+
649+
.testimonial-card {
650+
padding: 25px;
651+
margin-top: 25px;
652+
position: relative;
653+
background: #ffffff;
654+
border-radius: 10px;
655+
transition: all 0.3s ease;
656+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
657+
}
658+
659+
.testimonial-card:hover {
660+
transform: translateY(-5px);
661+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
662+
}
663+
664+
.testimonial-card.blue {
665+
border-bottom: 4px solid #3498db;
666+
}
667+
668+
.testimonial-card.red {
669+
border-bottom: 4px solid #e74c3c;
670+
}
671+
672+
.testimonial-card.green {
673+
border-bottom: 4px solid #1abc9c;
674+
}
675+
676+
.testimonial-card.purple {
677+
border-bottom: 4px solid #9b59b6;
678+
}
679+
680+
.rating {
681+
margin-bottom: 15px;
682+
text-align: center;
683+
}
684+
685+
.testimonial-text {
686+
margin-bottom: 25px;
687+
color: var(--light-text-color);
688+
}
689+
690+
.profile {
691+
display: flex;
692+
align-items: center;
693+
margin-top: 20px;
694+
padding-top: 20px;
695+
border-top: 1px solid #eeeeee;
696+
}
697+
698+
.profile-img {
699+
width: 60px;
700+
height: 60px;
701+
border-radius: 50%;
702+
object-fit: cover;
703+
margin-right: 15px;
704+
border: 3px solid #ffffff;
705+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
706+
}
707+
708+
.profile-info h4 {
709+
color: #333333;
710+
font-size: 18px;
711+
margin-bottom: 5px;
712+
}
713+
714+
.profile-info .role {
715+
color: #666666;
716+
font-size: 14px;
717+
margin-bottom: 8px;
718+
}
719+
720+
.hidden {
721+
display: none;
722+
}
723+
724+
.see-more-btn {
725+
display: block;
726+
align-items: center;
727+
justify-content: center;
728+
margin: 25px auto;
729+
padding: 0.75rem 1.5rem;
730+
font-size: 1rem;
731+
font-weight: 600;
732+
color: #ffffff;
733+
border: none;
734+
cursor: pointer;
735+
border-radius: 30px;
736+
transition: all 0.3s ease;
737+
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
738+
background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
739+
}
740+
741+
.see-more-btn:hover {
742+
transform: translateY(-3px);
743+
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
744+
background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
745+
}
746+
747+
.see-more-btn i {
748+
transition: transform 0.3s ease;
749+
}
750+
751+
.see-more-btn:active {
752+
transform: translateY(1px);
753+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
754+
}
755+
609756
/* Footer Css */
610757

611758
footer {

0 commit comments

Comments
 (0)