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 state preview card component

@replayzor

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


Help me with some feedback I want to improve

Community feedback

@onyedikachi23

Posted

I see your issue is probably with blending the image to with the violet colour.

  • To do this, put the image in a container and make the image fill the container entirely without distorting (stretching) its look.
  • Add the violet colour as the background colour for the container.
  • Then use mix-blend-mode: multiply; or mix-blend-mode: lighten; on the image to make it blend with the violet colour.

You can read more about the mix-blend-mode CSS property here - mix-blend-mode - MDN DOCS.

Marked as helpful

1

@replayzor

Posted

Thank you I will try it @OnyedikachiOzoani

0

@onyedikachi23

Posted

@replayzor I'm always available to help because it also helps my learning.

1

@replayzor

Posted

Done it worked thank you :)@OnyedikachiOzoani

0

@onyedikachi23

Posted

@replayzor So next thing to do is go update the code in your GitHub repo and also in your live site. Then come over to this Solution on Frontend Mentor and generate a new screenshot to make the design comparison look much better.

Marked as helpful

1

@replayzor

Posted

I updated on github , oh did not know that I need to take another screenshot . Thank you mate @OnyedikachiOzoani

1

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