Solution to the Stats Preview Card Component (Not yet responsive)

Community feedback

• 

  Riley•260

  @rileydevdznPosted over 1 year ago

  Hi @h415232,

  There is a slightly easier way to do the overlay. Based on your code, since you're using a background-image, you can also use a background-color and the background-blend-mode property. The MDN article has some explanation of the values, but this article shows examples of what all the different values for this property look like IRL when applied with an image and color.

  A pseudo-element is an alternative way to solve this, you're on the right track with that! 😊 We'll often use a pseudo-element in combination with the mix-blend-mode property. Mix-blend-mode is best if we're trying to blend the content of an element (instead of just its own backgrounds) or we have a child element we want to blend with its parent. This article covers both background and mix-blend-mode properties with some use cases and examples if you want to see them side-by-side.

  A quick note on semantics, you're using <span> and <br> elements inside of a <p> element to style your text in the statistics section. It's better to use semantic elements and CSS to achieve this. You're correct with using a <p> element here, go ahead and make each piece of text it's own <p> (like 10k is a p, Companies is a p, etc.). This is a good place for a list (you could change your .card-info-stats div to a <ul>), and you can put more than one p inside each li element, which will get you the vertical stacking of the text and the horizontal overall layout you already set up with Flebox (you may need to adjust your alignment/justification slightly).

  This also makes it more accessible, since not all screen readers will read the content of those spans, but they will read semantic elements like paragraphs and lists.

  Hopefully this helps and happy coding!

  1