Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Stylo - Fashion Ecommerce</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> | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .carousel { | |
| scroll-snap-type: x mandatory; | |
| } | |
| .carousel-item { | |
| scroll-snap-align: start; | |
| } | |
| .skeleton { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Top Banner --> | |
| <div class="bg-indigo-900 text-white text-center py-1 text-sm"> | |
| Free shipping on orders above ₹799 | Use code STYLO20 for 20% off | |
| </div> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-indigo-600">STYLO</a> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="hidden md:flex flex-1 mx-8"> | |
| <div class="relative w-full"> | |
| <input type="text" placeholder="Search for brands and products" | |
| class="w-full py-2 px-4 border border-gray-300 rounded-l-full focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button class="absolute right-0 top-0 h-full px-4 bg-indigo-600 text-white rounded-r-full hover:bg-indigo-700"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <div class="flex items-center space-x-6"> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600"> | |
| <div class="text-center"> | |
| <i class="far fa-user text-xl"></i> | |
| <p class="text-xs mt-1">Profile</p> | |
| </div> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600"> | |
| <div class="text-center"> | |
| <i class="far fa-heart text-xl"></i> | |
| <p class="text-xs mt-1">Wishlist</p> | |
| </div> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600"> | |
| <div class="text-center"> | |
| <i class="fas fa-shopping-bag text-xl"></i> | |
| <p class="text-xs mt-1">Bag</p> | |
| </div> | |
| </a> | |
| </div> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Search --> | |
| <div class="mt-3 md:hidden"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search for brands and products" | |
| class="w-full py-2 px-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button class="absolute right-0 top-0 h-full px-4 text-gray-500"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Categories --> | |
| <nav class="hidden md:block bg-white border-t"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between"> | |
| <div class="dropdown relative"> | |
| <button class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium flex items-center"> | |
| Men <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-0 py-2 w-48 z-50"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">T-Shirts</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Shirts</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Jeans</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Shoes</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Accessories</a> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium flex items-center"> | |
| Women <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-0 py-2 w-48 z-50"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Tops</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Dresses</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Jeans</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Shoes</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Accessories</a> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium flex items-center"> | |
| Kids <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-0 py-2 w-48 z-50"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Clothing</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Footwear</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Toys</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Accessories</a> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium flex items-center"> | |
| Home & Living <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-0 py-2 w-48 z-50"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Bedding</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Decor</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Kitchen</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Bath</a> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium flex items-center"> | |
| Beauty <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-0 py-2 w-48 z-50"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Makeup</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Skincare</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Haircare</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Fragrances</a> | |
| </div> | |
| </div> | |
| <a href="#" class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium">Offers</a> | |
| <a href="#" class="py-3 px-4 text-gray-700 hover:text-indigo-600 font-medium">New</a> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Hero Carousel --> | |
| <div class="relative overflow-hidden rounded-xl mb-8"> | |
| <div class="carousel flex overflow-x-auto snap-x snap-mandatory scroll-smooth whitespace-nowrap hide-scrollbar"> | |
| <div class="carousel-item w-full flex-shrink-0"> | |
| <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Fashion Sale" class="w-full h-64 md:h-96 object-cover"> | |
| </div> | |
| <div class="carousel-item w-full flex-shrink-0"> | |
| <img src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Summer Collection" class="w-full h-64 md:h-96 object-cover"> | |
| </div> | |
| <div class="carousel-item w-full flex-shrink-0"> | |
| <img src="https://images.unsplash.com/photo-1556905055-8f358a7a47b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="New Arrivals" class="w-full h-64 md:h-96 object-cover"> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="w-3 h-3 rounded-full bg-white opacity-50"></button> | |
| <button class="w-3 h-3 rounded-full bg-white opacity-50"></button> | |
| <button class="w-3 h-3 rounded-full bg-white opacity-50"></button> | |
| </div> | |
| </div> | |
| <!-- Categories Grid --> | |
| <div class="mb-10"> | |
| <h2 class="text-2xl font-bold mb-6">Shop By Category</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-tshirt text-2xl text-indigo-600"></i> | |
| </div> | |
| <p class="text-sm font-medium">Men's Topwear</p> | |
| </a> | |
| <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-female text-2xl text-indigo-600"></i> | |
| </div> | |
| <p class="text-sm font-medium">Women's Ethnic</p> | |
| </a> | |
| <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shoe-prints text-2xl text-indigo-600"></i> | |
| </div> | |
| <p class="text-sm font-medium">Footwear</p> | |
| </a> | |
| <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-child text-2xl text-indigo-600"></i> | |
| </div> | |
| <p class="text-sm font-medium">Kids</p> | |
| </a> | |
| <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-home text-2xl text-indigo-600"></i> | |
| </div> | |
| <p class="text-sm font-medium">Home & Living</p> | |
| </a> | |
| <a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <div class="w-16 h-16 mx-auto mb-2 bg-gray-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-mobile-alt text-2xl text-indigo-600"></i> | |
| </div> | |
| <p class="text-sm font-medium">Electronics</p> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Deals of the Day --> | |
| <div class="mb-10"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Deals of the Day</h2> | |
| <div class="flex items-center"> | |
| <span class="text-sm mr-2">Ends in</span> | |
| <div class="bg-gray-800 text-white px-3 py-1 rounded-md flex items-center"> | |
| <span class="font-bold">08</span> | |
| <span class="mx-1">:</span> | |
| <span class="font-bold">45</span> | |
| <span class="mx-1">:</span> | |
| <span class="font-bold">32</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> | |
| <!-- Product Card 1 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" | |
| alt="Men's T-Shirt" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded"> | |
| 40% OFF | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-sm font-medium text-gray-800 mb-1">Roadster</h3> | |
| <p class="text-xs text-gray-500 mb-2">Men's Printed Round Neck T-Shirt</p> | |
| <div class="flex items-center mb-1"> | |
| <span class="text-sm font-bold text-gray-800">₹399</span> | |
| <span class="text-xs text-gray-500 line-through ml-2">₹999</span> | |
| <span class="text-xs text-green-600 font-medium ml-2">(60% OFF)</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.2 | 1.2k</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 2 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1543076449-ae0315e7e16e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Women's Dress" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded"> | |
| 50% OFF | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-sm font-medium text-gray-800 mb-1">H&M</h3> | |
| <p class="text-xs text-gray-500 mb-2">Women's Floral Print Maxi Dress</p> | |
| <div class="flex items-center mb-1"> | |
| <span class="text-sm font-bold text-gray-800">₹1,299</span> | |
| <span class="text-xs text-gray-500 line-through ml-2">₹2,599</span> | |
| <span class="text-xs text-green-600 font-medium ml-2">(50% OFF)</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.5 | 2.4k</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 3 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1600269452121-1f5d141f8ef1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Sneakers" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded"> | |
| 30% OFF | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-sm font-medium text-gray-800 mb-1">Nike</h3> | |
| <p class="text-xs text-gray-500 mb-2">Men's Air Max Running Shoes</p> | |
| <div class="flex items-center mb-1"> | |
| <span class="text-sm font-bold text-gray-800">₹4,199</span> | |
| <span class="text-xs text-gray-500 line-through ml-2">₹5,999</span> | |
| <span class="text-xs text-green-600 font-medium ml-2">(30% OFF)</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.7 | 3.1k</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 4 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" | |
| alt="Watch" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded"> | |
| 25% OFF | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-sm font-medium text-gray-800 mb-1">Fossil</h3> | |
| <p class="text-xs text-gray-500 mb-2">Men's Chronograph Watch</p> | |
| <div class="flex items-center mb-1"> | |
| <span class="text-sm font-bold text-gray-800">₹8,999</span> | |
| <span class="text-xs text-gray-500 line-through ml-2">₹11,999</span> | |
| <span class="text-xs text-green-600 font-medium ml-2">(25% OFF)</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.8 | 1.8k</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 5 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Backpack" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded"> | |
| 20% OFF | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-sm font-medium text-gray-800 mb-1">American Tourister</h3> | |
| <p class="text-xs text-gray-500 mb-2">15.6 inch Laptop Backpack</p> | |
| <div class="flex items-center mb-1"> | |
| <span class="text-sm font-bold text-gray-800">₹1,599</span> | |
| <span class="text-xs text-gray-500 line-through ml-2">₹1,999</span> | |
| <span class="text-xs text-green-600 font-medium ml-2">(20% OFF)</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.3 | 1.5k</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top Brands --> | |
| <div class="mb-10"> | |
| <h2 class="text-2xl font-bold mb-6">Top Brands</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center"> | |
| <img src="https://logos-world.net/wp-content/uploads/2020/04/Nike-Logo.png" alt="Nike" class="h-12 object-contain"> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center"> | |
| <img src="https://logos-world.net/wp-content/uploads/2020/04/Adidas-Logo.png" alt="Adidas" class="h-12 object-contain"> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center"> | |
| <img src="https://logos-world.net/wp-content/uploads/2020/04/Puma-Logo.png" alt="Puma" class="h-12 object-contain"> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center"> | |
| <img src="https://logos-world.net/wp-content/uploads/2020/04/HM-Logo.png" alt="H&M" class="h-12 object-contain"> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center"> | |
| <img src="https://logos-world.net/wp-content/uploads/2020/04/Zara-Logo.png" alt="Zara" class="h-12 object-contain"> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4 flex items-center justify-center"> | |
| <img src="https://logos-world.net/wp-content/uploads/2020/04/Levis-Logo.png" alt="Levi's" class="h-12 object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Arrivals --> | |
| <div class="mb-10"> | |
| <h2 class="text-2xl font-bold mb-6">New Arrivals</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> | |
| <!-- Product Card 1 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Denim Jacket" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded"> | |
| NEW | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-sm font-medium text-gray-800 mb-1">Levi's</h3> | |
| <p class="text-xs text-gray-500 mb-2">Men's Denim Jacket</p> | |
| <div class="flex items-center mb-1"> | |
| <span class="text-sm font-bold text-gray-800">₹2,499</span> | |
| <span class="text-xs text-gray-500 line-through ml-2">₹3,499</span> | |
| <span class="text-xs text-green-600 font-medium ml-2">(29% OFF)</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.6 | 876</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 2 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Handbag" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded"> | |
| NEW | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-sm font-medium text-gray-800 mb-1">Michael Kors</h3> | |
| <p class="text-xs text-gray-500 mb-2">Women's Leather Handbag</p> | |
| <div class="flex items-center mb-1"> | |
| <span class="text-sm font-bold text-gray-800">₹12,999</span> | |
| <span class="text-xs text-gray-500 line-through ml-2">₹15,999</span> | |
| <span class="text-xs text-green-600 font-medium ml-2">(19% OFF)</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.9 | 432</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 3 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1523170335258-f5ed11844a49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" | |
| alt="Sunglasses" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded"> | |
| NEW | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-sm font-medium text-gray-800 mb-1">Ray-Ban</h3> | |
| <p class="text-xs text-gray-500 mb-2">Aviator Sunglasses</p> | |
| <div class="flex items-center mb-1"> | |
| <span class="text-sm font-bold text-gray-800">₹8,499</span> | |
| <span class="text-xs text-gray-500 line-through ml-2">₹9,999</span> | |
| <span class="text-xs text-green-600 font-medium ml-2">(15% OFF)</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.8 | 654</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 4 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80" | |
| alt="Perfume" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded"> | |
| NEW | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-sm font-medium text-gray-800 mb-1">Dior</h3> | |
| <p class="text-xs text-gray-500 mb-2">Sauvage Eau de Parfum</p> | |
| <div class="flex items-center mb-1"> | |
| <span class="text-sm font-bold text-gray-800">₹6,499</span> | |
| <span class="text-xs text-gray-500 line-through ml-2">₹7,499</span> | |
| <span class="text-xs text-green-600 font-medium ml-2">(13% OFF)</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.9 | 987</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 5 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ce1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" | |
| alt="Smartwatch" class="w-full h-64 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs px-2 py-1 rounded"> | |
| NEW | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-sm font-medium text-gray-800 mb-1">Apple</h3> | |
| <p class="text-xs text-gray-500 mb-2">Apple Watch Series 8</p> | |
| <div class="flex items-center mb-1"> | |
| <span class="text-sm font-bold text-gray-800">₹41,999</span> | |
| <span class="text-xs text-gray-500 line-through ml-2">₹45,999</span> | |
| <span class="text-xs text-green-600 font-medium ml-2">(9% OFF)</span> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span>4.7 | 1.2k</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Banner --> | |
| <div class="mb-10"> | |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl p-8 text-white"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-6 md:mb-0"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4">Summer Sale is Live!</h2> | |
| <p class="text-lg mb-6">Up to 60% off on selected items. Limited time offer.</p> | |
| <button class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition-colors"> | |
| Shop Now | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1556905055-8f358a7a47b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Summer Sale" class="h-48 md:h-64 rounded-lg object-cover shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trending Styles --> | |
| <div class="mb-10"> | |
| <h2 class="text-2xl font-bold mb-6">Trending Styles</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="relative rounded-xl overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1539533018447-63fcdfd7f3c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Casual Wear" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <span class="text-white font-bold text-lg">Casual Wear</span> | |
| </div> | |
| </div> | |
| <div class="relative rounded-xl overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Handbags" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <span class="text-white font-bold text-lg">Handbags</span> | |
| </div> | |
| </div> | |
| <div class="relative rounded-xl overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Backpacks" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <span class="text-white font-bold text-lg">Backpacks</span> | |
| </div> | |
| </div> | |
| <div class="relative rounded-xl overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1523170335258-f5ed11844a49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" | |
| alt="Sunglasses" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <span class="text-white font-bold text-lg">Sunglasses</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">ONLINE SHOPPING</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Men</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Women</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Kids</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Home & Living</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Beauty</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Gift Cards</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">CUSTOMER POLICIES</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">T&C</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Cancellation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Returns</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">STYLO</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Corporate</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">EXPERIENCE STYLO APP</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#"> | |
| <img src="https://www.freepnglogos.com/uploads/app-store-logo-png/google-play-and-app-store-apple-google-play-store-and-apple-app-store-5.png" | |
| alt="Download on App Store" class="h-12"> | |
| </a> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">CONNECT WITH US</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 www.stylo.com. All rights reserved. | |
| </p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Use</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Payment Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Bottom Navigation --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t"> | |
| <div class="flex justify-around py-3"> | |
| <a href="#" class="flex flex-col items-center text-indigo-600"> | |
| <i class="fas fa-home text-xl"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600"> | |
| <i class="fas fa-search text-xl"></i> | |
| <span class="text-xs mt-1">Search</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600"> | |
| <i class="far fa-heart text-xl"></i> | |
| <span class="text-xs mt-1">Wishlist</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600"> | |
| <i class="fas fa-shopping-bag text-xl"></i> | |
| <span class="text-xs mt-1">Bag</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600"> | |
| <i class="far fa-user text-xl"></i> | |
| <span class="text-xs mt-1">Account</span> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple carousel functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const carousel = document.querySelector('.carousel'); | |
| const items = document.querySelectorAll('.carousel-item'); | |
| const dots = document.querySelectorAll('.absolute.bottom-4 button'); | |
| let currentIndex = 0; | |
| function updateCarousel() { | |
| const itemWidth = items[0].clientWidth; | |
| carousel.scrollTo({ | |
| left: currentIndex * itemWidth, | |
| behavior: 'smooth' | |
| }); | |
| // Update dots | |
| dots.forEach((dot, index) => { | |
| if(index === currentIndex) { | |
| dot.classList.remove('opacity-50'); | |
| dot.classList.add('opacity-100'); | |
| } else { | |
| dot.classList.add('opacity-50'); | |
| dot.classList.remove('opacity-100'); | |
| } | |
| }); | |
| } | |
| // Auto slide | |
| setInterval(() => { | |
| currentIndex = (currentIndex + 1) % items.length; | |
| updateCarousel(); | |
| }, 3000); | |
| // Dot navigation | |
| dots.forEach((dot, index) => { | |
| dot.addEventListener('click', () => { | |
| currentIndex = index; | |
| updateCarousel(); | |
| }); | |
| }); | |
| // Initialize first dot | |
| dots[0].classList.remove('opacity-50'); | |
| dots[0].classList.add('opacity-100'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mickey1994/stylo-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |