|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Rezet - Premium Streetwear & Sneakers</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=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.logo-font { |
|
|
font-family: 'Bebas Neue', cursive; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #000000 0%, #2d3436 100%); |
|
|
} |
|
|
|
|
|
.product-card:hover .product-overlay { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.product-overlay { |
|
|
transition: all 0.3s ease; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
|
|
|
.dropdown:hover .dropdown-menu { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.cart-count { |
|
|
top: -8px; |
|
|
right: -8px; |
|
|
} |
|
|
|
|
|
.mobile-menu { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.mobile-menu.open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.mobile-menu.closed { |
|
|
transform: translateX(100%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-900"> |
|
|
|
|
|
<div class="bg-black text-white text-center py-2 px-4 text-sm"> |
|
|
<p>🔥 FREE SHIPPING ON ALL ORDERS OVER $100 | NEW ARRIVALS EVERY WEEK 🔥</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<header class="sticky top-0 z-50 bg-white shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
|
|
|
<button id="mobileMenuButton" class="lg:hidden text-gray-800"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<a href="#" class="logo-font text-3xl md:text-4xl font-bold tracking-wider"> |
|
|
REZET |
|
|
</a> |
|
|
|
|
|
|
|
|
<nav class="hidden lg:flex space-x-8"> |
|
|
<div class="dropdown relative"> |
|
|
<button class="font-medium hover:text-gray-600 flex items-center"> |
|
|
Shop <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-2 py-2 w-48"> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">New Arrivals</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Sneakers</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Apparel</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Accessories</a> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="font-medium hover:text-gray-600">Collections</a> |
|
|
<a href="#" class="font-medium hover:text-gray-600">About</a> |
|
|
<a href="#" class="font-medium hover:text-gray-600">Blog</a> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="relative"> |
|
|
<i class="fas fa-search text-xl"></i> |
|
|
</button> |
|
|
<button class="relative"> |
|
|
<i class="far fa-user text-xl"></i> |
|
|
</button> |
|
|
<button class="relative" id="cartButton"> |
|
|
<i class="fas fa-shopping-bag text-xl"></i> |
|
|
<span class="cart-count absolute bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="mobileMenu" class="mobile-menu fixed inset-y-0 right-0 w-64 bg-white shadow-lg z-50 p-4 closed lg:hidden"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<div class="logo-font text-2xl font-bold">REZET</div> |
|
|
<button id="closeMobileMenu" class="text-gray-800"> |
|
|
<i class="fas fa-times text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<nav class="space-y-4"> |
|
|
<div class="border-b pb-4"> |
|
|
<div class="font-medium mb-2">Shop</div> |
|
|
<div class="pl-4 space-y-2"> |
|
|
<a href="#" class="block py-1 hover:text-gray-600">New Arrivals</a> |
|
|
<a href="#" class="block py-1 hover:text-gray-600">Sneakers</a> |
|
|
<a href="#" class="block py-1 hover:text-gray-600">Apparel</a> |
|
|
<a href="#" class="block py-1 hover:text-gray-600">Accessories</a> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="block font-medium py-2 hover:text-gray-600">Collections</a> |
|
|
<a href="#" class="block font-medium py-2 hover:text-gray-600">About</a> |
|
|
<a href="#" class="block font-medium py-2 hover:text-gray-600">Blog</a> |
|
|
</nav> |
|
|
|
|
|
<div class="absolute bottom-4 left-4 right-4"> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-800"><i class="fab fa-instagram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-800"><i class="fab fa-twitter text-xl"></i></a> |
|
|
<a href="#" class="text-gray-800"><i class="fab fa-facebook-f text-xl"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="hero-gradient text-white"> |
|
|
<div class="container mx-auto px-4 py-20 md:py-32 flex flex-col items-center text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 logo-font tracking-wide">STREETWEAR REDEFINED</h1> |
|
|
<p class="text-lg md:text-xl mb-8 max-w-2xl">Discover premium streetwear and exclusive sneaker drops that define urban culture.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#" class="bg-white text-black px-8 py-3 font-medium hover:bg-gray-100 transition duration-300">Shop Now</a> |
|
|
<a href="#" class="border border-white px-8 py-3 font-medium hover:bg-white hover:text-black transition duration-300">New Arrivals</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center">Shop By Category</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="relative group overflow-hidden rounded-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1600269452121-1f5d14148cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sneakers" class="w-full h-96 object-cover transition duration-500 group-hover:scale-105"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
|
<h3 class="text-2xl font-bold text-white">Sneakers</h3> |
|
|
</div> |
|
|
<a href="#" class="absolute inset-0"></a> |
|
|
</div> |
|
|
|
|
|
<div class="relative group overflow-hidden rounded-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Apparel" class="w-full h-96 object-cover transition duration-500 group-hover:scale-105"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
|
<h3 class="text-2xl font-bold text-white">Apparel</h3> |
|
|
</div> |
|
|
<a href="#" class="absolute inset-0"></a> |
|
|
</div> |
|
|
|
|
|
<div class="relative group overflow-hidden rounded-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1592155931584-901ac15763e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Accessories" class="w-full h-96 object-cover transition duration-500 group-hover:scale-105"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
|
|
<h3 class="text-2xl font-bold text-white">Accessories</h3> |
|
|
</div> |
|
|
<a href="#" class="absolute inset-0"></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center mb-12"> |
|
|
<h2 class="text-3xl font-bold">New Arrivals</h2> |
|
|
<a href="#" class="text-black font-medium hover:underline">View All</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1600269452121-1f5d14148cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Product" class="w-full h-80 object-cover"> |
|
|
<div class="product-overlay absolute inset-0 bg-black bg-opacity-70 opacity-0 flex flex-col items-center justify-center p-4"> |
|
|
<button class="bg-white text-black px-6 py-2 mb-2 font-medium hover:bg-gray-100 transition duration-300 w-full max-w-xs">Quick View</button> |
|
|
<button class="bg-black text-white px-6 py-2 font-medium hover:bg-gray-800 transition duration-300 w-full max-w-xs">Add to Cart</button> |
|
|
</div> |
|
|
<div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">NEW</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-medium mb-1">Nike Air Max 270</h3> |
|
|
<p class="text-gray-600 text-sm mb-2">Men's Sneakers</p> |
|
|
<p class="font-bold">$150.00</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=698&q=80" alt="Product" class="w-full h-80 object-cover"> |
|
|
<div class="product-overlay absolute inset-0 bg-black bg-opacity-70 opacity-0 flex flex-col items-center justify-center p-4"> |
|
|
<button class="bg-white text-black px-6 py-2 mb-2 font-medium hover:bg-gray-100 transition duration-300 w-full max-w-xs">Quick View</button> |
|
|
<button class="bg-black text-white px-6 py-2 font-medium hover:bg-gray-800 transition duration-300 w-full max-w-xs">Add to Cart</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-medium mb-1">Adidas Originals Hoodie</h3> |
|
|
<p class="text-gray-600 text-sm mb-2">Unisex Apparel</p> |
|
|
<p class="font-bold">$75.00</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Product" class="w-full h-80 object-cover"> |
|
|
<div class="product-overlay absolute inset-0 bg-black bg-opacity-70 opacity-0 flex flex-col items-center justify-center p-4"> |
|
|
<button class="bg-white text-black px-6 py-2 mb-2 font-medium hover:bg-gray-100 transition duration-300 w-full max-w-xs">Quick View</button> |
|
|
<button class="bg-black text-white px-6 py-2 font-medium hover:bg-gray-800 transition duration-300 w-full max-w-xs">Add to Cart</button> |
|
|
</div> |
|
|
<div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">NEW</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-medium mb-1">Puma RS-X</h3> |
|
|
<p class="text-gray-600 text-sm mb-2">Men's Sneakers</p> |
|
|
<p class="font-bold">$120.00</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition 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=736&q=80" alt="Product" class="w-full h-80 object-cover"> |
|
|
<div class="product-overlay absolute inset-0 bg-black bg-opacity-70 opacity-0 flex flex-col items-center justify-center p-4"> |
|
|
<button class="bg-white text-black px-6 py-2 mb-2 font-medium hover:bg-gray-100 transition duration-300 w-full max-w-xs">Quick View</button> |
|
|
<button class="bg-black text-white px-6 py-2 font-medium hover:bg-gray-800 transition duration-300 w-full max-w-xs">Add to Cart</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-medium mb-1">Supreme Beanie</h3> |
|
|
<p class="text-gray-600 text-sm mb-2">Unisex Accessories</p> |
|
|
<p class="font-bold">$45.00</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center mb-12"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
|
|
<h2 class="text-3xl font-bold mb-4">Summer Collection 2023</h2> |
|
|
<p class="text-gray-600 mb-6">Discover our exclusive summer collection featuring lightweight fabrics, vibrant colors, and urban-inspired designs perfect for the season.</p> |
|
|
<a href="#" class="bg-black text-white px-6 py-3 font-medium hover:bg-gray-800 transition duration-300 inline-block">Shop Collection</a> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Summer Collection" class="w-full rounded-lg shadow-md"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center">What Our Customers Say</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex mb-4"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">"The quality of the sneakers is amazing! They're comfortable and stylish. Shipping was super fast too."</p> |
|
|
<p class="font-medium">- Alex Johnson</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex mb-4"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">"I've been shopping here for years. Always the latest drops and great customer service."</p> |
|
|
<p class="font-medium">- Sarah Williams</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex mb-4"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star-half-alt text-yellow-400"></i> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">"Great selection of streetwear. The hoodies are my favorite - perfect fit and quality material."</p> |
|
|
<p class="font-medium">- Michael Chen</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-black text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-4">Join Our Community</h2> |
|
|
<p class="text-gray-300 mb-8 max-w-2xl mx-auto">Subscribe to our newsletter for exclusive drops, early access to new collections, and special offers.</p> |
|
|
|
|
|
<form class="max-w-md mx-auto flex"> |
|
|
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l focus:outline-none text-black"> |
|
|
<button type="submit" class="bg-red-500 hover:bg-red-600 px-6 py-3 rounded-r font-medium transition duration-300">Subscribe</button> |
|
|
</form> |
|
|
|
|
|
<p class="text-gray-400 text-sm mt-4">We respect your privacy. Unsubscribe at any time.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="logo-font text-2xl font-bold mb-4">REZET</h3> |
|
|
<p class="text-gray-400 mb-4">Premium streetwear and sneakers for the urban lifestyle.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<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-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Shop</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">New Arrivals</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Sneakers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Apparel</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Accessories</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Sale</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Help</h4> |
|
|
<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">FAQs</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Shipping & Returns</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Size Guide</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Track Order</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold mb-4">About</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Our Story</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">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400 text-sm"> |
|
|
<p>© 2023 Rezet. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="miniCart" class="fixed inset-0 z-50 hidden"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-50" id="cartBackdrop"></div> |
|
|
<div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-lg transform transition-transform duration-300 translate-x-full" id="cartDrawer"> |
|
|
<div class="h-full flex flex-col"> |
|
|
<div class="p-4 border-b flex justify-between items-center"> |
|
|
<h3 class="text-lg font-bold">Your Cart (3)</h3> |
|
|
<button id="closeCart" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex-grow overflow-y-auto p-4 space-y-4"> |
|
|
|
|
|
<div class="flex space-x-4"> |
|
|
<div class="w-24 h-24 bg-gray-100"> |
|
|
<img src="https://images.unsplash.com/photo-1600269452121-1f5d14148cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Product" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<h4 class="font-medium">Nike Air Max 270</h4> |
|
|
<p class="text-gray-600 text-sm">Size: 10</p> |
|
|
<div class="flex justify-between items-center mt-2"> |
|
|
<p class="font-bold">$150.00</p> |
|
|
<div class="flex items-center border rounded"> |
|
|
<button class="px-2 py-1">-</button> |
|
|
<span class="px-2">1</span> |
|
|
<button class="px-2 py-1">+</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex space-x-4"> |
|
|
<div class="w-24 h-24 bg-gray-100"> |
|
|
<img src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=698&q=80" alt="Product" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<h4 class="font-medium">Adidas Originals Hoodie</h4> |
|
|
<p class="text-gray-600 text-sm">Size: M</p> |
|
|
<div class="flex justify-between items-center mt-2"> |
|
|
<p class="font-bold">$75.00</p> |
|
|
<div class="flex items-center border rounded"> |
|
|
<button class="px-2 py-1">-</button> |
|
|
<span class="px-2">1</span> |
|
|
<button class="px-2 py-1">+</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t"> |
|
|
<div class="flex justify-between mb-4"> |
|
|
<span>Subtotal</span> |
|
|
<span class="font-bold">$225.00</span> |
|
|
</div> |
|
|
<button class="w-full bg-black text-white py-3 font-medium hover:bg-gray-800 transition duration-300">Checkout</button> |
|
|
<a href="#" class="block text-center mt-2 text-sm text-gray-600 hover:text-black">Continue Shopping</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobileMenuButton'); |
|
|
const closeMobileMenu = document.getElementById('closeMobileMenu'); |
|
|
const mobileMenu = document.getElementById('mobileMenu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.remove('closed'); |
|
|
mobileMenu.classList.add('open'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
closeMobileMenu.addEventListener('click', () => { |
|
|
mobileMenu.classList.remove('open'); |
|
|
mobileMenu.classList.add('closed'); |
|
|
document.body.style.overflow = ''; |
|
|
}); |
|
|
|
|
|
|
|
|
const cartButton = document.getElementById('cartButton'); |
|
|
const closeCart = document.getElementById('closeCart'); |
|
|
const miniCart = document.getElementById('miniCart'); |
|
|
const cartBackdrop = document.getElementById('cartBackdrop'); |
|
|
const cartDrawer = document.getElementById('cartDrawer'); |
|
|
|
|
|
cartButton.addEventListener('click', () => { |
|
|
miniCart.classList.remove('hidden'); |
|
|
setTimeout(() => { |
|
|
cartDrawer.classList.remove('translate-x-full'); |
|
|
}, 10); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
closeCart.addEventListener('click', () => { |
|
|
cartDrawer.classList.add('translate-x-full'); |
|
|
setTimeout(() => { |
|
|
miniCart.classList.add('hidden'); |
|
|
}, 300); |
|
|
document.body.style.overflow = ''; |
|
|
}); |
|
|
|
|
|
cartBackdrop.addEventListener('click', () => { |
|
|
cartDrawer.classList.add('translate-x-full'); |
|
|
setTimeout(() => { |
|
|
miniCart.classList.add('hidden'); |
|
|
}, 300); |
|
|
document.body.style.overflow = ''; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.product-overlay button').forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
alert('Product quick view or add to cart functionality would go here!'); |
|
|
}); |
|
|
}); |
|
|
</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=shaikabdulqader345/https-rezet-in" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
