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 card component solution with Grid and Flexbox

Maja 55

@majxla

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


How to smoothly scale an image as the screen width changes?

Community feedback

P
tediko 6,530

@tediko

Posted

Hello, Maja! 👋

Congrats on finishing another challenge! 🎉 Your solution looks good. Here's my few tips:

  • Use unordered list <ul> for .stats. HTML lists are used to present list of information in well formed and semantic way.
  • To get closer to design use mix-blend-mode: multiply with opacity: 0.75 on your .overlay container. The mix-blend-mode sets how an element's content should blend with the content of the element's parent and the element's background.
  • Use Responsive Design Mode to see how your website behaves on different devices. To toggle it press CTRL+SHIFT+M on Firefox, and CTRL+SHIFT+C on Chrome. On mobile resolution (375px) it doesn't seems good. Change padding-left and padding-right to 20px on mobile.
  • Your .attribution overflow content on mobile resolutions.
  • Also on mobile change height of .image to 240px to make it a bit smaller.

Good luck with that, have fun 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