Design comparison
SolutionDesign
Solution retrospective
HELP NEEDED
This is my least problematic challenge so far. I was able to markup the page with much ease. The only issues I have are:
- Difficulty trying to set the opacity. I wasn't sure whether opacity was the right property to use as I'm currently not aware of other methods of setting the overlay. Please do let me know if there are other methods.
- I had some difficulty trying to set the size of the text and the image to be equal (I'm still not sure whether they are equal). How can I set the
left-col
andright-col
to be equal in size?
Community feedback
- @Dev-MV6Posted about 1 year ago
- Using the
opacity
property to create the tinted effect for the image is not a bad practice, so don't worry about it. In case you want to try a different approach next time, remember that thebackground
property also allows you to achieve the same effect if you use it like this:
.right-col { background: linear-gradient( rgba(170, 92, 219, 0.6), rgba(170, 92, 219, 0.6) ), url("images/image-header-desktop.jpg") center / cover no-repeat; }
- And regarding to the containers' size... if I'm not wrong, in the original design the containers of the text and the image don't have the same width, so in my opinion you don't need to change anything.
Overall your solution looks great. Good job 👍
Marked as helpful1@ebeeraheemPosted about 1 year agoWow thanks. I still haven't been able to wrap my head around
linear-gradient
. I'll be sure to dedicate time to learning about it.Thank you so much for letting me know.
0 - Using the
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