@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #e0dbd2; font-family: 'Roboto', sans-serif; padding: 40px 0; overflow-x: hidden; } .slider-container { position: relative; max-width: 1200px; width: 100%; padding: 0 50px; } .slider { display: flex; overflow-x: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; gap: 30px; position: relative; padding: 50px 0; margin: 0 -100px; } .card { position: relative; width: 320px; min-width: 320px; height: 500px; background-color: #f0ece3; border-radius: 20px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.5s ease; overflow: hidden; scroll-snap-align: center; opacity: 0.5; transform: scale(0.85); filter: blur(1px); } .card.active { opacity: 1; transform: scale(1); filter: blur(0); z-index: 2; } .card:hover { transform: translateY(-10px) scale(1); box-shadow: 0 15px 30px rgba(0,0,0,0.2); opacity: 1; filter: blur(0); z-index: 3; } .slider-nav { display: flex; justify-content: space-between; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; pointer-events: none; } .slider-nav button { background-color: #6e4b35; color: white; border: none; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 24px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); transition: all 0.3s ease; pointer-events: auto; } .slider-nav button:hover { background-color: #8c6143; transform: scale(1.1); } .slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; cursor: pointer; transition: all 0.3s ease; } .dot.active { background-color: #6e4b35; transform: scale(1.2); } /* Center the current card and show parts of adjacent cards */ .slider-wrapper { position: relative; overflow: hidden; margin: 0 auto; width: 100%; } .card { position: relative; width: 320px; height: 500px; background-color: #f0ece3; border-radius: 20px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s ease; overflow: hidden; } .card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); } .card-title { text-align: center; margin-bottom: 10px; } .card-title h3 { font-size: 16px; font-weight: 500; color: #333; margin-bottom: 5px; } .card-title h2 { font-size: 32px; font-weight: 700; color: #6e4b35; } .card-image { position: relative; height: 260px; display: flex; justify-content: center; align-items: center; margin: 20px 0; } .card-image img { max-width: 100%; max-height: 100%; transition: transform 0.5s ease; } .card:hover .card-image img { transform: scale(1.05); } .flavor-notes { position: absolute; bottom: 30px; left: 30px; } .flavor-notes h4 { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 5px; } .flavor-notes p { font-size: 14px; color: #666; } .story-button { position: absolute; bottom: 30px; right: 30px; } .story-button button { background-color: #6e4b35; color: white; border: none; padding: 8px 15px; border-radius: 5px; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; } .story-button button:hover { background-color: #8c6143; } /* Animation for elements when card is hovered */ .wok { position: absolute; transform-origin: center; transition: transform 0.5s ease; } .beans { position: absolute; transition: transform 0.5s ease, opacity 0.5s ease; } .card:hover .wok { transform: rotate(-5deg); } .card:hover .beans { transform: translateY(-10px); opacity: 0.8; } document.addEventListener('DOMContentLoaded', function() { const slider = document.getElementById('slider'); const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const dots = document.querySelectorAll('.dot'); const cards = document.querySelectorAll('.card'); let currentIndex = 0; // Calculate card width including gap const cardWidth = cards[0].offsetWidth + 30; // Card width + gap // Update active card and dots function updateActiveCard() { // Remove active class from all cards and dots cards.forEach(card => card.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); // Add active class to current card and dot cards[currentIndex].classList.add('active'); dots[currentIndex].classList.add('active'); } // Scroll to specific card function scrollToCard(index) { slider.scrollTo({ left: index * cardWidth, behavior: 'smooth' }); currentIndex = index; updateActiveCard(); } // Listen for scroll events to update active card slider.addEventListener('scroll', function() { const scrollPosition = slider.scrollLeft; const newIndex = Math.round(scrollPosition / cardWidth); if (newIndex !== currentIndex) { currentIndex = newIndex; updateActiveCard(); } }); // Next button click nextBtn.addEventListener('click', function() { if (currentIndex 0) { scrollToCard(currentIndex - 1); } else { scrollToCard(cards.length - 1); // Loop to last card } }); // Dot clicks dots.forEach(dot => { dot.addEventListener('click', function() { const index = parseInt(this.getAttribute('data-index')); scrollToCard(index); }); }); // Auto advance slides every 5 seconds setInterval(function() { if (currentIndex < cards.length - 1) { scrollToCard(currentIndex + 1); } else { scrollToCard(0); } }, 5000); // Initialize first card as active updateActiveCard(); });