Skip to content
Submitted over 3 years ago

Stats-preview-card-component

Francisco Becerra Rodriguez•390
@FranciscoFrontEndDeveloper
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

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.

Community feedback

  • Jiro Ricaro•715
    @jiroRiPosted over 3 years ago

    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! 💖

    0

Please log in to post a comment

Log in with GitHub

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