order-summary-card using HTML CSS and Javascript.

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello Satyam congrats on finishing the challenge!, good job!

  I would like to give you a little advice with your permission.

  For centering your card in the page, instead of using margin in the container, try it using flex-box directly on the body!, with just a few lines of code your card will be completely center, you will need to set up the height to 100vh and center it with flex like this:

  body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  }
  

  With this your card will be completely center without the needs of margins!

  Hope my feedback helps you for future challenges!

  Marked as helpful

  2

  ---

  

  Satyam Jha•400

  @satyammjhaPosted over 2 years ago

  @DavidMorgade Thanks for the feedback. I will apply your suggestions to my upcoming challenges.

  1
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Satyam Jha, congratulations for your new solution!

  You've a great solution here, the design is 100% like the reference, you need only to give some work around the responsiveness. To fix that you need to replace all width with max-width to allow the container to contract, the sections that are giving this issue is the card button and pricing section.

  You can also avoid to use ìdlet theid` for forms and javascript and use only class for styling, this way you've your css with a standard for big project.

  Other thing you can improve is the shadow that is a bit evident, you reduce the opacity to create a smooth shadow, here's a good value for the shadow: box-shadow: 0 40px 40px -20px rgb(13 48 189 / 15%);

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Satyam Jha•400

  @satyammjhaPosted over 2 years ago

  @correlucas Thanks for your suggestions. I will work on these things.

  0