Skip to content

Instantly share code, notes, and snippets.

@rajaishtiaq6

rajaishtiaq6/index.html

Created September 8, 2022 23:22
Show Gist options
  • Save rajaishtiaq6/0fea5de597c9f2f8de7a438a1382c187 to your computer and use it in GitHub Desktop.
Save rajaishtiaq6/0fea5de597c9f2f8de7a438a1382c187 to your computer and use it in GitHub Desktop.
Download ZIP
TrustPilot Carousel Widget -Light
Raw
index.html
<div class="container-fluid trustpilot-widget">
<div class="row">
<div class="col-md-2">
<div class="wrapper-left">
<h3 class="title">Excellent</h3>
<div class="rating">
<img src="https://images-static.trustpilot.com/supportcenter/Trustpilot_ratings_5star-RGB.png" class="img-responsive">
</div>
<div class="info">
Based on <a href="#" class="review-count">226 reviews</a>
</div>
<div class="brand-logo">
<img src="https://lh3.googleusercontent.com/-j30uWtPj9lU/W-UrMp5GjSI/AAAAAAAADZg/3e2vZpgYzQQp_IvtZkeBv-xrs1KHmkqPwCL0BGAYYCw/h82/2018-11-08.png" class="img-responsive"> <p>Trustpilot</p>
</div>
</div>
</div>
<div class="col-md-9 reviews">
<div id="Carousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="pull-left rating">
<img src="https://images-static.trustpilot.com/supportcenter/Trustpilot_ratings_5star-RGB.png" class="img-responsive">
</div>
<div class="pull-right date">
33 hours ago
</div>
</div>
<div class="col-md-12">
<div class="title">Would I recommend this company? Early signs is a resounding YES!</div>
<div class="descriptions">I looked at this company in depth, after requesting a phone call to discuss my r..</div>
<div class="name">Himanshu</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="pull-left rating">
<img src="https://images-static.trustpilot.com/supportcenter/Trustpilot_ratings_5star-RGB.png" class="img-responsive">
</div>
<div class="pull-right date">
33 hours ago
</div>
</div>
<div class="col-md-12">
<div class="title">Would I recommend this company? Early signs is a resounding YES!</div>
<div class="descriptions">I looked at this company in depth, after requesting a phone call to discuss my r..</div>
<div class="name">Himanshu</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="pull-left rating">
<img src="https://images-static.trustpilot.com/supportcenter/Trustpilot_ratings_5star-RGB.png" class="img-responsive">
</div>
<div class="pull-right date">
33 hours ago
</div>
</div>
<div class="col-md-12">
<div class="title">Would I recommend this company? Early signs is a resounding YES!</div>
<div class="descriptions">I looked at this company in depth, after requesting a phone call to discuss my r..</div>
<div class="name">Himanshu</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="pull-left rating">
<img src="https://images-static.trustpilot.com/supportcenter/Trustpilot_ratings_5star-RGB.png" class="img-responsive">
</div>
<div class="pull-right date">
33 hours ago
</div>
</div>
<div class="col-md-12">
<div class="title">Would I recommend this company? Early signs is a resounding YES!</div>
<div class="descriptions">I looked at this company in depth, after requesting a phone call to discuss my r..</div>
<div class="name">Himanshu</div>
</div>
</div>
</div>
</div><!--.row-->
</div><!--.item-->
<div class="item">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="pull-left rating">
<img src="https://images-static.trustpilot.com/supportcenter/Trustpilot_ratings_5star-RGB.png" class="img-responsive">
</div>
<div class="pull-right date">
33 hours ago
</div>
</div>
<div class="col-md-12">
<div class="title">Would I recommend this company? Early signs is a resounding YES!</div>
<div class="descriptions">I looked at this company in depth, after requesting a phone call to discuss my r..</div>
<div class="name">Himanshu</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="pull-left rating">
<img src="https://images-static.trustpilot.com/supportcenter/Trustpilot_ratings_5star-RGB.png" class="img-responsive">
</div>
<div class="pull-right date">
33 hours ago
</div>
</div>
<div class="col-md-12">
<div class="title">Would I recommend this company? Early signs is a resounding YES!</div>
<div class="descriptions">I looked at this company in depth, after requesting a phone call to discuss my r..</div>
<div class="name">Himanshu</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="pull-left rating">
<img src="https://images-static.trustpilot.com/supportcenter/Trustpilot_ratings_5star-RGB.png" class="img-responsive">
</div>
<div class="pull-right date">
33 hours ago
</div>
</div>
<div class="col-md-12">
<div class="title">Would I recommend this company? Early signs is a resounding YES!</div>
<div class="descriptions">I looked at this company in depth, after requesting a phone call to discuss my r..</div>
<div class="name">Himanshu</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="pull-left rating">
<img src="https://images-static.trustpilot.com/supportcenter/Trustpilot_ratings_5star-RGB.png" class="img-responsive">
</div>
<div class="pull-right date">
33 hours ago
</div>
</div>
<div class="col-md-12">
<div class="title">Would I recommend this company? Early signs is a resounding YES!</div>
<div class="descriptions">I looked at this company in depth, after requesting a phone call to discuss my r..</div>
<div class="name">Himanshu</div>
</div>
</div>
</div>
</div><!--.row-->
</div><!--.item-->
</div><!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div><!--.Carousel-->
</div>
</div>
</div><!--.container-->
Raw
scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
.trustpilot-widget {
background: transparent;
color: #333;
padding: 30px 0 25px 0;
overflow: hidden;
}
.trustpilot-widget .wrapper-left a {
color: #333;
font-weight: 600;
text-decoration: underline;
}
.trustpilot-widget .wrapper-left {
text-align: center;
}
.trustpilot-widget .wrapper-left .title {
color: #333;
font-size: 24px;
padding: 0;
margin: 0;
margin-bottom: 10px;
}
.trustpilot-widget .wrapper-left .rating img {
max-width: 160px;
margin: auto;
}
.trustpilot-widget .wrapper-left .info {
color: #333;
font-size: 13px;
line-height: 45px;
}
.trustpilot-widget .wrapper-left .brand-logo img {
max-width: 25px;
margin: auto;
margin-top: -10px;
display: inline-block;
}
.trustpilot-widget .wrapper-left .brand-logo p {
font-size: 18px;
line-height: 35px;
color: #333;
text-align: center;
display: inline-block;
}
.trustpilot-widget .reviews {
margin-left: 2%
}
/* The controlsy */
.trustpilot-widget .carousel-control {
height: 25px;
width: 25px;
border: 1px solid #9E9E9E;
border-radius: 50%;
margin-top: 60px;
font-size: 25px;
background: transparent;
line-height: 18px;
}
.trustpilot-widget .carousel-control.right {
margin-right: -50px;
color: #333;
text-shadow: none;
}
.trustpilot-widget .carousel-control.left {
left: -70px;
color: #333;
text-shadow: none;
}
.trustpilot-widget .carousel-control.right:hover, .trustpilot-widget .carousel-control.left:hover {
color: #333;
}
.trustpilot-widget .carousel-inner .rating img {
max-width: 110px
}
.trustpilot-widget .carousel-inner {
overflow: hidden
}
.trustpilot-widget .carousel-inner .date, .trustpilot-widget .carousel-inner .name {
color: rgba(0,0,0,0.6);
font-size: 13px;
}
.trustpilot-widget .carousel-inner .title {
margin: 15px 0 10px 0;
font-weight: 700;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
}
.trustpilot-widget .carousel-inner .descriptions {
min-height: 42px;
}
.trustpilot-widget .carousel-inner .name {
margin-top: 25px
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment