Boss: the profile card
Level 8 of 8Your goal
Card: 240px wide, 24px padding, centred; a nested @media (min-width: 500px) widens it to 300px. Nested inside the card: avatar 72 × 72, centred, 16px below; name 4px below; role 20px below; button 12px padding, with &.follow making it 160px wide.
Must use
widthpaddingmarginheightChecked at 2 stage widths (400px, 700px) — every stage below has to match.
Elements
Hover one to find it on the stage. Click it, or put your cursor inside its CSS rule, to focus on just that element.
stage 400px
stage 700px
target content boxtarget outer edge (green = matched, red = not yet)your element (hovered or focused)
Feedback updates as you type, and your CSS is saved in this browser. Exact target numbers are in the Target panel.