Order Summary Component

Hi @DaliaMuj ! I'm happy that you enjoyed the project, you did a great job!

I have a few things that stand out to me which I hope would benefit you:

• The first thing I notice is your background. Most times when you set a background with an image, your image will repeat indefinitely. Sometimes it's great. However in this challenge, to match the original design, you only need one background image.

• In order to prevent that, in your css, give the body where the background-image is being set, another line called: background-repeat: no-repeat.

• Then give it another line background-color: and set the color to the slightly lighter blue that the ReadMe file gave you, and you've got a very similar looking background to the original!

• There are some weird horizontal scrolling in your project which I also fixed by change your height: 100vh to min-height: 100vh

• I would also give your body a margin: 0 and padding: 0 to reset any default margins and padding that html puts onto your elements.

• Usually you want your site's content to be wrapped in a main element. I would change your div with the class of container to a main element with the class of container to make it semantically correct. <main class="container"></main>

• The two buttons - "Proceed to Payment" and "Cancel Order" are currently input tags which are strictly used for form fields, like when you want a user to input their email/password. In this case, you wouldn't want that here. Instead I would use an a tag (anchor tag) and style them. You did it correctly for the "Change" button. Anchor tags are also more "style-able" if you give it a display: block as well.

• Also remember to style your :hover and :focus states for those two buttons to visually show that it is interactable.

I hope this helps, great job! Keep it up!