<main>
    
  <div class="testimonials">


  <div class="testimonial  testimonial--purple">
  
    <div class="testimonial__header">
      <img src="https://bobmatyas.github.io/fm-testimonials-grid/images/image-daniel.jpg" class="testimonial__photo testimonial__photo--border--purple" alt="daniel clifford">
      
      <h2 class="testimonial__header__text testimonial__header__text--white">Daniel Clifford
      <span class="testimonial__header__text__verified testimonial__header__text__verified--white">Verified Graduate</span></h2>
    </div>

    <p class="testimonial__text testimonial__text--white">I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.</p>

    <blockquote class="testimonial__quote testimonial__quote--purple">“ I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a 
      transition and have heard some people who had an amazing experience here. I signed up 
      for the free intro course and found it incredibly fun! I enrolled shortly thereafter. 
      The next 12 weeks was the best - and most grueling - time of my life. Since completing 
      the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ”</blockquote>

</div>

<div class="testimonial testimonial--blue-grey">
  
  <div class="testimonial__header">
  <img src="https://bobmatyas.github.io/fm-testimonials-grid/images/image-jonathan.jpg"  class="testimonial__photo" alt="jonathan walters">

  <h2 class="testimonial__header__text testimonial__header__text--white">Jonathan Walters
    <span class="testimonial__header__text__verified testimonial__header__text__verified--white">Verified Graduate</span></h2>
</div>

  <p class="testimonial__text testimonial__text--white">The team was very supportive and kept me motivated</p>

 <blockquote class="testimonial__quote testimonial__quote--white">“ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer 
  for a big company. This was one of the best investments I’ve made in myself. ”</blockquote>
</div>
<div class="testimonial">

  <div class="testimonial__header">
  <img src="https://bobmatyas.github.io/fm-testimonials-grid/images/image-jeanette.jpg" class="testimonial__photo" alt="Jeanette Harmon">

  <h2 class="testimonial__header__text">Jeanette Harmon
    <span class="testimonial__header__text__verified testimonial__header__text__verified--black">Verified Graduate</span></h2>
  </div>

  <p class="testimonial__text">An overall wonderful and rewarding experience</p>

 <blockquote class="testimonial__quote testimonial__quote--black">“ Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living 
  while doing something I love. ”</blockquote>
</div>  

  <div class="testimonial testimonial--blue-black">

    <div class="testimonial__header">
  <img src="https://bobmatyas.github.io/fm-testimonials-grid/images/image-patrick.jpg" class="testimonial__photo  testimonial__photo--border--purple" alt="Patrick Abrams">

  <h2 class="testimonial__header__text testimonial__header__text--white">Patrick Abrams
    <span class="testimonial__header__text__verified testimonial__header__text__verified--white">Verified Graduate</span></h2>
  </div>

  <p class="testimonial__text testimonial__text--white">Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and 
  learning from their experiences was easy.</p>

  <blockquote class="testimonial__quote testimonial__quote--white">“ The staff seem genuinely concerned about my progress which I find really refreshing. The program 
  gave me the confidence necessary to be able to go out in the world and present myself as a capable 
  junior developer. The standard is above the rest. You will get the personal attention you need from 
  an incredible community of smart and amazing people. ”</blockquote>
</div>
  <div class="testimonial testimonial--two_row">

    <div class="testimonial__header">
  <img src="https://bobmatyas.github.io/fm-testimonials-grid/images/image-kira.jpg"  class="testimonial__photo" alt="Kira Whittle">
  
  <h2 class="testimonial__header__text">Kira Whittle
    <span class="testimonial__header__text__verified testimonial__header__text__verified--black">Verified Graduate</span></h2>

  </div>
  <p class="testimonial__text">Such a life-changing experience. Highly recommended!</p>

  <blockquote class="testimonial__quote testimonial__quote--black">“ Before joining the bootcamp, I’ve never written a line of code. I needed some structure from 
  professionals who can help me learn programming step by step. I was encouraged to enroll by a former 
  student of theirs who can only say wonderful things about the program. The entire curriculum and staff 
  did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team 
  project, in particular, was outstanding. It took my learning to the next level in a way that no tutorial 
  could ever have. In fact, I’ve often referred to it during interviews as an example of my developent 
  experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers. 
  100% recommend! ”</blockquote>
  </div>
</div>

</main>

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://www.bobmatyas.com">Bob Matyas</a>.
  </div>
:root {
    
    /* colors */
    --blue-gray: hsl(210, 46%, 95%);
    --purple: hsl(263, 55%, 52%);
    --dark-blue-gray: hsl(217, 19%, 35%);
    --dark-blue-black: hsl(219, 29%, 14%);
    --white: hsl(0, 0%, 100%);

    /* fonts */
    --font: 'Barlow Semi Condensed', sans-serif;
    --base-font-size: 1.3rem;

}

.attribution { 
    color: #000;
    font-size: 11px; 
    margin-bottom: 25px;
    margin-top: 25px;
    text-align: center;  
}

.attribution a { color:#000; }

* { box-sizing: border-box; }

html {
    font-family: var(--font);
    font-size: 10px;
}

body { 
    background-color: var(--blue-gray)
}

.testimonial { 
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
    font-size: 1.3rem;
    margin: 30px 0;
    padding: 20px 30px;
}

.testimonial--purple {
    background-color: var(--purple);
    background-image: url('https://bobmatyas.github.io/fm-testimonials-grida/bg-pattern-quotation.svg');
    background-position: top 0 right 30px;
    background-repeat: no-repeat;
}

.testimonial--blue-grey {
    background-color: var(--dark-blue-gray);
}

.testimonial--blue-black {
    background-color: var(--dark-blue-black);
}

.testimonial__text {
    color: var(--dark-blue-gray);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 0;
}

.testimonial__text--white {
    color: var(--white);
}

.testimonial__quote {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

.testimonial__photo {
    border-radius: 50%;
    max-width: 30px;
}

.testimonial__photo--border--purple {
    border: 2px solid #a775f2;
}

.testimonial__header {
    align-items: center;
    display: flex;
    justify-content: flex-start
}

.testimonial__header__text {
    font-size: 1.5rem;
    font-weight: 500;
    margin-left: 20px;
}

.testimonial__header__text--white {
    color: var(--white);
}

.testimonial__header__text__verified {
    display: block;
    font-size: 1.2rem;
}

.testimonial__header__text__verified--white {
    color: rgba(255, 255, 255, 0.5);
}

.testimonial__header__text__verified--black {
    color: rgba(25, 33, 36, 0.5);
}

.testimonial__quote--purple {
    color: rgba(255, 255, 255, 0.5);
}

.testimonial__quote--white {
    color: rgba(255, 255, 255, 0.5);
}

.testimonial__quote--black {
    color: rgba(25, 33, 36, 0.7);
}

main {
    padding: 0 5%;
}

@media (min-width: 1100px) {

    .testimonials {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 20px;
        margin: 10% auto;
        max-width: 1110px;
    }

    .testimonial { margin: 0; }

    .testimonial--purple { 
        grid-column: 1 / span 2;
    }

    .testimonial--two_row { 
        grid-column: 4;
        grid-row: 1 / span 2;
    }

    .testimonial--blue-black {
        grid-column: 2 / span 2;
    }
    
    .testimonial--purple {
        background-position: top 0 right 80px;
        background-size: 20%
    }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.