Skip to content
Submitted almost 3 years ago

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

#sass/scss#parcel
P
Nikolas Escobal•230
@nikoescobal
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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

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