Order Summary Component

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello @adehsenior, Congratulations on completing this challenge!

  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.

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  ✌️ I hope this helps you and happy coding!

  01

  Marked as helpful
• 

  Adeola Ganiu•1,320

  @Deolabest

  Posted almost 3 years ago

  Hey Adeh, Congratulations on completing this challenge!

  Here is my feedback:

  1. First off, the properties added to the main section is not needed at all.

  2. The body of the project needs background color and background image to effectively match the task design. Solution:

  body { background-color: hsl(225, 100%, 94%); background-size: contain; background-image: url(images/pattern-background-desktop.svg); }

  3. For the background not to keep repeating since it doesn't cover the whole page, add this to the body background-repeat: no-repeat;

  4. The price change hover effect is not effectively done. solution: text-decoration: none;

  5. The drop shadow effect for the button is missing. solution:

  filter: drop-shadow(0px 8px 6px rgba(7, 23, 255, 0.245));

  6. The hover effect for the Cancel Order is missing too.

  Overall, you did a great job finishing this challenge!

  02

  Marked as helpful