Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ExpressDeal - Online Shopping Marketplace</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> | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .category-item:hover .category-icon { | |
| transform: scale(1.1); | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .carousel { | |
| scroll-behavior: smooth; | |
| } | |
| .price-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| background: #f59e0b; | |
| cursor: pointer; | |
| border-radius: 50%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Top Navigation Bar --> | |
| <div class="bg-gray-900 text-white py-2 px-4 text-sm hidden md:block"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-yellow-400">Ship to: United States</a> | |
| <a href="#" class="hover:text-yellow-400">Buyer Protection</a> | |
| <a href="#" class="hover:text-yellow-400">Customer Service</a> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-yellow-400"><i class="fas fa-bell mr-1"></i> Notifications</a> | |
| <a href="#" class="hover:text-yellow-400"><i class="fas fa-heart mr-1"></i> Wish List</a> | |
| <a href="#" class="hover:text-yellow-400"><i class="fas fa-user mr-1"></i> My Account</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <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-red-600">Express<span class="text-yellow-500">Deal</span></a> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="flex-1 mx-8 hidden md:block"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search for products..." | |
| class="w-full py-2 px-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-yellow-500"> | |
| <button class="absolute right-0 top-0 h-full px-6 bg-yellow-500 text-white rounded-r-full hover:bg-yellow-600"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Cart and User --> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="text-gray-700 hover:text-yellow-500 relative"> | |
| <i class="fas fa-shopping-cart 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="hidden md:block text-gray-700 hover:text-yellow-500"> | |
| <i class="fas fa-user-circle text-xl"></i> | |
| </a> | |
| <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 products..." | |
| class="w-full py-2 px-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-yellow-500"> | |
| <button class="absolute right-0 top-0 h-full px-4 bg-yellow-500 text-white rounded-r-full hover:bg-yellow-600"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Categories Navigation --> | |
| <nav class="bg-white border-b border-gray-200 hidden md:block"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center space-x-6 py-3 overflow-x-auto"> | |
| <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">Home</a> | |
| <div class="dropdown relative"> | |
| <button class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium flex items-center"> | |
| Categories <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute left-0 mt-2 w-48 bg-white shadow-lg rounded-md py-1 z-50 hidden"> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Electronics</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Fashion</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Home & Garden</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Toys & Hobbies</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Beauty & Health</a> | |
| </div> | |
| </div> | |
| <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">New Arrivals</a> | |
| <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">Deals</a> | |
| <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">Coupons</a> | |
| <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">Top Brands</a> | |
| <a href="#" class="whitespace-nowrap text-gray-700 hover:text-yellow-500 font-medium">Super Value</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Hero Carousel --> | |
| <div class="relative overflow-hidden rounded-lg mb-8"> | |
| <div class="carousel flex overflow-x-auto snap-x snap-mandatory scroll-smooth h-64 md:h-96"> | |
| <div class="flex-none w-full snap-start"> | |
| <img src="https://via.placeholder.com/1200x400?text=Summer+Sale+Up+to+70%25+Off" alt="Summer Sale" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-none w-full snap-start"> | |
| <img src="https://via.placeholder.com/1200x400?text=New+Arrivals+from+Top+Brands" alt="New Arrivals" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-none w-full snap-start"> | |
| <img src="https://via.placeholder.com/1200x400?text=Free+Shipping+on+Orders+Over+%2410" alt="Free Shipping" class="w-full h-full 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" onclick="scrollCarousel(0)"></button> | |
| <button class="w-3 h-3 rounded-full bg-white opacity-50" onclick="scrollCarousel(1)"></button> | |
| <button class="w-3 h-3 rounded-full bg-white opacity-50" onclick="scrollCarousel(2)"></button> | |
| </div> | |
| </div> | |
| <!-- Categories Grid --> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-8 gap-4 mb-8"> | |
| <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all"> | |
| <div class="category-icon w-12 h-12 mx-auto mb-2 text-yellow-500 transition-transform"> | |
| <i class="fas fa-mobile-alt text-3xl"></i> | |
| </div> | |
| <span class="text-sm font-medium">Phones</span> | |
| </a> | |
| <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all"> | |
| <div class="category-icon w-12 h-12 mx-auto mb-2 text-blue-500 transition-transform"> | |
| <i class="fas fa-laptop text-3xl"></i> | |
| </div> | |
| <span class="text-sm font-medium">Computers</span> | |
| </a> | |
| <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all"> | |
| <div class="category-icon w-12 h-12 mx-auto mb-2 text-green-500 transition-transform"> | |
| <i class="fas fa-tshirt text-3xl"></i> | |
| </div> | |
| <span class="text-sm font-medium">Fashion</span> | |
| </a> | |
| <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all"> | |
| <div class="category-icon w-12 h-12 mx-auto mb-2 text-red-500 transition-transform"> | |
| <i class="fas fa-home text-3xl"></i> | |
| </div> | |
| <span class="text-sm font-medium">Home</span> | |
| </a> | |
| <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all"> | |
| <div class="category-icon w-12 h-12 mx-auto mb-2 text-purple-500 transition-transform"> | |
| <i class="fas fa-gamepad text-3xl"></i> | |
| </div> | |
| <span class="text-sm font-medium">Toys</span> | |
| </a> | |
| <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all"> | |
| <div class="category-icon w-12 h-12 mx-auto mb-2 text-pink-500 transition-transform"> | |
| <i class="fas fa-heart text-3xl"></i> | |
| </div> | |
| <span class="text-sm font-medium">Beauty</span> | |
| </a> | |
| <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all"> | |
| <div class="category-icon w-12 h-12 mx-auto mb-2 text-indigo-500 transition-transform"> | |
| <i class="fas fa-car text-3xl"></i> | |
| </div> | |
| <span class="text-sm font-medium">Automotive</span> | |
| </a> | |
| <a href="#" class="category-item bg-white p-4 rounded-lg shadow-sm text-center hover:shadow-md transition-all"> | |
| <div class="category-icon w-12 h-12 mx-auto mb-2 text-yellow-600 transition-transform"> | |
| <i class="fas fa-tools text-3xl"></i> | |
| </div> | |
| <span class="text-sm font-medium">Tools</span> | |
| </a> | |
| </div> | |
| <!-- Deals Section --> | |
| <section class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold">Today's Deals</h2> | |
| <a href="#" class="text-yellow-600 hover:underline">See All</a> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 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://via.placeholder.com/300x300?text=Wireless+Earbuds" alt="Wireless Earbuds" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-30%</div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Bluetooth Wireless Earbuds with Charging Case</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(1245)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$15.99</span> | |
| <span class="text-gray-500 text-xs line-through ml-2">$22.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</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://via.placeholder.com/300x300?text=Smart+Watch" alt="Smart Watch" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-45%</div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Smart Watch Fitness Tracker with Heart Rate Monitor</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(892)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$28.50</span> | |
| <span class="text-gray-500 text-xs line-through ml-2">$51.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</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://via.placeholder.com/300x300?text=Power+Bank" alt="Power Bank" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-25%</div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">20000mAh Power Bank Fast Charging Portable</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(756)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$19.99</span> | |
| <span class="text-gray-500 text-xs line-through ml-2">$26.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</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://via.placeholder.com/300x300?text=LED+Strip" alt="LED Strip" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-50%</div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">RGB LED Strip Lights with Remote Control</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(1342)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$8.99</span> | |
| <span class="text-gray-500 text-xs line-through ml-2">$17.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</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://via.placeholder.com/300x300?text=Phone+Case" alt="Phone Case" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-60%</div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Shockproof Phone Case for iPhone 14 Pro Max</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(567)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$3.99</span> | |
| <span class="text-gray-500 text-xs line-through ml-2">$9.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 6 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Wireless+Charger" alt="Wireless Charger" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-35%</div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">15W Fast Wireless Charger Stand for iPhone</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(1023)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$12.49</span> | |
| <span class="text-gray-500 text-xs line-through ml-2">$19.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Recommended Products --> | |
| <section class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold">Recommended For You</h2> | |
| <a href="#" class="text-yellow-600 hover:underline">See All</a> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> | |
| <!-- Repeat product cards or add new ones --> | |
| <!-- Product Card 7 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Air+Fryer" alt="Air Fryer" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">5.5L Digital Air Fryer with Touch Screen</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(432)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$59.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 8 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Blender" alt="Blender" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">1500W Professional Blender for Smoothies</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(289)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$45.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 9 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Robot+Vacuum" alt="Robot Vacuum" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Smart Robot Vacuum Cleaner with App Control</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(678)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$129.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 10 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Projector" alt="Projector" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Mini Portable Projector 1080P Support 4K</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(543)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$89.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 11 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Drone" alt="Drone" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">4K Camera Drone with GPS Foldable RC Quadcopter</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(321)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$159.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Flash Sale Banner --> | |
| <div class="bg-red-600 text-white rounded-lg p-4 mb-8 flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-xl font-bold">FLASH SALE</h3> | |
| <p class="text-sm">Ends in 12:34:56</p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="bg-white text-red-600 px-3 py-1 rounded font-bold">12</div> | |
| <span>:</span> | |
| <div class="bg-white text-red-600 px-3 py-1 rounded font-bold">34</div> | |
| <span>:</span> | |
| <div class="bg-white text-red-600 px-3 py-1 rounded font-bold">56</div> | |
| </div> | |
| <a href="#" class="bg-white text-red-600 px-6 py-2 rounded-full font-bold hover:bg-gray-100">SHOP NOW</a> | |
| </div> | |
| <!-- Filter and Products Section --> | |
| <section class="mb-8"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"> | |
| <h2 class="text-xl font-bold mb-2 md:mb-0">All Products</h2> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <span class="text-gray-600 mr-2">Sort by:</span> | |
| <select class="border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-2 focus:ring-yellow-500"> | |
| <option>Best Match</option> | |
| <option>Price Low to High</option> | |
| <option>Price High to Low</option> | |
| <option>Newest</option> | |
| <option>Top Sales</option> | |
| </select> | |
| </div> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row"> | |
| <!-- Filters Sidebar --> | |
| <div class="hidden md:block w-64 mr-6"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm mb-4"> | |
| <h3 class="font-bold mb-3">Price</h3> | |
| <input type="range" min="1" max="500" value="100" class="w-full price-slider mb-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span>$1</span> | |
| <span>$500+</span> | |
| </div> | |
| <div class="flex items-center mt-3"> | |
| <input type="text" placeholder="Min" class="w-20 border border-gray-300 rounded px-2 py-1 mr-2"> | |
| <span>-</span> | |
| <input type="text" placeholder="Max" class="w-20 border border-gray-300 rounded px-2 py-1 ml-2"> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm mb-4"> | |
| <h3 class="font-bold mb-3">Categories</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="electronics" class="mr-2"> | |
| <label for="electronics">Electronics</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="fashion" class="mr-2"> | |
| <label for="fashion">Fashion</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="home" class="mr-2"> | |
| <label for="home">Home & Garden</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="beauty" class="mr-2"> | |
| <label for="beauty">Beauty & Health</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="toys" class="mr-2"> | |
| <label for="toys">Toys & Hobbies</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <h3 class="font-bold mb-3">Shipping Options</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="free-shipping" class="mr-2"> | |
| <label for="free-shipping">Free Shipping</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="fast-delivery" class="mr-2"> | |
| <label for="fast-delivery">Fast Delivery</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Products Grid --> | |
| <div class="flex-1"> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <!-- Repeat product cards or add new ones --> | |
| <!-- Product Card 12 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Neck+Massager" alt="Neck Massager" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Neck and Shoulder Massager with Heat</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(234)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$35.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 13 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Desk+Lamp" alt="Desk Lamp" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">LED Desk Lamp with USB Charging Port</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(189)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$22.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 14 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Backpack" alt="Backpack" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Anti-Theft Laptop Backpack with USB Port</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(456)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$29.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 15 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Water+Bottle" alt="Water Bottle" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Insulated Stainless Steel Water Bottle</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(321)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$14.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 16 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Yoga+Mat" alt="Yoga Mat" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Non-Slip Yoga Mat with Carrying Strap</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(278)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$18.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 17 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Wireless+Keyboard" alt="Wireless Keyboard" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Wireless Keyboard and Mouse Combo</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(412)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$24.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 18 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Electric+Toothbrush" alt="Electric Toothbrush" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Sonic Electric Toothbrush with 4 Brush Heads</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(367)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$32.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 19 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x300?text=Smart+Scale" alt="Smart Scale" class="w-full h-48 object-contain"> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium mb-1 line-clamp-2">Digital Body Fat Scale with Bluetooth</h3> | |
| <div class="flex items-center mb-1"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(298)</span> | |
| </div> | |
| <div class="flex items-end"> | |
| <span class="text-red-500 font-bold">$26.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Free Shipping</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-8"> | |
| <nav class="flex items-center space-x-1"> | |
| <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="px-3 py-1 rounded border border-yellow-500 bg-yellow-500 text-white">1</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">2</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">3</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">4</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">5</button> | |
| <span class="px-2">...</span> | |
| <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100">10</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <div class="bg-gray-100 rounded-lg p-6 mb-8 text-center"> | |
| <h3 class="text-xl font-bold mb-2">Get the Latest Deals</h3> | |
| <p class="text-gray-600 mb-4">Subscribe to our newsletter and get $10 off your first order</p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Your email address" class="flex-1 py-2 px-4 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"> | |
| <button class="bg-yellow-500 text-white px-6 py-2 rounded-r-lg hover:bg-yellow-600">Subscribe</button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-10 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-8"> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Customer Service</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Returns & Refunds</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Order Tracking</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">About Us</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About ExpressDeal</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">Corporate News</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Investor Relations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Social Responsibility</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Payment & Shipping</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Payment Methods</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Shipping Guide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Local Shipping</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">International Shipping</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Dropshipping</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Buyer Protection</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Money Back Guarantee</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Buyer Safety Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Product Quality</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Dispute Resolution</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Report IPR Infringement</a></li> | |
| </ul> | |
| </div> | |
| <div class="col-span-2 md:col-span-4 lg:col-span-1"> | |
| <h4 class="text-lg font-bold mb-4">Download App</h4> | |
| <div class="space-y-4"> | |
| <div class="flex items-center bg-black p-2 rounded"> | |
| <div class="text-3xl mr-3"> | |
| <i class="fab fa-apple"></i> | |
| </div> | |
| <div> | |
| <div class="text-xs">Download on the</div> | |
| <div class="font-bold">App Store</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center bg-black p-2 rounded"> | |
| <div class="text-3xl mr-3"> | |
| <i class="fab fa-google-play"></i> | |
| </div> | |
| <div> | |
| <div class="text-xs">Get it on</div> | |
| <div class="font-bold">Google Play</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div class="mb-4 md:mb-0"> | |
| <a href="#" class="text-2xl font-bold text-red-600">Express<span class="text-yellow-500">Deal</span></a> | |
| </div> | |
| <div class="flex space-x-4 mb-4 md:mb-0"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest-p"></i></a> | |
| </div> | |
| <div class="text-gray-400 text-sm"> | |
| © 2023 ExpressDeal. All Rights Reserved. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-6 right-6 bg-gray-800 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Carousel Navigation | |
| function scrollCarousel(index) { | |
| const carousel = document.querySelector('.carousel'); | |
| const items = document.querySelectorAll('.carousel > div'); | |
| carousel.scrollTo({ | |
| left: items[index].offsetLeft, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| // Mobile Menu Toggle (placeholder for functionality) | |
| document.querySelector('.md\\:hidden.text-gray-700').addEventListener('click', function() { | |
| alert('Mobile menu would open here in a full implementation'); | |
| }); | |
| // Filter Toggle for Mobile | |
| document.querySelector('.md\\:hidden.text-gray-700 + button').addEventListener('click', function() { | |
| alert('Filters would open here in a full implementation'); | |
| }); | |
| // Product Card Click | |
| document.querySelectorAll('.product-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| alert('Product details page would open here in a full implementation'); | |
| }); | |
| }); | |
| </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=dmoedbeck/expressdeal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |