Single price grid component using SASS and GRID

Community feedback

• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  Hi Wissem, good job.

  Just a few suggestions starting with semantics in your HTML:

  • Your div.container can use <main class="container">
  • Your div.card can use <section class="card">

  More info on semantics here

  -- Your grid structure its spot on. I would just improve on naming convention so it's more meaningful for the grid-area. Use the content in each box to help define a name.

  // example
  grid-area: join;
  grid-area: monthly;
  grid-area: whyus;
  

  --

  Visual suggestions

  • remove border-shadow and border-radius from individual .card and apply to its parent container.

  Keep it up!! 👍👍

  1

  ---

  

  Wissem•125

  @Wiss69Posted about 4 years ago

  @artimys Hi Artimys,

  Many thanks for the feedback I take note of it. When I put the box-shadow and border-radius on the parent element .grid , the shadow is ok, but the border-radius doesn't work and I don't know why...

  Thanks

  0

  

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  @Wiss69

  I've seen that happen sometimes. Try adding overflow: hidden; to your .grid container

  0

  

  Wissem•125

  @Wiss69Posted about 4 years ago

  @artimys Thanks for the tip, it's working know !

  1