Four card feature section challenge using grid and media query

Community feedback

• 

  Jani-B•370

  @Jani-BPosted 3 months ago

  Nice work. I like the hover effect that you added on the cards.

  For the grid I would say it might be better to do it with: grid-template: card 1 for the column 1 + row 1 to 2, card 2 for the column 2 + row 1 card 3 for column 2 + row 2 card 4 for column 3 + row 1 to 2

  Sorry Could not write it as grid-template should as the reply field made changes to the order of the words :D I hope you understand what I try to say :D

  so that you do not have to use the margin -140px or similar. You did very well with it as the solution works well on the mobile and desktop, but I think the grid-template area would work more easier.

  just give the card1 and card4 margin auto and they should sit on the middle and then card 2 and card 3 just fits top of each other.

  But I would say the solution was very good :)

  Marked as helpful

  1
• 

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  Nice one 😀

  If you are curious how you can do this straight lines on the top of each card here is my tip:

  Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.

  Hope you found this comment helpful 💗

  Good job and keep going 😁😊😉

  0