Testimonial layout-2

Testimonail 08

TESTIMONIALS

JOHN DEO
POSITION

It was great!!

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. n 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 .

It was great!!

publishing rrrrrrrand 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. n 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 .

It was great!!

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. n 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 .

It was great!!

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. n 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 .

HTML/CSS/JS

HTML

<body>


    <section class="sect">
        <div class="main-box">
            <h4>TESTIMONIALS</h4>
            <div class="flex-box ts-flex">
                <div class="box1">
                    <div class="owl-box1 owl-carousel owl-theme owl-btn-box ts-grid">
                        <div class="item">
                            <a class="ts-btn" href="#0">
                                <div class="Hv-border ts-ai-center ts-flex ts-jus-sp-evenly">
                                    <div class="img-div">
                                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/07/img1.png" alt="">
                                    </div>
                                    <div class="ts-grid ts-ai-center">
                                        <p>JOHN<span> DEO</span><br><span class="position">POSITION</span></p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- owl btn end -->
                        <div class="item">
                            <a class="ts-btn" href="#1">
                                <div class="Hv-border ts-ai-center  ts-flex ts-jus-sp-evenly">
                                    <div class="img-div">
                                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/07/img2.png" alt="">
                                    </div>
                                    <div class="ts-grid ts-ai-center">
                                        <p>JOHN<span> DEO</span><br><span class="position">POSITION</span></p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- owl btn end -->
                        <div class="item">
                            <a class="ts-btn" href="#2">
                                <div class="Hv-border ts-ai-center ts-flex ts-jus-sp-evenly">
                                    <div class="img-div">
                                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/07/img3.png" alt="">
                                    </div>
                                    <div class="ts-grid ts-ai-center">
                                        <p>JOHN<span> DEO</span><br><span class="position">POSITION</span></p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- owl btn end -->
                        <div class="item">
                            <a class="ts-btn" href="#3">
                                <div class="Hv-border ts-ai-center ts-flex ts-jus-sp-evenly">
                                    <div class="img-div">
                                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/07/img4.png" alt="">
                                    </div>
                                    <div class="ts-grid ts-ai-center">
                                        <p>JOHN<span> DEO</span><br><span class="position">POSITION</span></p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!-- owl btn end -->
                    </div>
                </div>
                <div class="box2">
                    <div class="bg-trans">
                        <div class="owl-box2 owl-carousel owl-theme">
                            <div class="item" data-hash="0">
                                <div class="content-box">
                                    <h5>It was great!!</h5>
                                    <div class="rating">
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star-half-stroke"></i>
                                    </div>
                                    <p>
                                        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. n
                                        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 .
                                    </p>
                                </div>
                            </div>
                            <div class="item" data-hash="1">
                                <div class="content-box">
                                    <h5>It was great!!</h5>
                                    <div class="rating">
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star-half-stroke"></i>
                                    </div>
                                    <p>
                                        publishing rrrrrrrand 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. n
                                        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 .
                                    </p>
                                </div>
                            </div>
                            <div class="item" data-hash="2">
                                <div class="content-box">
                                    <h5>It was great!!</h5>
                                    <div class="rating">
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star-half-stroke"></i>
                                    </div>
                                    <p>
                                        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. n
                                        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 .
                                    </p>
                                </div>
                            </div>
                            <div class="item" data-hash="3">
                                <div class="content-box">
                                    <h5>It was great!!</h5>
                                    <div class="rating">
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star-half-stroke"></i>
                                    </div>
                                    <p>
                                        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. n
                                        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 .
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- jquery  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.js"></script>

    <!-- owl js  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>



    <script src="assets/js/min.js"></script>


</body>

CSS


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

.ts-grid {
    display: grid;
}

.ts-ai-center {
    align-items: center;
}

.ts-jus-sp-evenly {
    justify-content: space-evenly;
}

/* globle css end  */




.main-box {
    padding-inline: 40px;
}

.main-box h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    margin: 0;
    padding-block: 20px;
    color: #000;
    font-size: 40px;
}

.box1 {
    width: 40%;
    position: relative;
}

.owl-box1 {
    transform: rotate(90deg);
    width: 100%;
    height: 500px;
    margin-top: 0;
    position: relative;
}

.owl-box1 .owl-stage-outer {
    overflow-y: hidden;
    height: 500px;
    display: grid;
    align-items: end;
}

.box1 .owl-stage {
    padding-bottom: 45px;
}

.box1 .owl-item {
    z-index: 1;
    transform: rotate(-90deg);
    float: left;
}

.owl-btn-box .ts-btn {
    display: inline-block;
    width: 240px;
    padding-block: 5px;
    text-decoration: none;
}

.owl-btn-box {
    gap: 20px;
}

.Hv-border {
    position: relative;
    transition: 1.2s;
}

.Hv-border:hover,
.ts-btn-Active .Hv-border {
    scale: 1.1;
}

.Hv-border:hover::before,
.ts-btn-Active .Hv-border::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border: 2px solid #ffd600;
    left: 55px;
    border-radius: 20px;
    z-index: -1;
}

.owl-btn-box button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.box1 p {
    color: #171E24;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.box1 p span {
    color: #F69626;
}

