🎨 Project: Card Design

Building Modern Card Components

Card Design Project

Create beautiful, reusable card components using modern CSS. This project combines layouts, animations, and styling techniques you've learned.

💻 Basic Card Structure

/* HTML Structure */
<div class="card">
    <img class="card__image" src="product.jpg" alt="Product">
    <div class="card__content">
        <span class="card__tag">Featured</span>
        <h3 class="card__title">Product Name</h3>
        <p class="card__description">A brief description of the product</p>
        <div class="card__meta">
            <span class="card__price">$29.99</span>
            <span class="card__rating">⭐ 4.5</span>
        </div>
    </div>
    <div class="card__actions">
        <button class="btn btn--primary">Add to Cart</button>
        <button class="btn btn--outline">Details</button>
    </div>
</div>

/* Base Card Styles */
.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

.card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card:hover .card__image {
    transform: scale(1.05);
}

.card__content {
    padding: 1.5rem;
    flex: 1;
}

.card__tag {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #1a1a1a;
}

.card__description {
    color: #666;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.card__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #667eea;
}

.card__rating {
    color: #ffa500;
    font-weight: 600;
}

.card__actions {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #eee;
}

/* Button Styles */
.btn {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn--primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn--primary:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn--outline {
    background: transparent;
    border: 2px solid #667eea;
    color: #667eea;
}

.btn--outline:hover {
    background: #667eea;
    color: white;
}

🎭 Card Variations

Horizontal Card

.card--horizontal {
    flex-direction: row;
}

.card--horizontal .card__image {
    width: 250px;
    height: auto;
    min-height: 100%;
}

.card--horizontal .card__content {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .card--horizontal {
        flex-direction: column;
    }
    
    .card--horizontal .card__image {
        width: 100%;
        height: 200px;
    }
}

Minimal Card

.card--minimal {
    box-shadow: none;
    border: 1px solid #eee;
    background: #fafafa;
}

.card--minimal:hover {
    border-color: #667eea;
    background: white;
}

Elevated Card

.card--elevated {
    box-shadow: 
        0 1px 3px rgba(0,0,0,0.06),
        0 2px 6px rgba(0,0,0,0.06),
        0 3px 8px rgba(0,0,0,0.09);
}

.card--elevated:hover {
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.08),
        0 8px 24px rgba(0,0,0,0.08),
        0 16px 32px rgba(0,0,0,0.08);
}

✨ Interactive Effects

Flip Card

<div class="card-flip">
    <div class="card-flip__inner">
        <div class="card-flip__front">
            <img src="front.jpg" alt="Front">
            <h3>Card Title</h3>
        </div>
        <div class="card-flip__back">
            <h3>More Details</h3>
            <p>Additional information here</p>
            <button>Learn More</button>
        </div>
    </div>
</div>

.card-flip {
    perspective: 1000px;
    height: 400px;
}

.card-flip__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card-flip:hover .card-flip__inner {
    transform: rotateY(180deg);
}

.card-flip__front,
.card-flip__back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.card-flip__front {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.card-flip__back {
    background: white;
    transform: rotateY(180deg);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

Reveal Effect

.card--reveal {
    position: relative;
    overflow: hidden;
}

.card--reveal .card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 2rem 1.5rem;
    transform: translateY(calc(100% - 60px));
    transition: transform 0.3s ease;
}

.card--reveal:hover .card__overlay {
    transform: translateY(0);
}

.card--reveal .card__overlay-title {
    color: white;
    margin: 0 0 0.5rem;
}

.card--reveal .card__overlay-text {
    color: rgba(255,255,255,0.9);
    margin: 0;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
}

.card--reveal:hover .card__overlay-text {
    opacity: 1;
}

Tilt Effect

.card--tilt {
    transition: transform 0.3s ease;
}

.card--tilt:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateY(-8px);
}

/* With JavaScript for mouse tracking */
.card[data-tilt] {
    transition: transform 0.1s ease;
}

/* JavaScript */
const card = document.querySelector('[data-tilt]');

