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

Stats-preview-card-component

@Otakuwind

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


could not get the solution responsive, a problem i need to handle with more studies

Community feedback

Abdessamad 210

@styrexx

Posted

Hello there 👋. You did a good job!

There are a few changes you can make to your solution to be better.

  • You have to change the <div> in to <image> to have a better control to your images

  • To color the image :

  • Go to your HTML file and add a div at the bottom of the image

<div class="color"></div>
  • And in your CSS file
img{
    height: 100%;
    mix-blend-mode: multiply;
}
.img{
    background-color: hsl(277, 64%, 61%);
    position: relative;
}
.color{
    background-color: hsl(277, 64%, 61%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
}
  • To understand better go to my solution maybe you can find it useful here is the link

I hope you find this helpful.

1

@Otakuwind

Posted

@kop-left Thanks for your comment.

0

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