Skip to content
Submitted almost 3 years ago

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

Eileen dangelo•1,600
@Eileenpk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Please log in to post a comment

Log in with GitHub

Community feedback

  • Ahmed Bayoumi•6,740
    @Bayoumi-dev

    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

    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

    Thank you Chisom, I appreciate the kudos!!

  • Chisom Ogbonna•380
    @Mavreon

    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