Artefacto Furniture Collection Card | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Artefacto | Premium Furniture Collection</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;500&display=swap" rel="stylesheet">
    
</head>
<body>
    <div class="container">
        
        <header class="main-header">
            <h1 class="brand">Artefacto</h1>
            <p class="tagline">Curated pieces where craftsmanship meets contemporary design</p>
        </header>
        
        
        <div class="cards-grid">
            
            <div class="card">
                <div class="card-image-container">
                    <img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Haven Leather Sofa" class="card-image">
                    <div class="card-badge">Limited Edition</div>
                </div>
                <div class="card-content">
                    <div class="card-header">
                        <div>
                            <h2 class="product-name">Haven Sofa</h2>
                            <div class="product-category">Living Room</div>
                        </div>
                    </div>
                    <p class="product-description">An embodiment of luxury and comfort, the Haven Sofa features full-grain Italian leather, hand-tufted detailing, and a solid oak frame. Designed for both aesthetics and enduring quality.</p>
                    
                    <div class="product-features">
                        <span class="feature-tag">Italian Leather</span>
                        <span class="feature-tag">Solid Oak Frame</span>
                        <span class="feature-tag">Hand-Tufted</span>
                    </div>
                    
                    <div class="pricing-section">
                        <div class="price-container">
                            <span class="original-price">$2,499</span>
                            <span class="discounted-price">$1,999</span>
                            <span class="savings-badge">Save $500</span>
                        </div>
                        <a href="#" class="cta-button">Add to Collection <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
            
            
            <div class="card">
                <div class="card-image-container">
                    <img src="https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Arbor Dining Table" class="card-image">
                    <div class="card-badge">Spring Sale</div>
                </div>
                <div class="card-content">
                    <div class="card-header">
                        <div>
                            <h2 class="product-name">Arbor Table</h2>
                            <div class="product-category">Dining</div>
                        </div>
                    </div>
                    <p class="product-description">Crafted from sustainably sourced solid walnut with organic edge detailing. This table seats eight comfortably and features a hand-rubbed oil finish that enhances the natural wood grain.</p>
                    
                    <div class="product-features">
                        <span class="feature-tag">Solid Walnut</span>
                        <span class="feature-tag">Organic Edge</span>
                        <span class="feature-tag">Sustainably Sourced</span>
                    </div>
                    
                    <div class="pricing-section">
                        <div class="price-container">
                            <span class="original-price">$1,899</span>
                            <span class="discounted-price">$1,524</span>
                            <span class="savings-badge">20% Off</span>
                        </div>
                        <a href="#" class="cta-button">Add to Collection <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
            
            
            <div class="card">
                <div class="card-image-container">
                    <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Luna Platform Bed" class="card-image">
                    <div class="card-badge">Exclusive</div>
                </div>
                <div class="card-content">
                    <div class="card-header">
                        <div>
                            <h2 class="product-name">Luna Bed</h2>
                            <div class="product-category">Bedroom</div>
                        </div>
                    </div>
                    <p class="product-description">Japanese-inspired platform bed in matte black oak. The integrated slat system eliminates the need for a box spring while providing optimal support. A serene, low-profile design.</p>
                    
                    <div class="product-features">
                        <span class="feature-tag">Matte Black Oak</span>
                        <span class="feature-tag">Integrated Slats</span>
                        <span class="feature-tag">Low-Profile</span>
                    </div>
                    
                    <div class="pricing-section">
                        <div class="price-container">
                            <span class="original-price">$1,650</span>
                            <span class="discounted-price">$1,320</span>
                            <span class="savings-badge">Save $330</span>
                        </div>
                        <a href="#" class="cta-button">Add to Collection <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="decorative-line"></div>
        
        
        <footer class="page-footer">
            <p class="footer-text">
                Each piece is meticulously crafted by master artisans and includes our 
                <span class="footer-highlight">10-year craftsmanship warranty</span>. 
                Complimentary white-glove delivery and setup within 100 miles. 
                <span class="footer-highlight">Offer valid until April 30, 2024.</span>
            </p>
        </footer>
    </div>
    
</body>
</html>

CSS

