CodeOath
← All challenges

Pricing Card

Easy
cssflexbox

Build a single pricing card: a plan name, a large price, a short list of features, and a call-to-action button — the kind of component that shows up on every SaaS landing page.

There's no automated grading here (this is a real building exercise, not a unit-testable algorithm) — build it, check it against the requirements below, and compare against the model solution when you're done.

Check your work against

  • The card has a visible border or shadow separating it from the page background
  • Plan name, price, and at least 3 features are all visible
  • The CTA button is clearly clickable — a hover state changes its appearance
  • Content has consistent padding/spacing (nothing touching the card's edges)

There's no automated grading for UI challenges — self-check against this list, then compare with the solution preview.

Live preview