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
- @bccpadgePosted over 1 year ago
Hello @yosephwinata. Congratulations on completing this challenge!!!🎉
Yes, you are doing the overlay correctly and you can change the
opacity
valueIn 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 helpful1 - Wrap all your content using a
Please log in to post a comment
Log in with GitHubJoin 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