NOVA Chair Collection Card Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NOVA | Premium Chair Collection</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap" rel="stylesheet">
    
</head>
<body>
    <div class="container">
      
        
        
        <section class="hero-section">
            <h1 class="hero-title">Curated Chair Collection</h1>
            <p class="hero-subtitle">Discover furniture that combines timeless design with exceptional comfort. Each piece is crafted with precision and attention to detail.</p>
        </section>
        
        
        <div class="chairs-grid">
            
            <div class="chair-card">
                <div class="card-badge best">BESTSELLER</div>
                <div class="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=1170&q=80" alt="Ergonomic Office Chair">
                    <div class="image-overlay"></div>
                </div>
                <div class="chair-info">
                    <div class="chair-header">
                        <div>
                            <h2 class="chair-name">AeroForm Pro</h2>
                            <span class="usage-type">Office & Productivity</span>
                        </div>
                        <button class="favorite-btn">
                            <i class="far fa-heart"></i>
                        </button>
                    </div>
                    
                    <p class="material">
                        <i class="fas fa-leaf"></i>
                        Premium breathable mesh back, aircraft-grade aluminum frame, memory foam seat with lumbar support
                    </p>
                    
                    <div class="features">
                        <div class="feature">
                            <i class="fas fa-ruler-combined"></i>
                            <span>Adjustable</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-weight"></i>
                            <span>300 lbs capacity</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-clock"></i>
                            <span>5-year warranty</span>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="price">$389<span>.99</span></div>
                        <button class="cta-button">
                            <i class="fas fa-shopping-cart"></i>
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>
            
            
            <div class="chair-card">
                <div class="card-badge new">NEW ARRIVAL</div>
                <div class="image-container">
                    <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Scandinavian Lounge Chair">
                    <div class="image-overlay"></div>
                </div>
                <div class="chair-info">
                    <div class="chair-header">
                        <div>
                            <h2 class="chair-name">Nordic Comfort</h2>
                            <span class="usage-type">Living Room & Lounge</span>
                        </div>
                        <button class="favorite-btn">
                            <i class="far fa-heart"></i>
                        </button>
                    </div>
                    
                    <p class="material">
                        <i class="fas fa-leaf"></i>
                        Solid oak wood frame, premium wool fabric upholstery, natural cotton cushion with feather filling
                    </p>
                    
                    <div class="features">
                        <div class="feature">
                            <i class="fas fa-palette"></i>
                            <span>3 color options</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-couch"></i>
                            <span>Deep seating</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-tools"></i>
                            <span>Assembly required</span>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="price">$459<span>.99</span></div>
                        <button class="cta-button">
                            <i class="fas fa-shopping-cart"></i>
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>
            
            
            <div class="chair-card">
                <div class="image-container">
                    <img src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Modern Dining Chair">
                    <div class="image-overlay"></div>
                </div>
                <div class="chair-info">
                    <div class="chair-header">
                        <div>
                            <h2 class="chair-name">Minimalist Dine</h2>
                            <span class="usage-type">Dining & Kitchen</span>
                        </div>
                        <button class="favorite-btn active">
                            <i class="fas fa-heart"></i>
                        </button>
                    </div>
                    
                    <p class="material">
                        <i class="fas fa-leaf"></i>
                        Bent plywood shell, powder-coated steel legs, eco-friendly polyurethane coating, removable cushion
                    </p>
                    
                    <div class="features">
                        <div class="feature">
                            <i class="fas fa-layer-group"></i>
                            <span>Stackable</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-broom"></i>
                            <span>Easy to clean</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-boxes"></i>
                            <span>Set of 4 available</span>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="price">$179<span>.99</span> <span style="font-size: 14px; font-weight: normal;">each</span></div>
                        <button class="cta-button">
                            <i class="fas fa-shopping-cart"></i>
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
 
    
</body>
</html>

CSS

