Mobile first stats preview card using flexbox
Solution retrospective
Despite an easy start with the mobile layout, when it came to swapping out the mobile image for the desktop image, I found this quite tricky. In the end I used an empty div and the background-image css property to swap this around. One bonus this approach had was that it allowed me to add the purple overlay (via background-blend-mode) without the need for an additional div over the top. In the end I sized the empty img div using fixed pixel measurements - however, this doesn't feel responsive or eloquent, so I'd be interested to hear how else it might have been done.
Thanks!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @CyrusKabir
hello my dear friend ♥ you did good and clean at all but here some improvement :
- it's good to look perfectly at main design and make texts(line-height, font-size, etc) and spacing (margin or padding) for layout like the design Because the designer had a good reason for adding these spaces and sizes
- for good file structure it's better to have separate css folder and push styles to it but at all you did clean on code adding sr-only element for accessibility (great) but just improve sizes and space in layout and that would be greater too. good luck
Marked as helpful - @mayank-2323
Hey Nick! Great design! I recently submitted my solution as well!
As for the background overlay - you might want to checkout background tag - where you can use linear-gradient attribute first and then url attribute. You can Google it - or you can go through my version of the challenge here - https://github.com/mayank-2323/Stats-preview-card
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