Submitted about 3 years ago

Card component with mobile-first approach

Yeraldo Nicolás Moreira• 310

@ichiklaus

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Mirko• 40

@mirk-00

Posted about 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 helpful

Yeraldo Nicolás Moreira• 310

@ichiklaus

Posted about 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.

Please log in to post a comment

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