Order summary component #3

Hello @DefinitelyObsessed, very good job there. your solution is almost identical to the design.

However i have some notes for you:

• There is other way to center .parent-card instead of position. like setting display: flex or even display: grid to the body element. Your way is totally right

	body {
		display: flex;
		justify-content: center'
		align-items: center
	}

	body {
		display: grid;
		place-items: center
	}

• in the body styles you can use background property shortcut. like:

	body {
		background: hsl(225,  100%,  94%) url("./images/pattern-background-desktop.svg") no-repeat;
	}

• To be more HTML Semantic you can use <a> element for pay cancel order below. because this action may lead to an other page to continue the process.

For Accessibility issues

• use main element instead of .parent-card div.

• change <h2> heading level to be <h1> heading level. this should fix your accessibility issues.

• you can see My Solution for this challenge it may be helpful for you.

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