Order summary component

Hello Pleum, You have done a good work! 😁

Some little tips to improve your code:

• use main tag to wrap the card and improve the Accessibility but not as a container of that one element
• also you can use article tag instead of a simple div to the container card for improve the Accessibility
• remove all margin from main and article tags because with flex they are superfluous
• remove max-width to the main tag to center the card horizontally and add the width of card to article tag
• use min-height: 100vh instead of height, otherwise the content is cut off when the browser height is less than the content

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

Hey @pleum3410, some suggestions to improve you code:

• Stay away from using libraries until you fully grasp the fundamentals. This is the purpose of this challenges.

• To fix your background change the background-size: 100vw 50vh; to background-size: contain;.

• The correct max-width for this challenge is 450px / 28.13rem

• The ** Music Icons** serves no other purpose than to be decorative; It add no value. The Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

• Your "cancel order" was created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.

Happy Coding!