HTML CSS Positioning Background-Position

👋 Hi Tiago!

🎉 Congratulations on finishing this challenge! I have done this challenge, and yes, the bubbles were hard to be positioned correctly 😅. I would recommend looking at the ApplePieGiraffe's solution, he has done a great job on taking care of those bubbles. ​I have some feedback on this solution:

• Accessibility
  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only, except the profile picture.
  • For the profile picture, use his name as the alternative text. To learn more about images, read the tutorial from W3C WAI.
  • For the stats, the number should not be a heading. A heading tag is like a title in a document.
  • For the stats, I would recommend using ul and wrapping each item with li instead of using div. ​* Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
• Responsiveness
  • You don't need to specify how much height and width the card element. Let the content inside it control the height of the card and use max-width to limit the width of the card. By doing those two things, your card can shrink if needed.
  • For the height of the body element, it's the same as the card, let the content or element inside it control the height of the body element. The problem now, if you see your website on the mobile landscape (640px * 360px), the card is touching the top of the page (when it should be in the middle of the page).

That's it! Hopefully, this is helpful!

Good job!, some observations:

• I would tell you not to use so many div's, better use semantic tags.
• The card would be an article or section
• Can you see a thin cyan border on the avatar? You remove it by placing a background-color: white to the avatar container
• If you think about it the stats are a list with three items, then I would use ul> li * 3
• I would give a border-top to the list with the line color and thus I would not need the hr tag

Have fun coding 😉