Skip to content
Submitted about 1 year ago

Responsive stats preview card using SASS

Alexandre Covolan•310
@covolan
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

Hi Frontend Mentor community!👋

This is my take on the stats preview card challenge. Overall a pretty nice one, everything went smoothly. Except the color on the image, I didn't get quite right and don't know how to do it properly, any tips regarding the image color?

Thanks in advance for any tips and help😄

Community feedback

  • Paweł Piotrowski•270
    @pawelpiotrowski38Posted about 1 year ago

    Hi Alexandre, good work!

    Regarding the image you could set a background color of its parent (the header element in your case). You should use soft violet (one of the colors from the style guide). Then you can add a property mix-blend-mode to the image and set it to multiply. It would then cause the image to blend with the color of its parent. Last thing is lowering the opacity level of the image to match the design. I used opacity: 0.75.

    Feel free to check my solution and happy coding 😄

    Marked as helpful
    1
    Alexandre Covolan•310
    @covolanPosted about 1 year ago

    @pawelpiotrowski38 Thanks for the advice! I will make the changes right the way!😄

    1

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