Order summary component using HTML/CSS

👾Hello Heather Stout , Congratulations on completing this challenge!

🎨 Here are some tips to improve your component design:

Your background is applied but it's not too similar to the design yet. Add background-size: contain instead of background-size: cover to make it display the size full width and center with the card vertically. Note that now is slightly different from the challenge design.Add too the background-color: #E1E9FF; to make contrast between he wave image and the background instead of using white. Add background-repeat: no-repeat to avoid the background image repeating multiple times.

Here’s the code with the modification and the image applied as background:

body {
    background-image: url(./images/pattern-background-mobile.svg);
    background-size: contain;
    display: grid;
    grid-template-rows: auto 1fr;
    place-items: center;
    background-color: #E1E9FF;
    margin: 0;
    background-repeat: no-repeat;
}

✌️ I hope this helps you and happy coding!