Responsive Card with Animations | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Cards</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="cards-container">
        
        <div class="card" data-card="1">
            <div class="card-badge">Popular</div>
            <div class="card-heart">
                <i class="far fa-heart"></i>
            </div>
            <div class="card-image">
                <img src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="Beach Resort">
            </div>
            <div class="card-content">
                <h3 class="card-title">Beach Resort</h3>
                <p class="card-description">Luxury beachfront villas with private pools and stunning ocean views.</p>
                <div class="card-footer">
                    <div class="card-price">$299<span>/night</span></div>
                    <button class="card-button">Book Now</button>
                </div>
            </div>
            <div class="card-overlay">
                <button class="view-details">View Details</button>
            </div>
        </div>

<div class="card" data-card="2">
            <div class="card-badge">New</div>
            <div class="card-heart">
                <i class="far fa-heart"></i>
            </div>
            <div class="card-image">
                <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="Mountain Cabin">
            </div>
            <div class="card-content">
                <h3 class="card-title">Mountain Cabin</h3>
                <p class="card-description">Cozy wooden cabins with breathtaking mountain views and hot tubs.</p>
                <div class="card-footer">
                    <div class="card-price">$249<span>/night</span></div>
                    <button class="card-button">Book Now</button>
                </div>
            </div>
            <div class="card-overlay">
                <button class="view-details">View Details</button>
            </div>
        </div>

<div class="card" data-card="3">
            <div class="card-badge">Luxury</div>
            <div class="card-heart">
                <i class="far fa-heart"></i>
            </div>
            <div class="card-image">
                <img src="https://images.unsplash.com/photo-1536376072261-38c75010e6c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="City Apartment">
            </div>
            <div class="card-content">
                <h3 class="card-title">City Apartment</h3>
                <p class="card-description">Modern apartments in the city center with premium amenities.</p>
                <div class="card-footer">
                    <div class="card-price">$199<span>/night</span></div>
                    <button class="card-button">Book Now</button>
                </div>
            </div>
            <div class="card-overlay">
                <button class="view-details">View Details</button>
            </div>
        </div>
    </div>

<div class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <div class="modal-body"></div>
        </div>
    </div>

CSS

:root {
    --primary: #4361ee;
    --secondary: #3a0ca3;
    --accent: #f72585;
    --light: #f8f9fa;
    --dark: #212529;
    --gray: #6c757d;
    --success: #4cc9f0;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    width: 100%;
}

.card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    transform: translateY(0);
    transition: var(--transition);
    cursor: pointer;
}

.card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--accent);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
    animation: fadeIn 0.5s ease;
}

.card-heart {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    cursor: pointer;
    transition: var(--transition);
}

.card-heart:hover {
    transform: scale(1.1);
}

.card-heart i {
    color: var(--gray);
    font-size: 1.2rem;
    transition: var(--transition);
}

.card-heart.active i {
    color: var(--accent);
    animation: heartBeat 0.5s;
}

.card-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--dark);
}

.card-description {
    color: var(--gray);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.card-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--gray);
}

.card-button {
    background: linear-gradient(to right, var(--primary), var(--secondary));
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
}

.card-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
}

.card-button:active {
    transform: translateY(0);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: var(--transition);
}

.card:hover .card-overlay {
    opacity: 1;
}

.view-details {
    background: white;
    color: var(--dark);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.view-details:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}

.modal.active {
    opacity: 1;
    pointer-events: all;
}

.modal-content {
    background: white;
    border-radius: 1rem;
    width: 90%;
    max-width: 600px;
    padding: 2rem;
    position: relative;
    transform: translateY(-50px);
    transition: var(--transition);
}

.modal.active .modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.close-modal:hover {
    color: var(--accent);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1); }
    75% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes slideIn {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .cards-container {
        grid-template-columns: 1fr;
    }
    
    .card {
        max-width: 100%;
    }
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // Initialize cards with animation
    const cards = document.querySelectorAll('.card');
    
    // Animate cards on load
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.animation = `fadeIn 0.5s ease forwards ${index * 0.1}s`;
    });

// Like button functionality
    const heartButtons = document.querySelectorAll('.card-heart');
    
    heartButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            this.classList.toggle('active');
            
            const icon = this.querySelector('i');
            if (this.classList.contains('active')) {
                icon.classList.replace('far', 'fas');
                // Add to favorites animation
                this.style.animation = 'heartBeat 0.5s';
                setTimeout(() => {
                    this.style.animation = '';
                }, 500);
            } else {
                icon.classList.replace('fas', 'far');
            }
        });
    });

// Book now button functionality
    const bookButtons = document.querySelectorAll('.card-button');
    
    bookButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            const card = this.closest('.card');
            const title = card.querySelector('.card-title').textContent;
            const price = card.querySelector('.card-price').textContent;
            
            // Button click animation
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 200);
            
            // Show confirmation
            showModal(`Booking confirmed for ${title} at ${price}`);
        });
    });

// View details functionality
    const viewDetailsButtons = document.querySelectorAll('.view-details');
    
    viewDetailsButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            const card = this.closest('.card');
            const title = card.querySelector('.card-title').textContent;
            const description = card.querySelector('.card-description').textContent;
            const price = card.querySelector('.card-price').textContent;
            const imgSrc = card.querySelector('.card-image img').src;
            
            // Show modal with details
            const modalContent = `
                <div class="modal-details">
                    <img src="${imgSrc}" alt="${title}" class="modal-image">
                    <h2>${title}</h2>
                    <p class="modal-description">${description}</p>
                    <div class="modal-price">${price}</div>
                    <button class="modal-book">Book Now</button>
                </div>
            `;
            
            showModal(modalContent);
        });
    });

// Modal functionality
    const modal = document.querySelector('.modal');
    const closeModal = document.querySelector('.close-modal');
    
    function showModal(content) {
        const modalBody = document.querySelector('.modal-body');
        modalBody.innerHTML = content;
        modal.classList.add('active');
        
        // Add event listener to modal book button if it exists
        const modalBookBtn = document.querySelector('.modal-book');
        if (modalBookBtn) {
            modalBookBtn.addEventListener('click', function() {
                modal.classList.remove('active');
                showModal('Booking confirmed! Thank you for your reservation.');
            });
        }
    }
    
    closeModal.addEventListener('click', function() {
        modal.classList.remove('active');
    });
    
    window.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.classList.remove('active');
        }
    });

// Card click animation
    cards.forEach(card => {
        card.addEventListener('click', function() {
            this.style.transform = 'scale(0.98)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 200);
        });
    });
});

Responsive Card with Animations Preview

Download Options