Skip to content
Submitted almost 3 years ago

Stats preview card component using Sass

Hugo Padilla•210
@HugoPadilla
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 all, Thank you for taking time to review my code!

I took advantage of this exercise to use Sass for the first time.
Any recommendation to use this tool in a better way will be of great help.

Upload problems to change the color of the image. My solution was to put a transparent color layer in front of the image but it is not very close to the design. How could I improve this part?

I appreciate any recommendation. Thanks

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Hugo,

    Great design, really responsive - well done!

    You should use mix-blend-mode: multiply; on .overlay and remove opacity: .6;.

    As an alternative option to the overlay approach you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath);.

    You would also need to explore background-blend-mode (multiply usually does the trick).

    Keep up the momentum!

    Marked as helpful
    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