Html/css

Hi @Msarthaksharma, how are you?

Congratulations on completing this challenge, welcome to the front-end mentor community. I have a few tips that I think you will like:

1- I noticed that you put the image directly in the html, try to put it directly in the css, because we can have more control over it. You could do it like this:

`body { background-image: url(image) no-repeat; }

2- I noticed that you used absolute position to center the content, prefer to use display: flex;, I'll leave a link for you to read about: click here

The rest is really good! Hope it helps... 👍

!Hello Sarthak!*

First of all, you should correct the way you inserted the background image. That image is merely decorative, it is not important for the content of the page, it does not offer any information, so for all the correct way to insert it is through CSS with the "background" property, I will leave you a link below to the official documentation about the "background" property. In this case "background-image" must be applied to the body.

To align and center elements you could use the "flexbox" and the margins can be left to give space between elements.

You must also make the page responsive using "media queries", since it does not display correctly on mobile devices.

flexbox

background-image

media queries

Keep coding!🦾🦾🦾

Hello Shartak, congratulations for your solution!

Something you can improve here is the semantics and the colors, for the semantics you improve the markup replacing the div with main and h2 with h1 and remember to increase ever only one level for each heading.

 <h1>Order Summary</h1>

About colors, when you download the project files there’s a file called style-guide.md where you can find information such as hsl color codes and the font-size for the headings. The correct value for this shadow is box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

Hope this helps, happy coding