Four card feature section using flexbox and grid

Community feedback

• 

  hardy•3,660

  @hardy333Posted about 3 years ago

  hey, good to see you are learning programming...

  There are lots of things to improve in your code, In my opinion biggest one is to set correct class names.

  You can see there are 4 cards which looks almost the same but nor exactly 100% same, in cases like that you can set one class name for all of them, for example .card, and then you can add second class names for styles which are different, for example .card-red , .card-green, and so on. In css .card - className will have all the styles which are same for all four cards... that way you can getting read of writing same styles in css.

  4
• 

  Kristiana12•425

  @Kristiana12Posted about 3 years ago

  Hey,

  good job on this one!! The result looks pretty amazing!!

  There are a couple of suggestions I would like to give you to improve your code:

  • instead of using 'div class=main' use the 'main' HTML semantic, that way you can get rid of one of the accessibility issues.

  • '--font: Poppins; --fallbackFont: sans-serif;' it is not necessary to separate them just use this one: '--font: 'Poppins', sans-serif' if the browser does not support the font Poppins then it applies the sans-serif automatically

  • try not to repeat yourself, for example you use for each 'img' the exact same code snippet, just do this '.supervisor img, team-builder img, .karma img, .calculator img`.

  On the other hand try implementing flexbox at `.supervisor, .team-builder, . karma, .calculator' it is easier to place the items then you don't have to 'position: absolute' and write so much code.

  • i would have done one more breaking point where they stand two next to each other cause at some point when you decrease the screen size they look too squeezed.

  Happy coding :)

  2