# Flexbox Card Drill

## Goal

Build a card layout with CSS Flexbox.

## Start

1. Open `style.css`.
2. Center the page with Flexbox.
3. Style the card container with padding, border radius, and shadow.
4. Use Flexbox for the action row and add a gap.
5. Give the normal button and ghost button different styles.
6. Keep the card readable on smaller screens.

## Check

- The card is centered on the page.
- The action buttons sit in one aligned row.
- The card keeps good spacing and contrast.

## Reflection

- What I typed myself:
  
- What Copilot suggested: 

  - 1. min-height: 100vh; 
  - 2. max-width: 100%;
  - 3. flex-direction: row;
  - 4. button {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        background-color: #007bff;
        color: #fff;
        cursor: pointer;
    }
  - 5. “Add spacing under heading/paragraph” means use something    like margin-bottom on h1 or p, for example h1 { margin-bottom: 8px; } and p { margin-bottom: 16px; }.
  
- What I learned: