Premium Apartments 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>LUXE Living | Premium Apartments</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">
        <header class="header">
            <div class="badge">PREMIUM LIVING SPACES</div>
            <h1>Discover Your <span>Perfect</span> Home</h1>
            <p>Experience luxury living with thoughtfully designed apartments that blend comfort, style, and functionality.</p>
        </header>

<div class="cards-container">
            
            <div class="card card-1bhk">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-home"></i>
                    </div>
                </div>
                
                <div class="card-content">
                    <h2 class="card-title">1BHK Studio</h2>
                    <p class="card-subtitle">Compact & efficient living for individuals and couples</p>
                    
                    <div class="features">
                        <div class="feature">
                            <div class="feature-icon">
                                <i class="fas fa-ruler-combined"></i>
                            </div>
                            <div class="feature-text">
                                <div class="feature-title">450 - 550 sq. ft.</div>
                                <div class="feature-desc">Smartly designed to maximize space</div>
                            </div>
                        </div>
                        
                        <div class="feature">
                            <div class="feature-icon">
                                <i class="fas fa-bed"></i>
                            </div>
                            <div class="feature-text">
                                <div class="feature-title">1 Bed, 1 Bath</div>
                                <div class="feature-desc">Master bedroom with attached bathroom</div>
                            </div>
                        </div>
                        
                        <div class="feature">
                            <div class="feature-icon">
                                <i class="fas fa-utensils"></i>
                            </div>
                            <div class="feature-text">
                                <div class="feature-title">Modular Kitchen</div>
                                <div class="feature-desc">Fully equipped with modern appliances</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="pricing">
                        <div class="price">
                            <span class="price-currency">₹</span>
                            <span class="price-amount">25.5 L</span>
                        </div>
                        <div class="price-note">*Starting price. Flexible payment plans available.</div>
                    </div>
                    
                    <button class="cta-button">
                        Schedule a Virtual Tour <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
                
                <div class="card-footer">
                    <div class="availability available">
                        <div class="availability-dot"></div>
                        <span>12 Units Available</span>
                    </div>
                    <div class="view-details">
                        <i class="far fa-clock"></i> Ready to move in
                    </div>
                </div>
            </div>
            
            
            <div class="card card-2bhk">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-building"></i>
                    </div>
                    <div class="popular-badge">MOST POPULAR</div>
                </div>
                
                <div class="card-content">
                    <h2 class="card-title">2BHK Family</h2>
                    <p class="card-subtitle">Spacious living for growing families</p>
                    
                    <div class="features">
                        <div class="feature">
                            <div class="feature-icon">
                                <i class="fas fa-ruler-combined"></i>
                            </div>
                            <div class="feature-text">
                                <div class="feature-title">750 - 900 sq. ft.</div>
                                <div class="feature-desc">Ample space with a separate living area</div>
                            </div>
                        </div>
                        
                        <div class="feature">
                            <div class="feature-icon">
                                <i class="fas fa-bed"></i>
                            </div>
                            <div class="feature-text">
                                <div class="feature-title">2 Beds, 2 Baths</div>
                                <div class="feature-desc">Both bedrooms with attached bathrooms</div>
                            </div>
                        </div>
                        
                        <div class="feature">
                            <div class="feature-icon">
                                <i class="fas fa-car"></i>
                            </div>
                            <div class="feature-text">
                                <div class="feature-title">Covered Parking</div>
                                <div class="feature-desc">One reserved parking space included</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="pricing">
                        <div class="price">
                            <span class="price-currency">₹</span>
                            <span class="price-amount">46.8 L</span>
                        </div>
                        <div class="price-note">*Starting price. Special financing options available.</div>
                    </div>
                    
                    <button class="cta-button">
                        Book a Site Visit <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
                
                <div class="card-footer">
                    <div class="availability limited">
                        <div class="availability-dot"></div>
                        <span>Only 6 Units Left</span>
                    </div>
                    <div class="view-details">
                        <i class="far fa-clock"></i> Ready in 6 months
                    </div>
                </div>
            </div>
            
            
            <div class="card card-3bhk">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-city"></i>
                    </div>
                </div>
                
                <div class="card-content">
                    <h2 class="card-title">3BHK Luxury</h2>
                    <p class="card-subtitle">Premium living with exclusive amenities</p>
                    
                    <div class="features">
                        <div class="feature">
                            <div class="feature-icon">
                                <i class="fas fa-ruler-combined"></i>
                            </div>
                            <div class="feature-text">
                                <div class="feature-title">1100 - 1350 sq. ft.</div>
                                <div class="feature-desc">Expansive layouts with balcony views</div>
                            </div>
                        </div>
                        
                        <div class="feature">
                            <div class="feature-icon">
                                <i class="fas fa-bed"></i>
                            </div>
                            <div class="feature-text">
                                <div class="feature-title">3 Beds, 3 Baths</div>
                                <div class="feature-desc">Master suite with walk-in closet</div>
                            </div>
                        </div>
                        
                        <div class="feature">
                            <div class="feature-icon">
                                <i class="fas fa-swimming-pool"></i>
                            </div>
                            <div class="feature-text">
                                <div class="feature-title">Premium Amenities</div>
                                <div class="feature-desc">Access to clubhouse, pool & gym</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="pricing">
                        <div class="price">
                            <span class="price-currency">₹</span>
                            <span class="price-amount">68.9 L</span>
                        </div>
                        <div class="price-note">*Starting price. Customization options available.</div>
                    </div>
                    
                    <button class="cta-button">
                        Request Custom Quote <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
                
                <div class="card-footer">
                    <div class="availability available">
                        <div class="availability-dot"></div>
                        <span>8 Units Available</span>
                    </div>
                    <div class="view-details">
                        <i class="far fa-clock"></i> Ready in 8 months
                    </div>
                </div>
            </div>
        </div>
        
    
    </div>

