Skip to content
Submitted over 2 years ago

Responsive Stats Preview Card Component Built with CSS Flexbox.

Johnny•470
@johnnysedh3lllo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

hey guys, 😁. it's me again

#Difficulties

  • i still found it a bit hard to switch the mobile image with the desktop image. please if there's a better approach to achieving this please i would love to hear it.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Johnny, congratulations for this amazing solution!

    I don't think there's much more to here, you did everything, the overlay effect with mix-blend-mode, responsive container, responsive image. Its all really good!

    If you want to improve it a bit use <picture> to manage the image mobile and desktop in the html and set when it should change between devices.

    If you're not familiar to picture here's a quick guide: https://www.w3schools.com/tags/tag_picture.asp

    Congrats bro!

    Marked as helpful
    1
    Johnny•470
    @johnnysedh3llloPosted over 2 years ago

    thanks again man. it seems I'm growing then 😁 and that's thanks to all of the feedback from you guys.

    I'll look into the documentation on w3schools again. to see the best way i can use it. thanks again Lucas.

    1

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