Skip to content
Submitted over 3 years ago

Stats Preview Component

Yohannes Assefa•40
@yohannesakd
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was a fun challenge. I had some trouble with the image tint and didn't really understand how I could match the design tone but I tried my best. Possibly the responsiveness could also use some work. Let me know what you think!

Code

Please log in to post a comment

Log in

Community feedback

  • Sam Guliker•540
    @Sam-Guliker

    Hey,

    Seems pretty good, you're almost there. Have you tried looking int CSS filters? https://developer.mozilla.org/en-US/docs/Web/CSS/filter

    Another option might be to set an absolute div above the image and use a purple color.

    Happy coding

    Marked as helpful
  • Aakash Verma•9,520
    @skyv26

    To avoid accessibility issues:

    1. wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here

    Good Luck

    Marked as helpful
  • Yohannes Assefa•40
    @yohannesakd

    I have not looked at CSS filters, they look quite interesting. I used a pseudo element on the image div to give it the color, but it wasn't quite right. I'll take a look at it again. Thank you for the reply!

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