Four Card Feature Section — HTML, CSS (Grid, Flexbox, Variables)

Community feedback

• 

  Shashi Lo•1,345

  @shashiloPosted over 4 years ago

  Amazing work Micky! This implementation is quite seamless. I especially love the subtle hover state on the cards. Super clean. But I did find some nit picky improvements that you can look at though:

  • The desktop card size doesn't match the design. Because it's too thin, the padding is also off.
  • The card's top border is incorrect as well. It should be a straight line and not curved with the border-radius.
  • Would like to see usage of a CSS naming convention like BEM. You're using kabeb-case, but it kind of looks like BEM but it doesn't. Would be nice to group them up.
  • On Mac Chrome, the card content's letter-spacing is too wide. It's due to body having letter-spacing: .05em;.

  2
• 

  Adnan Niaz•90

  @sanixstudioPosted over 4 years ago

  Nice work bro

  1

  ---

  

  micky•400

  @awwmickyPosted over 4 years ago

  @adnanniaz77, Hey thanks! 🙌

  0
• 

  Bryan Daniswara•200

  @bryandaniswaraPosted over 4 years ago

  Yes, it does. Great work! You did it well in translating design to code. I really like the animation. Also, your code structure has a nice fully responsive layout with combination of flexbox and grid.

  1

  ---

  

  micky•400

  @awwmickyPosted over 4 years ago

  @bryandaniswara, Thanks dude 👏! I always try to make a dynamic design system in the CSS.

  0