Order Summary Component

Hi @machadogustavo 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

Here are some suggestions you might consider:

• Use min-height: 100vh to body selector, with this property you set a height and let the element grow even more if necessary. Your elements will also be vertically centered when you use this property.
• The <div class="attribution"> needs to be wrapped in a <footer> element:

<footer class="attribution">
   Challenge by ...
</footer>

• The music icon and the Hero Illustration are for decoration purposes only, so they could be hidden from screen readers by adding aria-hidden="true" and leaving its alt attribute empty:

<img src="./images/icon-music.svg" alt aria-hidden="true">

• The background property is shorthand for all the properties of the background. Update the property to background-image so you don't override the background color:

  /* background: url(./images/pattern-background-desktop.svg);  <---- Before*/
  background-image: url(./images/pattern-background-desktop.svg);

Or use all the properties in the background:

background: var(--Very-pale-blue) url(./images/pattern-background-desktop.svg) no-repeat left top/contain;

References:

• CSS background Property
• Background property

I hope those tips will help you.

Good job, and happy coding!

Hi @machadogustavo You've done great 💪

Here are some suggestions to improve your code:

• To center the component using flexbox add this property min-height: 100vh; to body element

Click here for more information

Good job, and happy coding!