responsive testimonial section
Tags: html, css
Published: 2021-11-26 21:52:00

<section class="testimonial">
          <h1>What Our Student Says</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, tempore!</p>

          <div class="row">
              <div class="testimonial-col">
                  <img src="images/testi1.jpg" alt="">
                  <div>
                      <h3>John Smith</h3>
                      
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, molestias!</p>

                      <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                      <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                      <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                      <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                      <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                  </div>
              </div>

              <div class="testimonial-col">
                <img src="images/testi2.jpg" alt="">
                <div>
                    <h3>Emma Amelia</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, molestias!</p>

                    <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                    <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                    <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                    <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                    <i class="fas fa-star-half-alt" style="color: #f3ef0e; font-size: 25px;"></i>
                    
                </div>
            </div>

            <div class="testimonial-col">
                <img src="images/testi3.jpg" alt="">
                <div>
                    <h3>Mia Sophia</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, molestias!</p>

 <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
 <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
 <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
 <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
<i class="fas fa-star-half-alt" style="color: #f3ef0e; font-size: 25px;"></i>
     </div>
 </div>

          </div>
      </section> <!--testimonial end-->


#CSS

p{
    color: #777;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    padding: 10px;
}

h3{
    text-align: center;
    font-weight: 600;
    margin: 20px 0;
}

.testimonial{
    width: 80%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    background: #fff3f3;
    margin: auto;
    flex: 20%;
    border-radius: 10px;
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);

}

.testimonial img{
        width: 250px;
        border-radius: 300px;
        cursor: pointer;
        margin-top: 35px;
}

@media screen and (max-width: 1032px){
    .testimonial{
        width: 100%;
        margin: auto;
        padding-top: 80px;
        padding-bottom: 50px;
        text-align: center;
        margin: auto;
        flex: 20%;
    }
}