Order Summary Card

Hi there 👋:

• After inspected your code, i want to share my suggestions that will be improve your solution

SUGGESTIONS:

• The button .proceedbutton wants some shadow
• So kindly change the try out the following css which drops shadow down with less opacity

.proceedbutton {
    box-shadow: 0 10px 30px hsla(245, 75%, 52%, 0.2);
}

• And finally, consider to remove the .attribution (footer) for better viewing experience

MESSAGE:

• If my answer helps you then providing an upvote will be very gratefull
• And don't forget to mark it as helpfull
• I hope you learned a lot of stuffs during this project, Congrats JJ

GREETINGS:

• Happy coding 🙌
• Peace be upon you with god's mercy & blessings Mayordey..✨

To center. container on the page, add min-height:100vh; and align-items: center; to the body

Replace the width with a max-width value for a responsive content , there is no need for a height value in .container.

Change the background-size of the body to contain , the body of the mobile design also requires a background-image. there is no need to give .container a width and height value in the media query.

Use rem or em as unit for the padding, margin and width for more on css units watch this https://youtu.be/N5wpD9Ov_To

Hope am helpful HAPPY CODING