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

Flexbox - Stats Preview Card

JJ Fuentes 140

@jjfuentes13

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


I used flexbox since I am more comfortable with it than using grid layouts. This was also a project where I used blend mode for the first time.

I used one value for blend mode because I couldn't get two values to work together. I wanted the darks to be darker but keep the light/whites as they are. Are there other properties to be used together with mix blend to improve the dark/light shades?

I also nested many divs in the stats portion first because I wasn't happy with the spacing limitation when using <ul> and <br>. Then when finishing the mobile and started working on the desktop design, I noticed I had to nest them again to be able to properly display the stats properly. Are there improvements in the HTML that could have helped to avoid having so many nested divs? Would of grid work better in this situation?

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