<div class="container-fluid px-1 py-5 mx-auto">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-9 col-md-10 col-12 text-center mb-5">
<div class="card">
<div class="cirle-img"> <img src="https://i.imgur.com/IRsUTtE.jpg">
<div class="rating-on-img">
<h3 class="head-rate">4.7</h3>
<h3 class="subhead-rate">out of 5</h3>
</div>
</div>
<div class="heading0 mb-3 text-center">
<h2>Reviews, by real people</h2>
</div>
<div class="rating-bar0 justify-content-center">
<table class="text-left mx-auto">
<tr>
<td class="rating-label">Excellent</td>
<td class="rating-bar">
<div class="bar-container">
<div class="bar-5"></div>
</div>
</td>
<td>123</td>
</tr>
<tr>
<td class="rating-label">Good</td>
<td class="rating-bar">
<div class="bar-container">
<div class="bar-4"></div>
</div>
</td>
<td>23</td>
</tr>
<tr>
<td class="rating-label">Average</td>
<td class="rating-bar">
<div class="bar-container">
<div class="bar-3"></div>
</div>
</td>
<td>10</td>
</tr>
<tr>
<td class="rating-label">Poor</td>
<td class="rating-bar">
<div class="bar-container">
<div class="bar-2"></div>
</div>
</td>
<td>3</td>
</tr>
<tr>
<td class="rating-label">Brutal</td>
<td class="rating-bar">
<div class="bar-container">
<div class="bar-1"></div>
</div>
</td>
<td>0</td>
</tr>
</table>
</div>
<div> <span class="fa fa-star star-active"></span> <span class="fa fa-star star-active"></span> <span class="fa fa-star star-active"></span> <span class="fa fa-star star-active"></span> <span class="fa fa-star star-active"></span> </div>
<div class="review-head"> <a href="#">
<h3 class="review-heading">I was driving with the godfather in Norma</h3>
</a> </div>
<div class="review-body">
<p class="review-desc">I think that he was a very good guide and I really enjoyed the whom your. He made the guests laugh and learning about the city at the same time. A very good experience I can only talk good about.</p> <a href="#">
<h5 class="author">Catherina, United States</h5>
</a>
<p class="review-date">September 26, 2017</p>
</div>
</div>
</div>
</div>
</div>
body {
background-image: linear-gradient(#0D47A1, #81D4FA);
background-repeat: no-repeat;
color: #000;
overflow-x: hidden
}
a {
text-decoration: none !important;
color: inherit
}
a:hover {
color: #455A64
}
.card {
border-radius: 10px;
background-color: #fff;
padding-left: 60px;
padding-right: 60px;
margin-top: 70px
}
div .circle-img {
width: 200px;
height: 200px;
border-radius: 100%
}
img {
top: -80px;
position: relative;
width: 200px;
height: 200px;
border-radius: 100%;
border: 10px solid #fff;
z-index: 1;
cursor: pointer
}
.rating-on-img {
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
color: #fff
}
.head-rate {
font-size: 70px;
margin-bottom: 0px;
cursor: pointer
}
.subhead-rate {
font-size: 20px;
font-weight: normal;
cursor: pointer
}
.heading0 {
margin-top: -50px
}
.rating-label {
font-weight: bold
}
.rating-bar {
width: 300px;
padding: 8px;
border-radius: 5px
}
.bar-container {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
border-radius: 20px;
cursor: pointer
}
.bar-5 {
width: 70%;
height: 10px;
background-color: #FBC02D;
border-radius: 20px
}
.bar-4 {
width: 30%;
height: 10px;
background-color: #FBC02D;
border-radius: 20px
}
.bar-3 {
width: 20%;
height: 10px;
background-color: #FBC02D;
border-radius: 20px
}
.bar-2 {
width: 10%;
height: 10px;
background-color: #FBC02D;
border-radius: 20px
}
.bar-1 {
width: 0%;
height: 10px;
background-color: #FBC02D;
border-radius: 20px
}
.star-active {
color: #FBC02D;
margin-top: 50px;
margin-bottom: 10px
}
.star-active:hover {
color: #F9A825;
cursor: pointer
}
.review-heading {
font-size: 24px
}
.review-desc {
font-size: 15px
}
.author {
font-size: 20px;
margin-bottom: 0
}
.review-date {
color: grey;
margin-bottom: 50px
}