Problem Statement

• Create a card layout using Flexbox.
• Display at least three cards in a row on larger screens.
• Make the cards stack vertically on screens 768px wide or smaller.
• Each card should have a hover effect that smoothly scales it up.
• Use appropriate CSS transitions for smooth interactions.

Solution

Explanation:

• Container Setup:

  • Flexbox Layout: The .card-container uses display: flex and flex-wrap: wrap to arrange cards in a row and allow wrapping when necessary.
  • Justify Content: justify-content: space-around evenly spaces out the cards.

• Card Styling:

  • Basic Styling: Each .card has a background color, border, rounded corners, box shadow, and padding for a clean look.
  • Flexible Sizing: The flex: 1 1 calc(30% - 20px) property sets each card's base width to about 30% of the container (with margin adjustments), allowing them to adjust as the screen size changes.
  • Transition: A transition on the transform property ensures that any changes (such as scaling on hover) happen smoothly over 0.3 seconds.

• Hover Effect:

  • Scale Transformation: When a user hovers over a card, the .card:hover rule applies transform: scale(1.05), making the card grow slightly to draw attention.

• Responsive Behavior:

  • Media Query: The @media (max-width: 768px) rule changes the card's flex basis to 100%, causing the cards to stack vertically on smaller screens.

This solution fulfills the challenge requirements by creating a responsive card layout that dynamically adjusts from a multi-column arrangement on larger screens to a single-column stack on smaller devices. The hover effect adds interactive visual feedback for an enhanced user experience.