four cards - HTML, CSS Flexbox, Media query

Community feedback

• 

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  Hi @Nene16

  Good job on the challenge, I have one recommendation:

  • Try using grid-layout, it will reduce the amount of CSS code.

     .container {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           grid-template-areas: "a b c" "a d c";
     }
      
     .card1 {
          grid-area: a;
          align-self: center; // this will vertically align the first card, the same can be done on the last card. 
     }
    

  ```
  

  1
• 

  Siddhesh Kamble•330

  @Sk7867Posted over 3 years ago

  Hi @Nene16👋 You did a great job with flex-box, It looks and works well. But as @Josiah Mokobo said using grid would save a lot of time and effort. I would suggest playing with css hover effects to make it more cool, Happy Codding😁

  0