:root {
            --primary: #1a1f2c;
            --secondary: #2d3748;
            --accent: #d4af73;
            --accent-light: #e8d5b5;
            --light: #f8f9fa;
            --light-gray: #edf2f7;
            --medium-gray: #a0aec0;
            --card-bg: #ffffff;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
            --border-radius: 16px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #f8f9fa 100%);
            color: var(--primary);
            line-height: 1.6;
            min-height: 100vh;
            padding: 0;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 30px;
        }
        
        
        /* Hero Section */
        .hero-section {
            padding: 80px 0 60px;
            text-align: center;
        }
        
        .hero-title {
            font-family: 'Playfair Display', serif;
            font-size: 52px;
            font-weight: 600;
            line-height: 1.1;
            margin-bottom: 20px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero-subtitle {
            font-size: 18px;
            color: var(--medium-gray);
            max-width: 600px;
            margin: 0 auto 40px;
        }
        
        /* Filter Tabs */
        .filter-tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 50px;
        }
        
        .filter-tab {
            background: white;
            border: 1px solid var(--light-gray);
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 500;
            color: var(--secondary);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .filter-tab:hover {
            border-color: var(--accent);
            color: var(--accent);
        }
        
        .filter-tab.active {
            background-color: var(--accent);
            color: white;
            border-color: var(--accent);
        }
        
        /* Chairs Grid */
        .chairs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 40px;
            margin-bottom: 100px;
        }
        
        /* Chair Card */
        .chair-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .chair-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
        }
        
        .card-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: var(--accent);
            color: white;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            z-index: 2;
            letter-spacing: 0.5px;
        }
        
        .card-badge.new {
            background-color: #2ecc71;
        }
        
        .card-badge.best {
            background-color: #e74c3c;
        }
        
        .image-container {
            height: 280px;
            overflow: hidden;
            position: relative;
        }
        
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .chair-card:hover .image-container img {
            transform: scale(1.08);
        }
        
        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.2) 100%);
            z-index: 1;
        }
        
        .chair-info {
            padding: 30px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        
        .chair-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .chair-name {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 5px;
        }
        
        .favorite-btn {
            background: none;
            border: none;
            color: var(--medium-gray);
            font-size: 20px;
            cursor: pointer;
            transition: var(--transition);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .favorite-btn:hover {
            color: #e74c3c;
            background-color: rgba(231, 76, 60, 0.05);
        }
        
        .favorite-btn.active {
            color: #e74c3c;
        }
        
        .usage-type {
            display: inline-block;
            background-color: var(--light-gray);
            color: var(--secondary);
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 20px;
            width: fit-content;
        }
        
        .material {
            color: var(--medium-gray);
            margin-bottom: 20px;
            font-size: 15px;
            line-height: 1.6;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        
        .material i {
            color: var(--accent);
            margin-top: 3px;
            font-size: 16px;
        }
        
        .features {
            display: flex;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .feature {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--secondary);
            font-size: 14px;
            font-weight: 500;
        }
        
        .feature i {
            color: var(--accent);
            font-size: 16px;
        }
        
        .card-footer {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 25px;
            border-top: 1px solid var(--light-gray);
        }
        
        .price {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .price span {
            font-size: 16px;
            font-weight: 400;
            color: var(--medium-gray);
        }
        
        .cta-button {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 14px 28px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            letter-spacing: 0.5px;
        }
        
        .cta-button:hover {
            background-color: var(--accent);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(212, 175, 115, 0.3);
        }
        
        
        /* Responsive */
        @media (max-width: 1024px) {
            .chairs-grid {
                grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
                gap: 30px;
            }
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 0 20px;
            }
            
            .site-header {
                flex-direction: column;
                gap: 20px;
                padding: 20px 0;
            }
            
            .hero-title {
                font-size: 40px;
            }
            
            .chairs-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin: 0 auto 60px;
            }
            
            .filter-tabs {
                flex-wrap: wrap;
            }
        }
        
        @media (max-width: 480px) {
            .hero-title {
                font-size: 32px;
            }
            
            .chair-card {
                max-width: 100%;
            }
            
            .card-footer {
                flex-direction: column;
                gap: 20px;
                align-items: flex-start;
            }
            
            .cta-button {
                width: 100%;
            }
        }
        
        /* Animation for cards */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .chair-card {
            animation: fadeInUp 0.5s ease-out forwards;
            opacity: 0;
        }
        
        .chair-card:nth-child(1) { animation-delay: 0.1s; }
        .chair-card:nth-child(2) { animation-delay: 0.2s; }
        .chair-card:nth-child(3) { animation-delay: 0.3s; }

JavaScript

// Favorite button toggle
        document.querySelectorAll('.favorite-btn').forEach(button => {
            button.addEventListener('click', function() {
                const icon = this.querySelector('i');
                this.classList.toggle('active');
                
                if (this.classList.contains('active')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.style.color = '#e74c3c';
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.style.color = '';
                }
            });
        });
        
        // Add to cart functionality
        document.querySelectorAll('.cta-button').forEach(button => {
            button.addEventListener('click', function() {
                const card = this.closest('.chair-card');
                const chairName = card.querySelector('.chair-name').textContent;
                const price = card.querySelector('.price').textContent;
                
                // Store original button text
                const originalHTML = this.innerHTML;
                
                // Show added feedback
                this.innerHTML = '<i class="fas fa-check"></i> Added to Cart';
                this.style.backgroundColor = '#2ecc71';
                
                // Reset button after 2 seconds
                setTimeout(() => {
                    this.innerHTML = originalHTML;
                    this.style.backgroundColor = '';
                }, 2000);
                
                // In a real app, you'd add to cart here
                console.log(`Added "${chairName}" to cart at ${price}`);
            });
        });
        
        // Filter tabs functionality
        document.querySelectorAll('.filter-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // Remove active class from all tabs
                document.querySelectorAll('.filter-tab').forEach(t => {
                    t.classList.remove('active');
                });
                
                // Add active class to clicked tab
                this.classList.add('active');
                
                // In a real app, you'd filter the products here
                console.log(`Filtering by: ${this.textContent}`);
            });
        });
        
        // Smooth animations on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);
        
        // Observe all chair cards
        document.querySelectorAll('.chair-card').forEach(card => {
            observer.observe(card);
        });

NOVA Chair Collection Card Template Preview

Download Options