:root {
            --color-cream: #F8F5F0;
            --color-charcoal: #1A1A1A;
            --color-taupe: #8B8070;
            --color-sand: #D7C9B2;
            --color-oatmeal: #E8E2D9;
            --color-stone: #A8A39D;
            --color-light: #FFFFFF;
            --border-radius: 16px;
            --transition-smooth: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
            --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.05);
            --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.08);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: var(--color-cream);
            color: var(--color-charcoal);
            font-family: 'Inter', sans-serif;
            font-weight: 300;
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        /* Header */
        .main-header {
            padding: 40px 0 60px;
            text-align: center;
            position: relative;
        }
        
        .brand {
            font-family: 'Playfair Display', serif;
            font-size: 2.8rem;
            font-weight: 500;
            letter-spacing: -0.5px;
            margin-bottom: 12px;
            color: var(--color-charcoal);
            position: relative;
            display: inline-block;
        }
        
        .brand::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 1px;
            background-color: var(--color-taupe);
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .tagline {
            font-size: 1.1rem;
            color: var(--color-stone);
            font-weight: 300;
            letter-spacing: 0.5px;
            margin-top: 16px;
        }
        
        .collection-badge {
            display: inline-block;
            background-color: var(--color-sand);
            color: var(--color-charcoal);
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 1px;
            margin-top: 20px;
            text-transform: uppercase;
        }
        
        /* Cards Grid */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
            gap: 40px;
            margin-bottom: 80px;
        }
        
        /* Card */
        .card {
            background-color: var(--color-light);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-subtle);
            transition: var(--transition-smooth);
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .card:hover {
            transform: translateY(-12px);
            box-shadow: var(--shadow-elevated);
        }
        
        .card-image-container {
            height: 280px;
            overflow: hidden;
            position: relative;
        }
        
        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-smooth);
        }
        
        .card:hover .card-image {
            transform: scale(1.05);
        }
        
        .card-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(8px);
            color: var(--color-charcoal);
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            z-index: 2;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .card-content {
            padding: 28px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }
        
        .product-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 1.3;
            color: var(--color-charcoal);
        }
        
        .product-category {
            font-size: 0.85rem;
            color: var(--color-taupe);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 4px;
        }
        
        .product-description {
            color: var(--color-stone);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 24px;
            flex-grow: 1;
        }
        
        .product-features {
            display: flex;
            gap: 12px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }
        
        .feature-tag {
            background-color: var(--color-oatmeal);
            color: var(--color-charcoal);
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 400;
        }
        
        .pricing-section {
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            padding-top: 24px;
            margin-top: auto;
        }
        
        .price-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .original-price {
            color: var(--color-stone);
            text-decoration: line-through;
            font-size: 1rem;
            margin-right: 12px;
        }
        
        .discounted-price {
            color: var(--color-charcoal);
            font-size: 1.8rem;
            font-weight: 500;
            margin-right: 16px;
        }
        
        .savings-badge {
            background-color: rgba(139, 128, 112, 0.1);
            color: var(--color-taupe);
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .cta-button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 16px;
            background-color: var(--color-charcoal);
            color: var(--color-light);
            text-decoration: none;
            border-radius: 10px;
            font-weight: 500;
            letter-spacing: 0.5px;
            transition: var(--transition-smooth);
            border: 1px solid var(--color-charcoal);
        }
        
        .cta-button:hover {
            background-color: transparent;
            color: var(--color-charcoal);
        }
        
        .cta-button i {
            transition: transform 0.3s ease;
        }
        
        .cta-button:hover i {
            transform: translateX(4px);
        }
        
        /* Footer */
        .page-footer {
            text-align: center;
            padding: 40px 0 60px;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
        }
        
        .footer-text {
            color: var(--color-stone);
            font-size: 0.9rem;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.7;
        }
        
        .footer-highlight {
            color: var(--color-taupe);
            font-weight: 500;
        }
        
        /* Decorative elements */
        .decorative-line {
            width: 120px;
            height: 1px;
            background-color: var(--color-oatmeal);
            margin: 40px auto;
        }
        
        /* Responsive */
        @media (max-width: 1200px) {
            .cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .cards-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            
            .brand {
                font-size: 2.2rem;
            }
            
            .card-image-container {
                height: 240px;
            }
        }
        
        /* Animation for cards */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .card {
            animation: fadeInUp 0.6s ease forwards;
            opacity: 0;
        }
        
        .card:nth-child(1) { animation-delay: 0.1s; }
        .card:nth-child(2) { animation-delay: 0.2s; }
        .card:nth-child(3) { animation-delay: 0.3s; }

JavaScript

// Add subtle interactive effects
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.card');
            
            // Add mouse move parallax effect to cards
            cards.forEach(card => {
                card.addEventListener('mousemove', function(e) {
                    const cardRect = this.getBoundingClientRect();
                    const x = e.clientX - cardRect.left;
                    const y = e.clientY - cardRect.top;
                    
                    const centerX = cardRect.width / 2;
                    const centerY = cardRect.height / 2;
                    
                    const rotateY = (x - centerX) / 25;
                    const rotateX = (centerY - y) / 25;
                    
                    this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-12px)`;
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(-12px)';
                });
            });
            
            // Add click animation to CTA buttons
            const ctaButtons = document.querySelectorAll('.cta-button');
            ctaButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // Create ripple effect
                    const ripple = document.createElement('span');
                    const rect = this.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.cssText = `
                        position: absolute;
                        border-radius: 50%;
                        background: rgba(255, 255, 255, 0.5);
                        transform: scale(0);
                        animation: ripple-animation 0.6s linear;
                        width: ${size}px;
                        height: ${size}px;
                        top: ${y}px;
                        left: ${x}px;
                        pointer-events: none;
                    `;
                    
                    this.appendChild(ripple);
                    
                    // Remove ripple after animation
                    setTimeout(() => {
                        ripple.remove();
                    }, 600);
                    
                    // Simulate adding to cart
                    const card = this.closest('.card');
                    const productName = card.querySelector('.product-name').textContent;
                    console.log(`Added "${productName}" to cart`);
                    
                    // Show feedback
                    const originalText = this.innerHTML;
                    this.innerHTML = '<i class="fas fa-check"></i> Added to Cart';
                    this.style.backgroundColor = '#8B8070';
                    this.style.borderColor = '#8B8070';
                    
                    setTimeout(() => {
                        this.innerHTML = originalText;
                        this.style.backgroundColor = '';
                        this.style.borderColor = '';
                    }, 2000);
                });
            });
            
            // Add CSS for ripple animation
            const style = document.createElement('style');
            style.textContent = `
                @keyframes ripple-animation {
                    to {
                        transform: scale(4);
                        opacity: 0;
                    }
                }
            `;
            document.head.appendChild(style);
        });

Artefacto Furniture Collection Card Preview

Download Options