.box1 p .position {
    color: #171E24;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}


/* next/prev btn css start */
.owl-box1 .owl-nav {
    position: absolute;
    margin: 0;
    width: 100%;
    transition: 2s;
    top: 70px;
    display: flex;
    justify-content: space-between;
}

.owl-box1 .owl-nav [class*=owl-] {
    background-color: transparent;
    color: transparent;
    width: 0;
    height: 0;
}

.owl-box1 .owl-nav [class*=owl-]:hover {
    background-color: transparent;
    color: transparent;
}

.owl-box1 .owl-nav .owl-prev::before {
    position: absolute;
    content: '';
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/07/prev.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    left: 25%;
    bottom: 0;
    transition: 1.2s;
}

.owl-box1 .owl-nav .owl-next::before {
    position: absolute;
    content: '';
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/07/prev.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    right: 25%;
    bottom: 0;
    transition: 1.2s;
}

.owl-box1 .owl-nav .owl-prev:hover::before,
.owl-box1 .owl-nav .owl-next:hover:before {
    scale: 1.1;
    filter: brightness(0.7);
}

/* next/prev btn css end */


.box2 {
    width: 60%;
}

.flex-box {
    padding-top: 50px;
}

.flex-box .bg-trans {
    box-shadow: 6px -3px 9px rgba(0, 0, 0, 0.12);
    padding: 40px 50px 50px 30px;
    position: relative;
    background-color: transparent;
}

.flex-box .bg-trans::after {
    position: absolute;
    content: '';
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/07/after.png);
    top: -50px;
    right: -40px;
    background-repeat: no-repeat;
    background-size: contain;
    width: 124px;
    height: 124px;
    z-index: -1;
}

.owl-box2 .owl-item {
    padding-block: 20px;
}

.flex-box .content-box {
    position: relative;
    padding-inline: 20px;
}

.flex-box .content-box p::after {
    position: absolute;
    content: '';
    background-color: #FFD600;
    width: 83px;
    height: 14px;
    bottom: -40px;
    left: 20px;
    border-radius: 4px;
}

.content-box h5 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
}

.content-box .rating {
    font-size: 15px;
    color: #FFA800;
}

.content-box p {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
}




/* ======== media query start =======  */

@media (max-width: 767px) {
    .ts-flex {
        flex-direction: column;
    }

    .box1 {
        width: 100%;
    }

    .owl-box1 {
        transform: rotate(0deg);
        height: initial;
    }

    .owl-box1 .owl-stage-outer {
        height: initial;
        align-items: center;
    }

    .owl-box1 .owl-item {
        transform: rotate(0deg);
        display: flex;
        justify-content: center;
    }

    .owl-box1 .owl-prev,
    .owl-box1 .owl-next {
        position: relative;
    }

    .owl-box1 .owl-nav .owl-prev::before {
        width: 25px;
        height: 25px;
        left: 0;
        top: 0;
    }

    .Hv-border:hover::before,
    .ts-btn-Active .Hv-border::before {
        display: none;
    }

    .owl-box1 .owl-nav .owl-next::before {
        width: 25px;
        height: 25px;
        right: 0;
        top: 0;
    }







    .box2 {
        width: 100%;
    }

    .flex-box .bg-trans {
        padding: 0 30px 40px 30px;
    }

    .flex-box .bg-trans::after {
        top: -47px;
        right: -25px;
        width: 90px;
        height: 90px;
        background-size: contain;
    }
}

/* ============ media query end ==========*/

JAVASCRIPT

jQuery(document).ready(function () {

     $(document).ready(function () {
    jQuery('.ts-btn').on('click', function() {
        jQuery('.ts-btn').removeClass('ts-btn-Active');
        jQuery(this).addClass('ts-btn-Active');
    })

});


var owl_one = jQuery(".owl-box1");
owl_one.owlCarousel({
    nav: true,
    dots: false,
   
    loop: true,
    autoplayTimeout: 1000,
    rewind: true,
    margin: 0,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
        },
        600:{
            items:3,
        },
        1000:{
            items:3,
        }
    },
    center:true,
    autoplayHoverPause: true

});

var owl_two = jQuery(".owl-box2");
owl_two.owlCarousel({
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
        },
        600:{
            items:1,
        },
        1000:{
            items:1,
        }
    },
    center:true,
    loop: true,
    center: true,
    margin: 10,
    URLhashListener: true,
    autoplayHoverPause: true,
    startPosition: 'URLHash',
    smartSpeed: 450,
    animateOut: 'slideOutUp',
    animateIn: 'slideInUp'
});

CDNs


<!-- 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 font -->
    <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=Inter:wght@700&display=swap" rel="stylesheet">
    <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=Inter&display=swap" rel="stylesheet">

    <!-- owl carousel css  -->
    <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.theme.default.min.css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" />



    <!-- jquery  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.js"></script>

    <!-- owl js  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

    <!-- jquery  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.js"></script>

    <!-- owl js  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

Testimonial layout-2

Testimonial layout

Service Section Sample 4

TESTIMONIALS

It was great!!

It was great!!

It was great!!

It was great!!

HTML/CSS/JS

Paul Baretto

Related posts

Team Slider Style 4

Map SVG Animation

On Click Flip Effect

Leave a Reply Cancel reply