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 with flexbox

@racyriaz

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


Would love to hear your feedbacks and ideas on a better way of implementation.

Community feedback

@rngueco

Posted

Hey Mohamed!

The layout looks good.

As for the HTML, you might want to check out semantic HTML. In particular, you should instead use a list <ul> or <ol> for the statistics, instead of <dt> and <dd> which are typically used to denote a term and a definition inside a definition list <dl> element.

Also, here's a tip for the image color overlay: you can use mix-blend-mode or background-blend-mode.

Cheers and happy coding! 🎉

0

@racyriaz

Posted

Thanks for your comment @rngueco, will implement that from my next code! Happy coding to you as well 🙌

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