<div class="container-fluid my-5 justify-content-center">
<div class=" row justify-content-center ">
<div class="col-lg-4 col-12 mt-5 ">
<div class="card mt-3 ">
<div class="card-header bg-white text-center border-0 ">
<div class="row justify-content-center ">
<div class="col"> <img class="align-self-center text-center rounded-circle outside img-fluid" src="https://i.imgur.com/JI24t5h.jpg" width="110" height="110"> </div>
</div>
<div class="row text-center name">
<div class="col">
<h5 class="mb-0 profile-pic">Elizabeth Smith</h5> <small class="mt-0">Director of Marketing</small>
<p><span class="fa fa-star mr-1"></span><span class="fa fa-star mr-1"></span><span class="fa fa-star mr-1"></span><span class="fa fa-star mr-1"></span><span class="fa fa-star-o mr-1"></span></p>
</div>
</div>
</div>
<div class="card-body pt-0 text-center pb-3 ">
<div class="row justify-content-center">
<div class="col-md-8 col">
<p class="bold"> <span><img class="img-fluid quotes" src="https://i.imgur.com/U20aFIt.png" width="40" height="40"></span> Growth of data is exponential and our ability to get true insight that matter was challenging with classic, traditional Bi tools. Vertix allow us to unserstand what is driving exceptions so we can take action <span><img class="img-fluid quotes-down" src="https://i.imgur.com/DPzmyiD.png" width="40" height="40"> </span></p>
</div>
</div>
</div>
<div class="card-footer text-center bg-white border-0 mt-0 pt-0">
<div class="row">
<div class="col"><span class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-facebook" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-instagram" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-pinterest-p" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-google-plus" aria-hidden="true"></i></span></div>
</div>
<hr class="my-1">
</div>
</div>
</div>
<div class="col-lg-4 mt-5 col-12 ">
<div class="card mt-3">
<div class="card-header bg-white text-center border-0 ">
<div class="row justify-content-center ">
<div class="col"> <img class="align-self-center text-center rounded-circle outside img-fluid" src="https://i.imgur.com/kkjs7EC.png" width="110" height="110"> </div>
</div>
<div class="row text-center name">
<div class="col">
<h5 class="mb-0 profile-pic">Maria Hernandez</h5> <small class="mt-0">Director of Marketing</small>
<p><span class="fa fa-star mr-1"></span><span class="fa fa-star mr-1"></span><span class="fa fa-star mr-1"></span><span class="fa fa-star mr-1"></span><span class="fa fa-star mr-1"></span></p>
</div>
</div>
</div>
<div class="card-body pt-0 text-center pb-3 ">
<div class="row justify-content-center">
<div class="col-md-8 col">
<p class="bold"> <span><img class="img-fluid quotes" src="https://i.imgur.com/U20aFIt.png" width="40" height="40"></span> Growth of data is exponential and our ability to get true insight that matter was challenging with classic, traditional Bi tools. Vertix allow us to unserstand what is driving exceptions so we can take action <span><img class="img-fluid quotes-down" src="https://i.imgur.com/DPzmyiD.png" width="40" height="40"></span> </p>
</div>
</div>
</div>
<div class="card-footer text-center bg-white border-0 mt-0 pt-0">
<div class="row">
<div class="col"> <span class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-facebook" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-instagram" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-pinterest-p" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-google-plus" aria-hidden="true"></i></span> </div>
</div>
<hr class="my-1">
</div>
</div>
</div>
<div class="col-lg-4 col-12 mt-5">
<div class="card mt-3">
<div class="card-header bg-white text-center border-0 ">
<div class="row justify-content-center ">
<div class="col"> <img class="align-self-center text-center rounded-circle outside img-fluid" src="https://i.imgur.com/At1IG6H.png" width="110" height="110"> </div>
</div>
<div class="row text-center name">
<div class="col">
<h5 class="mb-0 profile-pic">Michael Smith</h5> <small class="mt-0">Director of Marketing</small>
<p><span class="fa fa-star mr-1"></span><span class="fa fa-star mr-1"></span><span class="fa fa-star-o mr-1"></span><span class="fa fa-star-o mr-1"></span><span class="fa fa-star-o mr-1"></span></p>
</div>
</div>
</div>
<div class="card-body pt-0 text-center pb-3 ">
<div class="row justify-content-center">
<div class="col-md-8 col">
<p class="bold"> <span><img class="img-fluid quotes" src="https://i.imgur.com/U20aFIt.png" width="40" height="40"></span> Growth of data is exponential and our ability to get true insight that matter was challenging with classic, traditional Bi tools. Vertix allow us to unserstand what is driving exceptions so we can take action <span><img class="img-fluid quotes-down" src="https://i.imgur.com/DPzmyiD.png" width="40" height="40"> </span></p>
</div>
</div>
</div>
<div class="card-footer text-center bg-white border-0 mt-0 pt-0">
<div class="row">
<div class="col"> <span class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-facebook" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-instagram" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-pinterest-p" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-google-plus" aria-hidden="true"></i></span> </div>
</div>
<hr class="my-1">
</div>
</div>
</div>
</div>
</div>
body {
min-height: 100vh;
background-color: #eee;
background-size: cover;
font-family: 'Cormorant', serif;
color: rgb(112, 123, 240);
background: linear-gradient(140deg, #fff, 50%, #74a0ff);
background-repeat: no-repeat
}
.container-fluid {
margin-top: 80px !important
}
p {
font-size: 17px;
margin-bottom: 7px
}
.small {
letter-spacing: 0.5px !important
}
.card-header img {
border: 5px solid white !important
}
.outside {
position: inherit;
top: -50%
}
.card {
border-radius: 20px !important;
box-shadow: 2px 2px 5px 0px rgb(100, 108, 170);
transition: 0.8s
}
.card-header {
border-radius: 20px !important
}
.card-footer {
border-radius: 20px !important
}
hr {
background-color: rgb(146, 154, 236);
border: 1px solid;
border-radius: 20px;
color: rgb(146, 154, 236);
height: 5px;
width: 70px !important
}
.bold {
font-weight: 500
}
.profile-pic {
margin-bottom: -5px !important
}
.quotes {
position: relative;
top: -10px
}
.quotes-down {
position: relative;
top: -4 px
}
.fa {
color: rgb(174, 178, 219);
cursor: pointer
}
.card-footer .fa {
font-size: 20px !important
}
.name {
margin-top: -50px !important
}
.container-fluid:hover .card:not(:hover) {
transform: scale(0.9)
}
@media (max-width: 1000px) {
.container-fluid:hover .card:not(:hover) {
transform: scale(1)
}
}