Mobile first stats preview card using flexbox
Design comparison
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!
Community feedback
- @CyrusKabirPosted almost 3 years ago
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 helpful0 - @mayank-2323Posted almost 3 years ago
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 helpful0
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