Codepen — Responsive Product Card Slider

.product-card padding: 1rem;

.badge.sale background: #f59e0b;

.product-card:hover transform: translateY(-8px); box-shadow: 0 25px 30px -12px rgba(0,0,0,0.15); responsive product card slider codepen

<div class="swiper product-swiper"> <div class="swiper-wrapper"> .product-card padding: 1rem

body font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f5f7fa; padding: 2rem; .badge.sale background: #f59e0b

.old text-decoration: line-through; font-size: 0.9rem; color: #94a3b8; margin-right: 8px;

<!-- Swiper JS --> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> </body> </html> * margin: 0; padding: 0; box-sizing: border-box;