Order Summary card using HTML & CSS

Community feedback

• 

  beowulf1958•1,850

  @beowulf1958

  Posted 22 days ago

  Congratulations on completing this challenge. It looks good so far.

  I have a few suggestions to improve. First, the file path to the images is wrong and the images are not showing up. The correct path is <img src="illustration-hero.svg" alt="illustration-hero"> and <img src="icon-music.svg" alt="icon-music">.

  I think there is some confusion on the background image. You have in inside the .card <div> right on top of the hero image. It is meant to go behind the card. This article explains all about background images. So to fix this, remove the pattern-background-desktop.svg from the html and modify the stylesheet as follows:

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #e0e8ff;
      background-image: url(pattern-background-desktop.svg); /*adds the image behind the card*/
      background-repeat: no-repeat; /*use image only once*/
      background-size: 100% 50%; /*stretches the image 100% wide and 50% height*/ 
  }
  

  Hope this helps. Keep on coding!

  10

  Marked as helpful