order-summary-component-main using HTML and CSS

Hello Nour! Congratulations for your solution!

I saw your live site and I'll give you some tips to apply and fix it:

1.You add the background-image as <img> its better you import this image using the css inside the body class. Delete the tag <img> from the html and also the class .back from the css sheet. Use this property in the body background-image: url(/images/pattern-background-desktop.svg);

2.Set your body as flexbox to align the card to the screen center and 'height:100vh' to make the body displays all the viewport height, code below:

body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }

2.Fix the container, using again flex and max-width instead of width (for a flexible container) and flex-direction: column to change the content flow vertically.

.container { display: flex; max-width: 450px; flex-direction: column; }

I applied this modification in devtools and now your solution works, try to do it and say me if fixes your code.

I hope it helps you and happy coding!

Hey Nour, congratulations you did a great job 😉

Let me give you some little tips for optimizing your code:

• add main tag and wrap the card for improve the Accessibility
• add descriptive text in the alt attribute of the images
• remove margin from container class because with flex they are superfluous
• use min-height: 100vh instead of height to body
• add transition on the element with hover effect
• instead of using px use relative units of measurement like rem -> read here

Hope this help and Happy coding 😁 by Travolgi