Four card feature section challenge using grid and media query

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 :)

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 😁😊😉