card.addEventListener('mousemove', (e) => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    
    const rotateX = (y - centerY) / 10;
    const rotateY = (centerX - x) / 10;
    
    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(20px)`;
});

card.addEventListener('mouseleave', () => {
    card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
});

🎨 Glassmorphism Card

.card--glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* On colorful background */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card--glass .card__content {
    color: white;
}

.card--glass .card__title {
    color: white;
}

.card--glass .card__description {
    color: rgba(255, 255, 255, 0.8);
}

🌟 Neumorphism Card

body {
    background: #e0e5ec;
}

.card--neomorph {
    background: #e0e5ec;
    border-radius: 20px;
    box-shadow: 
        20px 20px 60px #bec3c9,
        -20px -20px 60px #ffffff;
    border: none;
}

.card--neomorph:hover {
    box-shadow: 
        inset 5px 5px 10px #bec3c9,
        inset -5px -5px 10px #ffffff;
}

/* Neomorph button */
.btn--neomorph {
    background: #e0e5ec;
    border: none;
    box-shadow: 
        5px 5px 10px #bec3c9,
        -5px -5px 10px #ffffff;
    color: #667eea;
}

.btn--neomorph:active {
    box-shadow: 
        inset 2px 2px 5px #bec3c9,
        inset -2px -2px 5px #ffffff;
}

📱 Responsive Card Grid

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

/* With media queries */
@media (max-width: 640px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* With CSS Grid auto-fit */
.card-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

🎯 Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Design Gallery</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 2rem;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        h1 {
            color: white;
            text-align: center;
            margin-bottom: 3rem;
            font-size: 3rem;
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }
        
        /* Product Card */
        .card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .card__image-wrapper {
            position: relative;
            overflow: hidden;
            height: 250px;
            background: linear-gradient(135deg, #667eea30 0%, #764ba230 100%);
        }
        
        .card__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .card:hover .card__image {
            transform: scale(1.1) rotate(2deg);
        }
        
        .card__badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 0.5rem 1rem;
            border-radius: 30px;
            font-weight: 700;
            color: #667eea;
            font-size: 0.875rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .card__content {
            padding: 2rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .card__category {
            color: #667eea;
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }
        
        .card__title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #1a1a1a;
            line-height: 1.3;
        }
        
        .card__description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 1.5rem;
            flex: 1;
        }
        
        .card__stats {
            display: flex;
            gap: 1.5rem;
            padding: 1rem 0;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            margin-bottom: 1.5rem;
        }
        
        .card__stat {
            text-align: center;
        }
        
        .card__stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #667eea;
            display: block;
        }
        
        .card__stat-label {
            font-size: 0.75rem;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .card__footer {
            display: flex;
            gap: 1rem;
        }
        
        .btn {
            flex: 1;
            padding: 1rem;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }
        
        .btn--primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn--primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }
        
        .btn--secondary {
            background: transparent;
            border: 2px solid #667eea;
            color: #667eea;
        }
        
        .btn--secondary:hover {
            background: #667eea;
            color: white;
        }
        
        /* Glass Card Variant */
        .card--glass {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .card--glass .card__title,
        .card--glass .card__category {
            color: white;
        }
        
        .card--glass .card__description {
            color: rgba(255, 255, 255, 0.9);
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
                margin-bottom: 2rem;
            }
            
            .card-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .card__footer {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Featured Products</h1>
        <div class="card-grid">
            <article class="card">
                <div class="card__image-wrapper">
                    <img class="card__image" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400" alt="Product">
                    <span class="card__badge">New</span>
                </div>
                <div class="card__content">
                    <span class="card__category">Technology</span>
                    <h2 class="card__title">Premium Headphones</h2>
                    <p class="card__description">
                        Experience studio-quality sound with our premium wireless headphones.
                        Features active noise cancellation and 30-hour battery life.
                    </p>
                    <div class="card__stats">
                        <div class="card__stat">
                            <span class="card__stat-value">4.9</span>
                            <span class="card__stat-label">Rating</span>
                        </div>
                        <div class="card__stat">
                            <span class="card__stat-value">2.5k</span>
                            <span class="card__stat-label">Reviews</span>
                        </div>
                        <div class="card__stat">
                            <span class="card__stat-value">$299</span>
                            <span class="card__stat-label">Price</span>
                        </div>
                    </div>
                    <div class="card__footer">
                        <button class="btn btn--primary">Add to Cart</button>
                        <button class="btn btn--secondary">Details</button>
                    </div>
                </div>
            </article>
        </div>
    </div>
</body>
</html>

🎯 Key Takeaways