order-summary-card using HTML CSS and Javascript.

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!

👾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!