Testimonial Style 19

#The Best

publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.

Darell Steward

Position

#The Best

Darell Steward 2

Position 2

#The Best

Darell Steward 3

Position 3

#The Best

Darell Steward 4

Position 4

#The Best

Darell Steward 5

Position 5

#The Best

Darell Steward 6

Position 6

View Source

HTML

<section class="testimonial-19">
    <div class="container">
        <div class="ts-19-carousel testimonial-card owl-carousel owl-theme">

            <!-- item 1 -->
            <div class="testimonial-wrap-outer item item-1">
                <div class="testimonial-wrap-inner">
                    <div class="testimonial-card-header">
                        <h3 class="card-header">
                            #The Best
                        </h3>
                    </div>
                    <div class="testimonial-box-content">
                        <div class="testimonial-star-box">
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-regular fa-star-half-stroke star-yellow"></i>
                        </div>
                        <div class="img-segment">
                            <img src="assets/images/apostrophe.png" alt="" class="img-fluid">
                        </div>
                        <div class="testimonial-card-content">
                            <p class="testimonial-card-desc">
                                publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
                            </p>
                        </div>
                        <div class="testimonial-19-user-name">
                            <h4 class="user-name">
                                Darell Steward
                            </h4>
                        </div>
                        <div class="testimonial-19-user-position">
                            <p class="user-position">
                                Position
                            </p>
                        </div>
                    </div>
                </div>
            </div>


            <!-- itwm 2 -->
            <div class="testimonial-wrap-outer item item-2">
                <div class="testimonial-wrap-inner">
                    <div class="testimonial-card-header">
                        <h3 class="card-header">
                            #The Best
                        </h3>
                    </div>
                    <div class="testimonial-box-content">
                        <div class="testimonial-star-box">
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                        </div>
                        <div class="img-segment">
                            <img src="assets/images/apostrophe.png" alt="" class="img-fluid">
                        </div>
                        <div class="testimonial-card-content">
                            <p class="testimonial-card-desc">
                                publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
                            </p>
                        </div>
                        <div class="testimonial-19-user-name">
                            <h4 class="user-name">
                                Darell Steward 2
                            </h4>
                        </div>
                        <div class="testimonial-19-user-position">
                            <p class="user-position">
                                Position 2
                            </p>
                        </div>
                    </div>
                </div>
            </div>


            <!-- item 3 -->
            <div class="testimonial-wrap-outer item item-3">
                <div class="testimonial-wrap-inner">
                    <div class="testimonial-card-header">
                        <h3 class="card-header">
                            #The Best
                        </h3>
                    </div>
                    <div class="testimonial-box-content">
                        <div class="testimonial-star-box">
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-regular fa-star-half-stroke star-yellow"></i>
                        </div>
                        <div class="img-segment">
                            <img src="assets/images/apostrophe.png" alt="" class="img-fluid">
                        </div>
                        <div class="testimonial-card-content">
                            <p class="testimonial-card-desc">
                                publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
                            </p>
                        </div>
                        <div class="testimonial-19-user-name">
                            <h4 class="user-name">
                                Darell Steward 3
                            </h4>
                        </div>
                        <div class="testimonial-19-user-position">
                            <p class="user-position">
                                Position 3
                            </p>
                        </div>
                    </div>
                </div>
            </div>


            <!-- item 4 -->
            <div class="testimonial-wrap-outer item item-4">
                <div class="testimonial-wrap-inner">
                    <div class="testimonial-card-header">
                        <h3 class="card-header">
                            #The Best
                        </h3>
                    </div>
                    <div class="testimonial-box-content">
                        <div class="testimonial-star-box">
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                        </div>
                        <div class="img-segment">
                            <img src="assets/images/apostrophe.png" alt="" class="img-fluid">
                        </div>
                        <div class="testimonial-card-content">
                            <p class="testimonial-card-desc">
                                publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
                            </p>
                        </div>
                        <div class="testimonial-19-user-name">
                            <h4 class="user-name">
                                Darell Steward 4
                            </h4>
                        </div>
                        <div class="testimonial-19-user-position">
                            <p class="user-position">
                                Position 4
                            </p>
                        </div>
                    </div>
                </div>
            </div>


            <!-- item 5 -->
            <div class="testimonial-wrap-outer item item-5">
                <div class="testimonial-wrap-inner">
                    <div class="testimonial-card-header">
                        <h3 class="card-header">
                            #The Best
                        </h3>
                    </div>
                    <div class="testimonial-box-content">
                        <div class="testimonial-star-box">
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-regular fa-star-half-stroke star-yellow"></i>
                        </div>
                        <div class="img-segment">
                            <img src="assets/images/apostrophe.png" alt="" class="img-fluid">
                        </div>
                        <div class="testimonial-card-content">
                            <p class="testimonial-card-desc">
                                publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
                            </p>
                        </div>
                        <div class="testimonial-19-user-name">
                            <h4 class="user-name">
                                Darell Steward 5
                            </h4>
                        </div>
                        <div class="testimonial-19-user-position">
                            <p class="user-position">
                                Position 5
                            </p>
                        </div>
                    </div>
                </div>
            </div>


            <!-- item 6 -->
            <div class="testimonial-wrap-outer item item-5">
                <div class="testimonial-wrap-inner">
                    <div class="testimonial-card-header">
                        <h3 class="card-header">
                            #The Best
                        </h3>
                    </div>
                    <div class="testimonial-box-content">
                        <div class="testimonial-star-box">
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                            <i class="fa-solid fa-star star-yellow"></i>
                        </div>
                        <div class="img-segment">
                            <img src="assets/images/apostrophe.png" alt="" class="img-fluid">
                        </div>
                        <div class="testimonial-card-content">
                            <p class="testimonial-card-desc">
                                publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
                            </p>
                        </div>
                        <div class="testimonial-19-user-name">
                            <h4 class="user-name">
                                Darell Steward 6
                            </h4>
                        </div>
                        <div class="testimonial-19-user-position">
                            <p class="user-position">
                                Position 6
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

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


