Order Summary Component using HTML, CSS and flexbox

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!

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!