</body>
</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

:root {
            --primary-blue: #2563eb;
            --primary-blue-light: #3b82f6;
            --primary-green: #10b981;
            --primary-gold: #f59e0b;
            --neutral-50: #fafafa;
            --neutral-100: #f5f5f5;
            --neutral-200: #e5e5e5;
            --neutral-700: #404040;
            --neutral-800: #262626;
            --neutral-900: #171717;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
        }

body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            color: var(--neutral-800);
            line-height: 1.6;
            min-height: 100vh;
            padding: 2rem 1rem;
            position: relative;
            overflow-x: hidden;
        }

body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
            z-index: -1;
        }

.container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1rem;
        }

/* Header Styles */
        .header {
            text-align: center;
            margin-bottom: 3.5rem;
            position: relative;
        }

.header h1 {
            font-family: 'Playfair Display', serif;
            font-size: 2.8rem;
            font-weight: 600;
            color: var(--neutral-900);
            margin-bottom: 0.75rem;
            letter-spacing: -0.5px;
        }

.header h1 span {
            color: var(--primary-blue);
            position: relative;
        }

.header h1 span::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 0;
            width: 100%;
            height: 6px;
            background-color: rgba(37, 99, 235, 0.15);
            z-index: -1;
        }

.header p {
            font-size: 1.125rem;
            color: var(--neutral-700);
            max-width: 600px;
            margin: 0 auto;
            font-weight: 400;
        }

/* Badge Styles */
        .badge {
            display: inline-block;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-light));
            color: white;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            letter-spacing: 0.5px;
            margin-bottom: 1.5rem;
        }

/* Cards Container */
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

/* Card Styles */
        .card {
            background: white;
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
            position: relative;
            border: 1px solid var(--neutral-200);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

.card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-xl);
            border-color: rgba(37, 99, 235, 0.2);
        }

/* Card Header with Icon */
        .card-header {
            padding: 2rem 2rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

.card-icon {
            width: 64px;
            height: 64px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            box-shadow: var(--shadow-md);
        }

.card-1bhk .card-icon {
            background: linear-gradient(135deg, #e0f2fe, #bae6fd);
            color: #0369a1;
        }

.card-2bhk .card-icon {
            background: linear-gradient(135deg, #dcfce7, #bbf7d0);
            color: #15803d;
        }

.card-3bhk .card-icon {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            color: #b45309;
        }

.popular-badge {
            background: linear-gradient(135deg, var(--primary-gold), #fbbf24);
            color: white;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            letter-spacing: 0.5px;
            box-shadow: var(--shadow-sm);
        }

/* Card Content */
        .card-content {
            padding: 0 2rem;
            flex-grow: 1;
        }

.card-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.75rem;
            font-weight: 600;
            color: var(--neutral-900);
            margin-bottom: 0.5rem;
        }

.card-subtitle {
            color: var(--neutral-700);
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
            font-weight: 400;
        }

/* Features */
        .features {
            margin: 1.5rem 0 2rem;
        }

.feature {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            padding: 0.5rem 0;
        }

.feature-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            font-size: 0.9rem;
            color: var(--primary-blue);
            background-color: rgba(37, 99, 235, 0.08);
        }

.feature-text {
            flex: 1;
        }

.feature-title {
            font-weight: 600;
            color: var(--neutral-800);
            font-size: 0.95rem;
        }

.feature-desc {
            font-size: 0.85rem;
            color: var(--neutral-700);
            margin-top: 0.15rem;
        }

/* Pricing Section */
        .pricing {
            background: var(--neutral-50);
            border-radius: var(--radius-lg);
            padding: 1.25rem;
            margin: 2rem 0;
            border: 1px solid var(--neutral-200);
        }

.price {
            display: flex;
            align-items: baseline;
            margin-bottom: 0.25rem;
        }

.price-amount {
            font-size: 2rem;
            font-weight: 700;
            color: var(--neutral-900);
        }

.price-currency {
            font-size: 1.125rem;
            color: var(--neutral-700);
            margin-right: 0.25rem;
        }

.price-note {
            font-size: 0.85rem;
            color: var(--neutral-700);
            margin-top: 0.25rem;
        }

/* CTA Button */
        .cta-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-light));
            color: white;
            border: none;
            border-radius: var(--radius-md);
            padding: 1rem 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1rem;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        }

