Skip to content
Submitted about 3 years ago

New css approach

Magda•50
@magude6
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

I have changed the css file, but i still can't do the image like it's supposed to look like. Any tips appreciated!

Community feedback

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

    Hi Magda,

    An alternative 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); rather than creating an overlay in the mark up
    • explore background-blend-mode. multiply usually does the trick

    Have you looked into creating a mobile responsive version of the design?

    • you could use a combination of a media query
    • and FlexBox flex-direction: column and the order property to make the image display first

    Good luck with it all!

    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