Four card feature section using grid

Community feedback

• 

  جهاد أحمد•280

  @Gehad28Posted 3 months ago

  Hey @joaoxavier-profissional, nice work!

  I can see you thought of the cards' layout as a grid of 6 columns. It is really a good thinking; I did something similar.

  As you can see in the design, there are 3 columns, the first one has a single card, the second one has 2 above each other, and the third one also has a single card. So, how about thinking of the layout as a grid of 3 columns and 4 rows?

  This way, you can just do the following:

  .card-1, .card-4{
      grid-row: 2/4;
  }
  
  .card-2{
      grid-row: 1/3;
  }
  
  .card-3{
      grid-row: 3/5;
  }
  

  Also, For the heading, you may use <br> after the <span> tag so that the text after the span goes into a new line, or you can just use <p> for the regular text and <h1> for the bold one. And don't forget to change the font weight for the desktop view. :)

  Hope that helped. Keep going ☘️

  Marked as helpful

  1