Order Summary Component using HTML and CSS

Hey there! 👋 Here are some suggestions to help improve your code:

• To fix your background, add background-size: contain; to the Body Element.

• To center you content to your page, add the following to your Body Element:

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

• The Music Icon serves no other purpose than to be decorative; it adds no value. Its Alt Tag should left blank and have an aria-hidden=“true” to hide it from assistive technology.

• Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

https://web.dev/learn/design/

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃

Hi Krishnanand Yadav, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

• To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is.
• Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
• every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

The rest is great!

I hope it helps... 👍