Order Summary Component

Community feedback

• 

  Ken•935

  @kenreibman

  Posted almost 3 years ago

  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!

  00