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

Queen 60

@UmesiQueen

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, I'm really having fun completing these challenges . I found this one interesting trying to figure out how to overlay a background color on the image and Yes! it was the fastest I've completed so far 🤣

Your Feedback will be appreciated.

Community feedback

Eray 1,410

@ErayBarslan

Posted

Hey there, excellent work on this one and good to hear you're having fun :) Some suggestions:

  • To overlay, on .background_imgyou can use mix-blend-mode: multiply; so you'd match with design.
  • Content overflows between 375-900px. I'd suggest designing mobile version first and instead of a fixed width on main you can use max-width so that your page would be responsive for all sizes with the same amount of code. By default width:auto which fills the available space. By overriding it we take the responsiveness away.
  • For semantic markup you should use landmark elements to wrap your elements instead of div like : <main class="container"> & <footer class="attribution">. Your designs stays the same but page becomes more accesible. Happy coding :)

Marked as helpful

1

Queen 60

@UmesiQueen

Posted

Hey Eray, Thank you very much for your feedback. I have now implemented your suggestions. It works perfectly.

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