Build responsive pricing cards – Coding Practice

FIND THE BUG

A recent CSS change made the pricing cards overflow on small screens and removed the featured state. Diagnose and repair the layout.

Acceptance criteria

1.Render three .plan cards.
2.Use grid or flex on .plans.
3.Mark one card as .featured.
4.Stack or wrap cards on smaller screens.

PrevNext

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<main>
  <h1>Choose your plan</h1>
  <section class="plans">
    <article class="plan">
      <h2>Starter</h2>
      <p>$9/month</p>
    </article>
    <article class="plan">
      <h2>Pro</h2>
      <p>$19/month</p>
    </article>
    <article class="plan">
      <h2>Team</h2>
      <p>$39/month</p>
    </article>
  </section>
</main>

0 × 0

Output ready when you are

Press Run to render your code, or Submit to validate your solution.

Build responsive pricing cards — find the bug

Acceptance criteria