Order summary component #3

Community feedback

• 

  Mo•840

  @MohamedAridah

  Posted about 3 years ago

  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🚀

  12

  Marked as helpful