Skip to content
Submitted over 1 year ago

Responsive Stats Preview Card SCSS

I Putu Phillip Steven•150
@putuphillipsteven
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 is my solution, but, in the overlay color section, I make the image opacity 0.5 and set the background color to violet, any one have another way to make a color overlay image? Hope you can give me another solution

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted over 1 year ago

    To center the main on the page using flexbox, replace the height in the body with min-height: 100vh. There is no need to give the body a width.

    body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

    For the color of the image, add mix-blend-mode: multiply and opacity: 0.8 to the img.

    img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    1
    I Putu Phillip Steven•150
    @putuphillipstevenPosted over 1 year ago

    @Hassiai Hi, I will try that, I just found out that I dont need to set the width, thanks.

    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