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

Solution based to use correctly flexbox and grid

@Theo-Larsimont

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • I don't know how to add the shadowed edge for the summary part
  • I don't know if I'm using the best technique for html(class, id, spann, ...) identification. I think it's not the clearest but I don't see how to do better
  • Don't I have too much css code for a small page like that?

Community feedback

@WitchDevelops

Posted

  • RE shadowed edge: You can do it using either:
    • filter: drop-shadow([horizontal-offset] [vertical-offset] [blur] [color]); https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
    • box-shadow: [horizontal-offset] [vertical-offset] [blur] [spread] [color]) https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow box shadow let's you combine several box shadow effects. Other than that it seems they work similarly.
  • Your HTML markup looks good to me, clear and readible enough
  • nah... it's all good! but you can refactor it a bit, for instance you're using the same padding in several classes, you can thing of adding a utility class for that

well done!

Marked as helpful

1

@Theo-Larsimont

Posted

Thanks for the advice @WitchDevelops !

1

@WitchDevelops

Posted

@Theo-Larsimont You're welcome!

and it happened that just today I found this awesome tool for setting multiple box shadows: https://boxshadows.xyz/

Marked as helpful

1

@Theo-Larsimont

Posted

@WitchDevelops oh nice! it's very interesting it's a tool very useful Thank's

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