Order summary component

Hey, awesome work on this one. Layout in genera looks really good.

You already got some feedbacks from others which is great, just going to add some as well:

• You don't have to use position: absolute on this one. Try inspecting your layout, hover on the body tag, you will notice that it doesn't have any height this is because the card component is out of the flow. Instead, remove the position: absolute and on the body tag, use :

body {
  align-items: center;  # centers vertically
  display: flex;
  justify-content: center;  # centers horizontally
  min-height: 100vh;  # takes full viewport
}

Then just remove the position, left, top, transform property on the card selector.

• Always have a main element on a webpage. For this one, the card selector could use the main instead of div.
• Always have an h1 element on a webpage.
• The proceed to payment could use a tag instead of button, since this is not a form and button does not do anything in here.

Aside from those, really great job on this one.

Hey, good looking solution! Your button is using the browser's default font-family though, you could change that! Also, I'd encourage you to try using relative units instead of pixels^^

Nice work👍🏻😊 Check the accessibility issue use semantic tags click to know more