Order Summary Component Using Flexbox

Hey @omerkhan7210, the trick here is to push the svg to the top of the page with background-position: top center and then giving the body background-color: var(--color-1). Other tips:

• Use mobile-first when writing CSS. It's harder to scale down large elements to make them fit in smaller screens
• It's ideal to keep all styles inside your css file instead of placing them inside html. It was not necessary in this case.
• The document is missing an h1. Don't choose a heading tag based on how large the text appears in the design. Use classes to style the headings instead. Here's a resource
• The link 'Change' should be an a or button tag since it is an interactive element
• The woman image is not expanding to match the width of the card in medium sized screens. Use background-size: cover

Hope this helps!

👾Hello Omer, Congratulations on completing this challenge!

Here’s some tips to improve your component design:

The SVG background is not properly applied, to fix that first you need to add background-size: no-repeat (to avoid it repeating) and then add background-size: contain to make it fit full width and vertically aligned with the card.

body {
    background-size: contain;
    background-image: url(img/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-color: #ebf5ff;
}

✌️ I hope this helps you and happy coding!