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

Order summary card

Jean Jackโ€ข 110

@JeanJackcss

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


โœจ Here's my solution to this challenge โœจ

I had to review lessons on flexbox and grouping because I couldn't place the items correctly inside the box.

I learned a lot during this challenge I also managed to use the Hover and Link functions and that brought a smile to my face. In addition, I welcome suggestions on how to improve the flow of the service and what I could have done better.

Community feedback

Daniel ๐Ÿ›ธโ€ข 44,230

@danielmrz-dev

Posted

Hello @JeanJackcss!

Your project looks great!

I noticed that you used margin: 200px to place the card in the middle of the page. Here's a very efficient way (and better) to center the card:

  • Apply this to the body (in order to work properly, don't use position or margins):
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Marked as helpful

1

Jean Jackโ€ข 110

@JeanJackcss

Posted

Hey @danielmrz-dev !!!

Thank you so much for you advice!

It's funny because I saw about this same tip on my class today. :D

Thanks for the support man!

1
Daniel ๐Ÿ›ธโ€ข 44,230

@danielmrz-dev

Posted

@JeanJackcss

I'm glad I could help! ๐Ÿ˜Š

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