easy HTML & CSS HTML

Profile Card

The Brief

You're building the contributors page for a developer blog. Each writer needs a clean, centred profile card showing their name, role, and a short bio. Build a single profile card that you could later duplicate for every writer.

Acceptance Criteria

Tap a criterion to mark it off as you work. Tap a category header to expand or collapse.

1 Wrap the content in a <div> with class profile-card

2 Put the name in an <h1> element

3 Put the role in a <p> with class role

4 Put the bio in a <p> with class bio

5 Card background colour: white (#ffffff)

6 Card padding: 24px

7 Card border-radius: 12px

8 Card box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1)

9 Card max-width: 320px, centred horizontally with margin: 0 auto

10 Centre the text inside the card with text-align: center

11 Name (h1): font-size 24px, colour #111827, margin-bottom 4px

12 Role (.role): font-size 12px, colour #2563eb, font-weight 600, margin-bottom 12px

13 Bio (.bio): font-size 14px, colour #4b5563, line-height 1.5

💡 Hints 0 / 4

Guest Mode Attempt freely, or log in to earn EXP & CodeCoins.

index.html

Live Preview