Responsive page using css grid

Hey @Hamid210545, some suggestions to improve you code:

• The profile images Alt Tags need to be improved. It should state the following; “Headshot of -person’s full name-“

• Remove the min-height from .testimonials not need.

• You want to add a third layout to make the transition from mobile 📱 -> desktop 🖥 views smoother.

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

Here is how it looks like fully implemented: EXAMPLE

Desktop View Code:

.testimonial-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      "daniel daniel jonathon kira"
      "jeanette patrick patrick kira";
    gap: 30px;
  }

  .daniel-card {
    grid-area: daniel;
  }
  .jonathan-card {
    grid-area: jonathon;
  }

  .jeanette-card {
    grid-area: jeanette;
  }

  .patrick-card {
    grid-area: patrick;
  }

  .kira-card {
    grid-area: kira;
  }

Happy Coding! 👻🎃