Submitted over 2 years ago

Mobile first stats preview card using flexbox

Nick Williams• 280

@nickfwilliams

Preview site View code

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

CyrusKabir• 1,885

@CyrusKabir

Posted over 2 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 helpful

Mayank Agarwal• 70

@mayank-2323

Posted over 2 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 helpful

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