Skip to content
Submitted almost 2 years ago

Responsive solution using HTML5 and CSS

Vinicius da Silva Montibeller•160
@viniciusmontibeller
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

In this project i tried to make a layer on the image to change it's color, but i think that has to be some better way, or maybe having to work with some filters tag's to fix it. Another problem was that in the mobile version, right below the image it has a small color overflow from the layer i put, but couldn't find how to fix that.

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    For the color of the image, wrap the picture in a div and give it a class for the styling.
    <div class="stats-image"><picture><img</picture></div>

    in the css give .stats-image a background color of soft violet and add a width of 100%, object-fit: cover, mix-blend-mode: multiply and opacity of 0.8.

    .stats-image{

background-color: hsl();
}
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
    2

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