order summary component

👾Hello Idev, congratulations for your new solution!

Nice solution and nice results! You're in the right track.

I've some suggestions for you to improve your code:

1.Use background-size: container to have the wave svg background centered and well positioned:

body {
    background-image: url(./images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: hsl(225, 100%, 94%);
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Red Hat Display', sans-serif;
}

2.You can use relative units as rem or em that have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.

✌️ I hope this helps you and happy coding!

Hi @IDev11, how are you?

You did a great job on this challenge, but I have a few tips that I think you'll like.

1- Document should have one main landmark, you could have put all the content inside the main tag click here

2- Page should contain a level-one heading, you could have changed h2 to h1 [click here to read about it](https://dequeuniversity.com/rules/axe/4.3/page-has- heading-one?application=axeAPI)

The rest is great! Hope it helps... 👍