Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Stats Preview Card Component Built with CSS Flexbox.

#accessibility#bem
Johnnyβ€’ 470

@johnnysedh3lllo

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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,580

@correlucas

Posted

πŸ‘Ύ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

@johnnysedh3lllo

Posted

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
Discord logo

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