Submitted almost 3 years ago

Stats preview card component made with Flexbox and mix-blend-mode

@Eileenpk

A solution to the Stats preview card component challenge

Solution retrospective

I had to read up on mix-blend-mode to get the layering of the picture correct, but it wasn't complicated, the background-color had to be on the parent container, and the background-image + mix-blend-mode property on the child element. Any feedback is always welcome!

Code

Please log in to post a comment

Community feedback

Ahmed Bayoumi•6,700

@Bayoumi-dev

Posted almost 3 years ago

Hey Eileen, I suggest you put the status of the preview card component into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:

<ul class="stats-preview__stats">
   <li>
      <span class="stat-number">10K+</span>
      <span class="stat-name">Companies</span>
   </li>
   <li>
      <span class="stat-number">314</span>
      <span class="stat-name">Templates</span>
   </li>
   <li>
      <span class="stat-number">12M+</span>
      <span class="stat-name">Queries</span>
   </li>
</ul>

I hope this is useful to you... Keep coding👍

Marked as helpful

Faruk Abdulganiyu•380
@faruking
Posted almost 3 years ago
Good job! An observation though, the 'insight' text doesn't blend well on resizing i.e. the last letters are hidden on resize.
Marked as helpful
Eileen dangelo•1,600
@Eileenpk
Posted almost 3 years ago
Thank you Chisom, I appreciate the kudos!!
Chisom Ogbonna•380
@Mavreon
Posted almost 3 years ago
Great work on this Eileen, you really nailed it 🎉🎉🎉

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord