Testimonial layout

#AWESOME

Quotation marks are punctuation marks used in pairs in various writing systems to set off direct speech, a quotation, or a phrase. The pair consists of an opening.

KATHRYN MURPHY

POSITION

#FINE

Quotation marks are punctuation marks used in pairs in various writing systems to set off direct speech, a quotation, or a phrase. The pair consists of an opening.

CALAB SOPHIA

POSITION

#WASGOOD

Quotation marks are punctuation marks used in pairs in various writing systems to set off direct speech, a quotation, or a phrase. The pair consists of an opening.

EMILY GRACE

POSITION

#BETTER

Quotation marks are punctuation marks used in pairs in various writing systems to set off direct speech, a quotation, or a phrase. The pair consists of an opening.

JOSHUA BENJAMIN

POSITION

HTML/CSS/JS

HTML

<head>
    <!-- font awosome  -->
    <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" />
    <!-- google fonts  -->
    <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=Baloo+Thambi+2&family=Inter:wght@700&display=swap"
        rel="stylesheet">
    <!-- owl carousel css  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
        integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
        integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- css  -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>


<body>
<section class="section">
    <div class="ts-main ts-flex">
        <div class="left">
            <div class="wrapper">
                <div class="ts-owl-descr owl-carousel owl-theme owlCarousel" id="owl1">
                    <div class="item">
                        <div class="content">
                            <h3>#AWESOME</h3>
                            <p class="descr">
                                Quotation marks are punctuation marks used in pairs in various writing systems to set off
                                direct speech, a quotation, or a phrase. The pair consists of an opening.
                            </p>
                            <p>KATHRYN <span>MURPHY</span></p>
                            <p>POSITION</p>
                            <div class="rating">
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-regular fa-star-half-stroke"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="content">
                            <h3>#FINE</h3>
                            <p class="descr">
                                Quotation marks are punctuation marks used in pairs in various writing systems to set off
                                direct speech, a quotation, or a phrase. The pair consists of an opening.
                            </p>
                            <p>CALAB <span>SOPHIA</span></p>
                            <p>POSITION</p>
                            <div class="rating">
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-regular fa-star-half-stroke"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="content">
                            <h3>#WASGOOD</h3>
                            <p class="descr">
                                Quotation marks are punctuation marks used in pairs in various writing systems to set off
                                direct speech, a quotation, or a phrase. The pair consists of an opening.
                            </p>
                            <p>EMILY <span>GRACE</span></p>
                            <p>POSITION</p>
                            <div class="rating">
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-regular fa-star-half-stroke"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="content">
                            <h3>#BETTER</h3>
                            <p class="descr">
                                Quotation marks are punctuation marks used in pairs in various writing systems to set off
                                direct speech, a quotation, or a phrase. The pair consists of an opening.
                            </p>
                            <p>JOSHUA <span>BENJAMIN</span></p>
                            <p>POSITION</p>
                            <div class="rating">
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-solid fa-star"></i></a>
                                <a href="#"><i class="fa-regular fa-star-half-stroke"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ts-owl-profile owl-carousel owl-theme owlCarousel" id="owl2">
                    <div class="item"><div class="img-box"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/profile-1.png" alt="KATHRYN MURPHY"></div></div>
                    <div class="item"><div class="img-box"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/profile-2.png" alt="CALAB SOPHIA"></div></div>
                    <div class="item"><div class="img-box"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/profile-3.png" alt="EMILY GRACE"></div></div>
                    <div class="item"><div class="img-box"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/profile-4.png" alt="JOSHUA BENJAMIN"></div></div>
                </div>
            </div>
        </div>
        <div class="right">
          <div class="grid-box">
            <div class="grid-img"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/logo1.png" alt=""></div>
            <div class="grid-img"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/logo2.png" alt=""></div>
            <div class="grid-img"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/logo3.png" alt=""></div>
            <div class="grid-img"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/logo4.png" alt=""></div>
            <div class="grid-img"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/logo5.png" alt=""></div>
            <div class="grid-img"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/logo6.png" alt=""></div>
            <div class="grid-img"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/logo1.png" alt=""></div>
            <div class="grid-img"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/logo2.png" alt=""></div>
            <div class="grid-img"><img src="https://nuitwebtek.com/wp-content/uploads/2023/07/logo3.png" alt=""></div>
          </div>
        </div>
    </div>
</section>

<!-- jquery js  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
    integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- owl carousel js  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
    integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- js  -->
<script src="assets/js/min.js"></script>
</body>
</html>

CSS

/* global css  */
.ts-flex {
    display: flex;
}
/* end  */

