Codingnic

Objective

Design a responsive grid of cards using Flexbox that adjusts based on screen size.

Requirements

Create at least 6 cards with a title, image, and short description.
Use Flexbox to arrange the cards in a grid.
Cards should be in 3 columns on desktop, 2 on tablet, and 1 on mobile.
Add hover effects to the cards.

Steps

Set up the HTML structure for the cards.
Use Flexbox to create the card layout.
Style the individual cards with CSS.
Implement media queries for responsiveness.
Add hover effects using CSS transitions.

Bonus

Implement a "Read More" button that expands the card to show additional content.
Add a subtle animation when the cards first load on the page.

Resources

Solution

Here's a step-by-step solution to create a responsive card layout using Flexbox:

HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Layout with Flexbox</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card-container">
        <div class="card">
            <img src="https://via.placeholder.com/300x200" alt="Card image">
            <h2>Card Title 1</h2>
            <p>This is a short description for card 1.</p>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/300x200" alt="Card image">
            <h2>Card Title 2</h2>
            <p>This is a short description for card 2.</p>
        </div>
        <!-- Repeat for 4 more cards -->
    </div>
</body>
</html>

CSS Styling (styles.css):

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.3s ease;
    width: calc(33.333% - 20px);
}

.card:hover {
    transform: translateY(-5px);
}

.card img {
    width: 100%;
    height: auto;
}

.card h2 {
    margin: 15px;
}

.card p {
    margin: 0 15px 15px;
    color: #666;
}

@media screen and (max-width: 768px) {
    .card {
        width: calc(50% - 15px);
    }
}

@media screen and (max-width: 480px) {
    .card {
        width: 100%;
    }
}

This solution creates a responsive card layout using Flexbox. The cards are arranged in a 3-column grid on desktop, 2 columns on tablet, and 1 column on mobile. Hover effects are added to each card, causing them to slightly rise when hovered over.

To add the bonus features:

For a "Read More" button, you would add a button to each card in the HTML and use JavaScript to toggle the visibility of additional content.
For a loading animation, you could use CSS animations and add a class to each card when the page loads. For example:

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

.card {
    /* ... existing styles ... */
    animation: fadeIn 0.5s ease forwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
/* ... and so on for each card ... */