Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive solution using HTML5 and CSS

@viniciusmontibeller

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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,670

@Hassiai

Posted

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
Discord logo

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