order-summary-card-component

Hey, great work on this one. Layout in general looks really great.

Cyrus already gave some great tips, just going to add some suggestions on the solution as well:

• It will be really for you to have :

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit
}

As one of you default styling. Using border-box: box-sizing makes the element's size easier to handle.

• Always have a main element to wrap the main content of your page. On this one, the .container selector could have used main instead of div.
• Also, avoid making a large element to be position: absolute as this removes the element from the flow. On your .container you don't need these stylings:

position
left
top
transform

Then on your body tag just add:

  align-items: center;
  display: flex;
  justify-content: center;

By doing this, the element will always be centered and it is inside the flow. You can remove the position: relative on the body tag now.

• The vector image could use aria-hidden="true" attribute so that it will be totally hidden.
• Always include a single h1 on a page, since there is no visible text to be a h1 make the h1 a screen-reader only text, meaning it will use like an sr-only class, the h1 will be placed as the first text-content inside the main. You can search up sr-only and how it is used.
• Music icon can use aria-hidde="true" as well.
• Great that you used heading tag on the annual-plan, but the choice is incorrect. When using heading tag, make sure you are not skipping a level. If you use h5 make sure that h1, h2, h3, h4 are all present before it.

If you have any queries just drop it here okay. Again, great work on this one.

hello my dear friend ♥ your card looks so good and clean but here some problems :

• when screen get bigger your background image ( svg ) it's moving to left : use background-position and size correctly
• "cancel order" have hover state too and it's better to add some transition to them for better ui