<div class='container'>
<div class="card mx-auto col-10 col-md-12 p-0">
<div class="card-body">
<div class="card-title" style="font-weight: 900;">Customer reviews</div>
<div class="card-subtitle mb-2"><label class="big">4.0</label> <i class="fas fa-heart" style="color: #28a745"></i> <i class="fas fa-heart" style="color: #28a745"></i> <i class="fas fa-heart" style="color: #28a745"></i> <i class="fas fa-heart" style="color: #28a745"></i> <i class="fas fa-heart" style="color: grey;"></i> <label class="text-muted">1315 reviews</label> </div>
<div class="mid d-flex">
<div class="index">
<p class="text-muted">5</p>
<p class="text-muted">4</p>
<p class="text-muted">3</p>
<p class="text-muted">2</p>
<p class="text-muted">1</p>
</div>
<div class="card-content col-md-9 col-8">
<div class="mb-2">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%; background-color: #28a745 " aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 16%; background-color: lightgreen" aria-valuenow="16" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 5% ;background-color: #ffc107" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 1%; background-color: orange " aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 3%; background-color: orangered" aria-valuenow="3" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="rst">
<div>75% </div>
<div>16%</div>
<div>5%</div>
<div>1%</div>
<div>3%</div>
</div>
<div class="count">
<p><small class="text-muted">986</small></p>
<p><small class="text-muted">205</small></p>
<p><small class="text-muted">65</small></p>
<p><small class="text-muted">17</small></p>
<p><small class="text-muted">46</small></p>
</div>
</div>
<div class="text-center mt-3"> <button class="btn btn-outline btn-success" style="border-radius: 8px;">View all reviews</button> </div>
</div>
</div>
</div>
body {
background-color: #00C853
}
.card {
margin-top: 150px;
width: 25rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, .2)
}
.index {
font-size: 14px;
margin-top: 4px
}
.index>p {
margin-bottom: 12px
}
.rst {
font-weight: 900;
margin-top: 1px
}
.rst>div {
margin-bottom: 9px;
font-size: 16px
}
.count {
font-size: 14px;
margin-left: 27px;
margin-top: 2px
}
.count>p {
margin-bottom: 12px
}
.btn {
border: 1px solid #e9ecef;
background: none
}
.big {
font-size: 60px;
font-weight: 900
}
button.focus,
button:focus {
outline: 0;
box-shadow: none !important
}
.btn {
color: #4ca746
}
.progress {
height: 25px
}