Skip to content
Submitted almost 3 years ago

Stats preview card component with CSS3 and HTML5

StrigZ•270
@StrigZ
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

This challenge was unexpectedly difficult.

For some reason, adding color over the picture via background-image and background-color, as I did in the last challenge, did not work.

In addition, properly arranging the text and the picture was much more difficult than I thought it would be.

Community feedback

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

    Hi Strigz,

    Awesome work, looks like your perseverance has paid off!

    I always find the challenge more challenging than you think haha.

    • 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); this will help achieve a closer match to the purple in the design
    • you would also need to explore background-blend-mode. (multiply usually does the trick)

    All the best!

    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