Looks really solid!
HTML
Everything looks pretty good here, have two suggestions:
- Make the person's name an
<h1>. It's the most important element on the page
- Rarely used but the labels/stats could be dl/dt/dd – would be
<dl> for the enclosing element, <dt> for the label (followers, likes photos), <dd> for the numbers
CSS
Well organized overall!
One improvement I'd recommend: there are a few magic numbers in here. Namely, the 87px for .card-stats and the 53px in .card-header img. The latter one is easier to address.
Basically the 53px only works because the image is a certain size (106px). If we were ever to swap out a different sized image here, the CSS would break.
If you replace the left and bottom properties with:
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
You'll get the same centered effect with no magic numbers. I realize you might not have gotten to practice much with translate but this is a really powerful technique for centering.
The other issue is harder to solve: it's because .card-content doesn't stretch to fill the whole length of the card, and it probably should. The best way to solve this is with a flexbox column approach on the parent element. Happy to go into this more if you're interested!
Background position
Hard to imagine a better solution than the one you came up with! Glad you learned about multiple bg images
