Order Summary Component

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.

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;

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