Card component with mobile-first approach
Design comparison
Solution retrospective
Hello everyone. Despite looking easy this challenge, I managed to struggle. This was the first time I tried to apply the mobile first approach so I probably didn't do it properly. Recommendations, tips, are welcome.
Also, is there a better way to apply that overlay on the image? I know it doesn't look exactly like in the design.
Happy coding everyone!
Community feedback
- @mirk-00Posted over 3 years ago
For the image i used the property 'mix-blend-mode: multiply' on an overlay of the accent color. Then i also used a 'drop-shadow-box: inset ' set to 20% opacity (again accent color) because i think the final effect is more closely resembled by a combination of multiply and normal blend than just multiply.
Also: your mobile site doesn't look like the design the image doesn't show up
Marked as helpful0@ichiklausPosted over 3 years ago@mirk-00 Thanks! I didn't realise the image wasn't showing on that resolution. Also I tried using an inset shadow box as you recommended.
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