Order summary component using SASS GRID and Flexbox

Community feedback

• 

  Hafizan Adli•1,190

  @hafizanadliPosted over 3 years ago

  To make the middle section similar to design, you can wrap music icon and the list with a div. And use flexbox to that div to position it correctly.

  Marked as helpful

  2
• 

  Ahmed Faisal•5,095

  @afrusselPosted over 3 years ago

  There are few areas you are missing. Added bg color on annual plan, icon and change section. Also use this below code for bg image

  body{ background-color: var(--pale-blue); background-image: url("images/pattern-background-desktop.svg"); background-repeat: no-repeat; background-size: 100% 50%; display: -ms-grid; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; }

  Marked as helpful

  2
• 

  Carlos E Alford•285

  @webshurikenPosted over 3 years ago

  Nice job replicating the card. Apart from what Ahmed Faisal pointed out, I would recommend:

  • looking into HTML5 Semantics. It will help separate your content by its meaning and also improves accessibility.
  • also, not required, it would make reading code easier to read if you add indentation.

  Happy coding :-)

  0
• 

  Aimade•230

  @aimdexterPosted over 3 years ago

  Nicely done.

  0