.cta-button:hover {
            background: linear-gradient(135deg, #1d4ed8, var(--primary-blue));
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
        }

.cta-button i {
            margin-left: 0.5rem;
            transition: transform 0.3s ease;
        }

.cta-button:hover i {
            transform: translateX(4px);
        }

/* Card Footer */
        .card-footer {
            padding: 1.5rem 2rem;
            border-top: 1px solid var(--neutral-200);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: var(--neutral-700);
            background: var(--neutral-50);
        }

.availability {
            display: flex;
            align-items: center;
        }

.availability-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 0.5rem;
        }

.available .availability-dot {
            background-color: var(--primary-green);
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
        }

.limited .availability-dot {
            background-color: var(--primary-gold);
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
        }

/* Responsive Design */
        @media (max-width: 1100px) {
            .cards-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

@media (max-width: 768px) {
            body {
                padding: 1.5rem 1rem;
            }
            
            .header h1 {
                font-size: 2.25rem;
            }
            
            .cards-container {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin: 0 auto 3rem;
            }
            
            .card {
                max-width: 100%;
            }
        }

@media (max-width: 480px) {
            .header h1 {
                font-size: 1.9rem;
            }
            
            .card-header,
            .card-content {
                padding: 1.5rem;
            }
            
            .card-footer {
                padding: 1.25rem 1.5rem;
            }
        }

/* Animation for card entrance */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.card {
            animation: fadeInUp 0.6s ease-out forwards;
            opacity: 0;
        }

.card-1bhk { animation-delay: 0.1s; }
        .card-2bhk { animation-delay: 0.2s; }
        .card-3bhk { animation-delay: 0.3s; }

JavaScript

// Enhanced interactivity
        document.addEventListener('DOMContentLoaded', function() {
            // Button click handlers
            const buttons = document.querySelectorAll('.cta-button');
            
            buttons.forEach(button => {
                button.addEventListener('click', function() {
                    const card = this.closest('.card');
                    const apartmentType = card.querySelector('.card-title').textContent;
                    
                    // Create a custom modal for demo purposes
                    const modal = document.createElement('div');
                    modal.style.cssText = `
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.7);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 1000;
                        opacity: 0;
                        transition: opacity 0.3s ease;
                    `;
                    
                    modal.innerHTML = `
                        <div style="background: white; border-radius: 16px; padding: 2rem; max-width: 500px; width: 90%; transform: translateY(20px); transition: transform 0.3s ease;">
                            <h2 style="margin-bottom: 1rem; color: #171717;">Thank You!</h2>
                            <p style="margin-bottom: 1.5rem;">Your interest in our <strong>${apartmentType}</strong> apartment has been noted. Our luxury concierge will contact you within 24 hours to schedule a private viewing.</p>
                            <button id="closeModal" style="background: #2563eb; color: white; border: none; border-radius: 8px; padding: 0.75rem 1.5rem; font-weight: 600; cursor: pointer;">Close</button>
                        </div>
                    `;
                    
                    document.body.appendChild(modal);
                    
                    // Fade in modal
                    setTimeout(() => {
                        modal.style.opacity = '1';
                        modal.querySelector('div').style.transform = 'translateY(0)';
                    }, 10);
                    
                    // Close modal handler
                    modal.addEventListener('click', function(e) {
                        if (e.target.id === 'closeModal' || e.target === modal) {
                            modal.style.opacity = '0';
                            modal.querySelector('div').style.transform = 'translateY(20px)';
                            setTimeout(() => {
                                document.body.removeChild(modal);
                            }, 300);
                        }
                    });
                });
            });
            
            // Add hover effect for feature items
            const features = document.querySelectorAll('.feature');
            
            features.forEach(feature => {
                feature.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateX(5px)';
                    this.style.transition = 'transform 0.2s ease';
                });
                
                feature.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateX(0)';
                });
            });
            
            // Parallax effect on scroll
            window.addEventListener('scroll', function() {
                const scrolled = window.pageYOffset;
                const cards = document.querySelectorAll('.card');
                
                cards.forEach(card => {
                    const speed = 0.5;
                    const cardOffset = scrolled * speed;
                    card.style.transform = `translateY(${Math.min(0, -10 - cardOffset/20)}px)`;
                });
            });
        });

Premium Apartments Card Template Preview

Download Options