Skip to content
Submitted about 4 years ago

Stats-preview-card-component

Francisco Becerra Rodriguez•440
@FranciscoFrontEndDeveloper
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

For me, the most difficult thing was to give that violet filter to the image. I tried several things but I didn't get it, but I chose to modify the image in an image editor.

Code

Please log in to post a comment

Log in

Community feedback

  • Jiro Ricaro•715
    @jiroRi

    Hi, Great solution you have there! Especially on the responsiveness, it just needs a little bit of polishing(especially the image size on mobile) and you're good to go.

    Suggestion:

    • As for the image with the violet filter. One way to do it is to learn/use the position property (relative and absolute), I suggest you look this up if you haven't learned this yet.

    Cheatsheet:

    • The filter(violet) div will overlap your image element and it will have its opacity toned down a bit. Take a look at this example if you're using an <img /> element: https://codepen.io/JiroRi/pen/yLgGMwW

    I also included a workaround using the background-image property instead.

    Again, great work and just keep at it! Let us know if you need further help! 💖

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