Order summary page using HTML and CSS

Community feedback

• 

  Jay Dee•270

  @JayDeeZzzPosted almost 3 years ago

  Yeah! Nice try :)

  Try to fix the background issue using " background-repeat-y: no-repeat; " and add the background color as "background-color: hsl(225, 100%, 94%);"

  Peace ☮✌

  Marked as helpful

  0

  ---

  

  Khairan•30

  @KhairanADijiPosted almost 3 years ago

  @JayDeeZzz Thank you so much! That really had me stumped. Note taken.😁

  0
• 

  Hexer•3,660

  @EmmanuelHexerPosted almost 3 years ago

  Great work overall man. Keep it up

  A tip i can give you it to always add an alt attribute to your images.

  Marked as helpful

  0

  ---

  

  Khairan•30

  @KhairanADijiPosted almost 3 years ago

  @Phalcin Thank you! I always forget to do that. I'll make sure to do so next time.

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Khairan, good job! Congratulations on completing the challenge.

  I have some advice for you:

  • add main tag and wrap the card for Accessibility
  • try to remove all margin from entire class
  • use flexbox to the body for center the card. Read here -> flex guide
  • also set heigth of body to 100vh because Flexbox aligns to the size of the parent container.

  In the end for fix the top image in the background just put more specific background properties:

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

  Hope this help ;) and happy coding!

  0