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
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found

Submitted

Stats preview card component (fully-responsive with HTML and CSS only)

#sass/scss#parcel
P

@nikoescobal

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


  1. I'd love if someone could show me the absolute best way to apply a CSS overlay
  2. I tried following the overlay effect as closely as possible and used mix-blend-mode. Could someone show me how to get it 100% the same as the given design?
  3. Although the flex property ensures that items have the same width, I noticed that when I add padding for one side, the items' widths no longer are equal. What approach would you suggest to ensure that all flex items are equal, aside from adjusting padding on both sides?

Community feedback

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