Responsive Order-Summary-Component using HTML and CSS

Hi Mohit, I took some time to look at your solution and you did a great job!

Also I have some tips for improving your code:

• for fix 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;

• add main tag and wrap the card for Accessibility
• to make it look as close to the design as possible set width: 20rem; to card class and remove height property
• remove right and height from .main-img class and set width: 100%;
• create a container div for the card text with padding-inline: 2rem assigned
• remove all margin and padding from card class
• try to use flexbox to the body for center the card. Read here -> best flex guide
• after add min-heigth: 100vh to body because Flexbox aligns to the size of the parent container

Overall you did well :)

Hope this help and happy coding!

Great work man, Nicely done