.section {
    height: 85vh;
    display: flex;
    background: #C0C3D3;
    max-width: 1440px;
}
.ts-main {
    width: 100%;
    justify-content: center;
    gap: 20px;
    align-items: center;
}
.left,
.right {
    width: 40%;
}
.wrapper {
    background: #F5F4F9;
    border-radius: 30px;
    padding-block: 25px;
}
.content {
    font-family: 'Baloo Thambi 2', cursive;
    text-align: center;
    max-width: 70%;
    margin-inline: auto;
    margin-bottom: 30px;
}
.content:nth-child(1)>h3 {
    font-family: inherit;
    font-size: 40px;
    font-weight: 600;
    color: #3468DB;
    margin-block: 10px;
}
.content p:nth-child(2) {
    font-family: inherit;
    font-weight: 400;
    font-size: 19px;
    color: #00091E;
    line-height: 28px;
}
.content p:nth-child(3) {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 25px;
    color: #171E24;
    margin-block: 0;
}
.content p>span {
    color: #3468DB;
}
.content p:nth-child(4) {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #171E24;
    margin-block: 6px;
}
.content .rating i {
    color: #FFA800;
    font-size: 15px;
}
.ts-owl-profile .owl-stage {
    display: flex;
    align-items: center;
}
.ts-owl-profile .item {
    display: flex;
    justify-content: center;
    cursor: pointer;
}
.img-box {
    min-width: 65px;
}
.img-box img {
    height: auto;
    margin-inline: auto;
}
.center .img-box {
    border: 5px solid #3468DB;
    border-radius: 50%;
    padding: 3px;
    transition: .55s;
}
.img-box {
    border: 5px solid transparent;
    border-radius: 50%;
    padding: 3px;
}
.owl-nav{
    display: flex;
    justify-content: space-around;
}
.ts-owl-profile.owl-carousel .owl-dots.disabled,
.ts-owl-profile.owl-carousel .owl-nav.disabled{
    display: block;
}
.owl-theme .owl-nav [class*=owl-]:hover{
    background-color: transparent;
}
.right .grid-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    background: #FFEDED;
    padding: 10px;
}
.grid-img img{
   /* max-width: 150px; */
    width: 100%;
}



/* media start  */
@media (min-width: 768px) and (max-width: 1024px){
    .section {
        height: 100%;
        padding-block: 8px;
        padding-inline: 10px;
    }

    .ts-main {
        flex-direction: column;
    }
    .left,
    .right {
        width: 100%;
    }

}

@media only screen and (max-width:767px) {
    .section {
        height: 100%;
        padding-block: 8px;
        padding-inline: 10px;

    }
    .ts-main {
        flex-direction: column;
    }
    .left,
    .right {
        width: 100%;
    }

    .right .grid-box {
        grid-template-columns: 1fr 1fr;
    }
}

/* media end  */

JAVASCRIPT

jQuery(document).ready(function () {

        let gallery = jQuery("#owl1");
        let gallery_thumb = jQuery("#owl2");
        let slidesPerPage = 6; //globaly define number of elements per page
        let syncedSecondary = true;

        gallery.owlCarousel({
            loop: true,
            margin: 10,
            nav: false,
            dots: false,
            center: false,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 1,
                },
                600: {
                    items: 1,
                },
                1000: {
                    items: 1
                }
            }
        })
        .on('changed.owl.carousel', syncPosition);

        gallery_thumb
            .on('initialized.owl.carousel', function () {
                gallery_thumb.find(".owl-item").eq(0).addClass("current");
            })
            .owlCarousel({
                loop: false,
                nav: true,
                navText: ['<img src="https://nuitwebtek.com/wp-content/uploads/2023/07/nav-prev.png">', '<img src="https://nuitwebtek.com/wp-content/uploads/2023/07/nav-next.png">'],
                dots: true,
                center: true,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 3,
                        nav: true,
                    },
                    600: {
                        items: 5,
                    },
                    1000: {
                        items: 3
                    }
                }
             })
             .on('changed.owl.carousel', syncPosition2);

        function syncPosition(el) {
            //if you set loop to false, you have to restore this next line
            //var current = el.item.index;

            //if you disable loop you have to comment this block
            var count = el.item.count - 1;
            var current = Math.round(el.item.index - (el.item.count / 2) - .5);

            if (current < 0) {
                current = count;
            }
            if (current > count) {
                current = 0;
            }

            //end block

            gallery_thumb
                .find(".owl-item")
                .removeClass("current")
                .eq(current)
                .addClass("current");
            var onscreen = gallery_thumb.find('.owl-item.active').length - 1;
            var start = gallery_thumb.find('.owl-item.active').first().index();
            var end = gallery_thumb.find('.owl-item.active').last().index();

            if (current > end) {
                gallery_thumb.data('owl.carousel').to(current, 100, true);
            }
            if (current < start) {
                gallery_thumb.data('owl.carousel').to(current - onscreen, 100, true);
            }
        }

        function syncPosition2(el) {
            if (syncedSecondary) {
                var number = el.item.index;
                gallery.data('owl.carousel').to(number, 100, true);
            }
        }

        gallery_thumb.on("click", ".owl-item", function (e) {
            e.preventDefault();
            var number = jQuery(this).index();
            gallery.data('owl.carousel').to(number, 300, true);
        });
    });

Testimonial layout

Team Slider Style 1

Testimonial layout-2

#AWESOME

#FINE

#WASGOOD

#BETTER

HTML/CSS/JS

Paul Baretto

Related posts

Hamburgers Nav Menu

Website Footer Layout 1

FAQ Template 1

Leave a Reply Cancel reply