Stats preview card component main use html css

Community feedback

• 

  P

  Adrian Trandafir 🎮•330

  @XenoMeePosted 10 months ago

  Hello! 👋

  Your solution looks great and matches the design. Great job! 👏

  I might have a few suggestions for you to improve it:

  • You can add the website's image as part of the markup instead of using it as background image since it can provide context for people who use screen readers.
  • You can use the ::after pseudo-element for the purple effect on the image instead of an empty div. It is a good practice to not have empty divs in our websites.
  • Try to build the website using the Mobile First approach since nowadays websites need to also work for small screen devices.
  • For your card, you can set a max-width instead of a normal width. That way, you allow it to shrink for small devices and cannot grow more than the max-width value you set.
  • You can use grid for the desktop layout since grid is often used for layout purposes while flexbox is used more for individual components.
  • For the Stats section, you can use an unordered list with 3 list items having 2 paragraphs inside. That way your markup is more semantic.
  • Try to avoid nesting and use only inline elements inside headings.
  • To make the picture color look like the design, you can use the mix-blend-mode property with a value of multiply.

  Hope this information helped you! 😊

  Happy coding!

  0

  ---

  

  dungnope•170

  @DungnopePosted 10 months ago

  @XenoMee Thanks you very much, I just had a change in stats section, it is really work! 😁

  0