Fashion Garments 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>StyleHub - Premium Fashion Garments</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-900 text-white overflow-x-hidden"> <!-- Navigation --> <nav class="fixed top-0 w-full z-50 bg-gray-900/95 backdrop-blur-sm border-b border-yellow-400/20"> <div class="container mx-auto px-4 py-4"> <div class="flex justify-between items-center"> <div class="text-2xl font-bold text-yellow-400 animate-pulse-slow"> <i class="fas fa-tshirt mr-2"></i>StyleHub </div> <div class="hidden md:flex space-x-8"> <a href="#home" class="hover:text-yellow-400 transition-colors duration-300">Home</a> <a href="#about" class="hover:text-yellow-400 transition-colors duration-300">About</a> <a href="#collections" class="hover:text-yellow-400 transition-colors duration-300">Collections</a> <a href="#products" class="hover:text-yellow-400 transition-colors duration-300">Products</a> <a href="#services" class="hover:text-yellow-400 transition-colors duration-300">Services</a> <a href="#contact" class="hover:text-yellow-400 transition-colors duration-300">Contact</a> </div> <div class="hidden md:flex items-center space-x-4"> <i class="fas fa-search text-yellow-400 cursor-pointer hover:scale-110 transition-transform"></i> <i class="fas fa-shopping-bag text-yellow-400 cursor-pointer hover:scale-110 transition-transform"></i> <i class="fas fa-user text-yellow-400 cursor-pointer hover:scale-110 transition-transform"></i> </div> <button class="md:hidden text-yellow-400" onclick="toggleMenu()"> <i class="fas fa-bars text-xl"></i> </button> </div> </div> </nav> <!-- Mobile Menu --> <div id="mobileMenu" class="fixed top-0 left-0 w-full h-full bg-gray-900/95 backdrop-blur-sm z-40 transform -translate-x-full transition-transform duration-300 md:hidden"> <div class="flex flex-col items-center justify-center h-full space-y-8 text-xl"> <a href="#home" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Home</a> <a href="#about" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">About</a> <a href="#collections" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Collections</a> <a href="#products" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Products</a> <a href="#services" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Services</a> <a href="#contact" class="hover:text-yellow-400 transition-colors duration-300" onclick="toggleMenu()">Contact</a> </div> </div> <!-- Hero Section --> <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"></div> <div class="absolute inset-0 opacity-20"> <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Fashion Store" class="w-full h-full object-cover"> </div> <div class="container mx-auto px-4 text-center relative z-10"> <div class="animate-slide-up" style="animation-delay: 0.2s;"> <h1 class="text-5xl md:text-7xl font-bold mb-6"> Welcome to <span class="text-yellow-400 typing-animation">StyleHub</span> </h1> <p class="text-xl md:text-2xl mb-8 text-gray-300">Where Fashion Meets Excellence</p> <div class="space-x-4"> <button class="bg-yellow-400 text-gray-900 px-8 py-4 rounded-full font-semibold hover-scale hover:bg-yellow-300 transition-all duration-300"> Shop Now </button> <button class="border-2 border-yellow-400 text-yellow-400 px-8 py-4 rounded-full font-semibold hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300"> View Collections </button> </div> </div> </div> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> <i class="fas fa-chevron-down text-yellow-400 text-2xl"></i> </div> </section> <!-- About Section --> <section id="about" class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-2 gap-12 items-center"> <div class="animate-slide-left"> <h2 class="text-4xl font-bold mb-6 text-yellow-400">About StyleHub</h2> <p class="text-lg mb-6 text-gray-300"> StyleHub is your premier destination for contemporary fashion. We curate the finest garments from around the world, bringing you the latest trends and timeless classics that define modern style. </p> <div class="grid grid-cols-2 gap-4 mb-6"> <div class="text-center p-4 bg-gray-700 rounded-lg"> <div class="text-3xl font-bold text-yellow-400">10K+</div> <div class="text-sm text-gray-300">Happy Customers</div> </div> <div class="text-center p-4 bg-gray-700 rounded-lg"> <div class="text-3xl font-bold text-yellow-400">500+</div> <div class="text-sm text-gray-300">Fashion Items</div> </div> </div> <button class="bg-yellow-400 text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Learn More </button> </div> <div class="animate-slide-right"> <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Fashion Store Interior" class="rounded-lg shadow-2xl hover-scale"> </div> </div> </div> </section> <!-- Collections Section --> <section id="collections" class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Our Collections</h2> <p class="text-xl text-gray-300">Discover our curated fashion categories</p> </div> <div class="grid md:grid-cols-4 gap-6"> <div class="bg-gray-800 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1434389677669-e08b4cac3105?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Women's Fashion" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2 text-yellow-400">Women's Fashion</h3> <p class="text-gray-300 text-sm">Elegant dresses, chic tops, and stylish accessories</p> </div> </div> <div class="bg-gray-800 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Men's Fashion" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2 text-yellow-400">Men's Fashion</h3> <p class="text-gray-300 text-sm">Sharp suits, casual wear, and premium accessories</p> </div> </div> <div class="bg-gray-800 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1503944583220-79d8926ad5e2?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Kids Fashion" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2 text-yellow-400">Kids Fashion</h3> <p class="text-gray-300 text-sm">Comfortable and trendy clothing for children</p> </div> </div> <div class="bg-gray-800 rounded-lg overflow-hidden card-hover"> <img src="https://images.unsplash.com/photo-1606760227091-3dd870d97f1d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8QWNjZXNzb3JpZXN8ZW58MHx8MHx8fDA%3D" alt="Accessories" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2 text-yellow-400">Accessories</h3> <p class="text-gray-300 text-sm">Bags, jewelry, and fashion accessories</p> </div> </div> </div> </div> </section> <!-- Featured Products Section --> <section id="products" class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Featured Products</h2> <p class="text-xl text-gray-300">Handpicked items from our latest collection</p> </div> <div class="fashion-grid"> <div class="product-card bg-gray-700 rounded-lg overflow-hidden hover-scale"> <img src="https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Elegant Dress" class="w-full h-80 object-cover"> <div class="product-overlay"> <button class="bg-yellow-400 text-gray-900 px-6 py-2 rounded-lg font-semibold">Quick View</button> </div> <div class="p-6"> <h3 class="text-lg font-semibold mb-2">Elegant Evening Dress</h3> <p class="text-yellow-400 font-bold text-xl">$299</p> </div> </div> <div class="product-card bg-gray-700 rounded-lg overflow-hidden hover-scale"> <img src="https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Casual Shirt" class="w-full h-80 object-cover"> <div class="product-overlay"> <button class="bg-yellow-400 text-gray-900 px-6 py-2 rounded-lg font-semibold">Quick View</button> </div> <div class="p-6"> <h3 class="text-lg font-semibold mb-2">Premium Casual Shirt</h3> <p class="text-yellow-400 font-bold text-xl">$89</p> </div> </div> <div class="product-card bg-gray-700 rounded-lg overflow-hidden hover-scale"> <img src="https://images.unsplash.com/photo-1551698618-1dfe5d97d256?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Designer Jeans" class="w-full h-80 object-cover"> <div class="product-overlay"> <button class="bg-yellow-400 text-gray-900 px-6 py-2 rounded-lg font-semibold">Quick View</button> </div> <div class="p-6"> <h3 class="text-lg font-semibold mb-2">Designer Denim Jeans</h3> <p class="text-yellow-400 font-bold text-xl">$159</p> </div> </div> <div class="product-card bg-gray-700 rounded-lg overflow-hidden hover-scale"> <img src="https://images.unsplash.com/photo-1605733513597-a8f8341084e6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aGFuZCUyMGJhZ3xlbnwwfHwwfHx8MA%3D%3D" alt="Luxury Handbag" class="w-full h-80 object-cover"> <div class="product-overlay"> <button class="bg-yellow-400 text-gray-900 px-6 py-2 rounded-lg font-semibold">Quick View</button> </div> <div class="p-6"> <h3 class="text-lg font-semibold mb-2">Luxury Handbag</h3> <p class="text-yellow-400 font-bold text-xl">$399</p> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Our Services</h2> <p class="text-xl text-gray-300">Complete fashion solutions for every need</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-gray-800 p-8 rounded-lg text-center card-hover"> <div class="text-5xl text-yellow-400 mb-4 animate-float"> <i class="fas fa-shipping-fast"></i> </div> <h3 class="text-2xl font-semibold mb-4">Free Shipping</h3> <p class="text-gray-300">Free delivery on orders over $100 worldwide</p> </div> <div class="bg-gray-800 p-8 rounded-lg text-center card-hover" style="animation-delay: 0.2s;"> <div class="text-5xl text-yellow-400 mb-4 animate-float"> <i class="fas fa-undo"></i> </div> <h3 class="text-2xl font-semibold mb-4">Easy Returns</h3> <p class="text-gray-300">30-day hassle-free return policy</p> </div> <div class="bg-gray-800 p-8 rounded-lg text-center card-hover" style="animation-delay: 0.4s;"> <div class="text-5xl text-yellow-400 mb-4 animate-float"> <i class="fas fa-user-tie"></i> </div> <h3 class="text-2xl font-semibold mb-4">Personal Styling</h3> <p class="text-gray-300">Expert fashion consultants at your service</p> </div> </div> </div> </section> <!-- Features Section --> <section class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Why Choose StyleHub?</h2> <p class="text-xl text-gray-300">Premium quality and exceptional service</p> </div> <div class="grid md:grid-cols-4 gap-6"> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-award text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">Premium Quality</h4> <p class="text-sm text-gray-300">Finest materials and craftsmanship</p> </div> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-palette text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">Latest Trends</h4> <p class="text-sm text-gray-300">Always up-to-date with fashion</p> </div> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-heart text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">Customer Love</h4> <p class="text-sm text-gray-300">Thousands of satisfied customers</p> </div> <div class="text-center p-6 bg-gray-700 rounded-lg hover-scale"> <i class="fas fa-headset text-4xl text-yellow-400 mb-4"></i> <h4 class="text-lg font-semibold mb-2">24/7 Support</h4> <p class="text-sm text-gray-300">Always here to help you</p> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">What Our Customers Say</h2> <p class="text-xl text-gray-300">Real reviews from fashion lovers</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-gray-800 p-6 rounded-lg card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Customer" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">Emma Wilson</h4> <div class="text-yellow-400">★★★★★</div> </div> </div> <p class="text-gray-300">"Absolutely love the quality and style! StyleHub has become my go-to fashion destination. Highly recommended!"</p> </div> <div class="bg-gray-800 p-6 rounded-lg card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Customer" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">James Rodriguez</h4> <div class="text-yellow-400">★★★★★</div> </div> </div> <p class="text-gray-300">"Great selection of men's fashion. The personal styling service helped me find the perfect look for my wedding!"</p> </div> <div class="bg-gray-800 p-6 rounded-lg card-hover"> <div class="flex items-center mb-4"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Customer" class="w-12 h-12 rounded-full mr-4"> <div> <h4 class="font-semibold">Sarah Chen</h4> <div class="text-yellow-400">★★★★★</div> </div> </div> <p class="text-gray-300">"Fast shipping, easy returns, and amazing customer service. StyleHub exceeds expectations every time!"</p> </div> </div> </div> </section> <!-- Location Section --> <section class="py-20 bg-gray-800"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Visit Our Store</h2> <p class="text-xl text-gray-300">Experience fashion in person</p> </div> <div class="grid md:grid-cols-2 gap-12 items-center"> <div class="animate-slide-left"> <div class="bg-gray-700 p-8 rounded-lg"> <h3 class="text-2xl font-semibold mb-6 text-yellow-400">Store Information</h3> <div class="space-y-4"> <div class="flex items-center"> <i class="fas fa-map-marker-alt text-yellow-400 mr-4"></i> <span>456 Fashion Avenue, Style District, City 67890</span> </div> <div class="flex items-center"> <i class="fas fa-phone text-yellow-400 mr-4"></i> <span>+1 (555) 987-6543</span> </div> <div class="flex items-center"> <i class="fas fa-envelope text-yellow-400 mr-4"></i> <span>hello@stylehub.com</span> </div> <div class="flex items-center"> <i class="fas fa-clock text-yellow-400 mr-4"></i> <span>Mon-Sat: 10AM-9PM, Sun: 12PM-6PM</span> </div> </div> </div> </div> <div class="animate-slide-right"> <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Fashion Store" class="w-full h-80 object-cover rounded-lg hover-scale"> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20 bg-gray-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16 animate-slide-up"> <h2 class="text-4xl font-bold mb-4 text-yellow-400">Get In Touch</h2> <p class="text-xl text-gray-300">We'd love to hear from you</p> </div> <div class="max-w-2xl mx-auto"> <form class="bg-gray-800 p-8 rounded-lg"> <div class="grid md:grid-cols-2 gap-6 mb-6"> <div> <label class="block text-sm font-medium mb-2">Name</label> <input type="text" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="Your Name"> </div> <div> <label class="block text-sm font-medium mb-2">Email</label> <input type="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="your@email.com"> </div> </div> <div class="mb-6"> <label class="block text-sm font-medium mb-2">Subject</label> <select class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300"> <option>General Inquiry</option> <option>Product Question</option> <option>Order Support</option> <option>Personal Styling</option> </select> </div> <div class="mb-6"> <label class="block text-sm font-medium mb-2">Message</label> <textarea rows="5" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:border-yellow-400 focus:outline-none transition-colors duration-300" placeholder="Your message..."></textarea> </div> <button type="submit" class="w-full bg-yellow-400 text-gray-900 py-4 rounded-lg font-semibold hover:bg-yellow-300 transition-colors duration-300"> Send Message </button> </form> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-800 py-12 border-t border-gray-700"> <div class="container mx-auto px-4"> <div class="grid md:grid-cols-4 gap-8"> <div> <div class="text-2xl font-bold text-yellow-400 mb-4"> <i class="fas fa-tshirt mr-2"></i>StyleHub </div> <p class="text-gray-300 mb-4">Your premier destination for contemporary fashion and timeless style.</p> <div class="flex space-x-4"> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-facebook text-xl"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-instagram text-xl"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-twitter text-xl"></i> </a> <a href="#" class="text-yellow-400 hover:text-yellow-300 transition-colors duration-300"> <i class="fab fa-pinterest text-xl"></i> </a> </div> </div> <div> <h4 class="text-lg font-semibold mb-4 text-yellow-400">Quick Links</h4> <ul class="space-y-2"> <li><a href="#home" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Home</a></li> <li><a href="#about" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">About</a></li> <li><a href="#collections" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Collections</a></li> <li><a href="#products" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Products</a></li> </ul> </div> <div> <h4 class="text-lg font-semibold mb-4 text-yellow-400">Categories</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Women's Fashion</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Men's Fashion</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Kids Fashion</a></li> <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition-colors duration-300">Accessories</a></li> </ul> </div> <div> <h4 class="text-lg font-semibold mb-4 text-yellow-400">Contact Info</h4> <ul class="space-y-2 text-gray-300"> <li><i class="fas fa-map-marker-alt text-yellow-400 mr-2"></i>456 Fashion Avenue</li> <li><i class="fas fa-phone text-yellow-400 mr-2"></i>+1 (555) 987-6543</li> <li><i class="fas fa-envelope text-yellow-400 mr-2"></i>hello@stylehub.com</li> <li><i class="fas fa-clock text-yellow-400 mr-2"></i>Mon-Sat: 10AM-9PM</li> </ul> </div> </div> <div class="border-t border-gray-700 mt-8 pt-8 text-center"> <p class="text-gray-300">© 2024 StyleHub. All rights reserved. Fashion that inspires.</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:'970b7813d5407950',t:'MTc1NTQ1NzgwMC4wMDAwMDA='};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; } .animate-float { animation: float 6s ease-in-out infinite; } .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-slide-up { animation: slideUp 0.8s ease-out forwards; opacity: 0; transform: translateY(50px); } .animate-slide-left { animation: slideLeft 0.8s ease-out forwards; opacity: 0; transform: translateX(-50px); } .animate-slide-right { animation: slideRight 0.8s ease-out forwards; opacity: 0; transform: translateX(50px); } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes slideUp { to { opacity: 1; transform: translateY(0); } } @keyframes slideLeft { to { opacity: 1; transform: translateX(0); } } @keyframes slideRight { to { opacity: 1; transform: translateX(0); } } .gradient-bg { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); } .hover-scale { transition: transform 0.3s ease; } .hover-scale:hover { transform: scale(1.05); } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(251, 191, 36, 0.3); } .typing-animation { overflow: hidden; border-right: 3px solid #fbbf24; white-space: nowrap; animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: #fbbf24; } } .product-card { position: relative; overflow: hidden; } .product-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .product-card:hover .product-overlay { opacity: 1; } .fashion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
JavaScript
// Mobile menu toggle function toggleMenu() { const menu = document.getElementById('mobileMenu'); menu.classList.toggle('-translate-x-full'); } // 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' }); } }); }); // 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.style.animationPlayState = 'running'; } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.animate-slide-up, .animate-slide-left, .animate-slide-right').forEach(el => { el.style.animationPlayState = 'paused'; observer.observe(el); }); // Form submission document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! We\'ll get back to you soon.'); this.reset(); }); // Add scroll effect to navbar window.addEventListener('scroll', function() { const navbar = document.querySelector('nav'); if (window.scrollY > 100) { navbar.classList.add('bg-gray-900'); } else { navbar.classList.remove('bg-gray-900'); } }); // Product quick view functionality document.querySelectorAll('.product-overlay button').forEach(button => { button.addEventListener('click', function() { alert('Product quick view coming soon!'); }); }); // Shopping cart functionality document.querySelector('.fa-shopping-bag').addEventListener('click', function() { alert('Shopping cart feature coming soon!'); }); // Search functionality document.querySelector('.fa-search').addEventListener('click', function() { const searchTerm = prompt('What are you looking for?'); if (searchTerm) { alert(`Searching for: ${searchTerm}`); } }); // User account functionality document.querySelector('.fa-user').addEventListener('click', function() { alert('User account features coming soon!'); }); // Shop Now button functionality document.querySelectorAll('button').forEach(button => { if (button.textContent.includes('Shop Now')) { button.addEventListener('click', function() { document.querySelector('#products').scrollIntoView({ behavior: 'smooth' }); }); } }); // Add loading animation window.addEventListener('load', function() { document.body.classList.add('loaded'); });
Output Preview
Desktop
Mobile
Fullscreen