Made Order summary card using Vanilla HTML/

Replace<section>with the main tag and <div class="attribution"> with the footer tag to make the page accessible. click here for more on web-accessibility and semantic html

For a responsive content, replace the width in .box with max-width.

Change the background-size of the body to contain. In the media query you have to change the background-image of the body.

To center .box on the body using flexbox or grid instead of position: absolute, - USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

• USING GRID: add min-height:100vh; display: grid place-items: center to the body

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

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

You forgot to .btn a box-shadow value.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

This looks great! There are just a few small things that could be improved.

The easiest fix is to add the missing hover effects on the buttons and the "change" text. Secondly would probably be the mobile view. It seems you've set the box's width to 350px and tried to adjust the padding to 38px 22px, though it is retaining the 54px 45px value. This is simply because there is a typo in the media query; it says 38px 22 px rather than 38px 22px. Remove that space and it'll work.

The final thing would be the background image. The starter files provide you with one image for mobile view, and one for desktop; though it seems only the desktop one is being used here. What you could do is simply change the background image's url of the body in your media query, or what I think is a better solution would be to look into the srcset attribute of the <img> element.

Hope this helps!