Four card feature section

Community feedback

• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hello there 👋. Good job on completing the challenge! I have some suggestions about your code that might interest you.

  CSS and Styling:

  • Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.

  • You could use grid-template-area to achieve the same result using grid-area

    .card_container {
    	display: grid;
    	grid-template-areas:
    		". team-builder ."
    		"supervisor team-builder calculator"
    	        "supervisor karma calculator"
    		". karma ."
    	gap: 1rem;
    	margin-top: 2.5rem;
    }
    
    

    And set the grid-area of each card using a modifier class or something similar

    .card--supervisor {
    	  grid-area: supervisor;
    }
    
    .card--team-builder {
    	  grid-area: team-builder;
    }
    
    .card--karma {
        grid-area: karma;
    }
    
    .card--calculator {
    		grid-area: calculator
    }
    
    

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic! Happy coding!

  Marked as helpful

  1
• 

  P

  Alysson Gomes•470

  @EONRaiderPosted 11 months ago

  Here's the correct value to use for the box-shadow property on the cards:

  box-shadow: 0 15px 30px -11px rgba(131, 166, 210, 0.50);

  Marked as helpful

  0

  ---

  

  Robson Gomes•20

  @robsongomesPosted 11 months ago

  @EONRaider thanks. I've made the fix.

  1