Simple Order Summary Component with HTML + CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @bajra03👋, good job on completing this challenge! 🎉

  Here are some suggestions you might consider:

  • You could use the CSS backgrounds properties to set the background:

  body {
     . . .
     background-color: var(--primary-pale-blue);
     background-image: url(./images/pattern-background-desktop.svg);
     background-repeat: no-repeat;
     background-position: left top;
  }
  

  • background-color Set the background color.
  • background-image Set a background image.
  • background-repeat Sets if a background image will be repeated along the horizontal and vertical axes, or not repeated at all.
  • background-position Sets the starting position of a background image.
  • You can also specify the size of the background image with background-size

  The background property is shorthand for all the properties mentioned above:

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

  References:

  1. CSS background Property |
  2. Background property
  3. Background-repeat (MDN)

  • The music icon is for decoration purposes only, so it 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">
  

  I hope those tips will help you.

  Good job, and happy coding!

  2

  ---

  

  Putu Bajra•195

  @bajra03Posted about 2 years ago

  Hi @MelvinAguilar ,

  I just forget about the background in body element, thank you for remind me, and also I will update the music icon to aria-hidden="true"

  Thank you.

  1