Features Implemented
-
Responsive Design:
-
Adapts to different screen sizes (mobile, tablet, desktop)
-
Cards stack on mobile, show 2 on tablet, 3-4 on desktop
-
-
Visual Elements:
-
User avatars (placeholder images from randomuser.me)
-
Star rating system using Font Awesome icons
-
Clean card design with soft shadows and rounded corners
-
-
Interactive Components:
-
Horizontal sliding testimonials with navigation buttons
-
Dot indicators showing current position
-
Auto-advancing slides with pause on hover
-
-
Animations:
-
Fade-in animation when page loads
-
Smooth sliding transitions
-
Button hover effects
-
-
Modern Typography:
-
Uses Poppins font from Google Fonts
-
Clean, readable text hierarchy
-
The implementation is self-contained and should work when copied into a single HTML file. The JavaScript handles all the interactive elements including the slider functionality and star rating display.
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
}
.testimonial-section {
padding: 60px 20px;
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 2rem;
margin-bottom: 40px;
color: #2c3e50;
font-weight: 600;
}
.testimonial-container {
position: relative;
overflow: hidden;
padding: 20px 0;
}
.testimonial-track {
display: flex;
transition: transform 0.5s ease;
gap: 20px;
}
.testimonial-card {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
min-width: 300px;
flex: 0 0 calc(100% - 20px);
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
animation: fadeIn 0.5s ease forwards;
}
.testimonial-card:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card:nth-child(3) { animation-delay: 0.3s; }
.testimonial-card:nth-child(4) { animation-delay: 0.4s; }
.testimonial-card:nth-child(5) { animation-delay: 0.5s; }
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.user-info {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border: 2px solid #eaeaea;
}
.user-details {
flex: 1;
}
.user-name {
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 5px;
color: #2c3e50;
}
.user-rating {
color: #ffc107;
font-size: 0.9rem;
}
.testimonial-text {
font-size: 0.95rem;
color: #555;
line-height: 1.7;
}
.testimonial-nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
gap: 20px;
}
.nav-button {
background: #4a6fa5;
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.nav-button:hover {
background: #3a5a8f;
transform: scale(1.1);
}
.nav-dots {
display: flex;
gap: 10px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: #4a6fa5;
transform: scale(1.2);
}
/* Responsive Styles */
@media (min-width: 576px) {
.testimonial-card {
flex: 0 0 calc(50% - 20px);
}
}
@media (min-width: 768px) {
.testimonial-card {
flex: 0 0 calc(33.333% - 20px);
}
}
@media (min-width: 992px) {
.testimonial-card {
flex: 0 0 calc(25% - 20px);
}
}
document.addEventListener('DOMContentLoaded', function() {
// Initialize star ratings
const ratingElements = document.querySelectorAll('.user-rating');
ratingElements.forEach(element => {
const rating = parseInt(element.getAttribute('data-rating'));
element.innerHTML = '';
for (let i = 1; i <= 5; i++) {
const star = document.createElement('i');
star.className = i <= rating ? 'fas fa-star' : 'far fa-star';
element.appendChild(star);
}
});
// Testimonial slider functionality
const track = document.querySelector('.testimonial-track');
const cards = document.querySelectorAll('.testimonial-card');
const prevBtn = document.querySelector('.prev-button');
const nextBtn = document.querySelector('.next-button');
const dotsContainer = document.querySelector('.nav-dots');
let currentIndex = 0;
const cardWidth = cards[0].offsetWidth + 20; // Including gap
// Create dots
cards.forEach((_, index) => {
const dot = document.createElement('div');
dot.classList.add('dot');
if (index === 0) dot.classList.add('active');
dot.addEventListener('click', () => {
goToTestimonial(index);
});
dotsContainer.appendChild(dot);
});
const dots = document.querySelectorAll('.dot');
function updateSlider() {
track.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
// Update active dot
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}
function goToTestimonial(index) {
currentIndex = index;
updateSlider();
}
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : cards.length - 1;
updateSlider();
});
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex < cards.length - 1) ? currentIndex + 1 : 0;
updateSlider();
});
// Handle window resize
window.addEventListener('resize', () => {
cardWidth = cards[0].offsetWidth + 20;
updateSlider();
});
// Auto-advance (optional)
let autoSlide = setInterval(() => {
nextBtn.click();
}, 5000);
// Pause on hover
track.addEventListener('mouseenter', () => {
clearInterval(autoSlide);
});
track.addEventListener('mouseleave', () => {
autoSlide = setInterval(() => {
nextBtn.click();
}, 5000);
});
});
إرسال تعليق
Thank you
Learning robo team