Stats Preview HTML & CSS using flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  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