Profile card component using different positioning methods

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 2 years ago

  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

  @youtubbehPosted over 2 years ago

  @AgataLiberska thanks a lot Agata!

  0