Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats-preview-card-component

@FranciscoFrontEndDeveloper

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@jiroRi

Posted

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
Discord logo

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