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

Nrosta 530

@Nrotsa

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


Feedback is welcome

Community feedback

@Call4julius

Posted

Observations:

There are two images provided for this project. One for the desktop and the other for the mobile viewport.

You could easily switch between the two images using media query or picture and srcset combination.

Also the background-color applied on the image is a bit off because you just simply reduced the opacity of the background-color. To fix that you can blend the color of the background into the img color using background-blend-mode: multiply.

Hope this helps.

Marked as helpful

2

Nrosta 530

@Nrotsa

Posted

@Call4julius I know about this, I just need to check how exactly it can be done. But I didn't know about this: background-blend-mode: multiply. Which is very helpful. Thank you

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