Order Summary Card

Community feedback

• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 2 years ago

  Hello Liz, You have done a good work! 😁

  Some little tips to improve your code:

  • To add the top image in the background just put more specific background properties to the body:

  background: url("../img/pattern-background-desktop.svg") no-repeat top center;
  background-size: contain;
  background-color: #e0e8ff;
  

  • use main tag to wrap the card and improve the Accessibility but not as a container of that one element or inside elements of card: main is to contain the main page content of all the html page
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • img element must have an alt attribute, it's very important!
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the header container of image
  • remove all margin from .main-card class because with flex they are superfluous
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  12

  Marked as helpful