.testimonial-19{
    background:#F12766;
    background-size: cover;
    height: 100vh;
}

.testimonial-card{
    display: grid;
}

.card-header{
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 38px; 
    font-family: 'Roboto';
    color: #F12766;
}

.testimonial-star-box{
    display: flex;
    margin: auto;
    justify-content: center;
    padding-top: 55px;
}

.star-yellow{
    color: #FFA800;
}

.testimonial-box-content{
    max-width: 300px;
    border-radius: 36px;
    border: 15px solid #F12766;
    background: white;
    margin-top: -35px;
}

.testimonial-card-header {
    width: fit-content;
    padding: 10px 30px;
    border: 10px solid #F12766;
    border-radius: 27px;
    margin: auto;
    position: relative;
    background: white;
}

.img-segment{
    display: flex;
    justify-content: center;
    padding-top: 30px;
}

.testimonial-card-content{
    display: flex;
    justify-content: center;
}

.testimonial-card-desc{
    text-align: center;
    font-family: 'Roboto';
    padding: 20px 0px;
    line-height: 1.6;
    width: 85%;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    color: #000000;
}

.testimonial-19-user-position{
    text-align: center;
}

.testimonial-19-user-name{
    text-align: center;
}

.testimonial-wrap-outer{
    display: flex;
    justify-content: center;
    padding-top: 90px;
}

.user-name{
    font-size: 18px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: 0em;
}

.user-position{
    font-style: italic;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    text-transform: uppercase;
    color: #171E24;
    padding-bottom: 45px;
}

.img-segment .img-fluid{
    max-width: 40px;
}

JS

jQuery(document).ready(function(){
    let ts_style_19= jQuery(".ts-19-carousel");
    ts_style_19.owlCarousel({
    loop:true,
    margin:10,
    nav:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:4
        }
    }
})

});

Links

  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">

     
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Scripts

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>