Design comparison
Solution retrospective
The page isn't that responsive, I managed to put the purple overlay on the image but probably not in the most efficient way. Any feedback regarding how I could have done it better(especially in the responsiveness aspect) will be very much appreciated, Thank you.
Community feedback
- @ccreusatPosted over 3 years ago
Hi ! You should take a look to object-fit and filter CSS properties to handle the image and purple effect :)
In best practices, you should fix accessibility & html issues. It's always helpful to clear these things to write better code. In the end, you won't have any "bad" report. You can check your work with the W3C Validator too.
For the responsive part, I don't see any mobile version. I don't know how you thought your code but maybe thinking in a "mobile first" flow would be helpul (eg: starting with the mobile, adding @media to tablet, then finishing in desktop)
1 - @Nick331102Posted over 3 years ago
for the color, you can create an empty div and style in css. add color, position absolute, mix-blend-mode, opacity, and z-index. look into mix blend mode for more info
0
Please log in to post a comment
Log in with GitHub
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