Order Summary Card Component Project build using CSS Grid and Flexbox

You forgot to give the body a background-image, with a background-size of contain a background-repeat of no repeat.

In the media query you have to change the background-image

Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

You forgot to give .btn-confirm a box-shadow.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hi! Great solution

There're issues to resolve and a few suggestions

• HTML
  • alt attribute should describe the image or its function, and be empty if is only decorative. alt="Card Hero Image" gives no information. Don't use word image in alt, screen readers will read img as Image, Card Hero Image. The same with the music icon.

• CSS
  • I wouldn't recommend splitting CSS into three files, especially in such a small project. The server will have to make additional requests to fetch each file. Look at Sass/SCSS for this.
  • Don't use this trick html {font-size: 62.5%;}. Read this article for more detailed information.
  • Setting max-width: 144rem; margin: 0 auto; to .container makes no sense as it does nothing.
  • Font size is too small, in the style-guide.md body text is 16px
  • Use resets, like displaying images as block elements, and most important making buttons inherit font from parent elements because font-family is right now set to default Arial

Keep coding!👍