Order Summary Component using HTML, CSS and flexbox

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Ravindra, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • For add the top image in the background just put more specific background properties to the .container class:

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

  • not use h4 inside button element
  • remove all margin from .summaryContainer class because with flex they are superfluous
  • set min-height: 100vh to .container class instead height
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Overall you did well 😁 Hope this help!

  Marked as helpful

  0
• Account deleted

  Hi there,

  • remove all the flex properties and background-color and add it to the body

  • give the body min-height:100vh: also remove the height from the container

  • add tranistion:1s; to the button so that when you hover on the button the background changes smoothly

  • check the HTML report to fix accessiblity issues

  i hope this is helpful and goodluck!

  Marked as helpful

  0