<div class="container-fluid px-0 py-5 mx-auto">
<div class="row justify-content-center mx-0 mx-md-auto">
<div class="col-lg-10 col-md-11 px-1 px-sm-2">
<div class="card border-0 px-3">
<!-- top row -->
<div class="d-flex row py-5 px-5 bg-light">
<div class="green-tab p-2 px-3 mx-2">
<p class="sm-text mb-0">OVERALL RATING</p>
<h4>4.8</h4>
</div>
<div class="white-tab p-2 mx-2 text-muted">
<p class="sm-text mb-0">ALL REVIEWS</p>
<h4>124</h4>
</div>
<div class="white-tab p-2 mx-2">
<p class="sm-text mb-0 text-muted">POSITIVE REVIEWS</p>
<h4 class="green-text">93%</h4>
</div>
<div class="ml-md-auto p-2 mx-md-2 pt-4 pt-md-3"> <button class="btn btn-red px-4">WRITE A REVIEW</button> </div>
</div> <!-- middle row -->
<div class="row bg-light">
<div class="col-md-2 col-4 text-center block py-5">
<div class="round-icon"> <img src="https://i.imgur.com/8lJt6UN.png" width="50px" height="50px"> </div>
<p class="sm-text-1 grey-text mb-0">100</p>
<div class="fa fa-circle green-dot"></div>
<div class="fa fa-circle green-dot"></div>
<div class="fa fa-circle green-dot"></div>
<div class="fa fa-circle green-dot"></div>
<div class="fa fa-circle green-dot"></div>
</div>
<div class="col-md-2 col-4 text-center block py-5">
<div class="round-icon"> <img src="https://i.imgur.com/Grjnbah.png" width="50px" height="50px"> </div>
<p class="sm-text-1 grey-text mb-0">100</p>
<div class="fa fa-circle red-dot"></div>
<div class="fa fa-circle red-dot"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
</div>
<div class="col-md-2 col-4 text-center block py-5">
<div class="round-icon"> <img src="https://i.imgur.com/q2v8mqu.png" width="50px" height="50px"> </div>
<p class="sm-text-1 grey-text mb-0">100</p>
<div class="fa fa-circle yellow-dot"></div>
<div class="fa fa-circle yellow-dot"></div>
<div class="fa fa-circle yellow-dot"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
</div>
<div class="col-md-2 col-4 text-center block py-5">
<div class="round-icon"> <img src="https://i.imgur.com/EkmVVM1.png" width="50px" height="50px"> </div>
<p class="sm-text-1 grey-text mb-0">100</p>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
</div>
<div class="col-md-2 col-4 text-center block py-5">
<div class="round-icon"> <img src="https://i.imgur.com/ZbZzavI.png" width="50px" height="50px"> </div>
<p class="sm-text-1 grey-text mb-0">100</p>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
</div>
<div class="col-md-2 col-4 text-center block py-5">
<div class="round-icon"> <img src="https://i.imgur.com/S6SGKFQ.png" width="50px" height="50px"> </div>
<p class="sm-text-1 grey-text mb-0">100</p>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
<div class="fa fa-circle"></div>
</div>
</div> <!-- Review by user -->
<div class="review p-5">
<div class="row d-flex">
<div class="profile-pic"><img src="https://i.imgur.com/Mcd6HIg.jpg" width="60px" height="60px"></div>
<div class="d-flex flex-column pl-3">
<h4>Emily</h4>
<p class="grey-text">30 min ago</p>
</div>
</div>
<div class="row pb-3">
<div class="fa fa-circle green-dot my-auto rating-dot"></div>
<div class="fa fa-circle green-dot my-auto rating-dot"></div>
<div class="fa fa-circle green-dot my-auto rating-dot"></div>
<div class="fa fa-circle green-dot my-auto rating-dot"></div>
<div class="fa fa-circle green-dot my-auto rating-dot"></div>
<div class="green-text">
<h5 class="mb-0 pl-3">Excellent</h5>
</div>
</div>
<div class="row pb-3">
<p>This dive center is incredibly well organized and is at the top of its game.</p>
</div>
<div class="row ml-1">
<div class="row bg-light via">
<div class="px-2"><img src="https://i.imgur.com/8lJt6UN.png" width="18px" height="18px"></div>
<p class="grey-text mb-0 px-3">via Google</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
overflow-x: hidden
}
.container-fluid {
background-image: linear-gradient(to right, #7B1FA2, #E91E63)
}
.sm-text {
font-size: 10px;
letter-spacing: 1px
}
.sm-text-1 {
font-size: 14px
}
.green-tab {
background-color: #00C853;
color: #fff;
border-radius: 5px;
padding: 5px 3px 5px 3px
}
.btn-red {
background-color: #E64A19;
color: #fff;
border-radius: 20px;
border: none;
outline: none
}
.btn-red:hover {
background-color: #BF360C
}
.btn-red:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline-width: 0
}
.round-icon {
font-size: 40px;
padding-bottom: 10px
}
.fa-circle {
font-size: 10px;
color: #EEEEEF
}
.green-dot {
color: #4CAF50
}
.red-dot {
color: #E64A19
}
.yellow-dot {
color: #FFD54F
}
.grey-text {
color: #BDBDBD
}
.green-text {
color: #4CAF50
}
.block {
border-right: 1px solid #F5EEEE;
border-top: 1px solid #F5EEEE;
border-bottom: 1px solid #F5EEEE
}
.profile-pic img {
border-radius: 50%
}
.rating-dot {
letter-spacing: 5px
}
.via {
border-radius: 20px;
height: 28px
}