Order Summary Component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • let me explain, How you can easily apply the background color with the svg they provided.

  ---

  • Add the following style rule to your css, and then experience the changes

  body {
      background: url(/pattern-background-desktop.svg), #E1E9Ff;
      background-repeat: no-repeat, no-repeat;
  }
  

  • Tip, Don't forget to generate a new screenshot after editing the css file

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  Yuri Mascarenhas Lourenço•40

  @YuriMascarenhasLourencoPosted over 1 year ago

  @0xAbdulKhalid I made the changes, thanks for the tip!

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, Yuri Mascarenhas Lourenço!

  I recommend only having one <link> tag to import the font family. There are three <link> tags at the moment.

  The music icons and the illustration are decorative images. Meaning, they don't add any useful information. I recommend leaving the alternative empty for both images. This way, screen reader users can skip the images to save time.

  I hope this helps.

  Marked as helpful

  0

  ---

  

  Yuri Mascarenhas Lourenço•40

  @YuriMascarenhasLourencoPosted over 1 year ago

  @vanzasetia I appreciate the tip. I will change this project and implement this in future projects

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey, good job there!

  Regarding backround, it seems like it is not where it should be. So

  • remove this: background-position: center;

  • Instead use background-size: 100%; instead of cover, this should get you closer to the design look.

  • Also all interactive elements should have some change on hover to indicate interactivity to the user. The most basic is cursor:pointer; like you have for 'change'. But adding a background change to the button on hover is also big plus. (if the button does not have any bg like 'cancel order' you can just change the font-color or add text-underline etc)

  Hope you find this feedback helpful!

  Marked as helpful

  0

  ---

  

  Yuri Mascarenhas Lourenço•40

  @YuriMascarenhasLourencoPosted over 1 year ago

  @visualdenniss I hadn't thought of that before, thanks for the tip. I hope to continue counting on your help!

  0