Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kiban Shoe Clone - Premium Footwear Collection</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| .product-card { | |
| transition: all 0.3s ease; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .banner-overlay { | |
| background: linear-gradient(45deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%); | |
| } | |
| .category-card:hover img { | |
| transform: scale(1.05); | |
| } | |
| .category-card img { | |
| transition: transform 0.5s ease; | |
| } | |
| .discount-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); | |
| color: #000; | |
| padding: 3px 8px; | |
| border-radius: 15px; | |
| font-weight: 600; | |
| font-size: 12px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); | |
| } | |
| .add-to-cart-btn { | |
| background: linear-gradient(to right, #000000 0%, #434343 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .add-to-cart-btn:hover { | |
| background: linear-gradient(to right, #434343 0%, #000000 100%); | |
| transform: translateY(-2px); | |
| } | |
| .newsletter-input { | |
| border: 1px solid #444; | |
| background: rgba(255,255,255,0.1); | |
| color: white; | |
| } | |
| .newsletter-input::placeholder { | |
| color: #ccc; | |
| } | |
| .newsletter-btn { | |
| background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); | |
| color: #000; | |
| font-weight: 600; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .scroll-container { | |
| scrollbar-width: thin; | |
| scrollbar-color: #f6d365 #f1f1f1; | |
| } | |
| .scroll-container::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .scroll-container::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| .scroll-container::-webkit-scrollbar-thumb { | |
| background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); | |
| border-radius: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-black text-white sticky top-0 z-50 shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row justify-between items-center"> | |
| <!-- Logo and Mobile Menu --> | |
| <div class="flex items-center justify-between w-full md:w-auto"> | |
| <div class="text-2xl font-bold flex items-center"> | |
| <span class="text-yellow-500 text-3xl mr-2"><i class="fas fa-shoe-prints"></i></span> | |
| <span class="hidden sm:inline">KIBAN SHOE</span> | |
| </div> | |
| <button class="md:hidden text-white focus:outline-none" id="mobileMenuToggle"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="relative mt-4 md:mt-0 w-full md:w-auto md:mx-4"> | |
| <input type="text" placeholder="Search Products..." | |
| class="px-4 py-2 rounded-full text-black w-full md:w-80 focus:outline-none focus:ring-2 focus:ring-yellow-500"> | |
| <button class="absolute right-3 top-2 text-gray-500 hover:text-yellow-500 transition"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <!-- Contact and Account --> | |
| <div class="hidden md:flex space-x-4 items-center mt-4 md:mt-0"> | |
| <a href="tel:01888005092" class="hover:text-yellow-500 transition flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> | |
| <span class="hidden lg:inline">01888-005092</span> | |
| </a> | |
| <a href="mailto:kibanshoe@gmail.com" class="hover:text-yellow-500 transition flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span class="hidden lg:inline">kibanshoe@gmail.com</span> | |
| </a> | |
| <a href="#" class="hover:text-yellow-500 transition flex items-center"> | |
| <i class="fas fa-user mr-2"></i> | |
| <span class="hidden lg:inline">Sign In</span> | |
| </a> | |
| <a href="#" class="hover:text-yellow-500 transition relative flex items-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> | |
| <span class="hidden lg:inline">Cart</span> | |
| <span class="absolute -top-2 -right-2 bg-yellow-500 text-black text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navbar --> | |
| <nav class="bg-gradient-to-r from-yellow-500 to-yellow-400 text-black shadow-md"> | |
| <div class="container mx-auto px-4"> | |
| <div class="hidden md:flex space-x-6 py-3 font-semibold overflow-x-auto scroll-container"> | |
| <a href="#" class="hover:bg-black hover:text-yellow-500 px-3 py-1 rounded transition whitespace-nowrap">TRENDY</a> | |
| <a href="#" class="hover:bg-black hover:text-yellow-500 px-3 py-1 rounded transition whitespace-nowrap">STOCK CLEARANCE SALE</a> | |
| <a href="#" class="hover:bg-black hover:text-yellow-500 px-3 py-1 rounded transition whitespace-nowrap">UPCOMING PRODUCT</a> | |
| <a href="#" class="hover:bg-black hover:text-yellow-500 px-3 py-1 rounded transition whitespace-nowrap">REQUEST PRODUCT</a> | |
| <a href="#" class="hover:bg-black hover:text-yellow-500 px-3 py-1 rounded transition whitespace-nowrap">MEN'S COLLECTION</a> | |
| <a href="#" class="hover:bg-black hover:text-yellow-500 px-3 py-1 rounded transition whitespace-nowrap">WOMEN'S COLLECTION</a> | |
| <a href="#" class="hover:bg-black hover:text-yellow-500 px-3 py-1 rounded transition whitespace-nowrap">ACCESSORIES</a> | |
| <a href="#" class="hover:bg-black hover:text-yellow-500 px-3 py-1 rounded transition whitespace-nowrap">LIMITED EDITION</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu (Hidden by default) --> | |
| <div class="md:hidden bg-gray-800 text-white hidden" id="mobileMenu"> | |
| <div class="container mx-auto px-4 py-2"> | |
| <a href="#" class="block py-2 hover:bg-gray-700 px-2 rounded transition">TRENDY</a> | |
| <a href="#" class="block py-2 hover:bg-gray-700 px-2 rounded transition">STOCK CLEARANCE SALE</a> | |
| <a href="#" class="block py-2 hover:bg-gray-700 px-2 rounded transition">UPCOMING PRODUCT</a> | |
| <a href="#" class="block py-2 hover:bg-gray-700 px-2 rounded transition">REQUEST PRODUCT</a> | |
| <div class="border-t border-gray-700 mt-2 pt-2"> | |
| <a href="tel:01888005092" class="block py-2 hover:bg-gray-700 px-2 rounded transition"> | |
| <i class="fas fa-phone-alt mr-2"></i> 01888-005092 | |
| </a> | |
| <a href="mailto:kibanshoe@gmail.com" class="block py-2 hover:bg-gray-700 px-2 rounded transition"> | |
| <i class="fas fa-envelope mr-2"></i> kibanshoe@gmail.com | |
| </a> | |
| <a href="#" class="block py-2 hover:bg-gray-700 px-2 rounded transition"> | |
| <i class="fas fa-user mr-2"></i> Sign In | |
| </a> | |
| <a href="#" class="block py-2 hover:bg-gray-700 px-2 rounded transition"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Cart | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Container --> | |
| <div class="container mx-auto px-4 py-6 flex flex-col lg:flex-row"> | |
| <!-- Sidebar --> | |
| <aside class="w-full lg:w-1/4 bg-white p-4 shadow-lg rounded-lg mb-6 lg:mb-0 lg:mr-6"> | |
| <h2 class="text-xl font-bold mb-4 border-b pb-2 flex items-center"> | |
| <i class="fas fa-list mr-2 text-yellow-500"></i> Top Categories | |
| </h2> | |
| <ul class="space-y-2"> | |
| <li class="dropdown relative group"> | |
| <div class="font-bold py-2 px-2 hover:bg-yellow-100 rounded cursor-pointer flex justify-between items-center transition"> | |
| <span class="flex items-center"> | |
| <i class="fas fa-male mr-2 text-gray-600"></i> Men's Footwear | |
| </span> | |
| <i class="fas fa-chevron-down text-xs transition-transform group-hover:rotate-180"></i> | |
| </div> | |
| <ul class="dropdown-menu hidden absolute left-0 right-0 lg:left-full lg:right-auto lg:top-0 bg-white shadow-lg w-full lg:w-48 p-2 border border-gray-200 z-10 rounded-lg"> | |
| <li><a href="#" class="block py-1 px-2 hover:bg-gray-100 rounded transition flex items-center"><i class="fas fa-hiking mr-2 text-gray-500"></i> Hiking</a></li> | |
| <li><a href="#" class="block py-1 px-2 hover:bg-gray-100 rounded transition flex items-center"><i class="fas fa-running mr-2 text-gray-500"></i> Running Shoes</a></li> | |
| <li><a href="#" class="block py-1 px-2 hover:bg-gray-100 rounded transition flex items-center"><i class="fas fa-sandal mr-2 text-gray-500"></i> Sandal</a></li> | |
| <li><a href="#" class="block py-1 px-2 hover:bg-gray-100 rounded transition flex items-center"><i class="fas fa-socks mr-2 text-gray-500"></i> Insole</a></li> | |
| <li><a href="#" class="block py-1 px-2 hover:bg-gray-100 rounded transition flex items-center"><i class="fas fa-tshirt mr-2 text-gray-500"></i> Trendy Casual</a></li> | |
| <li><a href="#" class="block py-1 px-2 hover:bg-gray-100 rounded transition flex items-center"><i class="fas fa-sneaker mr-2 text-gray-500"></i> Sneakers Shoes</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#" class="block py-2 px-2 hover:bg-yellow-100 rounded transition flex items-center"><i class="fas fa-fire-alt mr-2 text-red-500"></i> Stock Clearance Sale</a></li> | |
| <li><a href="#" class="block py-2 px-2 hover:bg-yellow-100 rounded transition flex items-center"><i class="fas fa-belt mr-2 text-gray-600"></i> Belt</a></li> | |
| <li><a href="#" class="block py-2 px-2 hover:bg-yellow-100 rounded transition flex items-center"><i class="fas fa-wallet mr-2 text-gray-600"></i> Wallet</a></li> | |
| <li><a href="#" class="block py-2 px-2 hover:bg-yellow-100 rounded transition flex items-center"><i class="fas fa-credit-card mr-2 text-gray-600"></i> Card Holder</a></li> | |
| <li><a href="#" class="block py-2 px-2 hover:bg-yellow-100 rounded transition flex items-center"><i class="fas fa-shoe-prints mr-2 text-gray-600"></i> Shoes Accessories</a></li> | |
| <li><a href="#" class="block py-2 px-2 hover:bg-yellow-100 rounded transition flex items-center"><i class="fas fa-vest mr-2 text-gray-600"></i> Punjabi Shoes</a></li> | |
| <li><a href="#" class="block py-2 px-2 hover:bg-yellow-100 rounded transition flex items-center"><i class="fas fa-user-tie mr-2 text-gray-600"></i> Casual Shoes</a></li> | |
| <li><a href="#" class="block py-2 px-2 hover:bg-yellow-100 rounded transition flex items-center"><i class="fas fa-clock mr-2 text-gray-600"></i> Luxury Watches</a></li> | |
| <li><a href="#" class="block py-2 px-2 hover:bg-yellow-100 rounded transition flex items-center"><i class="fas fa-sun mr-2 text-yellow-500"></i> Summer Offers</a></li> | |
| <li><a href="#" class="block py-2 px-2 hover:bg-yellow-100 rounded transition flex items-center"><i class="fas fa-snowflake mr-2 text-blue-300"></i> Winter Sale</a></li> | |
| </ul> | |
| <div class="mt-6 border-t pt-4"> | |
| <h3 class="font-bold mb-3 flex items-center"> | |
| <i class="fas fa-filter mr-2 text-yellow-500"></i> Filter By Price | |
| </h3> | |
| <div class="px-2"> | |
| <input type="range" min="0" max="10000" value="5000" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between mt-2 text-sm"> | |
| <span>TK 0</span> | |
| <span>TK 10000</span> | |
| </div> | |
| <button class="mt-3 w-full bg-black text-white px-4 py-2 rounded hover:bg-gray-800 transition"> | |
| Filter | |
| </button> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <section class="w-full lg:w-3/4"> | |
| <!-- Banner Image Section --> | |
| <div class="relative w-full rounded-lg overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1600269452121-1fda279d7e7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="New Arrival Shoes" | |
| class="w-full h-48 sm:h-64 md:h-80 object-cover"> | |
| <div class="absolute inset-0 banner-overlay flex items-center justify-center"> | |
| <div class="text-center p-4"> | |
| <h2 class="text-white text-2xl sm:text-3xl md:text-4xl font-bold mb-2">NEW ARRIVAL SHOES</h2> | |
| <p class="text-white text-lg mb-4">Discover our premium collection for 2024</p> | |
| <button class="bg-yellow-500 text-black px-6 py-2 rounded-full font-bold hover:bg-yellow-600 transition"> | |
| SHOP NOW | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Category Cards --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6"> | |
| <div class="category-card relative rounded-lg overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Trending Shoes" | |
| class="w-full h-48 sm:h-60 object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40"> | |
| <div class="text-center"> | |
| <h3 class="text-yellow-500 text-xl sm:text-2xl font-bold mb-2">TRENDING COLLECTION</h3> | |
| <p class="text-white text-sm">Best sellers of the season</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="category-card relative rounded-lg overflow-hidden shadow-lg"> | |
| <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="Exclusive Offers" | |
| class="w-full h-48 sm:h-60 object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40"> | |
| <div class="text-center"> | |
| <h3 class="text-yellow-500 text-xl sm:text-2xl font-bold mb-2">EXCLUSIVE OFFERS</h3> | |
| <p class="text-white text-sm">Limited time discounts</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Categories --> | |
| <div class="mt-10"> | |
| <h2 class="text-2xl font-bold mb-4">SHOP BY CATEGORY</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4"> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition text-center"> | |
| <div class="bg-gray-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-running text-2xl text-yellow-500"></i> | |
| </div> | |
| <span class="font-medium">Running Shoes</span> | |
| </a> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition text-center"> | |
| <div class="bg-gray-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-sandal text-2xl text-yellow-500"></i> | |
| </div> | |
| <span class="font-medium">Sandals</span> | |
| </a> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition text-center"> | |
| <div class="bg-gray-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-sneaker text-2xl text-yellow-500"></i> | |
| </div> | |
| <span class="font-medium">Sneakers</span> | |
| </a> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition text-center"> | |
| <div class="bg-gray-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-hiking text-2xl text-yellow-500"></i> | |
| </div> | |
| <span class="font-medium">Hiking</span> | |
| </a> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition text-center"> | |
| <div class="bg-gray-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-tshirt text-2xl text-yellow-500"></i> | |
| </div> | |
| <span class="font-medium">Casual</span> | |
| </a> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition text-center"> | |
| <div class="bg-gray-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-fire-alt text-2xl text-red-500"></i> | |
| </div> | |
| <span class="font-medium">Clearance</span> | |
| </a> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition text-center"> | |
| <div class="bg-gray-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-belt text-2xl text-yellow-500"></i> | |
| </div> | |
| <span class="font-medium">Belts</span> | |
| </a> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition text-center"> | |
| <div class="bg-gray-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-wallet text-2xl text-yellow-500"></i> | |
| </div> | |
| <span class="font-medium">Wallets</span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Trending Products Section --> | |
| <section class="bg-gray-50 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">TRENDING PRODUCTS</h2> | |
| <a href="#" class="text-blue-600 hover:underline font-medium flex items-center"> | |
| View All <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Product Card 1 --> | |
| <div class="product-card bg-white p-4 shadow-md rounded-lg transition duration-300"> | |
| <div class="relative overflow-hidden rounded"> | |
| <img src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Product 1" | |
| class="w-full h-48 object-cover"> | |
| <span class="discount-badge">-54%</span> | |
| <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition duration-300 flex items-center justify-center"> | |
| <button class="bg-white text-black px-4 py-2 rounded-full font-medium opacity-0 hover:opacity-100 transition"> | |
| Quick View | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="font-semibold text-gray-800 line-clamp-2">Best Men's Fashion Sneakers In 2025 - KBC0651</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex text-yellow-400"> | |
| <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-sm ml-2">(42)</span> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-600 font-bold">TK 2750</span> | |
| <span class="text-gray-500 line-through ml-2">TK 5990</span> | |
| </div> | |
| <button class="add-to-cart-btn mt-3 w-full text-white px-4 py-2 rounded flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product Card 2 --> | |
| <div class="product-card bg-white p-4 shadow-md rounded-lg transition duration-300"> | |
| <div class="relative overflow-hidden rounded"> | |
| <img src="https://images.unsplash.com/photo-1605348532760-6753d2c43329?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Product 2" | |
| class="w-full h-48 object-cover"> | |
| <span class="discount-badge">-54%</span> | |
| <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition duration-300 flex items-center justify-center"> | |
| <button class="bg-white text-black px-4 py-2 rounded-full font-medium opacity-0 hover:opacity-100 transition"> | |
| Quick View | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="font-semibold text-gray-800 line-clamp-2">Buy Best Running Shoes Of 2024 - Combine</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex text-yellow-400"> | |
| <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-sm ml-2">(36)</span> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-600 font-bold">TK 2750</span> | |
| <span class="text-gray-500 line-through ml-2">TK 5990</span> | |
| </div> | |
| <button class="add-to-cart-btn mt-3 w-full text-white px-4 py-2 rounded flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product Card 3 --> | |
| <div class="product-card bg-white p-4 shadow-md rounded-lg transition duration-300"> | |
| <div class="relative overflow-hidden rounded"> | |
| <img src="https://images.unsplash.com/photo-1600269452121-1fda279d7e7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Product 3" | |
| class="w-full h-48 object-cover"> | |
| <span class="discount-badge">-54%</span> | |
| <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition duration-300 flex items-center justify-center"> | |
| <button class="bg-white text-black px-4 py-2 rounded-full font-medium opacity-0 hover:opacity-100 transition"> | |
| Quick View | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="font-semibold text-gray-800 line-clamp-2">Best White Sneakers In Bangladesh 2025 - KBC0650</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex text-yellow-400"> | |
| <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-sm ml-2">(58)</span> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-600 font-bold">TK 2750</span> | |
| <span class="text-gray-500 line-through ml-2">TK 5990</span> | |
| </div> | |
| <button class="add-to-cart-btn mt-3 w-full text-white px-4 py-2 rounded flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product Card 4 --> | |
| <div class="product-card bg-white p-4 shadow-md rounded-lg transition duration-300"> | |
| <div class="relative overflow-hidden rounded"> | |
| <img src="https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1112&q=80" alt="Product 4" | |
| class="w-full h-48 object-cover"> | |
| <span class="discount-badge">-54%</span> | |
| <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition duration-300 flex items-center justify-center"> | |
| <button class="bg-white text-black px-4 py-2 rounded-full font-medium opacity-0 hover:opacity-100 transition"> | |
| Quick View | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="font-semibold text-gray-800 line-clamp-2">Premium Leather Shoes For Men - KBC0652</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex text-yellow-400"> | |
| <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-sm ml-2">(47)</span> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-600 font-bold">TK 2750</span> | |
| <span class="text-gray-500 line-through ml-2">TK 5990</span> | |
| </div> | |
| <button class="add-to-cart-btn mt-3 w-full text-white px-4 py-2 rounded flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Special Offer Banner --> | |
| <section class="py-8 bg-gradient-to-r from-yellow-500 to-yellow-400"> | |
| <div class="container mx-auto px-4"> | |
| <div class="bg-white rounded-lg shadow-xl p-6 md:p-8 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-6 md:mb-0"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-2">SPECIAL OFFER</h2> | |
| <p class="text-gray-600 mb-4">Get 20% off on all products this weekend only!</p> | |
| <div class="flex space-x-2"> | |
| <div class="bg-gray-800 text-white text-center py-2 px-3 rounded-lg"> | |
| <span class="text-xl font-bold">02</span> | |
| <span class="block text-xs">Days</span> | |
| </div> | |
| <div class="bg-gray-800 text-white text-center py-2 px-3 rounded-lg"> | |
| <span class="text-xl font-bold">12</span> | |
| <span class="block text-xs">Hours</span> | |
| </div> | |
| <div class="bg-gray-800 text-white text-center py-2 px-3 rounded-lg"> | |
| <span class="text-xl font-bold">45</span> | |
| <span class="block text-xs">Mins</span> | |
| </div> | |
| <div class="bg-gray-800 text-white text-center py-2 px-3 rounded-lg"> | |
| <span class="text-xl font-bold">30</span> | |
| <span class="block text-xs">Secs</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-8"> | |
| <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="Special Offer" | |
| class="w-full h-48 md:h | |
| </html> |