Skip to content
Submitted almost 4 years ago

Stats-preview-card-component using HTML/CSS and flexbox

spyder•315
@ratan17
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

the background image part was tricky especially for mobile design. i used multiple breakpoints for the background-image size and used 'rem' unit to give it height. it's not perfect according to the design but I think I have made a descent job.

I heartily invite you all to take a look. I'll will be glad to discuss with you guys how I approached this challenge.

Code

Please log in to post a comment

Log in

Community feedback

  • Asif M•200
    @asifm37

    Hi spyder,

    Yes, the background image section was a bit tricky for me too. I used the image as the foreground with 80% opacity and added a color background, which worked for me.

    Another approach I recently figured out was to use image and add filter option in CSS, this eliminates background logic completely.

    Give these a try maybe.

    Happy Coding. -Asif M

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