Responsive landing page using Css Flexbox

Solution retrospective
Well, my first time tiring to mask an image.
What challenges did you encounter, and how did you overcome them?Masking the img, I had to do some research, but at last I just had to rely on my own idea of using opacity and creating an absolute positioned box (with mask color) in the img container.
What specific areas of your project would you like help with?Well, anyone got any suggestion on masking img?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @beowulf1958
Congratulations on completing this challenge. Your project looks great. Your page is responsive and looks great at both desktop and mobile views. I especially like that your css is very well organized and easy to read.
As to masking; I, too, struggled with this and ended up doing exactly what you did. After reviewing several other people's solution, most came up with some variation of an absolute position box and opacity to get the effect. I did see one solution which used the
filter: grayscale(100%) brightness(0.8) sepia(1) hue-rotate(277deg) saturate(2.5) opacity(0.6) contrast(1.2);
on a background-image which was interesting.Can't wait to see what you do next. Keep on coding!
Marked as helpful
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