Features Implemented:
SwiperJS Integration:
- Horizontal sliding with smooth touch/swipe
- Navigation arrows and pagination dots
- Responsive breakpoints for different screen sizes
- Auto-play functionality
Profile Card Design:
- Clean, modern look with subtle shadows and rounded corners
- White background with soft pastel accents
- Profile image, name, role, bio, and social media icons
- Focus effect on the center card
Responsive Design:
- Adjusts card size and layout for mobile, tablet, and desktop
- Media queries for different screen sizes
- Mobile-friendly touch interactions
Styling:
- Google Fonts (Poppins) for a modern look
- Font Awesome for social media icons
- Smooth transitions and hover effects
- Proper spacing and typography hierarchy
The implementation is ready to use - just copy and paste the entire code into an HTML file and open it in a browser. All dependencies are loaded from CDNs.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f5f7fa;
color: #333;
padding: 40px 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
margin-bottom: 40px;
font-size: 2.2rem;
font-weight: 600;
color: #2c3e50;
}
.swiper {
width: 100%;
height: 100%;
padding: 30px 0 70px;
}
.profile-card {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
max-width: 350px;
margin: 0 auto;
}
.swiper-slide:not(.swiper-slide-active) .profile-card {
opacity: 0.6;
transform: scale(0.9);
}
.profile-img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 20px;
border: 4px solid #e0e6ed;
display: block;
}
.profile-name {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 10px;
color: #2c3e50;
}
.profile-role {
color: #7f8c8d;
font-size: 0.9rem;
margin-bottom: 5px;
font-weight: 500;
}
.profile-bio {
color: #555;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 20px;
}
.social-links {
display: flex;
justify-content: center;
gap: 15px;
}
.social-links a {
width: 36px;
height: 36px;
border-radius: 50%;
background: #f0f3f7;
display: flex;
align-items: center;
justify-content: center;
color: #555;
transition: all 0.3s ease;
text-decoration: none;
}
.social-links a:hover {
background: #3498db;
color: white;
transform: translateY(-3px);
}
.swiper-button-next, .swiper-button-prev {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
color: #3498db;
transition: all 0.3s ease;
}
.swiper-button-next::after, .swiper-button-prev::after {
font-size: 1.2rem;
font-weight: bold;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
background: #3498db;
color: white;
}
.swiper-pagination-bullet {
width: 12px;
height: 12px;
background: #bdc3c7;
opacity: 1;
}
.swiper-pagination-bullet-active {
background: #3498db;
}
@media (max-width: 768px) {
.section-title {
font-size: 1.8rem;
}
.profile-card {
padding: 25px;
}
.profile-img {
width: 100px;
height: 100px;
}
.profile-name {
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.section-title {
font-size: 1.5rem;
margin-bottom: 30px;
}
.swiper {
padding: 20px 0 60px;
}
.profile-card {
padding: 20px 15px;
}
.profile-bio {
font-size: 0.85rem;
}
.social-links a {
width: 32px;
height: 32px;
font-size: 0.9rem;
}
}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
document.addEventListener('DOMContentLoaded', function() {
const swiper = new Swiper('.mySwiper', {
slidesPerView: 1,
spaceBetween: 30,
grabCursor: true,
centeredSlides: true,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
640: {
slidesPerView: 1.5,
},
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
}
});
});
Post a Comment
Thank you
Learning robo team