Order Summary Component

Community feedback

• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Congrats on completing the challenge, @EBILITE!

  Here are a few suggestions based on your final solution:

  • The .annual-cont element needs more padding and the items inside of it aren't properly aligned

  • The p inside .text has a different color

  • When you hover on the "Change" button, the whole card's size gets shifted. That shouldn't happen at all

  • The "Proceed to Payment" button has a border on it that you can remove with "border: none". Also the button should have less vertical space inside of it and be longer in terms of width

  • More space below the "Cancel Order" button. Also, same issue with the hover effect as with the Change button.

  0
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Ebilite,

  Great solution, you pretty much nailed it!

  • you're increasing the font-size on your 'Change' and 'Cancel Order' links, this is making your design jump. You could try transform: scale(1.2); and this would stop them jumping, but i don't think it's necessary, just a subtle change in opacity or colour and this will provide enough feedback to the user
  • you could centre your design nicely in the viewport with this snippet:

  display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  

  0
• 

  Sam Guliker•540

  @Sam-GulikerPosted almost 3 years ago

  Hi Eblite,

  Nice solution you've got there, there are a couple of things you can pay attention to. HTML:

  • Try to use landmarks like main, header or footer. link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

  CSS:

  • The paddings seem a bit off, you can play a bit more with that.
  • The button seems a bit off in color and doesn't have a drop shadow.
  • The font color in the main section is a bit off.
  • The image within the anual plan needs a width and no height, it will scale accordingly.

  I hope this was helpfull

  Happy coding

  0