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

Stats Preview HTML & CSS using flexbox

@ubaydillah77

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


Any feedback will be great for my improvement, Thanks ✨

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi there! 👋

Congratulations on finishing this challenge! 🎉 It's great that all the page content lives inside the correct landmark elements. 👍 Also, your solution looks similar compared to the design. 🙌

There are some things that can be improved.

  • The overlay for the image can be achieved using the mix-blend-mode property. This way, there's no need for an empty div in the HTML which means you can clean up the HTML a bit. Also, by using this the overlay can look more similar to the design. All you have to do is to adjust the opacity and it should look similar or even perfectly match the design. Darrick Fauvel had done a great job on creating the overlay.
  • On mobile landscape, to be specific at 640px * 360px, the attribution is on the card. I would recommend not using absolute positioning and instead I highly suggest including it to the normal layout flow.

I hope you find this information beneficial. Happy coding! 😄

0

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