Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ante porttitor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ante porttitor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ante porttitor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ante porttitor.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ante porttitor.
williamson
Web Developer
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ante porttitor.
Kristina
Web Designer
.testimonial{
padding-top: 70px;
margin: 50px 15px 0;
border: 1px solid #fff;
text-align: center;
position: relative;
transition: all 0.7s ease 0s;
}
.testimonial:hover{ border-color: #e7e3e3; }
.testimonial .pic{
width: 95px;
height: 95px;
border-radius: 50%;
background: #fff;
padding: 7px;
position:absolute;
top: -50px;
left: 50%;
overflow: hidden;
transform: translateX(-50%);
transition: all 0.7s ease 0s;
}
.testimonial:hover .pic{ background: #1d3033; }
.testimonial .pic img{
width: 100%;
height: auto;
border-radius: 50%;
}
.testimonial .title{
font-size: 16px;
font-weight: 700;
color: #eabd44;
text-transform: uppercase;
margin: 0 0 10px 0;
}
.testimonial .description{
font-size: 15px;
color: #999;
line-height: 25px;
border-bottom: 1px solid #f7f7f7;
padding: 0 25px 35px;
margin: 0;
}
.testimonial .testimonial-content{
padding: 15px 25px 12px;
border: 1px solid #f7f7f7;
border-top: none;
position: relative;
text-align: left;
transition: all 500ms ease 0s;
}
.testimonial:hover .testimonial-content{ border-color: #1d3033; }
.testimonial .testimonial-content:after{
content: "";
width: 100%;
height: 0;
background: #1d3033;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
transition: all 0.7s ease 0s;
}
.testimonial:hover .testimonial-content:after{ height: 100%; }
.testimonial-content .testimonial-profile{ display: inline-block; }
.testimonial .name{
font-size: 16px;
font-weight: 700;
color: #3d3d3d;
text-transform: uppercase;
margin: 0 0 3px;
transition: all 700ms ease 0s;
}
.testimonial:hover .name{ color: #fff; }
.testimonial .post{
font-size: 14px;
color: #eabd44;
text-transform: capitalize;
}
.testimonial .rating{
display: inline-block;
padding: 1px 5px;
margin: 0;
list-style: none;
background: #eabd44;
position: absolute;
right: 25px;
}
.testimonial .rating li{
display: inline-block;
font-size: 14px;
color: #fff;
}
.owl-theme .owl-controls{
width: 100%;
position: absolute;
top: 50%;
}
.owl-theme .owl-controls .owl-buttons div{
width: 45px;
height: 40px;
line-height: 37px;
border-radius: 3px;
background: #fff;
border: 1px solid #ececec;
padding: 0;
opacity: 1;
transition: all 0.4s ease-in-out 0s;
}
.owl-theme .owl-controls .owl-buttons div:hover{
background: #eabd44;
border-color: #eabd44;
}
.owl-prev,
.owl-next{
position: absolute;
left: -3%;
}
.owl-next{
left: auto;
right: -3%;
}
.owl-prev:before,
.owl-next:before{
content: "\f104";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 25px;
color: #ececec;
}
.owl-next:before{ content: "\f105"; }
@media only screen and (max-width: 990px){
.owl-theme .owl-controls,
.owl-prev,
.owl-next{
position: relative;
left: 0;
right: 0;
}
}
@media only screen and (max-width: 768px){
.testimonial .testimonial-content{
padding: 15px 10px 12px;
}
.testimonial .rating{
right: 12px;
}
}
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:3,
itemsDesktop:[1000,2],
itemsDesktopSmall:[979,2],
itemsTablet:[768,2],
itemsMobile:[650,1],
pagination:false,
navigation:true,
navigationText:["",""],
autoPlay:true
});
});