Product cards are essential elements in modern web design, offering a concise and visually appealing way to present product information. They play a crucial role in enhancing user experience and driving conversions.
In this article, we will explore ten exemplary product card designs that stand out for their functionality and aesthetics. These examples will inspire you to create compelling product cards for your own projects.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect UI effortlessly, ensuring your product cards stand out.
Ready to elevate your design game? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe and design stunning UIs with ease. With its drag-and-drop interface, you can create pixel-perfect product cards and more in no time.
Experience unparalleled efficiency and start creating immediately. Ready to elevate your design game? Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modern E-commerce Product Cards</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; } :root { --primary: #f8f7f4; --secondary: #31302c; --accent: #866a4b; --gray-100: #f3f3f3; --gray-200: #e9e9e9; --gray-300: #d1d1d1; --gray-400: #a0a0a0; --gray-500: #6c6c6c; --border-radius: 12px; --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } body { background-color: var(--primary); height: 100vh; padding: 20px; max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; overflow-x: hidden; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; position: relative; } .logo { font-weight: 700; font-size: 20px; color: var(--secondary); letter-spacing: -0.02em; } .filter-options { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .filter-option { padding: 8px 16px; background-color: var(--gray-200); border-radius: 50px; font-size: 13px; font-weight: 500; color: var(--gray-500); cursor: pointer; transition: var(--transition); } .filter-option:hover { background-color: var(--secondary); color: var(--primary); } .filter-option.active { background-color: var(--secondary); color: var(--primary); } .cart-icon { position: relative; cursor: pointer; } .cart-count { position: absolute; top: -8px; right: -8px; background-color: var(--accent); color: white; font-size: 10px; font-weight: 600; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.8); transition: var(--transition); } .cart-count.active { opacity: 1; transform: scale(1); } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; margin-bottom: 30px; } .product-card { background-color: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); transition: var(--transition); position: relative; height: 340px; display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); } .product-image { height: 200px; width: 100%; background-size: cover; background-position: center; position: relative; overflow: hidden; } .product-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.1) 100%); opacity: 0; transition: var(--transition); } .product-card:hover .product-image::after { opacity: 1; } .product-label { position: absolute; top: 12px; left: 12px; padding: 4px 10px; background-color: var(--accent); color: white; font-size: 11px; font-weight: 600; border-radius: 4px; text-transform: uppercase; } .product-wishlist { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(5px); transition: var(--transition); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .product-card:hover .product-wishlist { opacity: 1; transform: translateY(0); } .product-wishlist.active svg path { fill: #e74c3c; stroke: #e74c3c; } .product-info { padding: 16px; flex-grow: 1; display: flex; flex-direction: column; } .product-category { font-size: 12px; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .product-name { font-size: 16px; font-weight: 600; color: var(--secondary); margin-bottom: 6px; line-height: 1.3; letter-spacing: -0.01em; } .rating { display: flex; align-items: center; margin-bottom: 8px; } .stars { display: flex; margin-right: 6px; } .star { color: #ffd700; font-size: 12px; } .review-count { font-size: 12px; color: var(--gray-400); } .price-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .price { font-weight: 700; font-size: 18px; color: var(--secondary); letter-spacing: -0.02em; } .original-price { font-size: 14px; color: var(--gray-400); text-decoration: line-through; margin-left: 6px; } .add-to-cart { background-color: var(--gray-200); color: var(--secondary); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); opacity: 0.9; } .add-to-cart:hover { background-color: var(--secondary); color: white; } .add-to-cart:active { transform: scale(0.95); } .cart-tooltip { position: absolute; bottom: 100%; right: 0; background-color: var(--secondary); color: white; font-size: 12px; padding: 6px 12px; border-radius: 4px; white-space: nowrap; opacity: 0; transform: translateY(5px); transition: var(--transition); pointer-events: none; margin-bottom: 8px; } .cart-tooltip::after { content: ''; position: absolute; top: 100%; right: 14px; border-width: 5px; border-style: solid; border-color: var(--secondary) transparent transparent transparent; } .add-to-cart:hover + .cart-tooltip { opacity: 1; transform: translateY(0); } .product-quick-view { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(49, 48, 44, 0.9); color: white; text-align: center; padding: 10px; font-weight: 500; font-size: 13px; transform: translateY(100%); transition: var(--transition); cursor: pointer; } .product-card:hover .product-quick-view { transform: translateY(0); } .cart-notification { position: fixed; bottom: 20px; right: 20px; background-color: var(--secondary); color: white; padding: 12px 16px; border-radius: var(--border-radius); display: flex; align-items: center; gap: 10px; transform: translateY(100px); opacity: 0; transition: var(--transition); z-index: 10; max-width: 300px; } .cart-notification.active { transform: translateY(0); opacity: 1; } .notification-check { width: 18px; height: 18px; background-color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .notification-text { font-size: 14px; line-height: 1.4; flex: 1; } /* For mobile screens */ @media (max-width: 600px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; } .product-card { height: 320px; } .product-image { height: 170px; } .product-name { font-size: 14px; } .price { font-size: 16px; } } /* Loading animation */ @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .loading .product-card { pointer-events: none; } .loading .product-image { background-color: var(--gray-200); background-image: linear-gradient( to right, var(--gray-200) 0%, var(--gray-100) 20%, var(--gray-200) 40%, var(--gray-200) 100% ); background-repeat: no-repeat; background-size: 800px 100%; animation: shimmer 1.5s infinite linear; } .loading .product-category, .loading .product-name, .loading .rating, .loading .price-row { background-color: var(--gray-200); border-radius: 4px; height: 14px; margin-bottom: 8px; background-image: linear-gradient( to right, var(--gray-200) 0%, var(--gray-100) 20%, var(--gray-200) 40%, var(--gray-200) 100% ); background-repeat: no-repeat; background-size: 800px 100%; animation: shimmer 1.5s infinite linear; } .loading .product-name { height: 18px; width: 80%; } .loading .price-row { height: 20px; margin-top: auto; } </style> </head> <body> <header> <div class="logo">NORDIC</div> <div class="cart-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 8 21C8 21.5523 8.44772 22 9 22Z" stroke="#31302C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 20.4477 19 21C19 21.5523 19.4477 22 20 22Z" stroke="#31302C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 21.3086 14.8504 21.4 14.39L23 6H6" stroke="#31302C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="cart-count">0</div> </div> </header> <div class="filter-options"> <div class="filter-option active">All</div> <div class="filter-option">Furniture</div> <div class="filter-option">Lighting</div> <div class="filter-option">Decor</div> <div class="filter-option">Kitchen</div> </div> <div class="product-grid"> <!-- Product 1 --> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1592078615290-033ee584e267?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80')"> <div class="product-label">New</div> <div class="product-wishlist"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> </div> <div class="product-info"> <div class="product-category">Furniture</div> <div class="product-name">Oslo Lounge Chair</div> <div class="rating"> <div class="stars"> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> </div> <div class="review-count">42 reviews</div> </div> <div class="price-row"> <div> <span class="price">$349</span> <span class="original-price">$429</span> </div> <button class="add-to-cart" data-product="Oslo Lounge Chair" data-price="349"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div class="cart-tooltip">Add to cart</div> </div> </div> <div class="product-quick-view">Quick view</div> </div> <!-- Product 2 --> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1538688423619-a81d3f23454b?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80')"> <div class="product-wishlist"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> </div> <div class="product-info"> <div class="product-category">Lighting</div> <div class="product-name">Scandic Pendant Light</div> <div class="rating"> <div class="stars"> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">☆</div> </div> <div class="review-count">28 reviews</div> </div> <div class="price-row"> <div> <span class="price">$179</span> </div> <button class="add-to-cart" data-product="Scandic Pendant Light" data-price="179"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div class="cart-tooltip">Add to cart</div> </div> </div> <div class="product-quick-view">Quick view</div> </div> <!-- Product 3 --> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1499933374294-4584851497cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80')"> <div class="product-label">Bestseller</div> <div class="product-wishlist"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> </div> <div class="product-info"> <div class="product-category">Decor</div> <div class="product-name">Minimalist Vase Set</div> <div class="rating"> <div class="stars"> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> </div> <div class="review-count">57 reviews</div> </div> <div class="price-row"> <div> <span class="price">$89</span> <span class="original-price">$119</span> </div> <button class="add-to-cart" data-product="Minimalist Vase Set" data-price="89"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div class="cart-tooltip">Add to cart</div> </div> </div> <div class="product-quick-view">Quick view</div> </div> <!-- Product 4 --> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1589782182703-2aaa69037b5b?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80')"> <div class="product-wishlist"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> </div> <div class="product-info"> <div class="product-category">Kitchen</div> <div class="product-name">Wooden Cutting Board</div> <div class="rating"> <div class="stars"> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">☆</div> </div> <div class="review-count">34 reviews</div> </div> <div class="price-row"> <div> <span class="price">$49</span> </div> <button class="add-to-cart" data-product="Wooden Cutting Board" data-price="49"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div class="cart-tooltip">Add to cart</div> </div> </div> <div class="product-quick-view">Quick view</div> </div> <!-- Product 5 --> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80')"> <div class="product-label">Sale</div> <div class="product-wishlist"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> </div> <div class="product-info"> <div class="product-category">Furniture</div> <div class="product-name">Nordic Coffee Table</div> <div class="rating"> <div class="stars"> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">☆</div> </div> <div class="review-count">21 reviews</div> </div> <div class="price-row"> <div> <span class="price">$249</span> <span class="original-price">$329</span> </div> <button class="add-to-cart" data-product="Nordic Coffee Table" data-price="249"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div class="cart-tooltip">Add to cart</div> </div> </div> <div class="product-quick-view">Quick view</div> </div> <!-- Product 6 --> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1567225557594-88d73e55f2cb?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80')"> <div class="product-wishlist"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div> </div> <div class="product-info"> <div class="product-category">Decor</div> <div class="product-name">Abstract Wall Art</div> <div class="rating"> <div class="stars"> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> <div class="star">★</div> </div> <div class="review-count">18 reviews</div> </div> <div class="price-row"> <div> <span class="price">$129</span> </div> <button class="add-to-cart" data-product="Abstract Wall Art" data-price="129"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div class="cart-tooltip">Add to cart</div> </div> </div> <div class="product-quick-view">Quick view</div> </div> </div> <div class="cart-notification"> <div class="notification-check"> <svg width="10" height="10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6L9 17L4 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="notification-text">Product added to your cart</div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const addToCartButtons = document.querySelectorAll('.add-to-cart'); const cartCount = document.querySelector('.cart-count'); const cartNotification = document.querySelector('.cart-notification'); const wishlistButtons = document.querySelectorAll('.product-wishlist'); const filterOptions = document.querySelectorAll('.filter-option'); const productCards = document.querySelectorAll('.product-card'); const productQuickViews = document.querySelectorAll('.product-quick-view'); let cartItems = 0; // Add to cart functionality addToCartButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); // Get product details const productName = this.getAttribute('data-product'); const productPrice = this.getAttribute('data-price'); // Update cart count cartItems++; cartCount.textContent = cartItems; cartCount.classList.add('active'); // Show notification cartNotification.classList.add('active'); cartNotification.querySelector('.notification-text').textContent = `${productName} added to your cart`; // Hide notification after 3 seconds setTimeout(() => { cartNotification.classList.remove('active'); }, 3000); // Animate button this.classList.add('clicked'); setTimeout(() => { this.classList.remove('clicked'); }, 300); }); }); // Wishlist functionality wishlistButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); this.classList.toggle('active'); }); }); // Filter functionality filterOptions.forEach(option => { option.addEventListener('click', function() { // Remove active class from all options filterOptions.forEach(opt => opt.classList.remove('active')); // Add active class to clicked option this.classList.add('active'); // Get filter category const filterCategory = this.textContent.trim(); // Show loading state document.querySelector('.product-grid').classList.add('loading'); // Simulate loading delay setTimeout(() => { document.querySelector('.product-grid').classList.remove('loading'); // Filter products if (filterCategory === 'All') { productCards.forEach(card => { card.style.display = 'flex'; }); } else { productCards.forEach(card => { const cardCategory = card.querySelector('.product-category').textContent; if (cardCategory === filterCategory) { card.style.display = 'flex'; } else { card.style.display = 'none'; } }); } }, 600); }); }); // Quick view functionality productQuickViews.forEach(quickView => { quickView.addEventListener('click', function(e) { e.stopPropagation(); const productCard = this.closest('.product-card'); const productName = productCard.querySelector('.product-name').textContent; // Show notification for quick view cartNotification.classList.add('active'); cartNotification.querySelector('.notification-text').textContent = `Quick view: ${productName}`; // Hide notification after 3 seconds setTimeout(() => { cartNotification.classList.remove('active'); }, 3000); }); }); // Product card click productCards.forEach(card => { card.addEventListener('click', function() { const productName = this.querySelector('.product-name').textContent; // Show notification cartNotification.classList.add('active'); cartNotification.querySelector('.notification-text').textContent = `Viewing product: ${productName}`; // Hide notification after 3 seconds setTimeout(() => { cartNotification.classList.remove('active'); }, 3000); }); }); // Simulate initial loading document.querySelector('.product-grid').classList.add('loading'); setTimeout(() => { document.querySelector('.product-grid').classList.remove('loading'); }, 1000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lora:ital@0;1&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #8B5A2B; --accent-color: #D2B48C; --light-accent: #F5EBE0; --dark-accent: #5D4037; --text-color: #3E2723; --light-text: #F9F5F1; --border-radius: 8px; --card-shadow: 0 8px 16px rgba(62, 39, 35, 0.1); --transition: all 0.3s ease; } body { font-family: 'Lora', serif; background-color: var(--light-accent); background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238b5a2b' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); color: var(--text-color); display: flex; flex-direction: column; align-items: center; padding: 20px; max-width: 700px; margin: 0 auto; overflow-x: hidden; } .marketplace-header { text-align: center; margin-bottom: 25px; width: 100%; } h1 { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 8px; letter-spacing: 1px; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background-color: var(--accent-color); } .subtitle { font-style: italic; font-size: 1rem; color: var(--dark-accent); margin-bottom: 10px; } .search-container { display: flex; justify-content: center; margin-top: 15px; position: relative; width: 80%; max-width: 400px; } .search-input { width: 100%; padding: 10px 40px 10px 15px; border: 1px solid var(--accent-color); border-radius: 20px; background-color: rgba(255, 255, 255, 0.8); font-family: 'Lora', serif; font-size: 0.9rem; color: var(--text-color); transition: var(--transition); } .search-input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-color); background-color: white; } .search-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--primary-color); cursor: pointer; } .filter-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 15px 0; width: 100%; } .filter-tab { background-color: transparent; border: 1px solid var(--accent-color); border-radius: 20px; padding: 6px 15px; font-family: 'Lora', serif; font-size: 0.85rem; color: var(--primary-color); cursor: pointer; transition: var(--transition); } .filter-tab:hover, .filter-tab.active { background-color: var(--primary-color); color: var(--light-text); border-color: var(--primary-color); } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 25px; width: 100%; padding: 10px 0; } .product-card { background-color: white; border-radius: var(--border-radius); box-shadow: var(--card-shadow); overflow: hidden; position: relative; transition: var(--transition); border: 1px solid var(--accent-color); transform-style: preserve-3d; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 20px rgba(62, 39, 35, 0.15); } .product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d2b48c' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/svg%3E"); opacity: 0.5; z-index: 0; pointer-events: none; } .product-image-container { position: relative; padding-top: 100%; overflow: hidden; } .product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-image { transform: scale(1.05); } .favorite-btn { position: absolute; top: 10px; right: 10px; background-color: rgba(255, 255, 255, 0.8); border: none; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: var(--transition); } .favorite-btn:hover { background-color: white; transform: scale(1.1); } .favorite-btn.active svg { fill: #E57373; stroke: #E57373; } .card-content { padding: 15px; position: relative; z-index: 1; } .artisan-name { font-size: 0.8rem; font-style: italic; color: var(--dark-accent); margin-bottom: 5px; } .product-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: bold; margin-bottom: 8px; color: var(--text-color); } .product-description { font-size: 0.85rem; line-height: 1.4; color: var(--text-color); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-price { font-family: 'Playfair Display', serif; font-weight: bold; color: var(--primary-color); font-size: 1.1rem; margin-bottom: 10px; } .button-container { display: flex; justify-content: space-between; align-items: center; } .quick-view-btn, .add-to-cart-btn { background-color: transparent; border: 1px solid var(--primary-color); border-radius: var(--border-radius); padding: 6px 12px; font-family: 'Lora', serif; font-size: 0.8rem; cursor: pointer; transition: var(--transition); } .quick-view-btn { color: var(--primary-color); } .add-to-cart-btn { background-color: var(--primary-color); color: var(--light-text); } .quick-view-btn:hover { background-color: var(--accent-color); color: var(--dark-accent); border-color: var(--accent-color); } .add-to-cart-btn:hover { background-color: var(--dark-accent); border-color: var(--dark-accent); } .quick-view-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .quick-view-overlay.active { opacity: 1; pointer-events: auto; } .quick-view-content { background-color: white; border-radius: var(--border-radius); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; position: relative; transform: translateY(20px); transition: transform 0.3s ease; padding: 25px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .quick-view-overlay.active .quick-view-content { transform: translateY(0); } .quick-view-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.5rem; color: var(--text-color); cursor: pointer; transition: var(--transition); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .quick-view-close:hover { background-color: var(--light-accent); transform: rotate(90deg); } .quick-view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 600px) { .quick-view-grid { grid-template-columns: 1fr; } } .quick-view-image { width: 100%; border-radius: var(--border-radius); object-fit: cover; aspect-ratio: 1/1; } .quick-view-details { display: flex; flex-direction: column; gap: 10px; } .quick-view-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--text-color); } .quick-view-artisan { font-style: italic; color: var(--dark-accent); } .quick-view-price { font-family: 'Playfair Display', serif; font-weight: bold; font-size: 1.3rem; color: var(--primary-color); } .quick-view-description { font-size: 0.95rem; line-height: 1.5; color: var(--text-color); } .quick-view-meta { display: flex; flex-wrap: wrap; gap: 15px; font-size: 0.85rem; } .meta-item { display: flex; align-items: center; gap: 5px; } .meta-label { font-weight: bold; color: var(--dark-accent); } .add-to-cart-quick-view { background-color: var(--primary-color); color: var(--light-text); border: none; border-radius: var(--border-radius); padding: 10px 15px; font-family: 'Lora', serif; font-size: 1rem; cursor: pointer; transition: var(--transition); width: 100%; margin-top: 10px; } .add-to-cart-quick-view:hover { background-color: var(--dark-accent); } .cart-notification { position: fixed; top: 20px; right: 20px; background-color: var(--dark-accent); color: var(--light-text); padding: 12px 20px; border-radius: var(--border-radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateX(150%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1000; max-width: 300px; } .cart-notification.show { transform: translateX(0); } .loading-card { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.7); display: flex; justify-content: center; align-items: center; z-index: 5; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .loading-card.active { opacity: 1; } .spinner { width: 40px; height: 40px; border: 4px solid rgba(139, 90, 43, 0.1); border-radius: 50%; border-left-color: var(--primary-color); animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .handmade-badge { position: absolute; top: 10px; left: 10px; background-color: var(--primary-color); color: var(--light-text); font-size: 0.7rem; padding: 3px 8px; border-radius: 10px; z-index: 2; transform: rotate(-5deg); } @media (max-width: 700px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; } h1 { font-size: 1.8rem; } .subtitle { font-size: 0.9rem; } .product-title { font-size: 1rem; } .product-price { font-size: 0.95rem; } .card-content { padding: 10px; } .button-container { flex-direction: column; gap: 10px; } .quick-view-btn, .add-to-cart-btn { width: 100%; padding: 8px; } } @media (max-width: 400px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .search-container { width: 100%; } } </style> </head> <body> <div class="marketplace-header"> <h1>Artisan Treasures</h1> <p class="subtitle">Discover unique handcrafted pieces made with passion</p> <div class="search-container"> <input type="text" class="search-input" placeholder="Search for handmade wonders..."> <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </div> <div class="filter-tabs"> <button class="filter-tab active">All</button> <button class="filter-tab">Ceramics</button> <button class="filter-tab">Jewelry</button> <button class="filter-tab">Textiles</button> <button class="filter-tab">Wood</button> </div> </div> <div class="product-grid"> <!-- Product 1 --> <div class="product-card" data-id="1" data-category="ceramics"> <div class="product-image-container"> <div class="handmade-badge">Handmade</div> <img class="product-image" src="https://images.unsplash.com/photo-1565193566173-7a0af771d68b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="Rustic Ceramic Mug"> <button class="favorite-btn" aria-label="Add to favorites"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </button> </div> <div class="card-content"> <p class="artisan-name">By Elena Pottery Studio</p> <h3 class="product-title">Rustic Ceramic Mug</h3> <p class="product-description">Hand-thrown stoneware with speckled glaze. Microwave and dishwasher safe.</p> <p class="product-price">$32.00</p> <div class="button-container"> <button class="quick-view-btn">Quick View</button> <button class="add-to-cart-btn">Add to Cart</button> </div> </div> <div class="loading-card"> <div class="spinner"></div> </div> </div> <!-- Product 2 --> <div class="product-card" data-id="2" data-category="jewelry"> <div class="product-image-container"> <div class="handmade-badge">Handmade</div> <img class="product-image" src="https://images.unsplash.com/photo-1535632787350-4e68ef0ac584?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="Copper Wire Earrings"> <button class="favorite-btn" aria-label="Add to favorites"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </button> </div> <div class="card-content"> <p class="artisan-name">By Wired Wonders</p> <h3 class="product-title">Copper Wire Earrings</h3> <p class="product-description">Delicate hand-twisted copper wire with natural turquoise stones.</p> <p class="product-price">$46.50</p> <div class="button-container"> <button class="quick-view-btn">Quick View</button> <button class="add-to-cart-btn">Add to Cart</button> </div> </div> <div class="loading-card"> <div class="spinner"></div> </div> </div> <!-- Product 3 --> <div class="product-card" data-id="3" data-category="textiles"> <div class="product-image-container"> <div class="handmade-badge">Handmade</div> <img class="product-image" src="https://images.unsplash.com/photo-1604502075204-b977c26ef7f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="Hand-Dyed Table Runner"> <button class="favorite-btn" aria-label="Add to favorites"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </button> </div> <div class="card-content"> <p class="artisan-name">By Prairie Threads</p> <h3 class="product-title">Hand-Dyed Table Runner</h3> <p class="product-description">Natural indigo-dyed linen with hand-stitched details. Washable.</p> <p class="product-price">$58.00</p> <div class="button-container"> <button class="quick-view-btn">Quick View</button> <button class="add-to-cart-btn">Add to Cart</button> </div> </div> <div class="loading-card"> <div class="spinner"></div> </div> </div> <!-- Product 4 --> <div class="product-card" data-id="4" data-category="wood"> <div class="product-image-container"> <div class="handmade-badge">Handmade</div> <img class="product-image" src="https://images.unsplash.com/photo-1580644228176-1e13ed75e19c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="Walnut Serving Board"> <button class="favorite-btn" aria-label="Add to favorites"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </button> </div> <div class="card-content"> <p class="artisan-name">By Forest & Flame</p> <h3 class="product-title">Walnut Serving Board</h3> <p class="product-description">Locally sourced walnut, hand-shaped with live edge. Food-safe finish.</p> <p class="product-price">$74.99</p> <div class="button-container"> <button class="quick-view-btn">Quick View</button> <button class="add-to-cart-btn">Add to Cart</button> </div> </div> <div class="loading-card"> <div class="spinner"></div> </div> </div> <!-- Product 5 --> <div class="product-card" data-id="5" data-category="ceramics"> <div class="product-image-container"> <div class="handmade-badge">Handmade</div> <img class="product-image" src="https://images.unsplash.com/photo-1603570416072-84068a0f1358?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="Small Planter Set"> <button class="favorite-btn" aria-label="Add to favorites"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </button> </div> <div class="card-content"> <p class="artisan-name">By Clay & Soil</p> <h3 class="product-title">Small Planter Set</h3> <p class="product-description">Set of 3 hand-pinched planters with drainage holes. Each unique.</p> <p class="product-price">$62.00</p> <div class="button-container"> <button class="quick-view-btn">Quick View</button> <button class="add-to-cart-btn">Add to Cart</button> </div> </div> <div class="loading-card"> <div class="spinner"></div> </div> </div> <!-- Product 6 --> <div class="product-card" data-id="6" data-category="jewelry"> <div class="product-image-container"> <div class="handmade-badge">Handmade</div> <img class="product-image" src="https://images.unsplash.com/photo-1611085583191-a3b181a88401?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="Woven Brass Cuff"> <button class="favorite-btn" aria-label="Add to favorites"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </button> </div> <div class="card-content"> <p class="artisan-name">By Metal & Myth</p> <h3 class="product-title">Woven Brass Cuff</h3> <p class="product-description">Hand-hammered and woven brass cuff with adjustable fit.</p> <p class="product-price">$52.00</p> <div class="button-container"> <button class="quick-view-btn">Quick View</button> <button class="add-to-cart-btn">Add to Cart</button> </div> </div> <div class="loading-card"> <div class="spinner"></div> </div> </div> </div> <div class="quick-view-overlay"> <div class="quick-view-content"> <button class="quick-view-close" aria-label="Close quick view">×</button> <div class="quick-view-grid"> <img class="quick-view-image" src="" alt="Product"> <div class="quick-view-details"> <h2 class="quick-view-title"></h2> <p class="quick-view-artisan"></p> <p class="quick-view-price"></p> <p class="quick-view-description"></p> <div class="quick-view-meta"> <div class="meta-item"> <span class="meta-label">Origin:</span> <span class="meta-value">Handcrafted in USA</span> </div> <div class="meta-item"> <span class="meta-label">Materials:</span> <span class="meta-value">Natural materials</span> </div> <div class="meta-item"> <span class
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #00f0ff; --secondary: #ff00aa; --dark: #0a0a1a; --light: #f0f0ff; --accent: #7000ff; --card-height: 400px; --card-width: 280px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: var(--dark); min-height: 100vh; display: flex; justify-content: center; align-items: center; perspective: 1000px; overflow-x: hidden; padding: 20px; } .container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px; overflow-y: auto; overflow-x: hidden; padding: 15px 5px; scrollbar-width: thin; scrollbar-color: var(--primary) var(--dark); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--dark); } .container::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 10px; } .card { width: var(--card-width); height: var(--card-height); position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; } .card:hover { transform: rotateY(10deg) translateZ(20px); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .card-front { background: linear-gradient(145deg, var(--dark), #181830); display: flex; flex-direction: column; transform: translateZ(0); } .card-back { background: linear-gradient(145deg, #1a1a30, var(--dark)); transform: rotateY(180deg); padding: 20px; display: flex; flex-direction: column; } .product-image { position: relative; height: 55%; overflow: hidden; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle at center, rgba(0, 240, 255, 0.15), transparent 70%); } .product-image img { max-width: 90%; max-height: 90%; object-fit: contain; transform: translateZ(20px); transition: transform 0.3s ease; filter: drop-shadow(0 10px 15px rgba(0, 240, 255, 0.3)); } .card:hover .product-image img { transform: translateZ(40px) scale(1.05); } .card-content { padding: 20px; height: 45%; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; } .product-tag { background: var(--accent); color: var(--light); padding: 4px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-bottom: 10px; box-shadow: 0 2px 10px rgba(112, 0, 255, 0.3); } .product-name { color: var(--light); font-size: 1.2rem; font-weight: 600; margin-bottom: 5px; letter-spacing: 0.5px; } .product-brand { color: rgba(240, 240, 255, 0.6); font-size: 0.8rem; margin-bottom: 10px; } .product-price { font-size: 1.3rem; font-weight: 700; background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-top: auto; } .product-compare { display: flex; gap: 10px; margin-top: 10px; } .compare-btn, .details-btn { background: none; border: none; color: var(--primary); font-size: 0.85rem; cursor: pointer; padding: 5px 10px; border-radius: 4px; transition: all 0.3s ease; position: relative; overflow: hidden; } .compare-btn::before, .details-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); opacity: 0.1; transition: opacity 0.3s ease; z-index: -1; } .compare-btn:hover::before, .details-btn:hover::before { opacity: 0.2; } .details-btn { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: var(--dark); font-weight: 600; } .card-title { color: var(--light); font-size: 1.1rem; font-weight: 600; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; text-align: center; } .spec-list { list-style: none; margin-bottom: 20px; } .spec-item { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--light); font-size: 0.85rem; border-bottom: 1px solid rgba(240, 240, 255, 0.1); padding-bottom: 8px; } .spec-label { color: rgba(240, 240, 255, 0.7); } .spec-value { font-weight: 500; color: var(--primary); } .comparison-chart { width: 100%; height: 100px; margin-top: auto; position: relative; overflow: hidden; border-radius: 8px; background: rgba(10, 10, 26, 0.7); } .chart-bar { position: absolute; bottom: 0; width: 20%; background: linear-gradient(to top, var(--primary), var(--secondary)); height: 0%; transition: height 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0.8; } .bar-1 { left: 10%; } .bar-2 { left: 40%; } .bar-3 { left: 70%; } .chart-labels { position: absolute; width: 100%; display: flex; justify-content: space-around; bottom: 5px; color: var(--light); font-size: 0.7rem; } .card:hover .chart-bar { animation: bar-grow 1s forwards; } @keyframes bar-grow { to { height: var(--height-value); } } /* 3D effect elements */ .glow { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: radial-gradient(circle at center, var(--primary) 0%, transparent 50%); opacity: 0; mix-blend-mode: hard-light; pointer-events: none; transition: opacity 0.3s ease; } .card:hover .glow { opacity: 0.1; } .card-inner { width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .flip-btn { position: absolute; bottom: 10px; right: 10px; width: 30px; height: 30px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; color: var(--primary); display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; } .flip-btn:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } .flip-btn i { font-size: 1rem; } .flipped .card-inner { transform: rotateY(180deg); } .back-btn { position: absolute; top: 10px; left: 10px; background: none; border: none; color: var(--primary); cursor: pointer; z-index: 10; } @media screen and (max-width: 700px) { .container { padding: 10px; } :root { --card-height: 380px; --card-width: 250px; } .card-content { padding: 15px; } .product-name { font-size: 1rem; } } @media screen and (max-width: 500px) { :root { --card-height: 350px; --card-width: 220px; } } /* Pulse animation for new products */ .new-badge { position: absolute; top: 10px; right: 10px; background: var(--secondary); color: var(--light); font-size: 0.7rem; font-weight: 600; padding: 4px 8px; border-radius: 4px; z-index: 2; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 170, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 0, 170, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 0, 170, 0); } } /* Tech background effect */ .tech-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--dark) 21px, transparent 1%) center, linear-gradient(var(--dark) 21px, transparent 1%) center, rgba(0, 240, 255, 0.1); background-size: 22px 22px; opacity: 0.05; z-index: 0; pointer-events: none; } </style> </head> <body> <div class="container"> <!-- Product Card 1 --> <div class="card"> <div class="card-inner"> <div class="card-front"> <div class="new-badge">NEW</div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1600003263720-95b45a4035d5?ixlib=rb-4.0.3&auto=format&fit=crop&q=80&w=300&h=200" alt="NeuroSense Pro Headset"> </div> <div class="card-content"> <span class="product-tag">Neural Interface</span> <h3 class="product-name">NeuroSense Pro</h3> <p class="product-brand">NexGen Tech</p> <div class="product-price">$895.99</div> <div class="product-compare"> <button class="compare-btn">Compare</button> <button class="details-btn">Specs</button> </div> </div> <div class="glow"></div> <div class="tech-bg"></div> <button class="flip-btn">↺</button> </div> <div class="card-back"> <h4 class="card-title">Tech Specs</h4> <ul class="spec-list"> <li class="spec-item"> <span class="spec-label">Neural Sensors</span> <span class="spec-value">128</span> </li> <li class="spec-item"> <span class="spec-label">Latency</span> <span class="spec-value">4.2ms</span> </li> <li class="spec-item"> <span class="spec-label">Battery Life</span> <span class="spec-value">18 hours</span> </li> <li class="spec-item"> <span class="spec-label">AI Processor</span> <span class="spec-value">Quantum 3</span> </li> </ul> <h4 class="card-title">Performance Comparison</h4> <div class="comparison-chart"> <div class="chart-bar bar-1" style="--height-value: 75%"></div> <div class="chart-bar bar-2" style="--height-value: 90%"></div> <div class="chart-bar bar-3" style="--height-value: 60%"></div> <div class="chart-labels"> <span>Prev Gen</span> <span>NeuroSense</span> <span>Competitor</span> </div> </div> <button class="flip-btn">↺</button> </div> </div> </div> <!-- Product Card 2 --> <div class="card"> <div class="card-inner"> <div class="card-front"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1593106410288-98f74746f3b5?ixlib=rb-4.0.3&auto=format&fit=crop&q=80&w=300&h=200" alt="QuantumGlide AR Glasses"> </div> <div class="card-content"> <span class="product-tag">Augmented Reality</span> <h3 class="product-name">QuantumGlide AR</h3> <p class="product-brand">OptiTech Vision</p> <div class="product-price">$1,249.00</div> <div class="product-compare"> <button class="compare-btn">Compare</button> <button class="details-btn">Specs</button> </div> </div> <div class="glow"></div> <div class="tech-bg"></div> <button class="flip-btn">↺</button> </div> <div class="card-back"> <h4 class="card-title">Tech Specs</h4> <ul class="spec-list"> <li class="spec-item"> <span class="spec-label">Resolution</span> <span class="spec-value">4K per eye</span> </li> <li class="spec-item"> <span class="spec-label">Field of View</span> <span class="spec-value">120°</span> </li> <li class="spec-item"> <span class="spec-label">Weight</span> <span class="spec-value">68g</span> </li> <li class="spec-item"> <span class="spec-label">Sensors</span> <span class="spec-value">LiDAR + 3D</span> </li> </ul> <h4 class="card-title">Performance Comparison</h4> <div class="comparison-chart"> <div class="chart-bar bar-1" style="--height-value: 60%"></div> <div class="chart-bar bar-2" style="--height-value: 95%"></div> <div class="chart-bar bar-3" style="--height-value: 72%"></div> <div class="chart-labels"> <span>2022 Model</span> <span>QuantumGlide</span> <span>Competitor</span> </div> </div> <button class="flip-btn">↺</button> </div> </div> </div> <!-- Product Card 3 --> <div class="card"> <div class="card-inner"> <div class="card-front"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1528318269466-69e24a04cc21?ixlib=rb-4.0.3&auto=format&fit=crop&q=80&w=300&h=200" alt="HoloSphere Projector"> </div> <div class="card-content"> <span class="product-tag">Holographic</span> <h3 class="product-name">HoloSphere X2</h3> <p class="product-brand">Dimension Labs</p> <div class="product-price">$2,795.00</div> <div class="product-compare"> <button class="compare-btn">Compare</button> <button class="details-btn">Specs</button> </div> </div> <div class="glow"></div> <div class="tech-bg"></div> <button class="flip-btn">↺</button> </div> <div class="card-back"> <h4 class="card-title">Tech Specs</h4> <ul class="spec-list"> <li class="spec-item"> <span class="spec-label">Projection Size</span> <span class="spec-value">1m³</span> </li> <li class="spec-item"> <span class="spec-label">Resolution</span> <span class="spec-value">8K Volumetric</span> </li> <li class="spec-item"> <span class="spec-label">Brightness</span> <span class="spec-value">5000 lumens</span> </li> <li class="spec-item"> <span class="spec-label">Gesture Tracking</span> <span class="spec-value">360° Precise</span> </li> </ul> <h4 class="card-title">Performance Comparison</h4> <div class="comparison-chart"> <div class="chart-bar bar-1" style="--height-value: 55%"></div> <div class="chart-bar bar-2" style="--height-value: 85%"></div> <div class="chart-bar bar-3" style="--height-value: 40%"></div> <div class="chart-labels"> <span>HoloSphere X1</span> <span>X2 Pro</span> <span>Industry Avg</span> </div> </div> <button class="flip-btn">↺</button> </div> </div> </div> <!-- Product Card 4 --> <div class="card"> <div class="card-inner"> <div class="card-front"> <div class="new-badge">NEW</div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1606229365485-93a3b8ee0385?ixlib=rb-4.0.3&auto=format&fit=crop&q=80&w=300&h=200" alt="BioCom Implant"> </div> <div class="card-content"> <span class="product-tag">Bio-Interface</span> <h3 class="product-name">BioCom Nano</h3> <p class="product-brand">SynthTech</p> <div class="product-price">$3,499.99</div> <div class="product-compare"> <button class="compare-btn">Compare</button> <button class="details-btn">Specs</button> </div> </div> <div class="glow"></div> <div class="tech-bg"></div> <button class="flip-btn">↺</button> </div> <div class="card-back"> <h4 class="card-title">Tech Specs</h4> <ul class="spec-list"> <li class="spec-item"> <span class="spec-label">Dimensions</span> <span class="spec-value">3mm × 2mm</span> </li> <li class="spec-item"> <span class="spec-label">Connectivity</span> <span class="spec-value">Neural-Link™</span> </li> <li class="spec-item"> <span class="spec-label">Battery</span> <span class="spec-value">Bio-powered</span> </li> <li class="spec-item"> <span class="spec-label">Data Transfer</span> <span class="spec-value">12 Gbps</span> </li> </ul> <h4 class="card-title">Performance Comparison</h4> <div class="comparison-chart"> <div class="chart-bar bar-1" style="--height-value: 40%"></div> <div class="chart-bar bar-2" style="--height-value: 92%"></div> <div class="chart-bar bar-3" style="--height-value: 65%"></div> <div class="chart-labels"> <span>Gen 1</span> <span>BioCom Nano</span> <span>MediTech</span> </div> </div> <button class="flip-btn">↺</button> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Card flip functionality const flipButtons = document.querySelectorAll('.flip-btn'); flipButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); const card = this.closest('.card'); card.classList.toggle('flipped'); }); }); // 3D hover effect const cards = document.querySelectorAll('.card'); cards.forEach(card => { card.addEventListener('mousemove', function(e) { if (!this.classList.contains('flipped')) { const cardRect = this.getBoundingClientRect(); const cardCenterX = cardRect.left + cardRect.width / 2; const cardCenterY = cardRect.top + cardRect.height / 2; const mouseX = e.clientX - cardCenterX; const mouseY = e.clientY - cardCenterY; const rotateY = 15 * mouseX / (cardRect.width / 2); const rotateX = -15 * mouseY / (cardRect.height / 2); this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; // Move glow effect const glow = this.querySelector('.glow'); const glowX = 50 + (mouseX / cardRect.width) * 100; const glowY = 50 + (mouseY / cardRect.height) * 100; glow.style.background = `radial-gradient(circle at ${glowX}% ${glowY}%, var(--primary) 0%, transparent 50%)`; glow.style.opacity = '0.15'; } }); card.addEventListener('mouseleave', function() { // Reset card transform if (!this.classList.contains('flipped')) { this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)'; const glow = this.querySelector('.glow'); glow.style.opacity = '0'; } }); }); // Comparison functionality const compareButtons = document.querySelectorAll('.compare-btn'); compareButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); // We would normally trigger a comparison modal, but for embed simplicity, we'll flip the card const card = this.closest('.card'); card.classList.add('flipped'); }); }); const detailsButtons = document.querySelectorAll('.details-btn'); detailsButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); const card = this.closest('.card'); card.classList.add('flipped'); }); }); }); </script> </body> </html>
<html> <head> <title>Luxury Retail Product Cards</title> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Montserrat:wght@200;300;400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --black: #0a0a0a; --dark-gray: #1a1a1a; --mid-gray: #303030; --light-gray: #e0e0e0; --white: #ffffff; --gold: #d4af37; --gold-light: #e5c76b; } body { font-family: 'Montserrat', sans-serif; background-color: var(--black); color: var(--white); display: flex; flex-direction: column; align-items: center; padding: 20px; width: 100%; max-width: 700px; margin: 0 auto; height: 700px; overflow-x: hidden; position: relative; } .header { margin-bottom: 20px; text-align: center; width: 100%; position: relative; } .header:after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 40px; height: 1px; background-color: var(--gold); } h1 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 28px; letter-spacing: 2px; margin-bottom: 5px; color: var(--white); } .subtitle { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-weight: 300; } .products-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; padding: 10px; } .product-card { background-color: var(--dark-gray); border-radius: 4px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .product-card:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 80%, rgba(10, 10, 10, 0.8) 100%); z-index: 1; opacity: 0; transition: opacity 0.3s ease; } .product-card:hover:before { opacity: 1; } .product-image-container { position: relative; width: 100%; height: 200px; overflow: hidden; background: var(--mid-gray); } .product-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; cursor: zoom-in; } .product-info { padding: 15px; position: relative; } .product-name { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 400; margin-bottom: 5px; color: var(--white); } .product-category { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin-bottom: 10px; } .product-price { font-size: 16px; font-weight: 300; color: var(--light-gray); } .product-action { margin-top: 15px; display: flex; justify-content: space-between; align-items: center; } .view-details { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--white); position: relative; cursor: pointer; transition: color 0.3s ease; background: none; border: none; padding: 0; text-align: left; } .view-details:after { content: ""; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background-color: var(--gold); transition: width 0.3s ease; } .view-details:hover { color: var(--gold); } .view-details:hover:after { width: 100%; } .add-to-wishlist { width: 20px; height: 20px; background: none; border: none; cursor: pointer; color: var(--light-gray); transition: color 0.3s ease, transform 0.3s ease; } .add-to-wishlist:hover { color: var(--gold); transform: scale(1.1); } .add-to-wishlist i { font-size: 18px; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal.open { opacity: 1; visibility: visible; } .modal-content { position: relative; width: 90%; max-width: 700px; max-height: 90vh; display: flex; flex-direction: column; background-color: var(--dark-gray); border-radius: 4px; overflow: hidden; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid var(--mid-gray); } .modal-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; } .close-modal { background: none; border: none; color: var(--light-gray); font-size: 22px; cursor: pointer; transition: color 0.3s ease; } .close-modal:hover { color: var(--gold); } .modal-body { display: flex; flex-direction: column; padding: 20px; overflow-y: auto; } @media (min-width: 600px) { .modal-body { flex-direction: row; } } .modal-image-container { flex: 1; position: relative; min-height: 300px; overflow: hidden; background-color: var(--mid-gray); } .modal-image { width: 100%; height: 100%; object-fit: contain; } .zoom-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: grab; } .zoom-container:active { cursor: grabbing; } .modal-details { flex: 1; padding: 0 20px; } @media (max-width: 599px) { .modal-details { padding: 20px 0 0 0; } } .modal-product-name { font-family: 'Cormorant Garamond', serif; font-size: 24px; margin-bottom: 10px; } .modal-product-category { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin-bottom: 15px; } .modal-product-price { font-size: 20px; font-weight: 300; color: var(--light-gray); margin-bottom: 20px; } .modal-product-description { font-size: 14px; line-height: 1.6; color: var(--light-gray); margin-bottom: 20px; } .modal-product-features { margin-bottom: 20px; } .feature-title { font-family: 'Cormorant Garamond', serif; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; color: var(--gold); } .feature-list { list-style: none; } .feature-item { font-size: 12px; line-height: 1.6; color: var(--light-gray); margin-bottom: 5px; position: relative; padding-left: 15px; } .feature-item:before { content: "—"; position: absolute; left: 0; color: var(--gold); } .modal-actions { display: flex; gap: 15px; margin-top: 20px; } .add-to-cart { background-color: var(--gold); color: var(--black); border: none; padding: 10px 20px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: background-color 0.3s ease; } .add-to-cart:hover { background-color: var(--gold-light); } .modal-wishlist { display: flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--light-gray); padding: 10px 15px; color: var(--light-gray); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease; } .modal-wishlist:hover { color: var(--gold); border-color: var(--gold); } .modal-wishlist i { font-size: 14px; } .highlight-badge { position: absolute; top: 15px; right: 15px; background-color: var(--gold); color: var(--black); padding: 5px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; z-index: 2; } .filter-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 20px; padding: 0 10px; } .filter-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--light-gray); } .filter-options { display: flex; gap: 15px; } .filter-option { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--light-gray); cursor: pointer; transition: color 0.3s ease; position: relative; } .filter-option:after { content: ""; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background-color: var(--gold); transition: width 0.3s ease; } .filter-option:hover, .filter-option.active { color: var(--gold); } .filter-option:hover:after, .filter-option.active:after { width: 100%; } @media (max-width: 500px) { .products-container { grid-template-columns: 1fr; } .filter-options { gap: 10px; } .filter-option { font-size: 10px; } } .animated-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, var(--mid-gray) 0%, var(--black) 100%); z-index: -1; opacity: 0.5; } .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--black); display: flex; justify-content: center; align-items: center; z-index: 2000; transition: opacity 0.6s ease, visibility 0.6s ease; } .loader.loaded { opacity: 0; visibility: hidden; } .loader-inner { width: 40px; height: 40px; position: relative; } .loader-inner:before, .loader-inner:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid transparent; border-top-color: var(--gold); border-radius: 50%; animation: spin 1.5s linear infinite; } .loader-inner:after { border: 2px solid transparent; border-top-color: var(--white); animation: spin 1s linear infinite reverse; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .zoom-lens { position: fixed; width: 120px; height: 120px; border: 1px solid var(--gold); border-radius: 50%; z-index: 1001; pointer-events: none; display: none; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.5); } .zoom-lens-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="animated-bg"></div> <div class="loader"> <div class="loader-inner"></div> </div> <div class="zoom-lens"> <div class="zoom-lens-inner"></div> </div> <div class="header"> <h1>MAISON ÉLÉGANCE</h1> <div class="subtitle">Exquisite Collection</div> </div> <div class="filter-bar"> <div class="filter-label">Browse:</div> <div class="filter-options"> <div class="filter-option active">All</div> <div class="filter-option">Watches</div> <div class="filter-option">Jewelry</div> <div class="filter-option">Accessories</div> </div> </div> <div class="products-container"> <div class="product-card"> <div class="highlight-badge">Limited</div> <div class="product-image-container"> <img class="product-image" src="https://images.unsplash.com/photo-1509941943102-10c232535736?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Chronograph Watch"> </div> <div class="product-info"> <h3 class="product-name">Artisanal Chronograph</h3> <div class="product-category">Timepiece Collection</div> <div class="product-price">€4,850</div> <div class="product-action"> <button class="view-details">View Details</button> <button class="add-to-wishlist"><i class="far fa-heart"></i></button> </div> </div> </div> <div class="product-card"> <div class="product-image-container"> <img class="product-image" src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Diamond Necklace"> </div> <div class="product-info"> <h3 class="product-name">Lumière Diamond Pendant</h3> <div class="product-category">Fine Jewelry</div> <div class="product-price">€6,200</div> <div class="product-action"> <button class="view-details">View Details</button> <button class="add-to-wishlist"><i class="far fa-heart"></i></button> </div> </div> </div> <div class="product-card"> <div class="product-image-container"> <img class="product-image" src="https://images.unsplash.com/photo-1611591437281-460bfbe1220a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Leather Wallet"> </div> <div class="product-info"> <h3 class="product-name">Calfskin Card Holder</h3> <div class="product-category">Accessories</div> <div class="product-price">€520</div> <div class="product-action"> <button class="view-details">View Details</button> <button class="add-to-wishlist"><i class="far fa-heart"></i></button> </div> </div> </div> <div class="product-card"> <div class="highlight-badge">New</div> <div class="product-image-container"> <img class="product-image" src="https://images.unsplash.com/photo-1601821765780-754fa98637c1?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Gold Bracelet"> </div> <div class="product-info"> <h3 class="product-name">Héritage Gold Bracelet</h3> <div class="product-category">Fine Jewelry</div> <div class="product-price">€3,780</div> <div class="product-action"> <button class="view-details">View Details</button> <button class="add-to-wishlist"><i class="far fa-heart"></i></button> </div> </div> </div> </div> <div class="modal"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title">Product Details</h2> <button class="close-modal">×</button> </div> <div class="modal-body"> <div class="modal-image-container"> <img class="modal-image" src="" alt="Product Image"> <div class="zoom-container"></div> </div> <div class="modal-details"> <h3 class="modal-product-name"></h3> <div class="modal-product-category"></div> <div class="modal-product-price"></div> <div class="modal-product-description"></div> <div class="modal-product-features"> <div class="feature-title">Features</div> <ul class="feature-list"> </ul> </div> <div class="modal-actions"> <button class="add-to-cart">Add to Cart</button> <button class="modal-wishlist"><i class="far fa-heart"></i> Add to Wishlist</button> </div> </div> </div> </div> </div> <script> // Product data const products = [ { name: "Artisanal Chronograph", category: "Timepiece Collection", price: "€4,850", image: "https://images.unsplash.com/photo-1509941943102-10c232535736?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", description: "A masterpiece of Swiss craftsmanship, our Artisanal Chronograph features a hand-polished 18K gold case and sapphire crystal. The intricate mechanical movement is visible through the transparent case back, showcasing the 200+ precision components working in perfect harmony.", features: [ "Swiss-made automatic movement with 72-hour power reserve", "18K gold case with 42mm diameter", "Scratch-resistant sapphire crystal with anti-reflective coating", "Hand-stitched alligator leather strap", "Water resistant to 100 meters" ] }, { name: "Lumière Diamond Pendant", category: "Fine Jewelry", price: "€6,200", image: "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", description: "The Lumière Diamond Pendant captures light like no other piece in our collection. A flawless 1.5 carat diamond is suspended within a minimalist platinum setting, creating the illusion that the stone is floating. Every angle reveals new dimensions of brilliance.", features: [ "1.5 carat GIA-certified diamond with F color and VVS1 clarity", "Handcrafted platinum setting", "Innovative tension mount design", "18-inch platinum chain with secure clasp", "Presented in our signature leather case" ] }, { name: "Calfskin Card Holder", category: "Accessories", price: "€520", image: "https://images.unsplash.com/photo-1611591437281-460bfbe1220a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", description: "This meticulously crafted card holder elevates the everyday essential. Made from exquisite French calfskin leather that develops a rich patina over time, each piece is hand-stitched by our master artisans using traditional saddle-stitching techniques.", features: [ "Full-grain calfskin from our partner tannery in France", "Hand-painted edges with natural pigments", "Four card slots plus central pocket", "Embossed gold foil monogram available", "Dimensions: 10cm x 7cm" ] }, { name: "Héritage Gold Bracelet", category: "Fine Jewelry", price: "€3,780", image: "https://images.unsplash.com/photo-1601821765780-754fa98637c1?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", description: "Inspired by architectural elements from the Belle Époque, our Héritage bracelet reimagines vintage aesthetics for the modern connoisseur. Each 18K gold link is individually cast and finished by hand, resulting in a piece with extraordinary movement and light reflection.", features: [ "18K solid gold with signature textured finish", "Innovative hidden clasp mechanism", "Adjustable length for perfect fit", "Each link hand-polished to achieve our signature luster", "Comes with certificate of authenticity" ] } ]; // Elements const modal = document.querySelector('.modal'); const modalImage = document.querySelector('.modal-image'); const modalProductName = document.querySelector('.modal-product-name'); const modalProductCategory = document.querySelector('.modal-product-category'); const modalProductPrice = document.querySelector('.modal-product-price'); const modalProductDescription = document.querySelector('.modal-product-description'); const featureList = document.querySelector('.feature-list'); const closeModalBtn = document.querySelector('.close-modal'); const viewDetailsBtns = document.querySelectorAll('.view-details'); const zoomContainer = document.querySelector('.zoom-container'); const zoomLens = document.querySelector('.zoom-lens'); const zoomLensInner = document.querySelector('.zoom-lens-inner'); const filterOptions = document.querySelectorAll('.filter-option'); const productCards = document.querySelectorAll('.product-card'); const loader = document.querySelector('.loader'); const wishlistBtns = document.querySelectorAll('.add-to-wishlist'); const modalWishlistBtn = document.querySelector('.modal-wishlist'); const addToCartBtn = document.querySelector('.add-to-cart'); // Loading simulation window.addEventListener('load', () => { setTimeout(() => { loader.classList.add('loaded'); }, 1000); }); // Open modal with product details viewDetailsBtns.forEach((btn, index) => { btn.addEventListener('click', () => { const product = products[index]; modalImage.src = product.image; modalImage.alt = product.name; modalProductName.textContent = product.name; modalProductCategory.textContent = product.category; modalProductPrice.textContent = product.price; modalProductDescription.textContent = product.description; // Clear previous features featureList.innerHTML = ''; // Add features product.features.forEach(feature => { const li = document.createElement('li'); li.className = 'feature-item'; li.textContent = feature; featureList.appendChild(li); }); modal.classList.add('open'); document.body.style.overflow = 'hidden'; }); }); // Close modal closeModalBtn.addEventListener('click', () => { modal.classList.remove('open'); document.body.style.overflow = ''; }); modal.addEventListener('click', (e) => { if (e.target === modal) { modal.classList.remove('open'); document.body.style.overflow = ''; } }); // Zoom functionality for product images const productImages = document.querySelectorAll('.product-image'); productImages.forEach(img => { img.addEventListener('mousemove', (e) => { const rect = img.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const xPercent = x / rect.width * 100; const yPercent = y / rect.height * 100; zoomLens.style.display = 'block'; zoomLens.style.left = `${e.clientX - zoomLens.offsetWidth / 2}px`; zoomLens.style.top = `${e.clientY - zoomLens.offsetHeight / 2}px`; zoomLensInner.style.backgroundImage = `url(${img.src})`; zoomLensInner.style.backgroundSize = `${img.width * 2}px ${img.height * 2}px`; zoomLensInner.style.backgroundPosition = `${-xPercent * 2 + 50}% ${-yPercent * 2 + 50}%`; }); img.addEventListener('mouseleave', () => { zoomLens.style.display = 'none'; }); }); // Zoom functionality for modal image zoomContainer.addEventListener('mousemove', (e) => { const rect = zoomContainer.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const xPercent = x / rect.width * 100; const yPercent = y / rect.height * 100; modalImage.style.transform = `scale(1.5)`; modalImage.style.transformOrigin = `${xPercent}% ${yPercent}%`; }); zoomContainer.addEventListener('mouseleave', () => { modalImage.style.transform = 'scale(1)'; }); // Filter functionality filterOptions.forEach(option => { option.addEventListener('click', () => { // Remove active class from all filterOptions.forEach(opt => opt.classList.remove('active')); // Add active class to clicked option.classList.add('active'); const filter = option.textContent.toLowerCase(); if (filter === 'all') { productCards.forEach(card => { card.style.display = 'block'; }); } else { productCards.forEach((card, index) => { const product = products[index]; if (product.category.toLowerCase().includes(filter)) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); } }); }); // Wishlist toggle wishlistBtns.forEach(btn => { btn.addEventListener('click', () => { const icon = btn.querySelector('i'); if (icon.classList.contains('far')) { icon.classList.remove('far'); icon.classList.add('fas'); // Animation effect btn.style.transform = 'scale(1.2)'; setTimeout(() => { btn.style.transform = 'scale(1)'; }, 300); } else { icon.classList.remove('fas'); icon.classList.add('far'); } }); }); // Modal wishlist toggle modalWishlistBtn.addEventListener('click', () => { const icon = modalWishlistBtn.querySelector('i'); if (icon.classList.contains('far')) { icon.classList.remove('far'); icon.classList.add('fas'); } else { icon.classList.remove('fas'); icon.classList.add('far'); } }); // Add to cart animation addToCartBtn.addEventListener('click', () => { addToCartBtn.innerText = 'Added to Cart'; addToCartBtn.style.backgroundColor = '#2ecc71'; setTimeout(() => { addToCartBtn.innerText = 'Add to Cart'; addToCartBtn.style.backgroundColor = ''; }, 2000); }); // Background animation const animatedBg = document.querySelector('.animated-bg'); window.addEventListener('mousemove', (e) => { const x = e.clientX / window.innerWidth; const y = e.clientY / window.innerHeight; animatedBg.style.background = `radial-gradient(circle at ${x * 100}% ${y * 100}%, var(--mid-gray) 0%, var(--black) 100%)`; }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digital Art Gallery</title> <style> :root { --color-primary: #FF3366; --color-secondary: #6C5CE7; --color-tertiary: #00CEFF; --color-accent: #FFC857; --color-dark: #191B1F; --color-light: #FFFFFF; --color-gray: #F5F5F7; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); background-color: var(--color-gray); color: var(--color-dark); height: 100%; overflow-x: hidden; padding: var(--spacing-md); } .gallery { max-width: 700px; margin: 0 auto; overflow: hidden; } .gallery-header { margin-bottom: var(--spacing-lg); position: relative; } .gallery-title { font-size: 2rem; font-weight: 800; margin-bottom: var(--spacing-sm); background: linear-gradient(to right, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; z-index: 2; } .gallery-subtitle { font-size: 1rem; color: var(--color-dark); opacity: 0.8; margin-bottom: var(--spacing-md); max-width: 80%; } .filters { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); flex-wrap: wrap; } .filter-btn { background: transparent; border: 2px solid var(--color-dark); padding: 6px 12px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .filter-btn.active { background-color: var(--color-primary); border-color: var(--color-primary); color: white; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 200px; grid-gap: var(--spacing-md); grid-auto-flow: dense; } .art-card { position: relative; overflow: hidden; border-radius: var(--radius-md); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .art-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .art-card.featured { grid-column: span 2; grid-row: span 2; } .art-card.wide { grid-column: span 2; } .art-card.tall { grid-row: span 2; } .art-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .art-card:hover .art-img { transform: scale(1.05); } .art-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--spacing-md); opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .art-card:hover .art-overlay { opacity: 1; transform: translateY(0); } .art-title { color: var(--color-light); font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; } .art-artist { color: var(--color-light); font-size: 0.85rem; opacity: 0.9; margin-bottom: 4px; } .art-medium { font-size: 0.75rem; color: var(--color-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .art-badge { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); background-color: var(--color-primary); color: white; padding: 4px 8px; border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 600; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; } .art-card:hover .art-badge { opacity: 1; transform: translateY(0); } .geometric-shape { position: absolute; z-index: 1; opacity: 0.7; } .shape-1 { top: -40px; right: 20px; width: 80px; height: 80px; border-radius: 50%; background: var(--color-tertiary); mix-blend-mode: multiply; animation: float 8s ease-in-out infinite; } .shape-2 { bottom: -30px; left: 10%; width: 60px; height: 60px; background: var(--color-primary); transform: rotate(45deg); mix-blend-mode: multiply; animation: float 6s ease-in-out infinite reverse; } .shape-3 { top: 30%; left: -20px; width: 70px; height: 70px; background: var(--color-accent); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); mix-blend-mode: multiply; animation: float 7s ease-in-out infinite 1s; } @keyframes float { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-20px) rotate(5deg); } 100% { transform: translateY(0) rotate(0); } } .art-price { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background-color: rgba(255, 255, 255, 0.9); color: var(--color-dark); padding: 4px 10px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 700; transform: translateX(-100%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .art-card:hover .art-price { transform: translateX(0); opacity: 1; } .view-more-btn { display: block; margin: var(--spacing-lg) auto; background: transparent; border: 2px solid var(--color-secondary); color: var(--color-secondary); padding: var(--spacing-sm) var(--spacing-lg); border-radius: 50px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .view-more-btn:hover { background: var(--color-secondary); color: white; } .view-more-btn::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .view-more-btn:hover::after { left: 100%; } .tooltip { position: absolute; background: var(--color-dark); color: white; padding: var(--spacing-sm); border-radius: var(--radius-sm); font-size: 0.85rem; pointer-events: none; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.2); max-width: 200px; } @media (max-width: 600px) { .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 150px; } .gallery-title { font-size: 1.5rem; } .gallery-subtitle { font-size: 0.9rem; } .art-card.featured, .art-card.wide, .art-card.tall { grid-column: span 1; grid-row: span 1; } } </style> </head> <body> <div class="gallery"> <div class="gallery-header"> <div class="geometric-shape shape-1"></div> <div class="geometric-shape shape-2"></div> <div class="geometric-shape shape-3"></div> <h1 class="gallery-title">Pixel Panorama</h1> <p class="gallery-subtitle">Discover boundary-pushing digital artwork from emerging and established artists worldwide</p> <div class="filters"> <button class="filter-btn active" data-filter="all">All</button> <button class="filter-btn" data-filter="generative">Generative</button> <button class="filter-btn" data-filter="3d">3D Art</button> <button class="filter-btn" data-filter="digital-painting">Digital Painting</button> <button class="filter-btn" data-filter="nft">NFT</button> </div> </div> <div class="grid"> <div class="art-card featured" data-category="generative"> <img src="https://images.unsplash.com/photo-1580927752452-89d86da3fa0a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Algorithmic Dreamscape" class="art-img"> <div class="art-overlay"> <h3 class="art-title">Algorithmic Dreamscape</h3> <p class="art-artist">by Hiroshi Kondo</p> <span class="art-medium">Generative Art</span> </div> <div class="art-badge">New Release</div> <div class="art-price">$4,200</div> </div> <div class="art-card" data-category="digital-painting"> <img src="https://images.unsplash.com/photo-1579783901586-d88db74b4fe4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Neon Wilderness" class="art-img"> <div class="art-overlay"> <h3 class="art-title">Neon Wilderness</h3> <p class="art-artist">by Sophie Chen</p> <span class="art-medium">Digital Painting</span> </div> <div class="art-price">$1,850</div> </div> <div class="art-card tall" data-category="3d"> <img src="https://images.unsplash.com/photo-1563089145-599997674d42?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Quantum Sculptures" class="art-img"> <div class="art-overlay"> <h3 class="art-title">Quantum Sculptures</h3> <p class="art-artist">by Marcus Reynolds</p> <span class="art-medium">3D Modeling</span> </div> <div class="art-badge">Popular</div> <div class="art-price">$3,400</div> </div> <div class="art-card" data-category="nft"> <img src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Crypto Fauna #37" class="art-img"> <div class="art-overlay"> <h3 class="art-title">Crypto Fauna #37</h3> <p class="art-artist">by Anya Vizier</p> <span class="art-medium">NFT Collection</span> </div> <div class="art-price">$5,600</div> </div> <div class="art-card wide" data-category="digital-painting"> <img src="https://images.unsplash.com/photo-1604871000636-074fa5117945?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Urban Fractal" class="art-img"> <div class="art-overlay"> <h3 class="art-title">Urban Fractal</h3> <p class="art-artist">by Jordan Torres</p> <span class="art-medium">Digital Painting</span> </div> <div class="art-price">$2,100</div> </div> <div class="art-card" data-category="generative"> <img src="https://images.unsplash.com/photo-1583160247711-2191776b4b91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Procedural Echo" class="art-img"> <div class="art-overlay"> <h3 class="art-title">Procedural Echo</h3> <p class="art-artist">by Liam Nakamura</p> <span class="art-medium">Algorithmic Art</span> </div> <div class="art-badge">Limited</div> <div class="art-price">$3,800</div> </div> <div class="art-card" data-category="3d"> <img src="https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Biomorphic Transit" class="art-img"> <div class="art-overlay"> <h3 class="art-title">Biomorphic Transit</h3> <p class="art-artist">by Elena Santos</p> <span class="art-medium">3D Rendering</span> </div> <div class="art-price">$2,950</div> </div> </div> <button class="view-more-btn">Explore More Art</button> <div class="tooltip"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Filter functionality const filterButtons = document.querySelectorAll('.filter-btn'); const artCards = document.querySelectorAll('.art-card'); filterButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons filterButtons.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); const filter = this.dataset.filter; // Show/hide art cards based on filter artCards.forEach(card => { if (filter === 'all' || card.dataset.category === filter) { card.style.display = 'block'; setTimeout(() => { card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 50); } else { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.display = 'none'; }, 300); } }); }); }); // Tooltip functionality const artCardsTooltip = document.querySelectorAll('.art-card'); const tooltip = document.querySelector('.tooltip'); artCardsTooltip.forEach(card => { card.addEventListener('mouseenter', function(e) { const title = this.querySelector('.art-title').textContent; const artist = this.querySelector('.art-artist').textContent; const medium = this.querySelector('.art-medium').textContent; tooltip.innerHTML = ` <strong>${title}</strong><br> ${artist}<br> ${medium} `; tooltip.style.opacity = '1'; tooltip.style.transform = 'translateY(0)'; // Position tooltip near the cursor updateTooltipPosition(e); }); card.addEventListener('mousemove', updateTooltipPosition); card.addEventListener('mouseleave', function() { tooltip.style.opacity = '0'; tooltip.style.transform = 'translateY(10px)'; }); }); function updateTooltipPosition(e) { const x = e.clientX; const y = e.clientY; const scrollTop = window.pageYOffset || document.documentElement.scrollTop; tooltip.style.left = (x + 10) + 'px'; tooltip.style.top = (y + scrollTop + 10) + 'px'; } // View more button animation const viewMoreBtn = document.querySelector('.view-more-btn'); viewMoreBtn.addEventListener('click', function() { this.textContent = 'Loading...'; this.disabled = true; setTimeout(() => { this.textContent = 'Explore More Art'; this.disabled = false; // Here you'd typically load more items via AJAX // For demo purposes we'll just show an alert const alert = document.createElement('div'); alert.style.position = 'fixed'; alert.style.top = '20px'; alert.style.left = '50%'; alert.style.transform = 'translateX(-50%)'; alert.style.padding = '10px 20px'; alert.style.backgroundColor = 'var(--color-primary)'; alert.style.color = 'white'; alert.style.borderRadius = '4px'; alert.style.zIndex = '1000'; alert.textContent = 'More artwork would load here!'; document.body.appendChild(alert); setTimeout(() => { alert.style.opacity = '0'; setTimeout(() => { document.body.removeChild(alert); }, 300); }, 2000); }, 800); }); // Add staggered animation to cards on load artCards.forEach((card, index) => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 100 + (index * 100)); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #f6eee5; --secondary-color: #e8d8c7; --accent: #c9a892; --dark-accent: #8c7a76; --text-color: #3c3532; --light-text: #6d6661; --white: #ffffff; } body { font-family: 'Cormorant Garamond', serif; background-color: var(--primary-color); color: var(--text-color); width: 100%; height: 100%; overflow-x: hidden; padding: 20px; } .container { max-width: 700px; margin: 0 auto; } header { text-align: center; margin-bottom: 30px; position: relative; } h1 { font-size: 2.5rem; font-weight: 500; letter-spacing: 1px; margin-bottom: 5px; color: var(--text-color); } .subtitle { font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--light-text); } .filter-bar { display: flex; justify-content: center; margin-bottom: 30px; overflow-x: auto; padding: 5px 0; } .filter-button { background: none; border: none; font-family: 'Montserrat', sans-serif; font-size: 0.8rem; letter-spacing: 1px; color: var(--light-text); margin: 0 12px; padding: 5px 2px; cursor: pointer; position: relative; transition: all 0.3s ease; } .filter-button::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--accent); transition: width 0.3s ease; } .filter-button:hover::after, .filter-button.active::after { width: 100%; } .filter-button.active { color: var(--text-color); font-weight: 500; } .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-bottom: 20px; } .product-card { background-color: var(--white); border-radius: 8px; overflow: hidden; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); cursor: pointer; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); } .product-card:hover .product-image img { transform: scale(1.05); } .product-card:hover .add-to-cart { opacity: 1; transform: translateY(0); } .product-image { position: relative; height: 200px; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-badge { position: absolute; top: 10px; left: 10px; background-color: var(--primary-color); color: var(--text-color); font-family: 'Montserrat', sans-serif; font-size: 0.7rem; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; } .product-details { padding: 15px; position: relative; } .product-name { font-size: 1.2rem; margin-bottom: 5px; font-weight: 500; transition: color 0.3s ease; } .product-card:hover .product-name { color: var(--accent); } .product-material { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; color: var(--light-text); margin-bottom: 8px; } .product-price { font-size: 1.1rem; font-weight: 600; margin-top: 8px; } .add-to-cart { background-color: var(--accent); color: white; border: none; font-family: 'Montserrat', sans-serif; font-size: 0.8rem; letter-spacing: 1px; padding: 8px 0; width: 100%; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; position: absolute; bottom: 0; left: 0; opacity: 0; transform: translateY(10px); } .add-to-cart:hover { background-color: var(--dark-accent); } .quick-view-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .quick-view-content { background-color: var(--white); width: 90%; max-width: 600px; max-height: 80vh; border-radius: 8px; overflow: auto; position: relative; transform: translateY(20px); transition: transform 0.3s ease; } .quick-view-modal.active { opacity: 1; visibility: visible; } .quick-view-modal.active .quick-view-content { transform: translateY(0); } .quick-view-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-color); z-index: 10; } .quick-view-gallery { display: flex; width: 100%; height: 300px; } .quick-view-image { width: 100%; height: 100%; object-fit: cover; } .quick-view-details { padding: 25px; } .quick-view-name { font-size: 1.6rem; margin-bottom: 10px; } .quick-view-info { display: flex; justify-content: space-between; margin-bottom: 15px; } .quick-view-material, .quick-view-dimensions { font-family: 'Montserrat', sans-serif; font-size: 0.8rem; color: var(--light-text); } .quick-view-price { font-size: 1.3rem; font-weight: 600; margin: 15px 0; } .quick-view-description { font-family: 'Montserrat', sans-serif; font-size: 0.9rem; line-height: 1.6; color: var(--light-text); margin-bottom: 20px; } .quick-view-actions { display: flex; gap: 10px; } .quick-view-add, .quick-view-save { flex: 1; padding: 12px; font-family: 'Montserrat', sans-serif; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; border: none; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; } .quick-view-add { background-color: var(--accent); color: white; } .quick-view-add:hover { background-color: var(--dark-accent); } .quick-view-save { background-color: transparent; border: 1px solid var(--accent); color: var(--accent); } .quick-view-save:hover { background-color: rgba(201, 168, 146, 0.1); } @media (max-width: 600px) { .products-grid { grid-template-columns: 1fr; } h1 { font-size: 2rem; } .filter-button { margin: 0 8px; font-size: 0.75rem; } .product-image { height: 180px; } } .notification { position: fixed; bottom: 20px; right: 20px; background-color: var(--accent); color: white; padding: 10px 20px; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 1001; } .notification.show { opacity: 1; transform: translateY(0); } /* Loader animation */ .loader { width: 30px; height: 30px; border: 3px solid var(--secondary-color); border-radius: 50%; border-top-color: var(--accent); animation: spin 1s infinite ease-in-out; margin: 0 auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Fade in animation for products */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .product-card { animation: fadeIn 0.5s ease forwards; } .product-card:nth-child(2) { animation-delay: 0.1s; } .product-card:nth-child(3) { animation-delay: 0.2s; } .product-card:nth-child(4) { animation-delay: 0.3s; } </style> </head> <body> <div class="container"> <header> <h1>Maison Étoile</h1> <p class="subtitle">Curated Home Essentials</p> </header> <div class="filter-bar"> <button class="filter-button active" data-filter="all">All</button> <button class="filter-button" data-filter="lighting">Lighting</button> <button class="filter-button" data-filter="textiles">Textiles</button> <button class="filter-button" data-filter="decor">Decor</button> <button class="filter-button" data-filter="furniture">Furniture</button> </div> <div class="products-grid"> <div class="product-card" data-category="lighting"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1507473885765-e6ed057f782c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Alabaster Table Lamp"> <span class="product-badge">Artisanal</span> </div> <div class="product-details"> <h3 class="product-name">Alabaster Table Lamp</h3> <p class="product-material">Natural Alabaster Stone & Brass</p> <p class="product-price">€295</p> <button class="add-to-cart">Add to Cart</button> </div> </div> <div class="product-card" data-category="textiles"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1616047006789-b7af5afb8c20?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Merino Wool Throw"> </div> <div class="product-details"> <h3 class="product-name">Merino Wool Throw</h3> <p class="product-material">100% Portuguese Merino Wool</p> <p class="product-price">€145</p> <button class="add-to-cart">Add to Cart</button> </div> </div> <div class="product-card" data-category="decor"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1594897030264-ab7d87efc473?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Handblown Glass Vase"> <span class="product-badge">Limited</span> </div> <div class="product-details"> <h3 class="product-name">Handblown Glass Vase</h3> <p class="product-material">Murano Glass, Made in Italy</p> <p class="product-price">€189</p> <button class="add-to-cart">Add to Cart</button> </div> </div> <div class="product-card" data-category="furniture"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1538688525198-9b88f6f53126?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Velvet Accent Chair"> </div> <div class="product-details"> <h3 class="product-name">Velvet Accent Chair</h3> <p class="product-material">Belgian Linen & Walnut Wood</p> <p class="product-price">€675</p> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> </div> <div class="quick-view-modal"> <div class="quick-view-content"> <button class="quick-view-close">×</button> <div class="quick-view-gallery"> <img class="quick-view-image" src="" alt=""> </div> <div class="quick-view-details"> <h2 class="quick-view-name"></h2> <div class="quick-view-info"> <p class="quick-view-material"></p> <p class="quick-view-dimensions"></p> </div> <p class="quick-view-price"></p> <p class="quick-view-description"></p> <div class="quick-view-actions"> <button class="quick-view-add">Add to Cart</button> <button class="quick-view-save">Save for Later</button> </div> </div> </div> </div> <div class="notification"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Product data const productData = { "Alabaster Table Lamp": { description: "This exquisite table lamp features a natural alabaster stone base that diffuses light with a warm, inviting glow. Each piece carries subtle variations in veining, making your lamp truly one-of-a-kind.", dimensions: "H: 42cm × Ø: 28cm", details: "The lampshade is crafted from fine Belgian linen in a soft ivory tone that complements the alabaster's natural warmth. The brass hardware adds a sophisticated accent that will patina beautifully over time." }, "Merino Wool Throw": { description: "Luxuriously soft and remarkably warm, our merino wool throw is handcrafted in Portugal using traditional weaving techniques. The subtle herringbone pattern adds texture while maintaining a refined aesthetic.", dimensions: "130cm × 180cm", details: "Washable at low temperatures and naturally flame-resistant, this throw combines practicality with understated luxury. Available in six curated colorways designed to complement both contemporary and classic interiors." }, "Handblown Glass Vase": { description: "Created by master artisans in Murano, Italy, each vase features graceful curves and an ethereal gradient of color. The complex technique requires years of expertise, resulting in a sculptural piece that stands as art even without flowers.", dimensions: "H: 32cm × Ø: 18cm", details: "Limited to a production of only 100 pieces, each vase is signed and numbered by the artist. The subtle blend of azure and amber tones shifts beautifully as light passes through the glass at different angles." }, "Velvet Accent Chair": { description: "This statement chair balances mid-century inspired lines with contemporary comfort. The walnut frame is hand-finished to highlight the wood's natural grain, while the plush cushions invite lingering conversation.", dimensions: "W: 75cm × D: 80cm × H: 85cm", details: "The Belgian linen upholstery is treated with an eco-friendly stain-resistant finish, making this sophisticated piece as practical as it is beautiful. Each chair is bench-made by skilled craftspeople in a small Portuguese workshop." } }; // Filter functionality const filterButtons = document.querySelectorAll('.filter-button'); const productCards = document.querySelectorAll('.product-card'); filterButtons.forEach(button => { button.addEventListener('click', function() { const filter = this.getAttribute('data-filter'); // Update active button filterButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); // Filter products productCards.forEach(card => { if (filter === 'all' || card.getAttribute('data-category') === filter) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); }); }); // Quick view modal functionality const modal = document.querySelector('.quick-view-modal'); const modalClose = document.querySelector('.quick-view-close'); const modalName = document.querySelector('.quick-view-name'); const modalMaterial = document.querySelector('.quick-view-material'); const modalDimensions = document.querySelector('.quick-view-dimensions'); const modalPrice = document.querySelector('.quick-view-price'); const modalDescription = document.querySelector('.quick-view-description'); const modalImage = document.querySelector('.quick-view-image'); const modalAddButton = document.querySelector('.quick-view-add'); const modalSaveButton = document.querySelector('.quick-view-save'); // Open quick view modal when clicking on product card productCards.forEach(card => { card.addEventListener('click', function(e) { if (!e.target.classList.contains('add-to-cart')) { const name = this.querySelector('.product-name').textContent; const material = this.querySelector('.product-material').textContent; const price = this.querySelector('.product-price').textContent; const imgSrc = this.querySelector('.product-image img').src; modalName.textContent = name; modalMaterial.textContent = material; modalDimensions.textContent = productData[name].dimensions; modalPrice.textContent = price; modalDescription.textContent = productData[name].description; modalImage.src = imgSrc; modal.classList.add('active'); document.body.style.overflow = 'hidden'; } }); }); // Close modal modalClose.addEventListener('click', function() { modal.classList.remove('active'); document.body.style.overflow = ''; }); // Close modal when clicking outside content modal.addEventListener('click', function(e) { if (e.target === modal) { modal.classList.remove('active'); document.body.style.overflow = ''; } }); // Add to cart functionality const addToCartButtons = document.querySelectorAll('.add-to-cart'); const notification = document.querySelector('.notification'); function showNotification(message) { notification.textContent = message; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } addToCartButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); const productName = this.closest('.product-details').querySelector('.product-name').textContent; showNotification(`${productName} added to your cart`); }); }); modalAddButton.addEventListener('click', function() { const productName = modalName.textContent; showNotification(`${productName} added to your cart`); modal.classList.remove('active'); document.body.style.overflow = ''; }); modalSaveButton.addEventListener('click', function() { const productName = modalName.textContent; showNotification(`${productName} saved for later`); modal.classList.remove('active'); document.body.style.overflow = ''; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); :root { --neon-blue: #00f3ff; --neon-purple: #9c00ff; --neon-pink: #ff00e5; --dark-bg: #0a0a12; --card-bg: #13131f; --text-primary: #ffffff; --text-secondary: #c7c7c7; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', sans-serif; } body { background-color: var(--dark-bg); color: var(--text-primary); display: flex; justify-content: center; align-items: center; min-height: 700px; position: relative; overflow-x: hidden; overflow-y: auto; } .container { width: 100%; max-width: 700px; padding: 1.5rem; overflow-y: auto; max-height: 700px; perspective: 1000px; } .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding-bottom: 1rem; } .category-title { font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: 800; text-transform: uppercase; margin-bottom: 1.5rem; text-align: center; position: relative; color: var(--text-primary); letter-spacing: 2px; text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple); } .category-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 150px; height: 3px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); } .product-card { background-color: var(--card-bg); border-radius: 12px; overflow: hidden; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6); position: relative; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(156, 0, 255, 0.2); transform-style: preserve-3d; } .product-card:hover { transform: translateY(-10px) rotateX(5deg); box-shadow: 0 20px 35px rgba(156, 0, 255, 0.3); border: 1px solid rgba(156, 0, 255, 0.6); } .product-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, rgba(156, 0, 255, 0.15), transparent 70%); opacity: 0; z-index: 1; transition: opacity 0.3s ease; pointer-events: none; } .product-card:hover::before { opacity: 1; animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 0.1; transform: scale(0.85); } 50% { opacity: 0.3; transform: scale(1.05); } 100% { opacity: 0.1; transform: scale(0.85); } } .product-image { height: 200px; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; background: linear-gradient(45deg, rgba(0, 243, 255, 0.1), rgba(156, 0, 255, 0.1)); } .product-image img { max-width: 80%; max-height: 180px; object-fit: contain; transition: transform 0.5s ease; filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.6)); } .product-card:hover .product-image img { transform: scale(1.1) translateY(-5px); } .glow-overlay { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at center, var(--neon-purple), transparent 70%); opacity: 0; mix-blend-mode: soft-light; transition: opacity 0.5s ease; } .product-card:hover .glow-overlay { opacity: 0.6; } .product-details { padding: 1.2rem; position: relative; z-index: 2; } .product-name { font-family: 'Orbitron', sans-serif; font-size: 1.4rem; font-weight: 700; margin-bottom: 0.8rem; color: var(--text-primary); position: relative; display: inline-block; } .product-name::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 50px; height: 2px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); transition: width 0.3s ease; } .product-card:hover .product-name::after { width: 100%; } .product-category { font-size: 0.9rem; color: var(--neon-blue); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; font-weight: 600; } .product-description { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.4; } .specs-container { background-color: rgba(10, 10, 18, 0.6); border-radius: 8px; padding: 0.8rem; margin-bottom: 1rem; border: 1px solid rgba(0, 243, 255, 0.2); } .specs-title { font-family: 'Orbitron', sans-serif; font-size: 0.9rem; color: var(--neon-blue); margin-bottom: 0.5rem; font-weight: 600; display: flex; align-items: center; } .specs-title svg { margin-right: 0.5rem; } .specs-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; font-size: 0.85rem; } .spec-item { display: flex; flex-direction: column; } .spec-label { color: var(--text-secondary); } .spec-value { color: var(--text-primary); font-weight: 600; } .product-price { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 1rem 0; display: inline-block; text-shadow: 0 0 10px rgba(0, 243, 255, 0.5); } .action-buttons { display: flex; gap: 0.8rem; } .btn { font-family: 'Orbitron', sans-serif; padding: 0.6rem 1.2rem; border: none; border-radius: 5px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; position: relative; overflow: hidden; } .btn-primary { background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue)); color: white; flex: 2; } .btn-primary:hover { box-shadow: 0 0 15px var(--neon-purple); } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.7s ease; } .btn-primary:hover::before { left: 100%; } .btn-secondary { background: transparent; color: var(--neon-pink); border: 1px solid var(--neon-pink); flex: 1; } .btn-secondary:hover { background-color: rgba(255, 0, 229, 0.1); box-shadow: 0 0 10px var(--neon-pink); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid var(--neon-blue); color: var(--neon-blue); cursor: pointer; transition: all 0.3s ease; } .btn-icon:hover { background-color: rgba(0, 243, 255, 0.1); box-shadow: 0 0 10px var(--neon-blue); transform: translateY(-2px); } .stock-tag { position: absolute; top: 15px; right: 15px; background: rgba(9, 9, 15, 0.8); padding: 0.4rem 0.8rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; z-index: 10; border-left: 3px solid var(--neon-purple); } .in-stock { color: #00ff88; } .limited { color: #ffcc00; } @media (max-width: 600px) { .grid-container { grid-template-columns: 1fr; } .category-title { font-size: 1.8rem; } .product-details { padding: 1rem; } .product-name { font-size: 1.2rem; } .specs-list { grid-template-columns: 1fr; } } /* Scroll styling */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: rgba(10, 10, 18, 0.8); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--neon-purple), var(--neon-blue)); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--neon-blue), var(--neon-purple)); } /* Animations */ @keyframes floatAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .rating { display: flex; align-items: center; margin: 0.5rem 0; } .stars { display: flex; margin-right: 0.5rem; } .star { color: #ffcc00; font-size: 0.9rem; margin-right: 2px; } .review-count { color: var(--text-secondary); font-size: 0.8rem; } .badge { display: inline-block; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; margin-right: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(156, 0, 255, 0.2); color: var(--neon-purple); border: 1px solid rgba(156, 0, 255, 0.4); } .badge.new { background: rgba(0, 243, 255, 0.2); color: var(--neon-blue); border: 1px solid rgba(0, 243, 255, 0.4); } .badge.bestseller { background: rgba(255, 0, 229, 0.2); color: var(--neon-pink); border: 1px solid rgba(255, 0, 229, 0.4); } .badges-container { margin-bottom: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Cybernetic decoration elements */ .cyber-line { position: absolute; background: linear-gradient(90deg, transparent, var(--neon-blue), transparent); height: 1px; width: 100%; left: 0; opacity: 0.3; } .cyber-line.top { top: 0; } .cyber-line.bottom { bottom: 0; } .cyber-corner { position: absolute; width: 10px; height: 10px; border-style: solid; border-width: 1px; border-color: var(--neon-purple); } .corner-tl { top: 0; left: 0; border-right: none; border-bottom: none; } .corner-tr { top: 0; right: 0; border-left: none; border-bottom: none; } .corner-bl { bottom: 0; left: 0; border-right: none; border-top: none; } .corner-br { bottom: 0; right: 0; border-left: none; border-top: none; } </style> </head> <body> <div class="container"> <h1 class="category-title">Elite Gaming Gear</h1> <div class="grid-container"> <!-- Product 1 --> <div class="product-card"> <div class="cyber-corner corner-tl"></div> <div class="cyber-corner corner-tr"></div> <div class="cyber-corner corner-bl"></div> <div class="cyber-corner corner-br"></div> <div class="stock-tag in-stock">In Stock</div> <div class="product-image"> <img src="https://i.imgur.com/LORKluV.png" alt="NexusVision XR Gaming Headset"> <div class="glow-overlay"></div> </div> <div class="product-details"> <div class="product-category">Headset</div> <h3 class="product-name">NexusVision XR-9000</h3> <div class="badges-container"> <span class="badge bestseller">Bestseller</span> <span class="badge">Pro-Grade</span> </div> <div class="rating"> <div class="stars"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> <span class="review-count">(487 reviews)</span> </div> <p class="product-description">Immerse yourself in 9.1 spatial audio with adaptive noise cancellation that detects and eliminates background distractions in real-time.</p> <div class="specs-container"> <div class="specs-title"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> </svg> Specifications </div> <div class="specs-list"> <div class="spec-item"> <span class="spec-label">Driver Size</span> <span class="spec-value">50mm Titanium</span> </div> <div class="spec-item"> <span class="spec-label">Frequency</span> <span class="spec-value">10Hz - 40kHz</span> </div> <div class="spec-item"> <span class="spec-label">Battery Life</span> <span class="spec-value">36 Hours</span> </div> <div class="spec-item"> <span class="spec-label">Connection</span> <span class="spec-value">Bluetooth 5.3</span> </div> </div> </div> <div class="product-price">$249.99</div> <div class="action-buttons"> <button class="btn btn-primary">Add to Cart</button> <button class="btn-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </button> </div> </div> </div> <!-- Product 2 --> <div class="product-card"> <div class="cyber-corner corner-tl"></div> <div class="cyber-corner corner-tr"></div> <div class="cyber-corner corner-bl"></div> <div class="cyber-corner corner-br"></div> <div class="stock-tag limited">Limited Stock</div> <div class="product-image"> <img src="https://i.imgur.com/M5musgp.png" alt="PredatorStrike Gaming Mouse"> <div class="glow-overlay"></div> </div> <div class="product-details"> <div class="product-category">Mouse</div> <h3 class="product-name">PredatorStrike X1</h3> <div class="badges-container"> <span class="badge new">New</span> <span class="badge">eSports</span> </div> <div class="rating"> <div class="stars"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> <span class="review-count">(324 reviews)</span> </div> <p class="product-description">Zero-latency optical switches with 100 million click durability and adaptive DPI that adjusts based on game genre detection.</p> <div class="specs-container"> <div class="specs-title"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> </svg> Specifications </div> <div class="specs-list"> <div class="spec-item"> <span class="spec-label">Sensor</span> <span class="spec-value">32K DPI Optical</span> </div> <div class="spec-item"> <span class="spec-label">Polling Rate</span> <span class="spec-value">8000Hz</span> </div> <div class="spec-item"> <span class="spec-label">Weight</span> <span class="spec-value">62g</span> </div> <div class="spec-item"> <span class="spec-label">Buttons</span> <span class="spec-value">9 Programmable</span> </div> </div> </div> <div class="product-price">$129.99</div> <div class="action-buttons"> <button class="btn btn-primary">Add to Cart</button> <button class="btn-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </button> </div> </div> </div> <!-- Product 3 --> <div class="product-card"> <div class="cyber-corner corner-tl"></div> <div class="cyber-corner corner-tr"></div> <div class="cyber-corner corner-bl"></div> <div class="cyber-corner corner-br"></div> <div class="stock-tag in-stock">In Stock</div> <div class="product-image"> <img src="https://i.imgur.com/6zJJgVx.png" alt="QuantumForce Mechanical Keyboard"> <div class="glow-overlay"></div> </div> <div class="product-details"> <div class="product-category">Keyboard</div> <h3 class="product-name">QuantumForce TKL</h3> <div class="badges-container"> <span class="badge">High-Performance</span> </div> <div class="rating"> <div class="stars"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> <span class="review-count">(219 reviews)</span> </div> <p class="product-description">Magnetic-levitation switches with adjustable actuation points and reactive per-key RGB lighting that responds to in-game events.</p> <div class="specs-container"> <div class="specs-title"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> </svg> Specifications </div> <div class="specs-list"> <div class="spec-item"> <span class="spec-label">Switches</span> <span class="spec-value">MagLev Optical</span> </div> <div class="spec-item"> <span class="spec-label">N-Key Rollover</span> <span class="spec-value">Full NKRO</span> </div> <div class="spec-item"> <span class="spec-label">Polling Rate</span> <span class="spec-value">4000Hz</span> </div> <div class="spec-item"> <span class="spec-label">Actuation</span> <span class="spec-value">0.1mm-4.0mm</span> </div> </div> </div> <div class="product-price">$189.99</div> <div class="action-buttons"> <button class="btn btn-primary">Add to Cart</button> <button class="btn-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </button> </div> </div> </div> <!-- Product 4 --> <div class="product-card"> <div class="cyber-corner corner-tl"></div> <div class="cyber-corner corner-tr"></div> <div class="cyber-corner corner-bl"></div> <div class="cyber-corner corner-br"></div> <div class="stock-tag in-stock">In Stock</div> <div class="product-image"> <img src="https://i.imgur.com/kXdwbXT.png" alt="ChromaSphere Gaming Mousepad"> <div class="glow-overlay"></div> </div> <div class="product-details"> <div class="product-category">Mousepad</div> <h3 class="product-name">ChromaSphere Infinity</h3> <div class="badges-container"> <span class="badge">RGB</span> <span class="badge new">New</span> </div> <div class="rating"> <div class="stars"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> <span class="review-count">(143 reviews)</span> </div> <p class="product-description">Microwoven surface with adaptive friction technology that changes resistance based on movement speed for precise control.</p> <div class="specs-container"> <div class="specs-title"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> </svg> Specifications </div> <div class="specs-list"> <div class="spec-item"> <span class="spec-label">Size</span> <span class="spec-value">900x400mm</span> </div> <div class="spec-item"> <span class="spec-label">Thickness</span> <span class="spec-value">4mm</span> </div> <div class="spec-item"> <span class="spec-label">RGB Zones</span> <span class="spec-value">16 Zones</span> </div> <div class="spec-item"> <span class="spec-label">Material</span> <span class="spec-value">NanoWeave Fabric</span> </div> </div> </div> <div class="product-price">$79.99</div> <div class="action-buttons"> <button class="btn btn-primary">Add to Cart</button> <button class="btn-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </button> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Animation for product cards const cards = document.querySelectorAll('.product-card'); // Add hover effect listeners cards.forEach(card => { card.addEventListener('mousemove', function(e) { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Calculate rotation based on mouse position const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateX = (y - centerY) / 20; const rotateY = (centerX - x) / 20; // Apply the rotation transform card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`; // Adjust the highlight position const overlay = card.querySelector('.glow-overlay'); if (overlay) { overlay.style.background = `radial-gradient(circle at ${x}px ${y}px, var(--neon-purple), transparent 70%)`; } }); // Reset transforms on mouse leave card.addEventListener('mouseleave', function() { card.style.transform = ''; const overlay = card.querySelector('.glow-overlay'); if (overlay) { overlay.style.background = ''; } }); }); // Button interaction effects const buttons = document.querySelectorAll('.btn, .btn-icon'); buttons.forEach(button => { button.addEventListener('click', function(e) { // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); const rect = button.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; // Prevent actual form submission in case this was attached to real store e.preventDefault(); // Add item to cart animation if (button.classList.contains('btn-primary')) { // Get nearest product card const card = button.closest('.product-card'); const productName = card.querySelector('.product-name').textContent; // Flash effect on button button.style.boxShadow = '0 0 30px var(--neon-purple)'; button.textContent = 'Added!'; // Reset button after a delay setTimeout(() => { button.style.boxShadow = ''; button.textContent = 'Add to Cart'; }, 1500); } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Athenaeum Books</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Serif+Pro:wght@300;400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-paper: #f8f3e9; --color-ink: #2a2723; --color-accent: #9b5644; --color-accent-light: #c4846f; --color-gold: #d2b48c; --font-serif: 'Playfair Display', Georgia, serif; --font-text: 'Source Serif Pro', serif; } body { font-family: var(--font-text); background-color: var(--color-paper); color: var(--color-ink); display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem; height: 100%; width: 100%; overflow-x: hidden; line-height: 1.6; } .header { text-align: center; margin-bottom: 2rem; width: 100%; } .logo { font-family: var(--font-serif); font-weight: 700; font-size: 2rem; color: var(--color-accent); letter-spacing: 1px; margin-bottom: 0.5rem; } .tagline { font-family: var(--font-text); font-weight: 300; font-style: italic; font-size: 0.9rem; color: var(--color-ink); opacity: 0.8; } .controls { display: flex; justify-content: space-between; width: 100%; margin-bottom: 1.5rem; } .filter-dropdown { font-family: var(--font-text); padding: 0.5rem; border: 1px solid var(--color-gold); background-color: var(--color-paper); color: var(--color-ink); border-radius: 0; outline: none; cursor: pointer; } .search-box { display: flex; border-bottom: 1px solid var(--color-accent); } .search-input { font-family: var(--font-text); background: transparent; border: none; outline: none; padding: 0.5rem; color: var(--color-ink); width: 150px; } .search-button { background: transparent; border: none; cursor: pointer; color: var(--color-accent); } .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2rem; width: 100%; } .book-card { position: relative; width: 100%; height: 380px; perspective: 1000px; cursor: pointer; } .card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .book-card:hover .card-inner { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(42, 39, 35, 0.08); } .card-front { background-color: #fff; } .card-back { background-color: #fff; transform: rotateY(180deg); padding: 1.5rem; justify-content: space-between; } .book-image { height: 220px; width: 100%; object-fit: cover; border-bottom: 1px solid rgba(0,0,0,0.05); } .book-details { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; } .book-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; line-height: 1.3; } .book-author { font-family: var(--font-text); font-size: 0.9rem; color: var(--color-accent); margin-bottom: 0.5rem; } .book-price { font-weight: 600; margin-top: auto; } .book-synopsis { font-size: 0.9rem; overflow-y: auto; margin-bottom: 1rem; line-height: 1.6; } .book-meta { font-size: 0.8rem; color: var(--color-ink); opacity: 0.7; margin-bottom: 0.5rem; } .book-badge { position: absolute; top: 0.8rem; right: 0.8rem; background-color: var(--color-accent); color: white; font-family: var(--font-serif); font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 2px; z-index: 1; } .add-to-cart { background-color: var(--color-accent); color: white; border: none; padding: 0.7rem 1rem; font-family: var(--font-serif); cursor: pointer; margin-top: auto; transition: background-color 0.3s; } .add-to-cart:hover { background-color: var(--color-accent-light); } .add-to-wishlist { background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); padding: 0.5rem; font-family: var(--font-serif); cursor: pointer; margin-top: 0.5rem; transition: all 0.3s; } .add-to-wishlist:hover { background-color: rgba(155, 86, 68, 0.1); } .book-info-row { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.5rem; } .info-label { font-weight: 600; color: var(--color-ink); } .info-value { color: var(--color-accent); } .book-ratings { display: flex; align-items: center; margin-bottom: 0.5rem; } .stars { color: var(--color-gold); font-size: 0.9rem; margin-right: 0.5rem; } .rating-count { font-size: 0.8rem; color: var(--color-ink); opacity: 0.7; } .paper-texture { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg=='); opacity: 0.03; pointer-events: none; z-index: -1; } /* Animation for new arrivals badge */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .new-arrival { animation: pulse 2s infinite; } /* Responsive styles */ @media (max-width: 700px) { .book-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem; } .book-card { height: 330px; } .book-image { height: 180px; } .controls { flex-direction: column; gap: 1rem; } .search-box { width: 100%; } .search-input { width: 100%; } } @media (max-width: 400px) { .book-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; } .book-card { height: 300px; } .book-title { font-size: 0.95rem; } .book-author { font-size: 0.8rem; } } </style> </head> <body> <div class="paper-texture"></div> <div class="header"> <h1 class="logo">Athenaeum Books</h1> <p class="tagline">Where timeless tales meet modern margins</p> </div> <div class="controls"> <select class="filter-dropdown" id="category-filter"> <option value="all">All Categories</option> <option value="fiction">Fiction</option> <option value="classics">Classics</option> <option value="mystery">Mystery & Thriller</option> <option value="scifi">Science Fiction</option> </select> <div class="search-box"> <input class="search-input" type="text" placeholder="Search titles..."> <button class="search-button"> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg> </button> </div> </div> <div class="book-grid" id="book-container"> <!-- Books will be populated here by JavaScript --> </div> <script> // Sample book data const books = [ { id: 1, title: "The Midnight Library", author: "Matt Haig", price: "$22.99", image: "https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", synopsis: "Between life and death there is a library, filled with books containing alternate versions of your life. Nora Seed finds herself in this library, faced with the possibility of changing her life for a new one, following a different career, undoing old breakups, or realizing her dreams of becoming a glaciologist.", category: "fiction", pages: 304, publisher: "Viking", published: "August 13, 2020", stars: 4.5, ratings: 12342, isNew: true }, { id: 2, title: "The Song of Achilles", author: "Madeline Miller", price: "$16.95", image: "https://images.unsplash.com/photo-1621351183012-e2f9972dd9bf?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", synopsis: "A retelling of the Trojan War through the eyes of Patroclus, an awkward young prince who forms an unbreakable bond with the strong, beautiful Achilles. As the Trojan War escalates, the two are tested by the demands of their families, the gods, and fate itself.", category: "fiction", pages: 416, publisher: "Ecco", published: "September 20, 2011", stars: 4.7, ratings: 9876, isNew: false }, { id: 3, title: "The Great Gatsby", author: "F. Scott Fitzgerald", price: "$15.00", image: "https://images.unsplash.com/photo-1543002588-bfa74002ed7e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", synopsis: "Set in the Jazz Age on Long Island, this tale of a mysterious millionaire, Jay Gatsby, his love for the beautiful Daisy Buchanan, and lavish parties captures the essence of the Roaring Twenties and exposes the hollow core of the American Dream.", category: "classics", pages: 180, publisher: "Scribner", published: "April 10, 1925", stars: 4.3, ratings: 24680, isNew: false }, { id: 4, title: "Project Hail Mary", author: "Andy Weir", price: "$28.99", image: "https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", synopsis: "Ryland Grace is the sole survivor on a desperate, last-chance mission to save humanity. But he's alone in space with no memory of his assignment or how to complete it. Only his scientific curiosity and problem-solving abilities will be the key to survival—for himself and all of humanity.", category: "scifi", pages: 496, publisher: "Ballantine Books", published: "May 4, 2021", stars: 4.8, ratings: 7543, isNew: true }, { id: 5, title: "The Silent Patient", author: "Alex Michaelides", price: "$17.99", image: "https://images.unsplash.com/photo-1589998059171-988d887df646?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", synopsis: "Alicia Berenson, a famous painter, shoots her husband five times in the face and then never speaks another word. Criminal psychotherapist Theo Faber is determined to get her to talk and unravel the mystery behind her silence, taking him down a twisting path into his own motivations.", category: "mystery", pages: 336, publisher: "Celadon Books", published: "February 5, 2019", stars: 4.2, ratings: 18763, isNew: false }, { id: 6, title: "Dune", author: "Frank Herbert", price: "$18.00", image: "https://images.unsplash.com/photo-1531072901881-d644216d4bf9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", synopsis: "On the desert planet Arrakis, young Paul Atreides must navigate political intrigue, ecological importance, and his own destiny as he becomes entangled in a struggle for control of the most valuable substance in the universe—the spice melange that extends life and enhances consciousness.", category: "scifi", pages: 896, publisher: "Ace Books", published: "August 1, 1965", stars: 4.6, ratings: 34098, isNew: false } ]; // Function to render stars function renderStars(rating) { const fullStars = Math.floor(rating); const halfStar = rating % 1 >= 0.5; let starsHTML = ''; for (let i = 0; i < fullStars; i++) { starsHTML += '★'; } if (halfStar) { starsHTML += '½'; } const emptyStars = 5 - fullStars - (halfStar ? 1 : 0); for (let i = 0; i < emptyStars; i++) { starsHTML += '☆'; } return starsHTML; } // Function to create book cards function createBookCards(booksToRender) { const bookContainer = document.getElementById('book-container'); bookContainer.innerHTML = ''; booksToRender.forEach(book => { const bookCard = document.createElement('div'); bookCard.className = 'book-card'; // Format the ratings count with commas const formattedRatings = book.ratings.toLocaleString(); bookCard.innerHTML = ` <div class="card-inner"> <div class="card-front"> ${book.isNew ? '<div class="book-badge new-arrival">New Arrival</div>' : ''} <img class="book-image" src="${book.image}" alt="${book.title}"> <div class="book-details"> <h3 class="book-title">${book.title}</h3> <p class="book-author">${book.author}</p> <div class="book-ratings"> <span class="stars">${renderStars(book.stars)}</span> <span class="rating-count">(${formattedRatings})</span> </div> <p class="book-price">${book.price}</p> </div> </div> <div class="card-back"> <h3 class="book-title">${book.title}</h3> <p class="book-synopsis">${book.synopsis}</p> <div class="book-info-row"> <span class="info-label">Pages:</span> <span class="info-value">${book.pages}</span> </div> <div class="book-info-row"> <span class="info-label">Publisher:</span> <span class="info-value">${book.publisher}</span> </div> <div class="book-info-row"> <span class="info-label">Published:</span> <span class="info-value">${book.published}</span> </div> <button class="add-to-cart">Add to Cart</button> <button class="add-to-wishlist">Add to Wishlist</button> </div> </div> `; bookContainer.appendChild(bookCard); }); } // Filter functionality document.getElementById('category-filter').addEventListener('change', function() { const selectedCategory = this.value; let filteredBooks; if (selectedCategory === 'all') { filteredBooks = books; } else { filteredBooks = books.filter(book => book.category === selectedCategory); } createBookCards(filteredBooks); }); // Search functionality document.querySelector('.search-input').addEventListener('input', function() { const searchTerm = this.value.toLowerCase(); const filteredBooks = books.filter(book => book.title.toLowerCase().includes(searchTerm) || book.author.toLowerCase().includes(searchTerm) ); createBookCards(filteredBooks); }); // Initialize the book grid document.addEventListener('DOMContentLoaded', function() { createBookCards(books); // Add click events to all buttons (for visual feedback only) document.addEventListener('click', function(e) { if (e.target.classList.contains('add-to-cart') || e.target.classList.contains('add-to-wishlist')) { e.target.style.opacity = '0.7'; setTimeout(() => { e.target.style.opacity = '1'; }, 200); e.preventDefault(); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wonder Toys</title> <style> @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Baloo 2', cursive; } body { background-color: #f5f0ff; background-image: radial-gradient(#ffde59 1px, transparent 1px), radial-gradient(#ff5757 1px, transparent 1px); background-size: 30px 30px; background-position: 0 0, 15px 15px; padding: 20px; max-width: 700px; margin: 0 auto; height: 100vh; overflow-y: auto; } .header { text-align: center; margin-bottom: 20px; position: relative; } .logo { font-size: 2.5rem; font-weight: 800; color: #ff5757; text-shadow: 3px 3px 0 #ffde59; margin-bottom: 10px; letter-spacing: -1px; transform-origin: center; animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .subtitle { font-size: 1rem; color: #4a4a4a; margin-bottom: 20px; } .filter-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .filter-btn { background-color: white; border: 3px solid #4b7bec; border-radius: 30px; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; color: #4b7bec; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .filter-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(75, 123, 236, 0.2); transition: all 0.3s ease; } .filter-btn:hover::before { left: 0; } .filter-btn.active { background-color: #4b7bec; color: white; } .toys-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 25px; margin-bottom: 30px; } .toy-card { background-color: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; position: relative; transform-style: preserve-3d; perspective: 1000px; } .toy-card:hover { transform: translateY(-10px) rotate(2deg); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .toy-image { width: 100%; height: 150px; object-fit: contain; background-color: #f0f7ff; padding: 15px; transition: transform 0.5s ease; } .toy-card:hover .toy-image { transform: scale(1.1); } .toy-content { padding: 15px; position: relative; } .age-tag { position: absolute; top: -12px; right: 15px; background-color: #ffde59; color: #333; font-size: 0.7rem; font-weight: bold; padding: 4px 8px; border-radius: 10px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); transform: rotate(3deg); } .toy-name { font-size: 1.2rem; color: #333; margin-bottom: 8px; font-weight: 800; } .toy-description { font-size: 0.85rem; color: #666; margin-bottom: 15px; line-height: 1.4; } .price-rating { display: flex; justify-content: space-between; align-items: center; } .price { font-size: 1.3rem; font-weight: 800; color: #ff5757; } .rating { display: flex; gap: 2px; } .star { width: 18px; height: 18px; display: inline-block; color: #ccc; position: relative; cursor: pointer; } .star.filled { color: #ffde59; } .star::before { content: '★'; position: absolute; top: 0; left: 0; } .add-to-cart { background-color: #4b7bec; color: white; border: none; border-radius: 15px; padding: 10px 0; width: 100%; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 15px; transition: all 0.3s ease; position: relative; overflow: hidden; } .add-to-cart::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: all 0.7s ease; } .add-to-cart:hover::before { left: 100%; } .add-to-cart:hover { background-color: #3867d6; transform: scale(1.05); } .add-to-cart:active { transform: scale(0.95); } .cart-popup { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background-color: #4b7bec; color: white; padding: 15px 25px; border-radius: 15px; font-weight: 600; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); opacity: 0; transition: all 0.5s ease; display: flex; align-items: center; gap: 10px; z-index: 100; } .cart-popup.show { bottom: 30px; opacity: 1; } .cart-popup i { font-size: 1.5rem; } .rotate-icon { display: inline-block; animation: rotate 1s linear; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Extra fun elements */ .confetti { position: absolute; width: 10px; height: 10px; background-color: #ff5757; opacity: 0; z-index: 10; } /* Responsive adjustments */ @media (max-width: 600px) { .toys-container { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; } .logo { font-size: 2rem; } .subtitle { font-size: 0.9rem; } .toy-name { font-size: 1rem; } .toy-description { font-size: 0.8rem; } .price { font-size: 1.1rem; } .filter-btn { font-size: 0.8rem; padding: 6px 12px; } } </style> </head> <body> <div class="header"> <h1 class="logo">WONDER TOYS</h1> <p class="subtitle">Where Imagination Comes to Play!</p> </div> <div class="filter-bar"> <button class="filter-btn active" data-filter="all">All Toys</button> <button class="filter-btn" data-filter="educational">Educational</button> <button class="filter-btn" data-filter="creative">Creative</button> <button class="filter-btn" data-filter="outdoor">Outdoor</button> </div> <div class="toys-container" id="toys-container"> <!-- Toy cards will be inserted here by JavaScript --> </div> <div class="cart-popup" id="cart-popup"> <span class="rotate-icon">🎪</span> <span id="popup-message">Added to your toy box!</span> </div> <script> // Toy data const toys = [ { id: 1, name: "Squiggly Blocks", description: "Colorful magnetic building blocks that wiggle when connected! Great for STEM learning and creative play.", price: 24.99, image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect x='30' y='40' width='50' height='50' rx='10' fill='%23ff5757'/%3E%3Crect x='90' y='60' width='50' height='50' rx='10' fill='%234b7bec'/%3E%3Crect x='60' y='100' width='50' height='50' rx='10' fill='%23ffde59'/%3E%3Crect x='120' y='110' width='50' height='50' rx='10' fill='%2325D366'/%3E%3C/svg%3E", rating: 5, age: "3-8 yrs", category: "educational" }, { id: 2, name: "Giggly Paint Rollers", description: "Makes painting noises as you roll! Create amazing patterns with these textured paint rollers.", price: 19.99, image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect x='60' y='40' width='80' height='20' fill='%2325D366'/%3E%3Crect x='40' y='40' width='20' height='120' fill='%234b7bec'/%3E%3Ccircle cx='140' cy='70' r='30' fill='%23ffde59'/%3E%3Cpath d='M110,100 a30,30 0 1,1 60,0 a30,30 0 1,1 -60,0' fill='%23ff5757'/%3E%3C/svg%3E", rating: 4, age: "4+ yrs", category: "creative" }, { id: 3, name: "Bounce-O-Pogo Stick", description: "Light-up pogo stick with silly sound effects! Safe for beginners with built-in stability assist.", price: 34.99, image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect x='85' y='30' width='30' height='100' fill='%23ff5757'/%3E%3Ccircle cx='100' cy='140' r='30' fill='%234b7bec'/%3E%3Ccircle cx='100' cy='30' r='15' fill='%23ffde59'/%3E%3C/svg%3E", rating: 5, age: "6+ yrs", category: "outdoor" }, { id: 4, name: "Whispering Storybook", description: "This interactive book reacts to whispers! Read softly and see the characters glow and animate.", price: 29.99, image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M50,50 L150,50 L150,150 L50,150 Z' fill='%234b7bec'/%3E%3Cpath d='M50,50 L150,50 L150,55 L50,55 Z' fill='%23ffde59'/%3E%3Cpath d='M60,70 L140,70 L140,75 L60,75 Z' fill='white'/%3E%3Cpath d='M60,90 L140,90 L140,95 L60,95 Z' fill='white'/%3E%3Cpath d='M60,110 L140,110 L140,115 L60,115 Z' fill='white'/%3E%3Cpath d='M60,130 L100,130 L100,135 L60,135 Z' fill='white'/%3E%3C/svg%3E", rating: 4, age: "3-10 yrs", category: "educational" }, { id: 5, name: "Squirmy Putty Pets", description: "Stretchy, squishy putty that forms cute animals! They wiggle and jiggle when you tap them.", price: 15.99, image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='50' fill='%23ff5757'/%3E%3Ccircle cx='80' cy='80' r='10' fill='white'/%3E%3Ccircle cx='120' cy='80' r='10' fill='white'/%3E%3Ccircle cx='80' cy='80' r='5' fill='black'/%3E%3Ccircle cx='120' cy='80' r='5' fill='black'/%3E%3Cpath d='M80,120 Q100,140 120,120' fill='none' stroke='white' stroke-width='5'/%3E%3C/svg%3E", rating: 5, age: "4+ yrs", category: "creative" }, { id: 6, name: "Bubble-Blitz Launcher", description: "Shoots super-sized bubbles up to 30 feet! Multiple wands create amazing bubble shapes.", price: 22.99, image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect x='40' y='80' width='80' height='40' rx='10' fill='%2325D366'/%3E%3Ccircle cx='140' cy='100' r='20' fill='%234b7bec' opacity='0.7'/%3E%3Ccircle cx='155' cy='80' r='15' fill='%234b7bec' opacity='0.5'/%3E%3Ccircle cx='165' cy='110' r='10' fill='%234b7bec' opacity='0.3'/%3E%3C/svg%3E", rating: 4, age: "5+ yrs", category: "outdoor" } ]; // Function to render toys function renderToys(filterCategory = 'all') { const container = document.getElementById('toys-container'); container.innerHTML = ''; toys.forEach(toy => { if (filterCategory === 'all' || toy.category === filterCategory) { const toyCard = document.createElement('div'); toyCard.className = 'toy-card'; toyCard.innerHTML = ` <img src="${toy.image}" alt="${toy.name}" class="toy-image"> <div class="toy-content"> <span class="age-tag">${toy.age}</span> <h3 class="toy-name">${toy.name}</h3> <p class="toy-description">${toy.description}</p> <div class="price-rating"> <span class="price">$${toy.price}</span> <div class="rating" data-rating="${toy.rating}"> ${getRatingStars(toy.rating)} </div> </div> <button class="add-to-cart" data-id="${toy.id}">Add to Toy Box</button> </div> `; container.appendChild(toyCard); } }); // Add event listeners to the newly created buttons document.querySelectorAll('.add-to-cart').forEach(button => { button.addEventListener('click', handleAddToCart); }); } // Function to get rating stars HTML function getRatingStars(rating) { let starsHTML = ''; for (let i = 1; i <= 5; i++) { starsHTML += `<span class="star ${i <= rating ? 'filled' : ''}"></span>`; } return starsHTML; } // Function to handle adding to cart function handleAddToCart(e) { const toyId = e.target.getAttribute('data-id'); const toy = toys.find(t => t.id === parseInt(toyId)); // Create confetti effect createConfetti(e.target); // Show popup message const popup = document.getElementById('cart-popup'); popup.querySelector('#popup-message').textContent = `${toy.name} added to your toy box!`; popup.classList.add('show'); // Hide popup after 3 seconds setTimeout(() => { popup.classList.remove('show'); }, 3000); } // Function to create confetti effect function createConfetti(button) { const colors = ['#ff5757', '#4b7bec', '#ffde59', '#25D366']; const rect = button.getBoundingClientRect(); for (let i = 0; i < 30; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; confetti.style.left = `${rect.left + rect.width/2 + (Math.random() * 100 - 50)}px`; confetti.style.top = `${rect.top + rect.height/2}px`; confetti.style.transform = `rotate(${Math.random() * 360}deg)`; document.body.appendChild(confetti); // Animate the confetti setTimeout(() => { confetti.style.transition = 'all 1s ease'; confetti.style.opacity = '1'; confetti.style.transform = `translate(${Math.random() * 200 - 100}px, ${-100 - Math.random() * 200}px) rotate(${Math.random() * 360}deg)`; setTimeout(() => { confetti.style.opacity = '0'; setTimeout(() => { document.body.removeChild(confetti); }, 1000); }, 600); }, 0); } } // Set up filter buttons document.querySelectorAll('.filter-btn').forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons document.querySelectorAll('.filter-btn').forEach(btn => { btn.classList.remove('active'); }); // Add active class to clicked button this.classList.add('active'); // Filter toys based on category const filterCategory = this.getAttribute('data-filter'); renderToys(filterCategory); }); }); // Make rating stars interactive document.addEventListener('click', function(e) { if (e.target.classList.contains('star')) { const starIndex = Array.from(e.target.parentElement.children).indexOf(e.target) + 1; const stars = e.target.parentElement.children; // Update visual representation for (let i = 0; i < stars.length; i++) { if (i < starIndex) { stars[i].classList.add('filled'); } else { stars[i].classList.remove('filled'); } } // Show a small rating feedback const popup = document.getElementById('cart-popup'); popup.querySelector('#popup-message').textContent = `You rated ${starIndex} stars!`; popup.classList.add('show'); setTimeout(() => { popup.classList.remove('show'); }, 2000); } }); // Initial render document.addEventListener('DOMContentLoaded', function() { renderToys(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Harmonic Haven - Musical Instruments</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Raleway:wght@300;500;700&display=swap'); :root { --deep-blue: #0a2342; --mid-blue: #126e82; --light-blue: #3a86ff; --accent-color: #ff6b35; --accent-secondary: #ffd166; --white: #f8f9fa; --dark-gray: #212529; --card-radius: 12px; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; background: linear-gradient(135deg, var(--deep-blue), #041530); color: var(--white); min-height: 100vh; padding: 20px; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; } .container { max-width: 660px; width: 100%; margin: 0 auto; } header { text-align: center; margin-bottom: 30px; position: relative; } header h1 { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 2.5rem; margin-bottom: 10px; background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; } header p { font-size: 1rem; color: var(--white); opacity: 0.9; max-width: 600px; margin: 0 auto; } .filter-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; } .filter-btn { background-color: rgba(255, 255, 255, 0.1); border: none; color: var(--white); padding: 8px 15px; border-radius: 25px; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 500; transition: var(--transition); border: 1px solid transparent; } .filter-btn:hover, .filter-btn.active { background-color: var(--accent-color); color: var(--white); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3); } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; width: 100%; padding-bottom: 20px; } .product-card { background: linear-gradient(145deg, rgba(18, 110, 130, 0.2), rgba(10, 35, 66, 0.8)); border-radius: var(--card-radius); overflow: hidden; position: relative; height: 380px; display: flex; flex-direction: column; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: var(--transition); } .product-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); border-color: var(--accent-color); } .product-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(10, 35, 66, 0.9), transparent); z-index: 1; opacity: 0; transition: var(--transition); } .product-card:hover::before { opacity: 1; } .card-image { height: 200px; overflow: hidden; position: relative; } .image-layer { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .image-base { z-index: 1; } .image-overlay { z-index: 2; opacity: 0; transform: scale(1.1); } .product-card:hover .image-base { transform: scale(1.05); } .product-card:hover .image-overlay { opacity: 1; transform: scale(1); } .card-badge { position: absolute; top: 15px; right: 15px; background-color: var(--accent-color); color: var(--white); padding: 5px 10px; border-radius: 5px; font-size: 0.75rem; font-weight: 600; z-index: 3; opacity: 0; transform: translateX(20px); transition: var(--transition); } .product-card:hover .card-badge { opacity: 1; transform: translateX(0); } .sound-preview { position: absolute; bottom: 15px; right: 15px; background-color: var(--mid-blue); color: var(--white); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; opacity: 0; transform: translateY(20px); transition: var(--transition); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .product-card:hover .sound-preview { opacity: 1; transform: translateY(0); } .sound-preview:hover { background-color: var(--accent-color); } .sound-preview i { font-size: 1.2rem; } .sound-wave { position: absolute; bottom: 15px; left: 15px; z-index: 3; display: flex; gap: 3px; opacity: 0; transform: translateY(20px); transition: var(--transition); } .sound-bar { width: 3px; height: 15px; background-color: var(--accent-secondary); border-radius: 3px; animation-name: soundWave; animation-duration: 1.2s; animation-iteration-count: infinite; animation-direction: alternate; } .sound-bar:nth-child(2) { animation-delay: 0.2s; } .sound-bar:nth-child(3) { animation-delay: 0.4s; } .sound-bar:nth-child(4) { animation-delay: 0.6s; } .sound-bar:nth-child(5) { animation-delay: 0.8s; } .product-card:hover .sound-wave { opacity: 0; transform: translateY(0); } .product-card.playing .sound-wave { opacity: 1; } .card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; z-index: 2; } .card-title { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 1.2rem; margin-bottom: 8px; color: var(--white); position: relative; } .card-title::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 40px; height: 2px; background-color: var(--accent-color); transition: var(--transition); } .product-card:hover .card-title::after { width: 70px; } .card-description { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 15px; line-height: 1.4; } .features-list { list-style: none; margin-bottom: 15px; } .features-list li { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 5px; display: flex; align-items: center; } .features-list li::before { content: '•'; color: var(--accent-secondary); margin-right: 8px; font-size: 1.2rem; } .card-footer { display: flex; justify-content: space-between; align-items: center; } .price { font-size: 1.3rem; font-weight: 700; color: var(--white); } .add-to-cart { background-color: var(--accent-color); color: var(--white); border: none; padding: 8px 15px; border-radius: 25px; font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 5px; } .add-to-cart:hover { background-color: var(--accent-secondary); color: var(--dark-gray); transform: scale(1.05); } @keyframes soundWave { 0% { height: 5px; } 100% { height: 15px; } } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .category-all { display: block; } .category-strings, .category-percussion, .category-wind, .category-electronic { display: none; } .show-category { display: block !important; } /* Responsive adjustments */ @media (max-width: 600px) { header h1 { font-size: 2rem; } .product-grid { grid-template-columns: 1fr; } .product-card { height: 350px; } .card-image { height: 170px; } .filter-bar { gap: 5px; } .filter-btn { padding: 6px 12px; font-size: 0.8rem; } } /* Subtle animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse-animation { animation: pulse 2s infinite; } /* Audio visualization */ .visualizer-container { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background-color: rgba(10, 35, 66, 0.9); z-index: 10; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(60px); transition: var(--transition); } .visualizer-container.active { opacity: 1; transform: translateY(0); } .visualizer { display: flex; align-items: flex-end; height: 40px; gap: 2px; width: 200px; } .visualizer-bar { width: 3px; background-color: var(--accent-color); height: 5px; transition: height 0.1s ease; } .now-playing { position: absolute; left: 20px; font-size: 0.9rem; color: var(--white); display: flex; align-items: center; gap: 10px; } .close-visualizer { position: absolute; right: 20px; background: none; border: none; color: var(--white); cursor: pointer; font-size: 1.2rem; } .instrument-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--white); margin-right: 5px; } </style> </head> <body> <div class="container"> <header> <h1>Harmonic Haven</h1> <p>Discover premium instruments with exceptional tone and craftsmanship. Hover to preview sounds and explore our curated collection.</p> </header> <div class="filter-bar"> <button class="filter-btn active" data-category="all">All Instruments</button> <button class="filter-btn" data-category="strings">Strings</button> <button class="filter-btn" data-category="percussion">Percussion</button> <button class="filter-btn" data-category="wind">Wind</button> <button class="filter-btn" data-category="electronic">Electronic</button> </div> <div class="product-grid"> <!-- String Instruments --> <div class="product-card category-strings category-all"> <div class="card-image"> <img class="image-layer image-base" src="https://images.unsplash.com/photo-1612225330812-01a9c6b355ec?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Taylor 214ce Acoustic Guitar"> <img class="image-layer image-overlay" src="https://images.unsplash.com/photo-1550291652-6ea9114a47b1?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Taylor 214ce Detail"> </div> <div class="card-badge">Best Seller</div> <div class="sound-preview" data-sound="acoustic-guitar" data-name="Taylor 214ce"> <i>▶</i> </div> <div class="sound-wave"> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> </div> <div class="card-content"> <div> <h3 class="card-title">Taylor 214ce Grand Auditorium</h3> <p class="card-description">Exceptional projection with layered tonewood construction for balanced sound.</p> <ul class="features-list"> <li>Sitka Spruce Top with Rosewood Back</li> <li>ES2 Electronics System</li> <li>Venetian Cutaway Design</li> </ul> </div> <div class="card-footer"> <span class="price">$1,299</span> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> <div class="product-card category-strings category-all"> <div class="card-image"> <img class="image-layer image-base" src="https://images.unsplash.com/photo-1558098329-a11cff621064?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Fender American Professional II Stratocaster"> <img class="image-layer image-overlay" src="https://images.unsplash.com/photo-1606999117549-3c954f486f64?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Stratocaster Detail"> </div> <div class="card-badge">New Arrival</div> <div class="sound-preview" data-sound="electric-guitar" data-name="Fender Stratocaster"> <i>▶</i> </div> <div class="sound-wave"> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> </div> <div class="card-content"> <div> <h3 class="card-title">Fender American Pro II Stratocaster</h3> <p class="card-description">Iconic tone with modern playability and versatile sound options.</p> <ul class="features-list"> <li>V-Mod II Single-Coil Pickups</li> <li>Deep C Neck Profile</li> <li>Super-Natural Satin Finish</li> </ul> </div> <div class="card-footer"> <span class="price">$1,699</span> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> <!-- Percussion Instruments --> <div class="product-card category-percussion category-all"> <div class="card-image"> <img class="image-layer image-base" src="https://images.unsplash.com/photo-1519892300165-cb5542fb47c7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Pearl Masters Complete Drum Set"> <img class="image-layer image-overlay" src="https://images.unsplash.com/photo-1571327073757-71d13c24de30?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Drum Set Detail"> </div> <div class="sound-preview" data-sound="drums" data-name="Pearl Masters Complete"> <i>▶</i> </div> <div class="sound-wave"> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> </div> <div class="card-content"> <div> <h3 class="card-title">Pearl Masters Complete 7-Piece</h3> <p class="card-description">Studio-grade resonance with premium maple shells and optimized bearing edges.</p> <ul class="features-list"> <li>6-ply Maple Shell Construction</li> <li>MasterCast Die-Cast Hoops</li> <li>OptiMount Suspension System</li> </ul> </div> <div class="card-footer"> <span class="price">$2,499</span> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> <!-- Wind Instruments --> <div class="product-card category-wind category-all"> <div class="card-image"> <img class="image-layer image-base" src="https://images.unsplash.com/photo-1573871669414-010dbf73ca84?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Yamaha YAS-875EX Saxophone"> <img class="image-layer image-overlay" src="https://images.unsplash.com/photo-1629045285044-841081036f79?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Saxophone Detail"> </div> <div class="card-badge">Pro Series</div> <div class="sound-preview" data-sound="saxophone" data-name="Yamaha YAS-875EX"> <i>▶</i> </div> <div class="sound-wave"> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> </div> <div class="card-content"> <div> <h3 class="card-title">Yamaha YAS-875EX Saxophone</h3> <p class="card-description">Professional alto saxophone with exceptional tonal flexibility and response.</p> <ul class="features-list"> <li>Hand-Engraved One-Piece Bell</li> <li>V1 Neck with Optimal Resonance</li> <li>High F# Key and Front F Key</li> </ul> </div> <div class="card-footer"> <span class="price">$3,799</span> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> <!-- Electronic Instruments --> <div class="product-card category-electronic category-all"> <div class="card-image"> <img class="image-layer image-base" src="https://images.unsplash.com/photo-1598653222000-6b7b7a552625?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Nord Stage 3 88"> <img class="image-layer image-overlay" src="https://images.unsplash.com/photo-1569775309692-fd5e62248d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Nord Keyboard Detail"> </div> <div class="sound-preview" data-sound="synthesizer" data-name="Nord Stage 3"> <i>▶</i> </div> <div class="sound-wave"> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> </div> <div class="card-content"> <div> <h3 class="card-title">Nord Stage 3 88 Performance Keyboard</h3> <p class="card-description">Flagship stage piano with versatile sound engine and intuitive interface.</p> <ul class="features-list"> <li>Virtual Analog Synthesis Engine</li> <li>OLED Display for Advanced Navigation</li> <li>Seamless Transitions Between Sounds</li> </ul> </div> <div class="card-footer"> <span class="price">$4,699</span> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> <div class="product-card category-percussion category-all"> <div class="card-image"> <img class="image-layer image-base" src="https://images.unsplash.com/photo-1545167496-c1e5384107ef?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Meinl Byzance Jazz Cymbal Set"> <img class="image-layer image-overlay" src="https://images.unsplash.com/photo-1534202382832-caea4af35da9?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Cymbal Detail"> </div> <div class="card-badge">Limited Edition</div> <div class="sound-preview" data-sound="cymbal" data-name="Meinl Byzance Jazz"> <i>▶</i> </div> <div class="sound-wave"> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> <div class="sound-bar"></div> </div> <div class="card-content"> <div> <h3 class="card-title">Meinl Byzance Jazz Cymbal Set</h3> <p class="card-description">Hand-hammered B20 bronze cymbals with complex, warm tones for jazz styles.</p> <ul class="features-list"> <li>Vintage Dark Character and Complexity</li> <li>14" Hi-Hats, 16"/18" Crashes, 20" Ride</li> <li>Turkish Manufacturing Tradition</li> </ul> </div> <div class="card-footer"> <span class="price">$1,849</span> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> </div> </div> <div class="visualizer-container"> <div class="now-playing"> <span class="instrument-icon">🎵</span> <span id="now-playing-text">Now Playing: Instrument</span> </div> <div class="visualizer" id="audio-visualizer"> <!-- Visualizer bars will be added by JS --> </div> <button class="close-visualizer">×</button> </div> <script> // Audio samples (these would typically be actual audio files) const audioSamples = { 'acoustic-guitar': 'https://cdn.pixabay.com/download/audio/2021/11/25/audio_cb1c56bb0d.mp3?filename=acoustic-guitar-loop-f-91bpm-132687.mp3', 'electric-guitar': 'https://cdn.pixabay.com/download/audio/2022/03/15/audio_270f8ad4bb.mp3?filename=rock-guitar-power-intro-111444.mp3', 'drums': 'https://cdn.pixabay.com/download/audio/2022/05/26/audio_8cbee462b2.mp3?filename=rnb-drum-loop-119bpm-140920.mp3', 'saxophone': 'https://cdn.pixabay.com/download/audio/2022/09/12/audio_79290cff31.mp3?filename=saxophone-melody-with-chords-bgm-147064.mp3', 'synthesizer': 'https://cdn.pixabay.com/download/audio/2022/01/18/audio_d1718dacf0.mp3?filename=deep-in-the-jungle-dancehall-loop-121845.mp3', 'cymbal': 'https://cdn.pixabay.com/download/audio/2022/10/30/audio_adab4ab8c9.mp3?filename=cymbal-hit-timpani-cinematic-sound-170432.mp3' }; // DOM elements const filterButtons = document.querySelectorAll('.filter-btn'); const productCards = document.querySelectorAll('.product-card'); const soundPreviews = document.querySelectorAll('.sound-preview'); const visualizerContainer = document.querySelector('.visualizer-container'); const visualizer = document.getElementById('audio-visualizer'); const nowPlayingText = document.getElementById('now-playing-text'); const closeVisualizerBtn = document.querySelector('.close-visualizer'); // Create visualizer bars for (let i = 0; i < 30; i++) { const bar = document.createElement('div'); bar.className = 'visualizer-bar'; visualizer.appendChild(bar); } // Audio context and current audio let audioContext; let audioSource; let audioAnalyser; let currentAudio = null; // Initialize audio context on first user interaction function initAudio() { if (!audioContext) { audioContext = new (window.AudioContext || window.webkitAudioContext)(); audioAnalyser = audioContext.createAnalyser(); audioAnalyser.fftSize = 64; } } // Filter functionality filterButtons.forEach(button => { button.addEventListener('click', () => { // Remove active class from all buttons filterButtons.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button button.classList.add('active'); // Get the category to show const category = button.dataset.category; // Hide all products first productCards.forEach(card => { card.style.display = 'none'; }); // Show products of the selected category if (category === 'all') { document.querySelectorAll('.category-all').forEach(card => { card.style.display = 'block'; }); } else { document.querySelectorAll(`.category-${category}`).forEach(card => { card.style.display = 'block'; }); } }); }); // Sound preview functionality soundPreviews.forEach(preview => { preview.addEventListener('click', function() { const soundType = this.dataset.sound; const instrumentName = this.dataset.name; initAudio(); // If we're already playing the same audio, stop it if (currentAudio && currentAudio.dataset.sound === soundType) { currentAudio.pause(); currentAudio.currentTime = 0; currentAudio = null; // Reset UI document.querySelectorAll('.product-card').forEach(card => { card.classList.remove('playing'); }); visualizerContainer.classList.remove('active'); return; } // Stop any currently playing audio if (currentAudio) { currentAudio.pause(); currentAudio.currentTime = 0; document.querySelectorAll('.product-card').forEach(card => { card.classList.remove('playing'); }); } // Create and play new audio const audio = new Audio(audioSamples[soundType]); currentAudio = audio; currentAudio.dataset.sound = soundType; // Connect to audio analyser for visualization const source = audioContext.createMediaElementSource(audio); source.connect(audioAnalyser); audioAnalyser.connect(audioContext.destination); // Update UI this.closest('.product-card').classList.add('playing'); visualizerContainer.classList.add('active'); nowPlayingText.textContent = `Now Playing: ${instrumentName}`; // Start visualization visualize(); // Play the audio audio.play(); // When audio ends audio.addEventListener('ended', function() { document.querySelectorAll('.product-card').forEach(card => { card.classList.remove('playing'); }); visualizerContainer.classList.remove('active'); currentAudio = null; }); }); }); // Close visualizer button closeVisualizerBtn.addEventListener('click', function() { if (currentAudio) { currentAudio.pause(); currentAudio.currentTime = 0; currentAudio = null; } document.querySelectorAll('.product-card').forEach(card => { card.classList.remove('playing'); }); visualizerContainer.classList.remove('active'); }); // Audio visualization function function visualize() { if (!audioAnalyser) return; const dataArray = new Uint8Array(audioAnalyser.frequencyBinCount); const visualizerBars = document.querySelectorAll('.visualizer-bar'); function renderFrame() { if (!visualizerContainer.classList.contains('active')) return; audioAnalyser.getByteFrequencyData(dataArray); // Update each bar height based on frequency data for (let i = 0; i < visualizerBars.length; i++) { const value = dataArray[i] || 0; const barHeight = Math.max(4, value / 4); // Scale down values to reasonable heights visualizerBars[i].style.height = `${barHeight}px`; } requestAnimationFrame(renderFrame); } renderFrame(); } // Add to cart functionality (just visual effect for demo) document.querySelectorAll('.add-to-cart').forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); this.innerHTML = '✓ Added'; this.classList.add('pulse-animation'); setTimeout(() => { this.innerHTML = 'Add to Cart'; this.classList.remove('pulse-animation'); }, 2000); }); }); </script> </body> </html>
