Premium Shoe Collection Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StepUp - Premium Shoe Collection</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body class="bg-gray-50"> <!-- Navigation --> <nav class="bg-white shadow-lg fixed w-full z-50 top-0"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-16"> <div class="flex items-center"> <div class="text-2xl font-bold gradient-text">StepUp</div> </div> <!-- Desktop Menu --> <div class="hidden md:block"> <div class="ml-10 flex items-baseline space-x-8"> <a href="#home" class="text-gray-800 hover:text-yellow-500 px-3 py-2 font-medium transition-colors">Home</a> <a href="#categories" class="text-gray-800 hover:text-yellow-500 px-3 py-2 font-medium transition-colors">Categories</a> <a href="#products" class="text-gray-800 hover:text-yellow-500 px-3 py-2 font-medium transition-colors">Products</a> <a href="#about" class="text-gray-800 hover:text-yellow-500 px-3 py-2 font-medium transition-colors">About</a> <a href="#contact" class="text-gray-800 hover:text-yellow-500 px-3 py-2 font-medium transition-colors">Contact</a> </div> </div> <!-- Mobile menu button --> <div class="md:hidden"> <button id="mobile-menu-btn" class="text-gray-800 hover:text-yellow-500"> <i class="fas fa-bars text-xl"></i> </button> </div> </div> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="mobile-menu md:hidden bg-white absolute top-16 left-0 w-full shadow-lg"> <div class="px-2 pt-2 pb-3 space-y-1"> <a href="#home" class="block px-3 py-2 text-gray-800 hover:text-yellow-500 font-medium">Home</a> <a href="#featured" class="block px-3 py-2 text-gray-800 hover:text-yellow-500 font-medium">Featured</a> <a href="#categories" class="block px-3 py-2 text-gray-800 hover:text-yellow-500 font-medium">Categories</a> <a href="#products" class="block px-3 py-2 text-gray-800 hover:text-yellow-500 font-medium">Products</a> <a href="#about" class="block px-3 py-2 text-gray-800 hover:text-yellow-500 font-medium">About</a> <a href="#contact" class="block px-3 py-2 text-gray-800 hover:text-yellow-500 font-medium">Contact</a> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-600 overflow-hidden"> <div class="absolute inset-0 bg-black opacity-20"></div> <div class="relative z-10 text-center text-white px-4 max-w-6xl mx-auto"> <h1 class="text-5xl md:text-7xl font-bold mb-6 fade-in floating">Step Into Style</h1> <p class="text-xl md:text-2xl mb-8 fade-in">Discover the perfect pair for every occasion</p> <button class="bg-white text-yellow-600 px-8 py-4 rounded-full text-lg font-semibold hover:bg-gray-100 transition-all duration-300 pulse-glow hover-lift fade-in"> Shop Now </button> </div> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white animate-bounce"> <i class="fas fa-chevron-down text-2xl"></i> </div> </section> <!-- Featured Products --> <section id="featured" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 fade-in">Featured Collection</h2> <p class="text-xl text-gray-600 fade-in">Handpicked shoes that define excellence</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-gray-50 rounded-2xl overflow-hidden shadow-lg hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?w=400&h=300&fit=crop" alt="Premium Sneakers" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-2xl font-semibold text-gray-800 mb-2">Premium Sneakers</h3> <p class="text-gray-600 mb-4">Comfort meets style in our signature collection</p> <div class="flex justify-between items-center"> <span class="text-2xl font-bold text-yellow-600">$129</span> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors">Add to Cart</button> </div> </div> </div> <div class="bg-gray-50 rounded-2xl overflow-hidden shadow-lg hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1560769629-975ec94e6a86?w=400&h=300&fit=crop" alt="Running Shoes" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-2xl font-semibold text-gray-800 mb-2">Running Shoes</h3> <p class="text-gray-600 mb-4">Engineered for performance and endurance</p> <div class="flex justify-between items-center"> <span class="text-2xl font-bold text-yellow-600">$159</span> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors">Add to Cart</button> </div> </div> </div> <div class="bg-gray-50 rounded-2xl overflow-hidden shadow-lg hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1551107696-a4b0c5a0d9a2?w=400&h=300&fit=crop" alt="Casual Shoes" class="w-full h-64 object-cover"> <div class="p-6"> <h3 class="text-2xl font-semibold text-gray-800 mb-2">Casual Shoes</h3> <p class="text-gray-600 mb-4">Perfect for everyday adventures</p> <div class="flex justify-between items-center"> <span class="text-2xl font-bold text-yellow-600">$89</span> <button class="bg-yellow-500 text-white px-6 py-2 rounded-full hover:bg-yellow-600 transition-colors">Add to Cart</button> </div> </div> </div> </div> </div> </section> <!-- Categories --> <section id="categories" class="py-20 bg-yellow-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 fade-in">Shop by Category</h2> <p class="text-xl text-gray-600 fade-in">Find your perfect match</p> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> <div class="text-center group cursor-pointer slide-in-left"> <div class="bg-white rounded-full w-32 h-32 mx-auto mb-4 flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow"> <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=100&h=100&fit=crop" alt="Sneakers" class="w-20 h-20 object-cover rounded-full"> </div> <h3 class="text-xl font-semibold text-gray-800">Sneakers</h3> </div> <div class="text-center group cursor-pointer slide-in-left"> <div class="bg-white rounded-full w-32 h-32 mx-auto mb-4 flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow"> <img src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=100&h=100&fit=crop" alt="Boots" class="w-20 h-20 object-cover rounded-full"> </div> <h3 class="text-xl font-semibold text-gray-800">Boots</h3> </div> <div class="text-center group cursor-pointer slide-in-right"> <div class="bg-white rounded-full w-32 h-32 mx-auto mb-4 flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow"> <img src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2?w=100&h=100&fit=crop" alt="Heels" class="w-20 h-20 object-cover rounded-full"> </div> <h3 class="text-xl font-semibold text-gray-800">Heels</h3> </div> <div class="text-center group cursor-pointer slide-in-right"> <div class="bg-white rounded-full w-32 h-32 mx-auto mb-4 flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow"> <img src="https://images.unsplash.com/photo-1520256862855-398228c41684?w=100&h=100&fit=crop" alt="Sandals" class="w-20 h-20 object-cover rounded-full"> </div> <h3 class="text-xl font-semibold text-gray-800">Sandals</h3> </div> </div> </div> </section> <!-- Products Grid --> <section id="products" class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 fade-in">Latest Products</h2> <p class="text-xl text-gray-600 fade-in">Discover our newest arrivals</p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="bg-gray-50 rounded-2xl overflow-hidden shadow-lg hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?w=300&h=250&fit=crop" alt="Product 1" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-lg font-semibold text-gray-800 mb-2">Urban Runner</h3> <p class="text-yellow-600 font-bold text-xl">$119</p> </div> </div> <div class="bg-gray-50 rounded-2xl overflow-hidden shadow-lg hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=300&h=250&fit=crop" alt="Product 2" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-lg font-semibold text-gray-800 mb-2">Classic White</h3> <p class="text-yellow-600 font-bold text-xl">$99</p> </div> </div> <div class="bg-gray-50 rounded-2xl overflow-hidden shadow-lg hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=300&h=250&fit=crop" alt="Product 3" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-lg font-semibold text-gray-800 mb-2">Sport Elite</h3> <p class="text-yellow-600 font-bold text-xl">$149</p> </div> </div> <div class="bg-gray-50 rounded-2xl overflow-hidden shadow-lg hover-lift scale-in"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=300&h=250&fit=crop" alt="Product 4" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-lg font-semibold text-gray-800 mb-2">Street Style</h3> <p class="text-yellow-600 font-bold text-xl">$129</p> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="py-20 bg-yellow-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">About StepUp</h2> <p class="text-lg text-gray-600 mb-6"> For over two decades, StepUp has been at the forefront of footwear innovation. We believe that the right pair of shoes can transform not just your outfit, but your entire day. </p> <p class="text-lg text-gray-600 mb-8"> Our commitment to quality, comfort, and style has made us a trusted name among shoe enthusiasts worldwide. Every pair tells a story of craftsmanship and passion. </p> <button class="bg-yellow-500 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-yellow-600 transition-colors hover-lift"> Learn More </button> </div> <div class="slide-in-right"> <img src="https://images.unsplash.com/photo-1556906781-9a412961c28c?w=600&h=400&fit=crop" alt="About Us" class="rounded-2xl shadow-2xl w-full"> </div> </div> </div> </section> <!-- Statistics --> <section class="py-20 bg-gray-800 text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> <div class="fade-in"> <div class="text-4xl md:text-5xl font-bold text-yellow-400 mb-2">50K+</div> <div class="text-lg text-gray-300">Happy Customers</div> </div> <div class="fade-in"> <div class="text-4xl md:text-5xl font-bold text-yellow-400 mb-2">1000+</div> <div class="text-lg text-gray-300">Products</div> </div> <div class="fade-in"> <div class="text-4xl md:text-5xl font-bold text-yellow-400 mb-2">25+</div> <div class="text-lg text-gray-300">Years Experience</div> </div> <div class="fade-in"> <div class="text-4xl md:text-5xl font-bold text-yellow-400 mb-2">100+</div> <div class="text-lg text-gray-300">Stores Worldwide</div> </div> </div> </div> </section> <!-- Testimonials --> <section class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 fade-in">What Our Customers Say</h2> <p class="text-xl text-gray-600 fade-in">Real reviews from real people</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-yellow-50 p-8 rounded-2xl shadow-lg scale-in"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=60&h=60&fit=crop&crop=face" alt="Customer" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold text-gray-800">Sarah Johnson</h4> <div class="text-yellow-500">★★★★★</div> </div> </div> <p class="text-gray-600">"Amazing quality and comfort! I've been wearing StepUp shoes for years and they never disappoint."</p> </div> <div class="bg-yellow-50 p-8 rounded-2xl shadow-lg scale-in"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60&h=60&fit=crop&crop=face" alt="Customer" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold text-gray-800">Mike Chen</h4> <div class="text-yellow-500">★★★★★</div> </div> </div> <p class="text-gray-600">"Perfect fit every time. The customer service is exceptional and delivery is always fast."</p> </div> <div class="bg-yellow-50 p-8 rounded-2xl shadow-lg scale-in"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=60&h=60&fit=crop&crop=face" alt="Customer" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold text-gray-800">Emma Davis</h4> <div class="text-yellow-500">★★★★★</div> </div> </div> <p class="text-gray-600">"Stylish, comfortable, and durable. These shoes have become my go-to for every occasion."</p> </div> </div> </div> </section> <!-- Newsletter --> <section class="py-20 bg-gradient-to-r from-yellow-400 to-yellow-600"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <h2 class="text-4xl md:text-5xl font-bold text-white mb-4 fade-in">Stay in the Loop</h2> <p class="text-xl text-white mb-8 fade-in">Get the latest updates on new arrivals and exclusive offers</p> <div class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto scale-in"> <input type="email" placeholder="Enter your email" class="flex-1 px-6 py-3 rounded-full text-gray-800 focus:outline-none focus:ring-4 focus:ring-yellow-300"> <button class="bg-white text-yellow-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors hover-lift"> Subscribe </button> </div> </div> </section> <!-- Contact --> <section id="contact" class="py-20 bg-gray-800 text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl md:text-5xl font-bold mb-4 fade-in">Get in Touch</h2> <p class="text-xl text-gray-300 fade-in">We'd love to hear from you</p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div class="slide-in-left"> <h3 class="text-2xl font-semibold mb-6">Contact Information</h3> <div class="space-y-4"> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-yellow-400 text-xl mr-4"></i> <span>123 Fashion Street, Style City, SC 12345</span> </div> <div class="flex items-center"> <i class="fas fa-phone text-yellow-400 text-xl mr-4"></i> <span>+1 (555) 123-4567</span> </div> <div class="flex items-center"> <i class="fas fa-envelope text-yellow-400 text-xl mr-4"></i> <span>info@stepupshoes.com</span> </div> </div> <div class="mt-8"> <h4 class="text-xl font-semibold mb-4">Follow Us</h4> <div class="flex space-x-4"> <a href="#" class="text-yellow-400 hover:text-yellow-300 text-2xl transition-colors"> <i class="fab fa-facebook"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 text-2xl transition-colors"> <i class="fab fa-instagram"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 text-2xl transition-colors"> <i class="fab fa-twitter"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 text-2xl transition-colors"> <i class="fab fa-youtube"></i> </a> </div> </div> </div> <div class="slide-in-right"> <form class="space-y-6"> <div> <input type="text" placeholder="Your Name" class="w-full px-4 py-3 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"> </div> <div> <input type="email" placeholder="Your Email" class="w-full px-4 py-3 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"> </div> <div> <textarea rows="5" placeholder="Your Message" class="w-full px-4 py-3 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"></textarea> </div> <button type="submit" class="w-full bg-yellow-500 text-white py-3 rounded-lg font-semibold hover:bg-yellow-600 transition-colors hover-lift"> Send Message </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <div class="text-2xl font-bold gradient-text mb-4">StepUp</div> <p class="text-gray-400">Your trusted partner for premium footwear since 1999.</p> </div> <div> <h4 class="text-lg font-semibold mb-4">Quick Links</h4> <ul class="space-y-2 text-gray-400"> <li><a href="#" class="hover:text-yellow-400 transition-colors">Home</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors">Products</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors">About</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors">Contact</a></li> </ul> </div> <div> <h4 class="text-lg font-semibold mb-4">Categories</h4> <ul class="space-y-2 text-gray-400"> <li><a href="#" class="hover:text-yellow-400 transition-colors">Sneakers</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors">Boots</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors">Heels</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors">Sandals</a></li> </ul> </div> <div> <h4 class="text-lg font-semibold mb-4">Customer Service</h4> <ul class="space-y-2 text-gray-400"> <li><a href="#" class="hover:text-yellow-400 transition-colors">Size Guide</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors">Returns</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors">Shipping</a></li> <li><a href="#" class="hover:text-yellow-400 transition-colors">FAQ</a></li> </ul> </div> </div> <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> <p>© 2024 StepUp. All rights reserved. Made with ❤️ for shoe lovers.</p> </div> </div> </footer> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96a9e2baf354c784',t:'MTc1NDQzNDU2NC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
* { font-family: 'Poppins', sans-serif; } .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } .slide-in-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease; } .slide-in-left.visible { opacity: 1; transform: translateX(0); } .slide-in-right { opacity: 0; transform: translateX(50px); transition: all 0.8s ease; } .slide-in-right.visible { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.8); transition: all 0.8s ease; } .scale-in.visible { opacity: 1; transform: scale(1); } .floating { animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .pulse-glow { animation: pulse-glow 2s ease-in-out infinite alternate; } @keyframes pulse-glow { from { box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); } to { box-shadow: 0 0 30px rgba(251, 191, 36, 0.8); } } .gradient-text { background: linear-gradient(45deg, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hover-lift { transition: transform 0.3s ease; } .hover-lift:hover { transform: translateY(-5px); } .parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .mobile-menu { transform: translateX(-100%); transition: transform 0.3s ease; } .mobile-menu.open { transform: translateX(0); }
JavaScript
// Mobile menu toggle const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('open'); }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } // Close mobile menu if open mobileMenu.classList.remove('open'); }); }); // Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .scale-in').forEach(el => { observer.observe(el); }); // Add to cart functionality document.querySelectorAll('button:contains("Add to Cart")').forEach(button => { button.addEventListener('click', function() { this.textContent = 'Added!'; this.classList.add('bg-green-500'); this.classList.remove('bg-yellow-500'); setTimeout(() => { this.textContent = 'Add to Cart'; this.classList.remove('bg-green-500'); this.classList.add('bg-yellow-500'); }, 2000); }); }); // Newsletter subscription document.querySelector('button:contains("Subscribe")').addEventListener('click', function(e) { e.preventDefault(); const email = this.previousElementSibling.value; if (email) { this.textContent = 'Subscribed!'; this.classList.add('bg-green-500'); setTimeout(() => { this.textContent = 'Subscribe'; this.classList.remove('bg-green-500'); }, 3000); } }); // Contact form submission document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('button[type="submit"]'); submitBtn.textContent = 'Message Sent!'; submitBtn.classList.add('bg-green-500'); setTimeout(() => { submitBtn.textContent = 'Send Message'; submitBtn.classList.remove('bg-green-500'); this.reset(); }, 3000); }); // Parallax effect for hero section window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const hero = document.getElementById('home'); if (hero) { hero.style.transform = `translateY(${scrolled * 0.5}px)`; } }); // Counter animation for statistics function animateCounters() { const counters = document.querySelectorAll('.text-4xl.md\\:text-5xl'); counters.forEach(counter => { const target = parseInt(counter.textContent.replace(/[^\d]/g, '')); const increment = target / 100; let current = 0; const updateCounter = () => { if (current < target) { current += increment; counter.textContent = Math.ceil(current) + counter.textContent.replace(/[\d]/g, '').replace(/^\d+/, ''); requestAnimationFrame(updateCounter); } else { counter.textContent = target + counter.textContent.replace(/[\d]/g, '').replace(/^\d+/, ''); } }; updateCounter(); }); } // Trigger counter animation when statistics section is visible const statsSection = document.querySelector('.bg-gray-800'); const statsObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateCounters(); statsObserver.unobserve(entry.target); } }); }); if (statsSection) { statsObserver.observe(statsSection); }
Output Preview
Desktop
Mobile
Fullscreen