Skip to content
Submitted almost 3 years ago

Stats Card

Mint Missy•140
@MintMissy
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

  • Anyone have a better idea how to apply image color on banner image (original image is in the gray scale);

Community feedback

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

    Hi Mint Missy,

    Great solution, you've nailed it!

    • 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); this will help achieve the purple colour to match the design, rather than the overlay approach
    • you also need to explore background-blend-mode. (multiply usually does the trick)

    Happy coding 🤙

    Marked as helpful
    1
    Mint Missy•140
    @MintMissyPosted almost 3 years ago

    @darryncodes Thanks for advice! I'll soon explore this

    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