Stats preview component [HTML-CSS]

Good job on completing this challenge. Your solution looks nice.

Take a look at css mixed blend mode to learn more about adding color to images. There are a lot of ways to do this with code via combining images, gradients, etc

Some links on the topic to get you started:

• https://www.youtube.com/watch?v=TAA89nkEuhw
• https://web.dev/learn/css/blend-modes/
• https://blog.logrocket.com/creative-text-styling-with-the-css-mix-blend-mode-property/
• https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Happy coding!

Hello, Juan! 👋

Regarding the image overlay, I also recommend using mix-blend-mode. I suggest adjusting the opacity of the image as well to make it match perfectly with the design. For your reference, you can see @DarrickFauvel's solution for this challenge.

Some feedback.

• The image is a decorative image. So, leave the alt="" empty.
• There's no need to wrap the img element with the figure element. The only reason to use figure is if you need to include a figcaption. Otherwise img tag is fine (or wrap it with div instead).
• The card__stats should be a list item. If the site has no styling, a list item would be the best choice. I like to think of the HTML page (no styling) as a document file. So, the heading is the same as the title, h2 is a sub-title, etc.
  • 10k+ companies
  • 314 templates
  • 12m+ queries
• Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible.

I hope this helps!