Stats Preview Card Solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello again Phúc, congratulations for your new solution!

  Here's some tips for you:

  To add the overlay effect use img {mix-blend-mode: multiply;opacity: 0.8;}

  One alternative for the the way you've wrapped the component image is by using <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device.

  If you're not familiar with the picture tag here's the quick guide: https://www.w3schools.com/tags/tag_picture.asp

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted over 2 years ago

  @correlucas I tried the picture tag but it didn't work for some reason xDD - it was really confusing for me. Thank you for the overlay style, that will help a ton!

  1
• 

  POTB•330

  @PeteonthebeatPosted over 2 years ago

  Congratulations for completing this challenge. It looks pretty identical! Great job!

  A simple thing you can change to get it even closer to the actual example is employing <span> tags to wrap the actual numbers and use the 'Lexend Deca' font for that and you h1...

  Regards!

  Marked as helpful

  0

  ---

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted over 2 years ago

  @Peteonthebeat Thanks Pete! Really appreciate that one. Should be a quick fix for me if I can change later.

  0