GRID & PSEUDO SELECTORS

Hey there! 👋 Here are some suggestions to help improve your code:

• For the icons, just leave the alt blank, no for alt="_blank".

• There's no need to do this #grid-blocks>div:nth-child(3), it only complicates things. Instead give the card a class and use that for styling.

• Using CSS Grid with Grid-Template-Areas will make things way easier 💯 when building the layout; it will give you full control of the layout.

• I would definitely add ⚠️ a third layout between, maybe, 650 - 1000px as your layout is just a single column until 1440px.

• You definitely want to use variables, at minimum, for your colors as it will help keep things organize and easier to maintain.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 👾

Hey there, I think you have to work on the four card positioning, because it doesn't look same as the challenge specifies, here's what I would suggest.

• You make 3 divs and make there div container flex-direction as row with spacing in between
• Now add to the middle div add two card elements like the one in the challenge and make this div container flex-direction of these card as column and remember to add the same spacing as you have used to add space between these three divs.

Here's how it look likes in code:

     <div class = 'card-left'>
         <div class='cards'>
     </div></div>
     <div class = 'card-mid'>
          <div class='cards'></div>
         <div class='cards'></div>
    </div>
     <div class='card-right'>
         <div class='cards'></div>
    </div>

Hope it helps you!!!