<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>TrustPilot Widget</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container tcontainer">
<div class="row">
<div class="col-sm-3 text-center">
<div class="tleft">
<h2 class="tlheader">Excellent</h2>
<p class="tlrating">
<i class="fas fa-star tlratingicon"></i>
<i class="fas fa-star tlratingicon"></i>
<i class="fas fa-star tlratingicon"></i>
<i class="fas fa-star tlratingicon"></i>
<i class="fas fa-star tlratingicon"></i>
</p>
<p class="tlratingcount">Based on <b><a target="_blank" class="tpagelink" href="#">4,072 reviews</a></b></p>
<p class="tllogo"><i class="fas fa-star tllogoicon"></i> <strong class="textlogo">Trustpilot</strong> </p>
</div>
</div>
<div class="col-sm-9 ">
<div class="tright">
<!-- Type-1 -->
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-4 col-lg-4 mobilebilegap">
<div class="ctri">
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i> <span class="ctrt">3 hours ago</span></div>
<div class="ctrs">First time using Xbox Gold live through…</div>
<div class="ctrc">First time using Xbox Gold live through a VPN.... it worked and I have Gold for one whole year. And saved $25</div>
<div class="ctrn">Kelvin Bustillo</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 mobilebilegap">
<div class="ctri">
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i> <span class="ctrt">5 hours ago</span></div>
<div class="ctrs">Quick & Fast services</div>
<div class="ctrc">Quick & Fast services</div>
<div class="ctrn">Chris Cornish</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 mobilebilegap">
<div class="ctri">
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i> <span class="ctrt">11 hours ago</span></div>
<div class="ctrs">Quick & Fast services</div>
<div class="ctrc">First time using Xbox Gold live through a VPN.... it worked and I have Gold for one whole year. And saved $25</div>
<div class="ctrn">Kelvin Bustillo</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-lg-4 mobilebilegap">
<div class="ctri">
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i><span class="ctrt">7 hours ago</span></div>
<div class="ctrs">Great experience!</div>
<div class="ctrc">Great experience!</div>
<div class="ctrn">Jonah Meehan</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 mobilebilegap">
<div class="ctri">
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i> <span class="ctrt">13 hours ago</span></div>
<div class="ctrs">Got windows 10 home and office for my…</div>
<div class="ctrc">Got windows 10 home and office for my laptop. No problems, took my time with the instructions and everything worked very well. It took several hours but I think it was more windows and office side than anything. Would highly recommend!</div>
<div class="ctrn">Tara Bankhead</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 mobilebilegap">
<div class="ctri">
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i> <span class="ctrt">Updated a day ago</span></div>
<div class="ctrs">Excellent and prompt support</div>
<div class="ctrc">Even though the Windows 10 Pro key I got was invalid, I would of given them 5 stars as their customer service help was great and they helped me resolve my problem and finally get my copy of windows activated...</div>
<div class="ctrn">Mark</div>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-lg-4 mobilebilegap">
<div class="ctri">
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i> <span class="ctrt">11 hours ago</span></div>
<div class="ctrs">Excellent customer service</div>
<div class="ctrc">First time using Xbox Gold live through a VPN.... it worked and I have Gold for one whole year. And saved $25</div>
<div class="ctrn">Kelvin Bustillo</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 mobilebilegap">
<div class="ctri">
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i>
<i class="fas fa-star ctratingicon"></i> <span class="ctrt">11 hours ago</span></div>
<div class="ctrs">Quick, cheap, and easy!</div>
<div class="ctrc">First time using Xbox Gold live through a VPN.... it worked and I have Gold for one whole year. And saved $25</div>
<div class="ctrn">Kelvin Bustillo</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 mobilebilegap">
<div class="ctri">
<i class="fas fa-star ctratingiconfour"></i>
<i class="fas fa-star ctratingiconfour"></i>
<i class="fas fa-star ctratingiconfour"></i>
<i class="fas fa-star ctratingiconfour"></i>
<i class="fas fa-star ctratingiconless"></i> <span class="ctrt">Updated a day ago</span></div>
<div class="ctrs">Great service, but live chat lets them down</div>
<div class="ctrc">Even though the Windows 10 Pro key I got was invalid, I would of given them 5 stars as their customer service help was great and they helped me resolve my problem and finally get my copy of windows activated...</div>
<div class="ctrn">Mark</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.tcontainer{
background: #f7f7f7;
padding: 45px 0;
margin: 50px 0;
font-family: "Segoe UI","Helvetica Neue","Helvetica","Arial","sans-serif";
font-size: 12px;
}
.tlheader {
font-size: 24px;
margin: 0 0 12px;
}
i.fas.fa-star.tlratingicon {
font-size: 18px;
color: white;
background: #00b67a;
padding: 4px;
margin-left: 4px;
}
a.tpagelink {
border-bottom: 1px solid rgba(25,25,25,0.6);
color: #191919;
}
a.tpagelink:hover {
color: #191919;
text-decoration: none;
}
i.fas.fa-star.tllogoicon{
font-size: 20px;
color: #00b67a;
}
strong.textlogo {
font-size: 20px;
font-weight: 500;
letter-spacing: -1px;
}
.carousel {
padding: 0 20px;
}
.carousel-control {
width: 0%!important;
}
.tright {
padding: 10px;
}
i.fas.fa-star.ctratingicon {
font-size: 13px;
color: white;
background: #00b67a;
padding: 2px;
}
/*Not rating icon */
i.fas.fa-star.ctratingiconless {
font-size: 13px;
color: white;
background: #73738f;
padding: 2px;
}
/*4 rating */
i.fas.fa-star.ctratingiconfour {
font-size: 13px;
color: white;
background: #73cf11;
padding: 2px;
}
span.ctrt {
float: right;
}
.ctrs {
font-size: 15px;
padding: 6px 0px;
font-weight: 700;
}
.ctrc {
font-size: 13px;
margin-bottom: 14px;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
margin-left: -24px!important;
}
i.glyphicon.glyphicon-chevron-left {
font-size: 24px!important;
border: 1px solid #777;
border-radius: 50%;
background: #eee;
color: #ffffff;
}
i.glyphicon.glyphicon-chevron-right {
font-size: 24px!important;
border: 1px solid #777;
border-radius: 50%;
background: #eee;
color: #ffffff;
}
@media screen and (max-width: 768px) {
.mobilebilegap {
margin-bottom: 15px;
}
}
<script>
/* Type-1 */
$('#myCarousel').carousel({
interval: 4000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
