Not Found
Request path contains unescaped characters
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card component using different positioning methods

Nader 300

@youtubbeh

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I wasn't able to get the background right. Any help with that? Also, I wasn't able to position the profile pic correctly so I tried to just look at the design and offset the element by calculating pixels.

Community feedback

@AgataLiberska

Posted

Hi Nader, I think the background in this challenge is particularly tricky! I would have two images added in rather than just the one, set it to no repeat and then position each individually - or just add them in with the html, might be easier to position that way :)

For the profile image, I would probably move it to your bottom div, so it's right at the top and then move it up using tranform:translateY property :)

Other than that, I would have another look at what tags youre using here. <article> is a perfect tag to use for card components like this, and the stats should really be a list - and you definitely don't need to put each bit of text in it's separate div. I'd suggest something like this:

<ul>
<li><span>80K</span> followers</li>

And if I could give one more bit of advice, try to use class names that are a bit more descriptive. I think "profile" is good, "profile-card" would be better, and then instead of top/bottom something like cover or banner and profile-info? It will make your work a lot easier on bigger challenges! :)

Hope this helps, happy coding!

Marked as helpful

0

Nader 300

@youtubbeh

Posted

@AgataLiberska thanks a lot Agata!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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