testimonial carousel with mid image zoom

I have carousel testimonial, the carousel is working with click on right left arrow and auto scroll, I would like to auto slide images and text particular testimonial person need to heading in top of image and description in bottom of image, as per image slide, heading and description should shows in middle of testimonial for each testimonial member, I have attached the image for reference, of someone have any testimonial section like this so please share with me, please help really appreciated

enter image description here

#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 60px;
}
#quote-carousel .carousel-control {
    background: none;
    color: #ffc20e;
    font-size: 1.5em;
    text-shadow: none;
    margin-top: 30px;
}
#quote-carousel .carousel-indicators {
    position: relative;
    left: 30%;
    top: auto;
    bottom: 0px;
    z-index: 0;
    width: 100%;
}
#quote-carousel .carousel-indicators li {
    width: 100px;
    height:70px;
    cursor: pointer;
    opacity: 0.4;
    overflow: hidden;
    /*transition: all .4s ease-in;
    vertical-align: middle;*/
}
#quote-carousel .carousel-indicators .active {
    width: 200px;
    height: 128px;
    opacity: 1;
    /*transition: all .4s ease-in;*/
}
.item blockquote {
    border-left: none;
    margin: 0;
    background-color: white;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}
.item blockquote p {
    font-family: "Open Sans";
    font-size: 18px;
    color:#007176;
}
.item blockquote .small, blockquote footer, blockquote small{   
    color:#007176;
    font-size:17px;
    font-weight: 600;
    padding-right: 20px;
    margin-top: 10px;
}
.testimonial-country{
    color:#ffc20e
}

.testimonial-bg{
    background: #ffecc1;
    height: 170px;
    width: 250px;
    position: absolute;
    left: 39%;
    top: 42%;
}
blockquote .small:before, blockquote footer:before, blockquote small:before{
    content:none;
}
.carousel-indicators li{
    border:0px;
}
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
                    <!-- Carousel Slides / Quotes -->
                    <div class="carousel-inner text-center">
                        <!-- Quote 1 -->
                        <div class="item active">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                                        <small>Heading | <span class="testimonial-country">Sub Heading<span></small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 2 -->
                        <div class="item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                                        <small>Heading | <span class="testimonial-country">Sub Heading<span></small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 3 -->
                        <div class="item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
                                        <small>Heading | <span class="testimonial-country">Sub Heading<span></small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <div class="item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                                        <small>Heading | <span class="testimonial-country">Sub Heading<span></small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <div class="item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                                        <small>Heading | <span class="testimonial-country">Sub Heading<span></small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                    </div>
                    <!-- Bottom Carousel Indicators -->
                    <div class="testimonial-bg"></div>
                    <ol class="carousel-indicators">
                        <li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive" src="images/testimonial/testimonial-1.jpg" alt="">
                        </li>
                        <li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="images/testimonial/testimonial-2.jpg" alt="" >
                        </li>
                        <li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="images/testimonial/testimonial-3.jpg" alt="">
                        </li>
                         <li data-target="#quote-carousel" data-slide-to="3"><img class="img-responsive" src="images/testimonial/testimonial-4.jpg" alt="">
                        </li>
                         <li data-target="#quote-carousel" data-slide-to="4"><img class="img-responsive" src="images/testimonial/testimonial-5.jpg" alt="">
                        </li>
                    </ol>

                    <!-- Carousel Buttons Next/Prev -->
                    <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
                    <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
                </div>

