Order summary component using HTML/CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾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!

  Marked as helpful

  1