testimonial

In this example below you will see how to do a testimonial with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by piyush0966, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright piyush0966 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>testimonial</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="testimonial-slider" class="owl-carousel">
                    <div class="testimonial">
                        <div class="pic">
                            <img src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="">
                        </div>
                        <div class="testimonial-content">
                            <h3 class="title">Williamson</h3>
                            <span class="post">web developer</span>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dolor nibh, semper at pretium vitae, tincidunt non risus. Aenean mattis sit amet ex nec venenatis. Pellentesque tempus pellentesque efficitur. Nulla commodo bibendum quam, at imperdiet orci congue non. Maecenas interdum.
                            </p>
                        </div>
                    </div>
                    <div class="testimonial">
                        <div class="pic">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Golde33443.jpg" alt="">
                        </div>
                        <div class="testimonial-content">
                            <h3 class="title">kristina</h3>
                            <span class="post">Web Designer</span>
                            <p class="description">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dolor nibh, semper at pretium vitae, tincidunt non risus. Aenean mattis sit amet ex nec venenatis. Pellentesque tempus pellentesque efficitur. Nulla commodo bibendum quam, at imperdiet orci congue non. Maecenas interdum.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/piyush0966/testimonial-Eowrdq */
.demo{ background: #6c6a6a; }

.testimonial .pic{
    display: inline-block;
    width: 23%;
    float: left;
    margin-right: 5%;
}
.testimonial .pic img{
    width: 300px;
    height: 300px;
    border-radius: 50%;
}
.testimonial .testimonial-content{
    width: 70%;
    float: right;
}
.testimonial .title{
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0;
    text-transform: uppercase;
    padding-top: 65px;
    padding-left: 15px;
}
.testimonial .post{
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 27px;
    color: #000;
    text-transform: capitalize;
    margin-bottom: 25px;
    padding-left: 15px;
}
.testimonial .description{
    font-size: 16px;
    color: #000;
    padding: 0 15px;
    margin: 0;
    position: relative;
}
.testimonial .description:before,
.testimonial .description:after{
    font-family: 'FontAwesome';
    font-size: 17px;
    color: #e1c37d;
    position: relative;
}
.testimonial .description:before{
    content: "\f10d";
    margin-right: 5px;
    top: 0;
    left: 0;
}
.testimonial .description:after{
    content: "\f10e";
    margin-left: 5px;
    position: relative;
    bottom: 0;
    right: 0;
}
.owl-theme .owl-controls{
    width: 70%;
    margin: 0;
    text-align: left;
    position: absolute;
    bottom: 0;
    right: 0;
}
 .owl-buttons div{
    width: 70px;
    height: 90px;
    line-height: 90px;
    background: transparent;
    border-radius: 0;
    opacity: 1;
    position: relative;
}
.owl-buttons {
  display: inline-flex;
}
.owl-prev:before,
.owl-next:before{
    content: "\f177";
    font-family: "fontawesome";
    font-size: 45px;
    font-weight: 900;
    color: #eee;
    position: absolute;
    top: 0;
    left: 25%;
}
.owl-next:before{
    content: "\f178";
}
.owl-next:after{
    content: " / ";
    font-size: 40px;
    color: #eee;
    position: absolute;
    top: 0;
    left: 0px;
}
@media only screen and (max-width: 990px){
    .testimonial{ text-align: center; }
    .testimonial .pic{
        width: 200px;
        margin: 0 auto;
        float: none;
    }
    .testimonial .pic:before,
    .testimonial .pic:after{
        width: 80px;
        height: 100px;
    }
    .testimonial .testimonial-content{
        width: 100%;
        float: none;
    }
    .testimonial .title{
        padding: 15px 0 0 0;
    }
    .testimonial .post{
        padding: 0;
        margin-bottom: 10px;
    }
    .owl-theme .owl-controls{
        width: 100%;
        position: static;
        text-align: center;
    }
    .owl-theme .owl-controls .owl-buttons div{
        height: 50px;
        line-height: 50px;
    }
}

.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
/* display none until init */
.owl-carousel{
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
	overflow: hidden;
	position: relative;
	width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
	-webkit-transition: height 500ms ease-in-out;
	-moz-transition: height 500ms ease-in-out;
	-ms-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}
	
.owl-carousel .owl-item{
	float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
	cursor: pointer;
}
.owl-controls {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}


/*Downloaded from https://www.codeseek.co/piyush0966/testimonial-Eowrdq */
$(document).ready(function(){
    $("#testimonial-slider").owlCarousel({
        items:1,
        itemsDesktop:[1000,1],
        itemsDesktopSmall:[979,1],
        itemsTablet:[768,1],
        margin:10,
        pagination:false,
        navigation:true,
        navigationText:["",""],
        autoPlay:false
    });
});

Comments