CSS Grid Testimonial Section Challenge

Summary

From Front End Mentors - we need to create a coloured testimonial section using css grid.

Practice to test CSS Grid skills. The challenge is to build a testimonials grid section.

• Desktop design
• Mobile design

HTML

Here is the html.

<div class="testimonials">
  <div class="card card--bg-purple">
    <header class="card__header">
      <img src="images/image-daniel.jpg" class="card__img" alt="" />
      <div>
        <h3>Daniel Cliffard</h3>
        <p>Verified Graduate</p>
      </div>
    </header>
    <p class="card__lead">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum delectus
      provident quaerat harum a magni maiores in optio atque, minima odit hic
      fugiat, sit officia?
    </p>
    <p class="card__quote">
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nihil
      praesentium atque ea nam fugit facilis vel, sed assumenda, modi
      perspiciatis repudiandae suscipit officiis blanditiis libero fuga
      dignissimos quibusdam quasi inventore? Eligendi provident quae illo
      maiores suscipit praesentium facere aperiam."
    </p>
  </div>

  <div class="card card--bg-gray-blue">
    <header class="card__header">
      <img src="images/image-jonathan.jpg" class="card__img" alt="" />
      <div>
        <h3>Jonathan Walters</h3>
        <p>Verified Graduate</p>
      </div>
    </header>
    <p class="card__lead">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum delectus
      provident.
    </p>
    <p class="card__quote">
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nihil
      praesentium atque ea nam fugit facilis vel, sed assumenda, modi
      perspiciatis repudiandae suscipit officiis!"
    </p>
  </div>

  <div class="card">
    <header class="card__header">
      <img src="images/image-daniel.jpg" class="card__img" alt="" />
      <div>
        <h3>Janette Harmon</h3>
        <p>Verified Graduate</p>
      </div>
    </header>
    <p class="card__lead">
      Harum a magni maiores in optio atque, minima odit hic fugiat, sit officia?
    </p>
    <p class="card__quote">
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi
      provident quae illo maiores suscipit praesentium facere aperiam."
    </p>
  </div>

  <div class="card card--bg-black-blue">
    <header class="card__header">
      <img src="images/image-jonathan.jpg" class="card__img" alt="" />
      <div>
        <h3>Patrick Abrahms</h3>
        <p>Verified Graduate</p>
      </div>
    </header>
    <p class="card__lead">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum delectus
      provident quaerat harum a magni maiores in optio atque, minima odit hic
      fugiat, sit officia?
    </p>
    <p class="card__quote">
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nihil
      praesentium atque ea nam fugit facilis vel, sed assumenda, modi
      perspiciatis repudiandae suscipit officiis blanditiis libero fuga
      dignissimos quibusdam quasi inventore? Eligendi provident quae illo
      maiores suscipit praesentium facere aperiam."
    </p>
  </div>

  <div class="card">
    <header class="card__header">
      <img src="images/image-jeanette.jpg" class="card__img" alt="" />
      <div>
        <h3>Kira Whittle</h3>
        <p>Verified Graduate</p>
      </div>
    </header>
    <p class="card__lead">Minima odit hic fugiat, sit officia?</p>
    <p class="card__quote">
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae nihil
      praesentium atque ea nam fugit facilis vel, sed assumenda, modi
      perspiciatis repudiandae suscipit officiis blanditiis libero fuga
      dignissimos quibusdam quasi inventore? Eligendi provident quae illo
      maiores suscipit praesentium facere aperiam. Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Quae nihil praesentium atque ea nam fugit
      facilis vel, sed assumenda, modi perspiciatis repudiandae suscipit
      officiis blanditiis libero fuga dignissimos quibusdam quasi inventore?
      Eligendi provident quae illo maiores suscipit praesentium facere aperiam."
    </p>
  </div>
</div>

CSS

Here is the css.

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@200;300;400;700&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #edf2f8;
  font-family: 'Barlow Semi Condensed', sans-serif;
  line-height: 1.7;
  font-size: 13px;
}

.testimonials {
  max-width: 1440px;
  margin: 100px auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.card {
  background: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0px 48px 100px 0px rgba(17, 12, 46, 0.15);
  margin-bottom: 10px;
}

.card__header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.card__header h3 {
  font-size: 15px;
}
.card__header p {
  opacity: 50%;
}
.card__img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #996ed9;
  margin-right: 10px;
}

.card__lead {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 20px;
}
.card__quote {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 70%;
}

.card--bg-purple {
  background: hsl(263, 55%, 52%);
  color: white;
  background-image: url(./images/bg-pattern-quotation.svg);
  background-repeat: no-repeat;
  background-position: top 10px right 100px;
}
.card--bg-gray-blue {
  background: hsl(217, 19%, 35%);
  color: white;
}
.card--bg-black-blue {
  background: hsl(219, 29%, 14%);
  color: white;
}

.card:nth-of-type(1) {
  grid-column: 1 / 3;
}
.card:nth-of-type(4) {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}
.card:nth-of-type(5) {
  grid-column: 4 / 5;
  grid-row: 1 / 3;
}

footer {
  text-align: center;
}

@media (max-width: 960px) {
  .testimonials {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .card:nth-of-type(1) {
    grid-column: 1;
  }
  .card:nth-of-type(4) {
    grid-column: 1;
    grid-row: 4;
  }
  .card:nth-of-type(5) {
    grid-column: 1;
    grid-row: 5;
  }
}

Tech and Tools

• CSS
• HTML
• Media Query
• cPanel Hosting

Demo

Open demo on my web server. Clicking the link will open up a new window.

Link to Demo

Challenge

Link to the challenge on Front End Code Mentors.

Link to Challenge