CSS · Exercise 6 of 6 Previous
Advanced
Build a themed plan picker
Style this BEM plan picker using the techniques from this phase (no JavaScript):
- define --accent: #4f46e5 on :root and use it with var(--accent);
- lay out .plans as a grid or flex container with a gap of at least 12px;
- each .plan has a 2px solid #d1d5db border, padding of at least 12px and corners rounded by at least 8px;
- the plan whose radio is checked gets a border in the accent colour and the background #eef2ff (use :has());
- write the .plan rules with nesting (at least one rule nested inside .plan).
What Check tests
- Plans have a 2px #d1d5db border, 12px+ padding and 8px+ corners
- Choosing Pro highlights only Pro
- Choosing Team moves the highlight
- The plans sit in a grid or flex layout with a 12px+ gap
- Uses an --accent token, :has() and nesting
- No JavaScript
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.