Project 5: Pricing Cards

Project 5: Pricing Cards

Three cards in a row - one highlighted as "Popular". The class "featured" card should pop.

HTML

<div class="pricing">
  <div class="plan">
    <h3>Basic</h3>
    <p class="price">$5/mo</p>
    <ul><li>1 project</li></ul>
    <button>Choose</button>
  </div>
  <div class="plan featured">
    <h3>Pro</h3>
    <p class="price">$15/mo</p>
    <ul><li>10 projects</li><li>Priority help</li></ul>
    <button>Choose</button>
  </div>
  <div class="plan">
    <h3>Team</h3>
    <p class="price">$40/mo</p>
    <ul><li>Unlimited</li></ul>
    <button>Choose</button>
  </div>
</div>

CSS

.pricing { display: flex; gap: 16px; }
.plan {
  flex: 1;
  padding: 24px;
  border: 2px solid #eaeaea;
  border-radius: 16px;
  text-align: center;
}
.plan.featured {
  border-color: coral;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}

Pro tips

• The id + class selector .plan.featured means "only elements with both".
• flex: 1 splits the row equally.
• A little translateY(-4px) brings the highlight to attention.
• Use a max-width on the .pricing row so cards don't stretch to the screen.

Checklist

• [ ] Three cards side by side
• [ ] One clearly highlighted card
• [ ] Cards stay readable on mobile
• [ ] A border, radius and shadow on each

TL;DR

Pricing rows = flex + equal flex + one featured class pushing it forward.