Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>E-Commerce Website</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for elements that need more specific styling */ | |
| .marquee { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| } | |
| .marquee span { | |
| display: inline-block; | |
| padding-left: 100%; | |
| animation: marquee 15s linear infinite; | |
| } | |
| @keyframes marquee { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(-100%, 0); } | |
| } | |
| .hero-slide { | |
| transition: opacity 0.5s ease-in-out; | |
| } | |
| .testimonial-slide, .blog-slide, .brand-slide { | |
| transition: transform 0.5s ease-in-out; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans"> | |
| <!-- Announcement Bar --> | |
| <div class="bg-gradient-to-r from-pink-500 to-purple-600 text-white py-2 px-4 text-center"> | |
| <div class="marquee"> | |
| <span class="font-bold">🚀 FLASH SALE: 50% OFF ALL ITEMS - LIMITED TIME OFFER! 🚀 FREE SHIPPING ON ORDERS OVER $50 🚀 USE CODE: SUMMER2023 FOR EXTRA 10% OFF</span> | |
| </div> | |
| </div> | |
| <!-- Header Section --> | |
| <header class="sticky top-0 z-50 bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-indigo-600"> | |
| <i class="fas fa-shopping-bag mr-2"></i>ShopEase | |
| </a> | |
| </div> | |
| <!-- Main Menu --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <div class="dropdown relative"> | |
| <button class="font-medium hover:text-indigo-600 flex items-center"> | |
| Categories <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-50"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-indigo-50">Electronics</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-indigo-50">Fashion</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-indigo-50">Home & Garden</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-indigo-50">Beauty</a> | |
| </div> | |
| </div> | |
| <a href="#" class="font-medium hover:text-indigo-600">Brands</a> | |
| <a href="#" class="font-medium hover:text-indigo-600">Collections</a> | |
| <div class="dropdown relative"> | |
| <button class="font-medium hover:text-indigo-600 flex items-center"> | |
| Vendors <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-50"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-indigo-50">Vendor List</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-indigo-50">Become a Vendor</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Search and Icons --> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:block relative"> | |
| <input type="text" placeholder="Search products..." class="pl-10 pr-4 py-2 border rounded-full text-sm w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 relative"> | |
| <i class="fas fa-user text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 relative"> | |
| <i class="fas fa-heart text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 relative"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">5</span> | |
| </a> | |
| <a href="#" class="hidden md:block bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700"> | |
| Vendor Login | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu Button (hidden on larger screens) --> | |
| <div class="md:hidden bg-gray-100 p-2 flex justify-between items-center"> | |
| <button id="mobile-menu-button" class="text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="pl-8 pr-4 py-1 border rounded-full text-sm w-full focus:outline-none focus:ring-1 focus:ring-indigo-500"> | |
| <i class="fas fa-search absolute left-2 top-2 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu (hidden by default) --> | |
| <div id="mobile-menu" class="hidden bg-white shadow-lg absolute w-full z-50"> | |
| <div class="px-4 py-2 border-b"> | |
| <a href="#" class="block py-2 font-medium">Categories</a> | |
| <div class="pl-4"> | |
| <a href="#" class="block py-2 text-sm">Electronics</a> | |
| <a href="#" class="block py-2 text-sm">Fashion</a> | |
| <a href="#" class="block py-2 text-sm">Home & Garden</a> | |
| </div> | |
| </div> | |
| <div class="px-4 py-2 border-b"> | |
| <a href="#" class="block py-2 font-medium">Brands</a> | |
| </div> | |
| <div class="px-4 py-2 border-b"> | |
| <a href="#" class="block py-2 font-medium">Collections</a> | |
| </div> | |
| <div class="px-4 py-2"> | |
| <a href="#" class="block py-2 font-medium">Vendor Login</a> | |
| </div> | |
| </div> | |
| <!-- Hero Slider --> | |
| <div class="relative overflow-hidden"> | |
| <div class="hero-slider-container flex transition-transform duration-500"> | |
| <!-- Slide 1 --> | |
| <div class="hero-slide w-full flex-shrink-0 relative"> | |
| <div class="bg-gray-900 bg-opacity-50 absolute inset-0"></div> | |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1999&q=80" alt="Hero Image" class="w-full h-96 object-cover"> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="container mx-auto px-4 text-white"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-2">Summer Collection 2023</h1> | |
| <p class="text-xl mb-4">Discover the latest trends in fashion</p> | |
| <p class="mb-6 max-w-lg">Elevate your wardrobe with our premium selection of summer essentials designed for comfort and style.</p> | |
| <a href="#" class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium hover:bg-indigo-100 transition">Shop Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 2 --> | |
| <div class="hero-slide w-full flex-shrink-0 relative hidden"> | |
| <div class="bg-gray-900 bg-opacity-50 absolute inset-0"></div> | |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2d55e0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Hero Image" class="w-full h-96 object-cover"> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="container mx-auto px-4 text-white"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-2">Tech Gadgets Sale</h1> | |
| <p class="text-xl mb-4">Up to 40% off on electronics</p> | |
| <p class="mb-6 max-w-lg">Upgrade your tech with our cutting-edge gadgets and accessories at unbeatable prices.</p> | |
| <a href="#" class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium hover:bg-indigo-100 transition">Shop Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slider Controls --> | |
| <button id="prev-slide" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 rounded-full p-2 text-gray-800 hover:bg-opacity-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button id="next-slide" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 rounded-full p-2 text-gray-800 hover:bg-opacity-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| <!-- Slider Indicators --> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="slide-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100"></button> | |
| <button class="slide-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100"></button> | |
| </div> | |
| </div> | |
| <!-- Collections Section --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold">Shop by Categories</h2> | |
| <a href="#" class="text-indigo-600 hover:underline font-medium">View All Categories</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6"> | |
| <!-- Category 1 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Fashion" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">Fashion</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <a href="#" class="block text-center bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 transition">Shop Now</a> | |
| </div> | |
| </div> | |
| <!-- Category 2 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2d55e0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Electronics" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">Electronics</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <a href="#" class="block text-center bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 transition">Shop Now</a> | |
| </div> | |
| </div> | |
| <!-- Category 3 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Home & Garden" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">Home & Garden</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <a href="#" class="block text-center bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 transition">Shop Now</a> | |
| </div> | |
| </div> | |
| <!-- Category 4 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Beauty" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">Beauty</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <a href="#" class="block text-center bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 transition">Shop Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products Section --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold">Featured Products</h2> | |
| <a href="#" class="text-indigo-600 hover:underline font-medium">View All Products</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Running Shoes" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2"> | |
| <button class="bg-white rounded-full p-2 text-gray-700 hover:text-red-500"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> | |
| SALE | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium mb-1">Premium Running Shoes</h3> | |
| <p class="text-gray-600 text-sm mb-2">Lightweight and comfortable for all-day wear</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="font-bold text-indigo-600">$89.99</span> | |
| <span class="text-sm text-gray-500 line-through ml-2">$129.99</span> | |
| </div> | |
| <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1520390138845-fd2d229dd553?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Smart Watch" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2"> | |
| <button class="bg-white rounded-full p-2 text-gray-700 hover:text-red-500"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium mb-1">Smart Watch Pro</h3> | |
| <p class="text-gray-600 text-sm mb-2">Track your fitness and stay connected</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="font-bold text-indigo-600">$199.99</span> | |
| </div> | |
| <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2d55e0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Wireless Earbuds" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2"> | |
| <button class="bg-white rounded-full p-2 text-gray-700 hover:text-red-500"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </html> |