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

Frontend Mentor | Stats preview card component

MioMauro 400

@MioMauro

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


suggestions welcome!

Community feedback

@Harshi786

Posted

Hey!

Congrats on completing the challenge.

Here are few more tips from my side.

  • Try using em/rem value units instead of pixels. Avoid using fixed values for image div.

  • You can work more on image by adding mix-blend-mode CSS property.

.container .photo img{
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    opacity: 0.75;
}

Hope this helps :)

0

MioMauro 400

@MioMauro

Posted

@Harshi786 Thank you very much. I have to learn how to use rem and em...I am going to search for the tables with proportions ;). Thanks also for mix-blend-mode: multiply; I didn't know the command! much better :D

0

@Harshi786

Posted

@MioMauro If it really helped you then please mark it helpful.

Marked as helpful

0
MioMauro 400

@MioMauro

Posted

@Harshi786 super helpful! next works only with rem and vh/vw. Then I also try to learn media queires...

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