Skip to content

Added testimonials section to showcase user feedback #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jan 14, 2025
Merged

Added testimonials section to showcase user feedback #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ccc9c52
Added Testimonials page
shivenyadavs Jan 12, 2025
51b7029
Merge branch 'main' into main
shivenyadavs Jan 14, 2025
f727eff
Update index.html
shivenyadavs Jan 14, 2025
0fc7894
Update style.css
shivenyadavs Jan 14, 2025
6b38a0b
Update script.js
shivenyadavs Jan 14, 2025
8c2527e
Merge branch 'main' into main
Rakesh9100 Jan 14, 2025
864d0bb
Removed extra unwanted changes
Rakesh9100 Jan 14, 2025
73f7790
Added changes
Rakesh9100 Jan 14, 2025
0ab4f3f
Fixed minor logic
Rakesh9100 Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 111 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,117 @@ <h1 class="section-title">Upcoming Events</h1>
</section>
</main>

<!-- Testimonials section -->
<section id="testimonials" class="testimonials">
<div class="testimonial-container">
<h1 class="section-title">What People Are Saying</h1>
<div class="testimonial-grid initial-testimonials">
<div class="testimonial-card blue">
<div class="rating">⭐⭐⭐⭐⭐</div>
<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>
<div class="profile">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Ananya Sharma" class="profile-img">
<div class="profile-info">
<h4>Ananya Sharma</h4>
<div class="role">Tech Enthusiast</div>
</div>
</div>
</div>

<div class="testimonial-card red">
<div class="rating">⭐⭐⭐⭐⭐</div>
<p class="testimonial-text">I love how organized Eventica is! I never miss out on exciting events happening in the city.</p>
<div class="profile">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Karthik Raj" class="profile-img">
<div class="profile-info">
<h4>Karthik Raj</h4>
<div class="role">Event Attendee</div>
</div>
</div>
</div>

<div class="testimonial-card green">
<div class="rating">⭐⭐⭐⭐⭐</div>
<p class="testimonial-text">As an event organizer, Eventica has helped me reach a larger audience. Highly recommend it to everyone!</p>
<div class="profile">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Priya Reddy" class="profile-img">
<div class="profile-info">
<h4>Priya Reddy</h4>
<div class="role">Event Organizer</div>
</div>
</div>
</div>

<div class="testimonial-card purple">
<div class="rating">⭐⭐⭐⭐⭐</div>
<p class="testimonial-text">Bangalore's dynamic culture is perfectly captured here. Thanks to Eventica, I always have something to look forward to.</p>
<div class="profile">
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Ravi Kumar" class="profile-img">
<div class="profile-info">
<h4>Ravi Kumar</h4>
<div class="role">Regular Attendee</div>
</div>
</div>
</div>
</div>

<div class="testimonial-grid hidden extra-testimonials">
<!-- Additional testimonials from your second page -->
<div class="testimonial-card blue">
<div class="rating">⭐⭐⭐⭐⭐</div>
<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>
<div class="profile">
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Lance Jarvis" class="profile-img">
<div class="profile-info">
<h4>Lance Jarvis</h4>
<div class="role">Marketing Director</div>
</div>
</div>
</div>

<div class="testimonial-card red">
<div class="rating">⭐⭐⭐⭐⭐</div>
<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>
<div class="profile">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah Chen" class="profile-img">
<div class="profile-info">
<h4>Sarah Chen</h4>
<div class="role">Non-profit Director</div>
</div>
</div>
</div>

<div class="testimonial-card green">
<div class="rating">⭐⭐⭐⭐⭐</div>
<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>
<div class="profile">
<img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Sarah Chen" class="profile-img">
<div class="profile-info">
<h4>Tim Wilson</h4>
<div class="role">Director</div>
</div>
</div>
</div>

<div class="testimonial-card purple">
<div class="rating">⭐⭐⭐⭐⭐</div>
<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>
<div class="profile">
<img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Sarah Chen" class="profile-img">
<div class="profile-info">
<h4>Michael Angolo</h4>
<div class="role">Event Coordinator</div>
</div>
</div>
</div>
</div>

<button id="see-more-btn" class="see-more-btn">
See More <i class="fas fa-chevron-down"></i>
</button>
</div>
</section>

<!-- Footer section -->
<footer>
<p class="copyright">Created By Rakesh Roshan ❤️ | ©
Expand Down
22 changes: 21 additions & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,4 +313,24 @@ if (searchButton && searchInput) {

searchButton.addEventListener('click', handleSearch);
searchInput.addEventListener('input', handleSearch);
}
}

// Testimonials expansion functionality
document.addEventListener("DOMContentLoaded", () => {
const seeMoreBtn = document.getElementById("see-more-btn");
const extraTestimonials = document.querySelector(".extra-testimonials");

if (seeMoreBtn && extraTestimonials) {
seeMoreBtn.addEventListener("click", () => {
// Toggle the "hidden" class
extraTestimonials.classList.toggle("hidden");

// Update button text and icon
if (extraTestimonials.classList.contains("hidden")) {
seeMoreBtn.innerHTML = 'See More <i class="fas fa-chevron-down"></i>';
} else {
seeMoreBtn.innerHTML = 'See Less <i class="fas fa-chevron-up"></i>';
}
});
}
});
147 changes: 147 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,24 @@ body.dark-mode .event-date,
color: var(--light-text-color) !important;
}

body.dark-mode .testimonial-card {
background-color: #000000;
color: #f4f4f4;
}

body.dark-mode .profile-info h4 {
color: #f4f4f4;
}

body.dark-mode .profile-info .role,
body.dark-mode .social-links a {
color: #bbbbbb;
}

body.dark-mode .profile {
border-top-color: #444444;
}

body.dark-mode footer {
background-color: #000000;
}
Expand Down Expand Up @@ -606,6 +624,135 @@ body.dark-mode footer {
transform: scale(1.4);
}

/* Testimonials Section Css */

.testimonials {
padding: 50px 20px;
}

.testimonial-container {
margin: 0 auto;
width: 90%;
}

.testimonials .section-title {
font-size: 2rem;
margin-bottom: 30px;
}

.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.testimonial-card {
padding: 25px;
margin-top: 25px;
position: relative;
background: #ffffff;
border-radius: 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.testimonial-card.blue {
border-bottom: 4px solid #3498db;
}

.testimonial-card.red {
border-bottom: 4px solid #e74c3c;
}

.testimonial-card.green {
border-bottom: 4px solid #1abc9c;
}

.testimonial-card.purple {
border-bottom: 4px solid #9b59b6;
}

.rating {
margin-bottom: 15px;
text-align: center;
}

.testimonial-text {
margin-bottom: 25px;
color: var(--light-text-color);
}

.profile {
display: flex;
align-items: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eeeeee;
}

.profile-img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border: 3px solid #ffffff;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.profile-info h4 {
color: #333333;
font-size: 18px;
margin-bottom: 5px;
}

.profile-info .role {
color: #666666;
font-size: 14px;
margin-bottom: 8px;
}

.hidden {
display: none;
}

.see-more-btn {
display: block;
align-items: center;
justify-content: center;
margin: 25px auto;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
border: none;
cursor: pointer;
border-radius: 30px;
transition: all 0.3s ease;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
}

.see-more-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
}

.see-more-btn i {
transition: transform 0.3s ease;
}

.see-more-btn:active {
transform: translateY(1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Footer Css */

footer {
Expand Down
Loading