Four card feature section

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Praise, congratulations for your solution!

  I liked that you create a square grid with the 4 cards, this is the first solution I saw someone doing that, really creative. Try work around with the spaces between cards and shadows to have a better design.

  I saw your live site and have some tips for your:

  1.The gap you did a good work using grid to build this solution, note that you don't need to use margins to create a space between the cards, you can use the property gap to create a space like the padding, for example set to the grid the property gap: 30px;, you can also use gap-row: 30px and gap-column: 30px; depending of which result you want to reach.

  2.The shadows, I think you used a value for the box-shadows too much strong, try to play around with the transparency playing around with the opacity.

  I know that is hard to work with box-shadows so you can use a software like Figma to create the shadow and just drop the code inside the css or use a box-shadow generator tool (example: https://www.cssmatic.com/box-shadow).

  Hope it helps you, keep coding!

  Marked as helpful

  1
• 

  Hritick Bhushan•400

  @hrk-berserker27Posted over 2 years ago

  Hi Praise, it is quite responsive and looks good but you can improve it by a notch by adding following suggestions:

  1. Try separating the top-most heading into two sections(slightly light one and dark one) so that the screenshot matches.
  2. You can also reduce the gap between the cards (optional -> it really looks good with your own gap:) ).
  3. You can also increase the font-size for the headings(slight increase) and the following content("1 rem" would be fine) as it looks really small.
  4. Regarding accessibility issues: You can add semantic elements like <main> for landmark and <section> in place for <div> elements, try using headings with less difference in their comparative values like if you have used h1 then don't use h3 for separating typography, try using h2 or use h1 but change its font size. These are some of the suggestions which I thought might help you. Don't forget to mark it as helpful if you liked the feedback otherwise its okay:).

  Marked as helpful

  0