CSS · Exercise 5 of 5 Previous
Intermediate
Build a profile card
Use everything from this phase to build a profile card inside the 600px .stage:
- border-box sizing on the card (or everywhere). The card is 320px wide on screen and centred with auto margins, with rounded corners (at least 8px) and a box shadow.
- The .cover is 96px tall with a gradient background.
- The .avatar is a circle (equal width and height, at least 64px) that overlaps the bottom edge of the cover (use a negative margin).
- The button has a visible **:focus-visible** style.
What Check tests
- The card uses border-box sizing
- The card is 320px wide and centred in the stage
- The card has rounded corners and a shadow
- The cover is 96px tall with a gradient
- The avatar is a circle at least 64px wide
- The avatar overlaps the bottom edge of the cover
- The button has a
:focus-visiblestyle
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.