CSS · Exercise 5 of 5 Previous
Intermediate
A fluid profile card
Make a profile card that adapts to any screen without media queries.
The .card should be 360px wide when there is room, but never wider than its container (use min()). Its name heading h2 should use clamp() and always stay between 20px and 32px. The .badge background should be the accent colour #2563eb with transparency (a tint, so the badge text stays solid), and the card's border should always match the card's text colour via currentColor.
What Check tests
- In a wide container the card is 360px wide
- In a 200px container the card shrinks to 200px
- The name heading uses clamp() and stays between 20px and 32px
- The badge background is a see-through tint (alpha between 0 and 1)
- The card's border follows its text colour
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.