Create A Testimonials Section Using HTML CSS And JavaScript

byPosted at
Create A Testimonials Section Using HTML CSS And JavaScript


Create A Testimonials Section Using HTML CSS And JavaScript

If you want to learn how to create a Testimonials Section using HTML, CSS, and JavaScript, Then you are in the right place. This Testimonials Section is fully responsive and super easy to create. Please watch this complete article to make this awesome testimonial section.

Learn How To Create A Testimonials Section Using HTML CSS And JavaScript



HTML Code 

  <!--DOCTYPE html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--==title=====================-->
    <title>Testimonials</title>
    <!--==CSS=======================-->
    <link rel="stylesheet" href="css/style.css">
    <!--==Poppins===================-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <!--==Swiper-CSS================-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
 
</head>
<body>

    <section id="testimonials">
        <div class="testimonials-container">
            <!--**heading*******-->
            <div class="testimonials-heading-main">
                <h4>Our Leadership</h4>
            </div>
            <!--**heading*******-->
            <div class="t-heading-slider">
                <h5>Board Of Directors</h5>
            </div>
            <!--**slider*********-->
            <div class="testimonials-slider">


            <!-- Swiper -->
            <div class="swiper mySwipertesti">
            <div class="swiper-wrapper">
                <!--1-->
                <div class="swiper-slide">
                <!--*box*-->
                <div class="t-slider-box">
                    <!--img-->
                    <div class="t-slider-box-img">
                        <img alt="Board Of Director" src="images/1.webp">
                    </div>
                    <!--text-->
                    <div class="t-slider-box-text">
                    <div>
                        <h6 >Khaled Abdulla Al-Mass</h6>
                        <strong>Board Member</strong>
                        <div class="t-slider-box-text-container">
                        <div class="t-slider-box-text-flow">
                            <span>Elected to the Board in 2014</span>
                            <p><b>Career and experience:</b> Khaled Abdulla Al-Mass is an executive board member of iMass Investments LLC, an investment holding company that specializes in investment banking advisory, direct investments, artificial intelligence and financial technology.  Mr Al-Mass is also an executive board member of iTech Engineering Consultancy, which specializes in Building Information Modeling solutions and a Board Member of Abu Dhabi Health Services Company (SEHA), Advanced Cure Diagnostic Centers and MHDH.</p>
                            <p><b>Qualifications and recognition:</b> Mr. Al Mass holds a bachelor&#8217;s degree in management from Marylhurst University, United States.</p>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                </div><!--slide-end-->

                <!--2-->
                <div class="swiper-slide">
                <!--*box*-->
                <div class="t-slider-box">
                    <!--img-->
                    <div class="t-slider-box-img">
                        <img alt="Board Of Director" src="images/2.jpg">
                    </div>
                    <!--text-->
                    <div class="t-slider-box-text">
                        <h6>Khaled Abdulla Al-Mass</h6>
                        <strong>Board Member</strong>
                        <div class="t-slider-box-text-container">
                        <div class="t-slider-box-text-flow">
                            <span>Elected to the Board in 2014</span>
                            <p><b>Career and experience:</b> Khaled Abdulla Al-Mass is an executive board member of iMass Investments LLC, an investment holding company that specializes in investment banking advisory, direct investments, artificial intelligence and financial technology.  Mr Al-Mass is also an executive board member of iTech Engineering Consultancy, which specializes in Building Information Modeling solutions and a Board Member of Abu Dhabi Health Services Company (SEHA), Advanced Cure Diagnostic Centers and MHDH.</p>
                            <p><b>Qualifications and recognition:</b> Mr. Al Mass holds a bachelor&#8217;s degree in management from Marylhurst University, United States.</p>
                        </div>
                        </div>
                    </div>
                </div>
                </div><!--slide-end-->

                <!--3-->
                <div class="swiper-slide">
                <!--*box*-->
                <div class="t-slider-box">
                    <!--img-->
                    <div class="t-slider-box-img">
                        <img alt="Board Of Director" src="images/3.jpg">
                    </div>
                    <!--text-->
                    <div class="t-slider-box-text">
                        <h6>Khaled Abdulla Al-Mass</h6>
                        <strong>Board Member</strong>
                        <div class="t-slider-box-text-container">
                        <div class="t-slider-box-text-flow">
                            <span>Elected to the Board in 2014</span>
                            <p><b>Career and experience:</b> Khaled Abdulla Al-Mass is an executive board member of iMass Investments LLC, an investment holding company that specializes in investment banking advisory, direct investments, artificial intelligence and financial technology.  Mr Al-Mass is also an executive board member of iTech Engineering Consultancy, which specializes in Building Information Modeling solutions and a Board Member of Abu Dhabi Health Services Company (SEHA), Advanced Cure Diagnostic Centers and MHDH.</p>
                            <p><b>Qualifications and recognition:</b> Mr. Al Mass holds a bachelor&#8217;s degree in management from Marylhurst University, United States.</p>
                        </div>
                        </div>
                    </div>
                </div>
                </div><!--slide-end-->


                <!--1-->
                <div class="swiper-slide">
                <!--*box*-->
                <div class="t-slider-box">
                    <!--img-->
                    <div class="t-slider-box-img">
                        <img alt="Board Of Director" src="images/4.jpg">
                    </div>
                    <!--text-->
                    <div class="t-slider-box-text">
                        <h6>Khaled Abdulla Al-Mass</h6>
                        <strong>Board Member</strong>
                        <div class="t-slider-box-text-container">
                        <div class="t-slider-box-text-flow">
                            <span>Elected to the Board in 2014</span>
                            <p><b>Career and experience:</b> Khaled Abdulla Al-Mass is an executive board member of iMass Investments LLC, an investment holding company that specializes in investment banking advisory, direct investments, artificial intelligence and financial technology.  Mr Al-Mass is also an executive board member of iTech Engineering Consultancy, which specializes in Building Information Modeling solutions and a Board Member of Abu Dhabi Health Services Company (SEHA), Advanced Cure Diagnostic Centers and MHDH.</p>
                            <p><b>Qualifications and recognition:</b> Mr. Al Mass holds a bachelor&#8217;s degree in management from Marylhurst University, United States.</p>
                        </div>
                        </div>
                    </div>
                </div>
                </div><!--slide-end-->
            </div>
            </div>

            <div class="slider-btns">
                
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>

                
            </div>
        </div>
    </section>



    <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwipertesti", {
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      loop: true,
      coverflowEffect: {
        rotate: 0,
        stretch: 70,
        depth: 40,
        modifier: 4,
        slideShadows: false,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

  </script>
    
</body>
</html>


CSS Code 
 *{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: poppins;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
/* width */
.t-slider-box-text-container::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .t-slider-box-text-container::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  .t-slider-box-text-container::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  .t-slider-box-text-container::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
/*==testimonials==================*/
#testimonials{
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.testimonials-container{
    max-width: 1120px;
    width: 90%;
    padding: 50px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.t-heading-slider{
    width: 100%;
}
.testimonials-heading-main h4{
    font-size: 4vw;
    color: #252525;
    text-align: center;
    font-weight: 600;
}
.t-heading-slider{
    margin-top: 50px;
}
.t-heading-slider h5{
    color: #252525;
    font-size: 32px;
    font-weight: 300;
}
.mySwipertesti{
    height: 411px !important;
}
.t-slider-box{
    display: grid;
    grid-template-columns: 343px 1fr;
    width: 100%;
    height: 100%;
}
.testimonials-slider{
    width: 100%;
    height: 100%;
    margin: 20px;
    position: relative;
}
.t-slider-box-img{
    display: flex;
    width: 100%;
    height: 100%;
}
.t-slider-box-img img{
    width: 100%;
    height: 411px;
    object-fit: cover;
    object-position: center;
}
.t-slider-box-text{
    padding: 0px;/*0em 2em*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #ffffff;
    max-width: 0px;
    overflow: hidden;
    height: 100%;
}

.mySwipertesti .swiper-slide-active .t-slider-box-text{
    max-width: 100%;
    padding: 0em 2em;
    animation: animation 1s;
}
.mySwipertesti .swiper-slide-active .t-slider-box{
    width: 90%;
    margin-right: auto;
}
@keyframes animation{
    0%{
        max-width: 0%;
        padding: 0px;
    }
    30%{
        max-width: 0%;
        padding: 0px;
    }
    100%{
        max-width: 100%;
        padding: 0em 2em;
    }
}
.t-slider-box-text h6{
    font-size: 27px;
    color: #1f1f1f;
    font-weight: 500;
    overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

}
.t-slider-box-text strong{
    color: #ccab99;
    font-size: 20px;
    font-weight: 500;
}
.t-slider-box-text-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 230px;
    overflow-y: scroll;
    margin-top: 20px;
    padding-right: 15px;
}
.t-slider-box-text-container span{
    font-size: 16px;
    font-style: italic;
    color: #000000;
    margin-bottom: 10px;
}
.t-slider-box-text-container p{
    color: #313131;
    font-size: 16px;
    margin-bottom: 20px;
    letter-spacing: 0.2px;
}
.t-slider-box-text-container p:nth-child(2){
    margin-top: 10px;
}
.t-slider-box-text-container p:last-child{
    margin-bottom: 0px;
}
.t-slider-box-text-container p b{
    font-weight: 600;
}
.t-slider-box-text-flow{
    display: flex;
    flex-direction: column;
}
.slider-btns{
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: auto;
    z-index: 110;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}

.swiper-button-prev,
.swiper-button-next{
    position: static !important;
}

.swiper-button-prev{
    margin-left: -50px;
}
.swiper-button-next{
    margin-right: -50px;
}
.swiper-button-prev::after,
.swiper-button-next::after{
    color: #2b2b2b;
    text-shadow: 2px 2px 16px rgba(16, 92, 179, 0.22);
    font-size: 32px !important;
}
@media(max-width:810px){
    .mySwipertesti{
        height: 100% !important;
    }
    .t-slider-box{
        display: grid;
        grid-template-columns:1fr;
        width: 100%;
        height:100%;
    }
    .mySwipertesti .swiper-slide-active .t-slider-box{
        width: 100%;
    }

    .t-slider-box-text h6{
        font-size: 23px;
        -webkit-line-clamp: 2;
    }
    .t-slider-box-text{
        max-width: 100%;
        max-height: 100%;
    }
    .mySwipertesti .swiper-slide-active .t-slider-box-text{
        max-height: 100%;
        animation: none;
        padding: 3em 2em;
    }
    .slider-btns{
        position: static;
        transform: translate(0%, 0%);
        margin-top: 50px;
        justify-content: center;
    }
    .t-slider-box-text div{
        display: none;
        animation: fade 0.3s;
    }
    @keyframes animation{
        0%{
            max-height: 0%;
            padding: 0px;
        }
        30%{
            max-height: 0%;
            padding: 0px;
        }
        100%{
            max-height: 100%;
            padding: 3em 2em;
        }
    }
    .testimonials-heading-main h4{
        font-size: 2rem;}
    .t-heading-slider h5{
        font-size: 1.6rem;
    }
    .swiper-button-prev::after,
    .swiper-button-next::after{
        font-size: 1.5rem !important;
        font-weight: 700;
}
    
.swiper-button-prev{
    margin-left: -0px;
}
.swiper-button-next{
    margin-right: -0px;
}
}
.t-slider-box-text div{
    display: none;
    animation: fade 2s;
}
@keyframes fade{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.mySwipertesti .swiper-slide-active .t-slider-box-text div{
    display: block;
}
.swiper-slide{
    width: 100% !important;
    height: 100% !important;
    display: flex;
}




Share
Post a Comment Labels, ,

Comments


Archive

Contact Form

Send