1 answer

  • answered 2021-09-23 07:49 MarkWriteCodes

    This can fit your needs:

    // vars
    'use strict'
    var testim = document.getElementById("testim"),
            testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),
        testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),
        testimLeftArrow = document.getElementById("left-arrow"),
        testimRightArrow = document.getElementById("right-arrow"),
        testimSpeed = 4500,
        currentSlide = 0,
        currentActive = 0,
        testimTimer,
            touchStartPos,
            touchEndPos,
            touchPosDiff,
            ignoreTouch = 30;
    ;
    
    window.onload = function() {
    
        // Testim Script
        function playSlide(slide) {
            for (var k = 0; k < testimDots.length; k++) {
                testimContent[k].classList.remove("active");
                testimContent[k].classList.remove("inactive");
                testimDots[k].classList.remove("active");
            }
    
            if (slide < 0) {
                slide = currentSlide = testimContent.length-1;
            }
    
            if (slide > testimContent.length - 1) {
                slide = currentSlide = 0;
            }
    
            if (currentActive != currentSlide) {
                testimContent[currentActive].classList.add("inactive");            
            }
            testimContent[slide].classList.add("active");
            testimDots[slide].classList.add("active");
    
            currentActive = currentSlide;
        
            clearTimeout(testimTimer);
            testimTimer = setTimeout(function() {
                playSlide(currentSlide += 1);
            }, testimSpeed)
        }
    
        testimLeftArrow.addEventListener("click", function() {
            playSlide(currentSlide -= 1);
        })
    
        testimRightArrow.addEventListener("click", function() {
            playSlide(currentSlide += 1);
        })    
    
        for (var l = 0; l < testimDots.length; l++) {
            testimDots[l].addEventListener("click", function() {
                playSlide(currentSlide = testimDots.indexOf(this));
            })
        }
    
        playSlide(currentSlide);
    
        // keyboard shortcuts
        document.addEventListener("keyup", function(e) {
            switch (e.keyCode) {
                case 37:
                    testimLeftArrow.click();
                    break;
                    
                case 39:
                    testimRightArrow.click();
                    break;
    
                case 39:
                    testimRightArrow.click();
                    break;
    
                default:
                    break;
            }
        })
            
            testim.addEventListener("touchstart", function(e) {
                    touchStartPos = e.changedTouches[0].clientX;
            })
        
            testim.addEventListener("touchend", function(e) {
                    touchEndPos = e.changedTouches[0].clientX;
                
                    touchPosDiff = touchStartPos - touchEndPos;
                
                    console.log(touchPosDiff);
                    console.log(touchStartPos); 
                    console.log(touchEndPos);   
    
                
                    if (touchPosDiff > 0 + ignoreTouch) {
                            testimLeftArrow.click();
                    } else if (touchPosDiff < 0 - ignoreTouch) {
                            testimRightArrow.click();
                    } else {
                        return;
                    }
                
            })
    }
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
    *,
    *:after,
    *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        -moz-user-select: none;
        user-select: none;
        cursor: default;
    }
    
    html {
        width: 100%;
        height: auto;
    }
    
    body {
      font-family: 'Montserrat', sans-serif!important;
        width: 100%;
        height: auto;
        font-size: 14px;
    /*     font-family: Dubai-Light; */
            background: #fff;
      overflow:hidden;
    }
    .testim {
            width: 100%;
            position: absolute;
            top: 50%;
            -webkit-transform: translatey(-50%);
            -moz-transform: translatey(-50%);
            -ms-transform: translatey(-50%);
            -o-transform: translatey(-50%);
            transform: translatey(-50%);
    }
    
    .testim .wrap {
        position: relative;
        width: 100%;
        max-width: 1020px;
        padding: 40px 20px;
        margin: auto;
    }
    
    .testim .arrow {
        display: block;
        position: absolute;
        color: #333;
        cursor: pointer;
        font-size: 2em;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        -webkit-transition: all .3s ease-in-out;    
        -ms-transition: all .3s ease-in-out;    
        -moz-transition: all .3s ease-in-out;    
        -o-transition: all .3s ease-in-out;    
        transition: all .3s ease-in-out;
        padding: 5px;
        z-index: 22222222;
    }
    
    .testim .arrow:before {
            cursor: pointer;
    }
    
    .testim .arrow:hover {
        color: green;
    }
        
    
    .testim .arrow.left {
        left: 70px;
    }
    
    .testim .arrow.right {
        right: 70px;
    }
    
    .testim .dots {
        text-align: center;
        position: absolute;
        width: 100%;
        bottom: 60px;
        left: 0;
        display: block;
        z-index: 3333;
            height: 12px;
    }
    
    .testim .dots .dot {
        list-style-type: none;
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 1px solid green;
        margin: 0 10px;
        cursor: pointer;
        -webkit-transition: all .5s ease-in-out;    
        -ms-transition: all .5s ease-in-out;    
        -moz-transition: all .5s ease-in-out;    
        -o-transition: all .5s ease-in-out;    
        transition: all .5s ease-in-out;
            position: relative;
    }
    
    .testim .dots .dot.active,
    .testim .dots .dot:hover {
        background: green;
        border-color: green;
    }
    
    .testim .dots .dot.active {
        -webkit-animation: testim-scale .5s ease-in-out forwards;   
        -moz-animation: testim-scale .5s ease-in-out forwards;   
        -ms-animation: testim-scale .5s ease-in-out forwards;   
        -o-animation: testim-scale .5s ease-in-out forwards;   
        animation: testim-scale .5s ease-in-out forwards;   
    }
        
    .testim .cont {
        position: relative;
            overflow: hidden;
    }
    
    .testim .cont > div {
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 0 70px 0;
        opacity: 0;
    }
    
    .testim .cont > div.inactive {
        opacity: 1;
    }
        
    
    .testim .cont > div.active {
        position: relative;
        opacity: 1;
    }
        
    
    .testim .cont div .img img {
        display: block;
        width: 100px;
        height: 100px;
        margin: auto;
        border-radius: 50%;
    }
    
    .testim .cont div h2 {
        color: green;
        font-size: 1em;
        margin: 15px 0;
    }
    
    .testim .cont div p {
        font-size: 1.15em;
        color: #333;
        width: 70%;
        margin: auto;
    }
    
    .testim .cont div.active .img img {
        -webkit-animation: testim-show .5s ease-in-out forwards;            
        -moz-animation: testim-show .5s ease-in-out forwards;            
        -ms-animation: testim-show .5s ease-in-out forwards;            
        -o-animation: testim-show .5s ease-in-out forwards;            
        animation: testim-show .5s ease-in-out forwards;            
    }
    
    .testim .cont div.active h2 {
        -webkit-animation: testim-content-in .4s ease-in-out forwards;    
        -moz-animation: testim-content-in .4s ease-in-out forwards;    
        -ms-animation: testim-content-in .4s ease-in-out forwards;    
        -o-animation: testim-content-in .4s ease-in-out forwards;    
        animation: testim-content-in .4s ease-in-out forwards;    
    }
    
    .testim .cont div.active p {
        -webkit-animation: testim-content-in .5s ease-in-out forwards;    
        -moz-animation: testim-content-in .5s ease-in-out forwards;    
        -ms-animation: testim-content-in .5s ease-in-out forwards;    
        -o-animation: testim-content-in .5s ease-in-out forwards;    
        animation: testim-content-in .5s ease-in-out forwards;    
    }
    
    .testim .cont div.inactive .img img {
        -webkit-animation: testim-hide .5s ease-in-out forwards;            
        -moz-animation: testim-hide .5s ease-in-out forwards;            
        -ms-animation: testim-hide .5s ease-in-out forwards;            
        -o-animation: testim-hide .5s ease-in-out forwards;            
        animation: testim-hide .5s ease-in-out forwards;            
    }
    
    .testim .cont div.inactive h2 {
        -webkit-animation: testim-content-out .4s ease-in-out forwards;        
        -moz-animation: testim-content-out .4s ease-in-out forwards;        
        -ms-animation: testim-content-out .4s ease-in-out forwards;        
        -o-animation: testim-content-out .4s ease-in-out forwards;        
        animation: testim-content-out .4s ease-in-out forwards;        
    }
    
    .testim .cont div.inactive p {
        -webkit-animation: testim-content-out .5s ease-in-out forwards;    
        -moz-animation: testim-content-out .5s ease-in-out forwards;    
        -ms-animation: testim-content-out .5s ease-in-out forwards;    
        -o-animation: testim-content-out .5s ease-in-out forwards;    
        animation: testim-content-out .5s ease-in-out forwards;    
    }
    
    @-webkit-keyframes testim-scale {
        0% {
            -webkit-box-shadow: 0px 0px 0px 0px #eee;
            box-shadow: 0px 0px 0px 0px #eee;
        }
    
        35% {
            -webkit-box-shadow: 0px 0px 10px 5px #eee;        
            box-shadow: 0px 0px 10px 5px #eee;        
        }
    
        70% {
            -webkit-box-shadow: 0px 0px 10px 5px #ea830e;        
            box-shadow: 0px 0px 10px 5px #ea830e;        
        }
    
        100% {
            -webkit-box-shadow: 0px 0px 0px 0px #ea830e;        
            box-shadow: 0px 0px 0px 0px #ea830e;        
        }
    }
    
    @-moz-keyframes testim-scale {
        0% {
            -moz-box-shadow: 0px 0px 0px 0px #eee;
            box-shadow: 0px 0px 0px 0px #eee;
        }
    
        35% {
            -moz-box-shadow: 0px 0px 10px 5px #eee;        
            box-shadow: 0px 0px 10px 5px #eee;        
        }
    
        70% {
            -moz-box-shadow: 0px 0px 10px 5px #ea830e;        
            box-shadow: 0px 0px 10px 5px #ea830e;        
        }
    
        100% {
            -moz-box-shadow: 0px 0px 0px 0px #ea830e;        
            box-shadow: 0px 0px 0px 0px #ea830e;        
        }
    }
    
    @-ms-keyframes testim-scale {
        0% {
            -ms-box-shadow: 0px 0px 0px 0px #eee;
            box-shadow: 0px 0px 0px 0px #eee;
        }
    
        35% {
            -ms-box-shadow: 0px 0px 10px 5px #eee;        
            box-shadow: 0px 0px 10px 5px #eee;        
        }
    
        70% {
            -ms-box-shadow: 0px 0px 10px 5px #ea830e;        
            box-shadow: 0px 0px 10px 5px #ea830e;        
        }
    
        100% {
            -ms-box-shadow: 0px 0px 0px 0px #ea830e;        
            box-shadow: 0px 0px 0px 0px #ea830e;        
        }
    }
    
    @-o-keyframes testim-scale {
        0% {
            -o-box-shadow: 0px 0px 0px 0px #eee;
            box-shadow: 0px 0px 0px 0px #eee;
        }
    
        35% {
            -o-box-shadow: 0px 0px 10px 5px #eee;        
            box-shadow: 0px 0px 10px 5px #eee;        
        }
    
        70% {
            -o-box-shadow: 0px 0px 10px 5px #ea830e;        
            box-shadow: 0px 0px 10px 5px #ea830e;        
        }
    
        100% {
            -o-box-shadow: 0px 0px 0px 0px #ea830e;        
            box-shadow: 0px 0px 0px 0px #ea830e;        
        }
    }
    
    @keyframes testim-scale {
        0% {
            box-shadow: 0px 0px 0px 0px #eee;
        }
    
        35% {
            box-shadow: 0px 0px 10px 5px #eee;        
        }
    
        70% {
            box-shadow: 0px 0px 10px 5px #ea830e;        
        }
    
        100% {
            box-shadow: 0px 0px 0px 0px #ea830e;        
        }
    }
    
    @-webkit-keyframes testim-content-in {
        from {
            opacity: 0;
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
        }
        
        to {
            opacity: 1;
            -webkit-transform: translateY(0);        
            transform: translateY(0);        
        }
    }
    
    @-moz-keyframes testim-content-in {
        from {
            opacity: 0;
            -moz-transform: translateY(100%);
            transform: translateY(100%);
        }
        
        to {
            opacity: 1;
            -moz-transform: translateY(0);        
            transform: translateY(0);        
        }
    }
    
    @-ms-keyframes testim-content-in {
        from {
            opacity: 0;
            -ms-transform: translateY(100%);
            transform: translateY(100%);
        }
        
        to {
            opacity: 1;
            -ms-transform: translateY(0);        
            transform: translateY(0);        
        }
    }
    
    @-o-keyframes testim-content-in {
        from {
            opacity: 0;
            -o-transform: translateY(100%);
            transform: translateY(100%);
        }
        
        to {
            opacity: 1;
            -o-transform: translateY(0);        
            transform: translateY(0);        
        }
    }
    
    @keyframes testim-content-in {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        
        to {
            opacity: 1;
            transform: translateY(0);        
        }
    }
    
    @-webkit-keyframes testim-content-out {
        from {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
        
        to {
            opacity: 0;
            -webkit-transform: translateY(-100%);        
            transform: translateY(-100%);        
        }
    }
    
    @-moz-keyframes testim-content-out {
        from {
            opacity: 1;
            -moz-transform: translateY(0);
            transform: translateY(0);
        }
        
        to {
            opacity: 0;
            -moz-transform: translateY(-100%);        
            transform: translateY(-100%);        
        }
    }
    
    @-ms-keyframes testim-content-out {
        from {
            opacity: 1;
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
        
        to {
            opacity: 0;
            -ms-transform: translateY(-100%);        
            transform: translateY(-100%);        
        }
    }
    
    @-o-keyframes testim-content-out {
        from {
            opacity: 1;
            -o-transform: translateY(0);
            transform: translateY(0);
        }
        
        to {
            opacity: 0;
            transform: translateY(-100%);        
            transform: translateY(-100%);        
        }
    }
    
    @keyframes testim-content-out {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        
        to {
            opacity: 0;
            transform: translateY(-100%);        
        }
    }
    
    @-webkit-keyframes testim-show {
        from {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        
        to {
            opacity: 1;
            -webkit-transform: scale(1);       
            transform: scale(1);       
        }
    }
    
    @-moz-keyframes testim-show {
        from {
            opacity: 0;
            -moz-transform: scale(0);
            transform: scale(0);
        }
        
        to {
            opacity: 1;
            -moz-transform: scale(1);       
            transform: scale(1);       
        }
    }
    
    @-ms-keyframes testim-show {
        from {
            opacity: 0;
            -ms-transform: scale(0);
            transform: scale(0);
        }
        
        to {
            opacity: 1;
            -ms-transform: scale(1);       
            transform: scale(1);       
        }
    }
    
    @-o-keyframes testim-show {
        from {
            opacity: 0;
            -o-transform: scale(0);
            transform: scale(0);
        }
        
        to {
            opacity: 1;
            -o-transform: scale(1);       
            transform: scale(1);       
        }
    }
    
    @keyframes testim-show {
        from {
            opacity: 0;
            transform: scale(0);
        }
        
        to {
            opacity: 1;
            transform: scale(1);       
        }
    }
    
    @-webkit-keyframes testim-hide {
        from {
            opacity: 1;
            -webkit-transform: scale(1);       
            transform: scale(1);       
        }
        
        to {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }
    }
    
    @-moz-keyframes testim-hide {
        from {
            opacity: 1;
            -moz-transform: scale(1);       
            transform: scale(1);       
        }
        
        to {
            opacity: 0;
            -moz-transform: scale(0);
            transform: scale(0);
        }
    }
    
    @-ms-keyframes testim-hide {
        from {
            opacity: 1;
            -ms-transform: scale(1);       
            transform: scale(1);       
        }
        
        to {
            opacity: 0;
            -ms-transform: scale(0);
            transform: scale(0);
        }
    }
    
    @-o-keyframes testim-hide {
        from {
            opacity: 1;
            -o-transform: scale(1);       
            transform: scale(1);       
        }
        
        to {
            opacity: 0;
            -o-transform: scale(0);
            transform: scale(0);
        }
    }
    
    @keyframes testim-hide {
        from {
            opacity: 1;
            transform: scale(1);       
        }
        
        to {
            opacity: 0;
            transform: scale(0);
        }
    }
    
    @media all and (max-width: 300px) {
        body {
            font-size: 14px;
        }
    }
    
    @media all and (max-width: 500px) {
        .testim .arrow {
            font-size: 1.5em;
        }
        
        .testim .cont div p {
            line-height: 25px;
        }
    
    }
    <div class="container">
    <section id="testim" class="testim">
             <div class="testim-cover">
                <div class="wrap">
    
                    <span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
                    <span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
                    <ul id="testim-dots" class="dots">
                        <li class="dot active"></li><!--
                        --><li class="dot"></li><!--
                        --><li class="dot"></li><!--
                        --><li class="dot"></li><!--
                        --><li class="dot"></li>
                    </ul>
                    <div id="testim-content" class="cont">
                        
                        <div class="active">
                            <div class="img"><img src="https://in.bmscdn.com/iedb/artist/images/website/poster/large/kartik-aaryan-1045198-08-12-2017-06-34-11.jpg" alt=""></div>
                            <h2>Lorem P. Ipsum</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>                    
                        </div>
    
                        <div>
                            <div class="img"><img src="https://timesofindia.indiatimes.com/thumb/msid-75752690,width-800,height-600,resizemode-4/75752690.jpg" alt=""></div>
                            <h2>Mr. Lorem Ipsum</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>                    
                        </div>
    
                        <div>
                            <div class="img"><img src="https://p16.muscdn.com/img/musically-maliva-obj/1627333501517830~c5_720x720.jpeg" alt=""></div>
                            <h2>Lorem Ipsum</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>                    
                        </div>
    
                        <div>
                            <div class="img"><img src="https://p16-sg-default.akamaized.net/aweme/1080x1080/tiktok-obj/1666413671597057.jpeg" alt=""></div>
                            <h2>Lorem De Ipsum</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>                    
                        </div>
    
                        <div>
                            <div class="img"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSKLJe1Lrz2N3ufVSwQokSJ79jGBbIptXuVnsdxMmNUlE14ohwp&usqp=CAU" alt=""></div>
                            <h2>Ms. Lorem R. Ipsum</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>                    
                        </div>
    
                    </div>
    
                </div>
             </div>
        </section>
    </div>
    <script src="https://use.fontawesome.com/1744f3f671.js"></script>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum