Submitted about 4 years ago

Profile Card Using CSS Grid & Flexbox

@SheGeeks

A solution to the Profile card component challenge

Solution retrospective

Question for Community: Do the challenge design's location and statistics labels (not the numbers) seem bolder than the 400 font-weight listed in the style guide? I feel like that value actually only applied to the age.

Feedback Request: I would love your feedback on the following areas of my code:

📐 positioning the background elements
📦 use of margins/padding to control spacing within the layout

I tried to get as close as possible to the actual design based on the design file dimensions (desktop: 1440 x 667, mobile: 375 x 667), which created a need for more control through margins/padding. If there are smarter or cleaner ways to accomplish this, please do share!

Code

Please log in to post a comment

Community feedback

ApplePieGiraffe•30,525
@ApplePieGiraffe
Posted about 4 years ago
Hello there, Corvida Raven! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Great job on this one! 🙌 Your solution looks just like the design and the background images are well-placed (something that can be a little tricky). 👍

Keep coding (and happy coding, too)! 😁
Raymart Pamplona•16,040
@pikapikamart
Posted about 4 years ago
your work there is spot on. On the positioning of background, as far as I can tell, you made it well and seeing your layout, like what I said, spot on^. But a suggestion, the body tag grabs the whole element right, semantic at that way. But what you did, is that you positioned fixed the card, that means, going of of the flow of the body. You could use in the body tag
```
align-items: center;
display: flex;
justify-content: center;
```
so that your card is still in flow

Other than that, great work^

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord