Order Summary Component

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• let me explain, How you can easily apply the background color with the svg they provided.

• Add the following style rule to your css, and then experience the changes

body {
    background: url(/pattern-background-desktop.svg), #E1E9Ff;
    background-repeat: no-repeat, no-repeat;
}

• Tip, Don't forget to generate a new screenshot after editing the css file

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hi, Yuri Mascarenhas Lourenço!

I recommend only having one <link> tag to import the font family. There are three <link> tags at the moment.

The music icons and the illustration are decorative images. Meaning, they don't add any useful information. I recommend leaving the alternative empty for both images. This way, screen reader users can skip the images to save time.

I hope this helps.

Hey, good job there!

Regarding backround, it seems like it is not where it should be. So

• remove this: background-position: center;

• Instead use background-size: 100%; instead of cover, this should get you closer to the design look.

• Also all interactive elements should have some change on hover to indicate interactivity to the user. The most basic is cursor:pointer; like you have for 'change'. But adding a background change to the button on hover is also big plus. (if the button does not have any bg like 'cancel order' you can just change the font-color or add text-underline etc)

Hope you find this feedback helpful!