<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="row d-flex justify-content-center">
<div class="d-flex flex-column">
<div class=""> <img class="top-img" src="https://i.imgur.com/7sf1tDX.png"> </div>
<div class="top-shadow"></div>
</div>
</div>
<div class="heading0 mb-3 text-center">
<h2 class="blue-text">Overall, 3,234 people are satisfied</h2>
</div>
<div class="line"></div>
<div class="row d-flex justify-content-center mb-4">
<div class="rating-label px-3">
<h5 class="text-right mb-0 pt-3">Coffee</h5>
</div>
<div class="d-flex flex-column">
<div class="emoji"> <img class="sm-img" src="https://i.imgur.com/7sf1tDX.png"> </div>
<div class="sm-shadow"></div>
</div>
<div class="count px-3">
<p class="text-muted text-left my-auto pt-3">200 people</p>
</div>
</div>
<div class="row d-flex justify-content-center mb-4">
<div class="rating-label px-3">
<h5 class="text-right mb-0 pt-3">Customer Service</h5>
</div>
<div class="d-flex flex-column">
<div class="emoji"> <img class="sm-img" src="https://i.imgur.com/mOWe9dD.png"> </div>
<div class="sm-shadow"></div>
</div>
<div class="count px-3">
<p class="text-muted text-left my-auto pt-3">165 people</p>
</div>
</div>
<div class="row d-flex justify-content-center mb-4">
<div class="rating-label px-3">
<h5 class="text-right mb-0 pt-3">Outdoor Lighting</h5>
</div>
<div class="d-flex flex-column">
<div class="emoji"> <img class="sm-img" src="https://i.imgur.com/p3WbKQz.png"> </div>
<div class="sm-shadow"></div>
</div>
<div class="count px-3">
<p class="text-muted text-left my-auto pt-3">130 people</p>
</div>
</div>
<div class="row d-flex justify-content-center mb-4">
<div class="rating-label px-3">
<h5 class="text-right mb-0 pt-3">Restrooms</h5>
</div>
<div class="d-flex flex-column">
<div class="emoji"> <img class="sm-img" src="https://i.imgur.com/noMxBsM.png"> </div>
<div class="sm-shadow"></div>
</div>
<div class="count px-3">
<p class="text-muted text-left my-auto pt-3">100 people</p>
</div>
</div>
<div class="row d-flex justify-content-center mb-4">
<div class="rating-label px-3">
<h5 class="text-right mb-0 pt-3">Cleanliness</h5>
</div>
<div class="d-flex flex-column">
<div class="emoji"> <img class="sm-img" src="https://i.imgur.com/WPBUtYh.png"> </div>
<div class="sm-shadow"></div>
</div>
<div class="count px-3">
<p class="text-muted text-left my-auto pt-3">110 people</p>
</div>
</div>
<div class="line"></div>
<div class="row justify-content-center d-flex">
<div class="mb-4">
<h4 class="blue-text"><strong>RATE THIS STATION</strong></h4>
</div>
</div>
</div>
</div>
</div>
</div>
body {
background-image: linear-gradient(#80D8FF, #01579B);
background-repeat: no-repeat;
color: #000;
overflow-x: hidden
}
.card {
border-radius: 10px;
background-color: #fff;
padding-left: 60px;
padding-right: 60px;
margin-top: 70px
}
@media screen and (max-width: 768px) {
.card {
padding-left: 5px;
padding-right: 5px
}
}
.top-img {
top: -80px;
position: relative;
width: 200px;
height: 200px;
border: 10px solid #fff;
border-radius: 100%;
z-index: 1;
cursor: pointer
}
.top-shadow {
width: 100px;
height: 20px;
position: relative;
border-radius: 100%;
background-color: #CFD8DC;
top: -80px;
margin-right: auto;
margin-left: auto
}
.sm-img {
position: relative;
width: 60px;
height: 60px
}
.sm-shadow {
position: relative;
width: 30px;
margin-top: 4px;
height: 7px;
border-radius: 100%;
margin-right: auto;
margin-left: auto;
background-color: #CFD8DC
}
.heading0 {
margin-top: -50px
}
.rating-label {
width: 195px;
padding: auto
}
.emoji {
width: 80px
}
.count {
width: 195px;
padding: auto
}
@media screen and (max-width: 768px) {
.rating-label {
width: 150px;
padding: auto
}
.emoji {
width: 70px
}
.count {
width: 150px;
padding: auto
}
}
.blue-text {
color: #00BCD4;
cursor: pointer
}
.line {
height: 1px;
width: 95%;
background-color: #F5F5F5;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto
}