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

Overlay with mix-blend-mode

@yosephwinata

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


Am I doing the overlay correctly? It seems a bit off compared to the design file. How do I achieve the overlay in the design file?

Community feedback

@bccpadge

Posted

Hello @yosephwinata. Congratulations on completing this challenge!!!🎉

Yes, you are doing the overlay correctly and you can change the opacity value

In my solution, I used opacity: .8;

HTML 📃:

  • Wrap all your content using a <main> tag because every website should have at least one landmark.
<body>
    <main class="container"></main>
</body>

CSS 🎨:

  • Also, you can apply a border-radius on your image and container
  • You can convert the pixels to rem if you want to
.main-img {
    border-radius: 0 10px 10px 0;
}

/* I tried to apply the border radius on the text content but it wasn't working */
.container{
 border-radius: 10px; 
}

Hopes this helps you and don't hesitate to reach out to me if you have any questions

Marked as helpful

1

@yosephwinata

Posted

Hi @bccpadge Thank you for your feedback

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