Profile card with Flexbox
Lay out a profile card with an avatar, text and buttons using Flexbox.
intermediateHTML & CSS
The task
Style the profile card so it looks finished:
- The card is centred on the page, 320px wide, with padding, rounded corners and a soft shadow.
- The avatar and the name/role sit side by side (Flexbox), vertically centred.
- The two buttons share the bottom row equally, with a gap between them.
Press Run to see your result in the preview. When you're happy with it, mark the exercise as done.
What you'll build
The finished result. Try it out, then build it yourself below.
Demo · drag the bottom edge to make it taller