<div class="container px-2 px-md-4 py-5 mx-auto ">
<div class="row d-flex justify-content-center ">
<div class="col-lg-5 col-md-7 col-sm-9 ">
<div id="carouselExampleIndicators" class="carousel slide d-flex" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<div class="card border-0 ">
<div class="card-header"></div>
<div class="card-body text-center "><img class="img-1 img-fluid" src="https://i.imgur.com/nUNhspp.jpg">
<div class="quotes"><img class="quotes-img card-title" src="https://i.imgur.com/Gfbinmw.jpg" />
<p class="card-text bold text-center px-md-3 intro">I believe that one defines oneself by reinvention. To not be like your parents. To not be like your friends. To be yourself. To cut yourself out of stone. </p>
<h6 class="font-weight-bold mt-4">Nicholas V./ Company Inc</h6>
</div>
</div>
</div>
</div>
<div class="carousel-item active">
<div class="card border-0 ">
<div class="card-header"></div>
<div class="card-body text-center "><img class="img-1 img-fluid" src="https://i.imgur.com/o5uMfKo.jpg">
<div class="quotes"><img class="quotes-img card-title" src="https://i.imgur.com/Gfbinmw.jpg" />
<p class="card-text bold text-center px-md-3 intro">I believe that one defines oneself by reinvention. To not be like your parents. To not be like your friends. To be yourself. To cut yourself out of stone. </p>
<h6 class="font-weight-bold mt-4">Sophia V./ Company Inc</h6>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card border-0 ">
<div class="card-header"></div>
<div class="card-body text-center "><img class="img-1 img-fluid" src="https://i.imgur.com/At1IG6H.png">
<div class="quotes"><img class="quotes-img card-title" src="https://i.imgur.com/Gfbinmw.jpg" />
<p class="card-text bold text-center px-md-3 intro">I believe that one defines oneself by reinvention. To not be like your parents. To not be like your friends. To be yourself. To cut yourself out of stone. </p>
<h6 class="font-weight-bold mt-4">Mike V./ Company Inc</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
height: 100%;
background-color: rgb(44, 44, 44)
}
p {
font-size: 14px;
line-height: 20px !important;
font-weight: 500
}
.small {
letter-spacing: 0.5px !important
}
.container {
margin-top: 50px
}
.card-header {
min-height: 11rem;
background: #627482
}
h6 {
color: #333
}
.card {
background: #E6E7E9
}
.img-1 {
position: relative;
width: 200px;
height: auto;
border-radius: 50%;
top: -127px !important;
box-shadow: 3px 15px 20px rgba(0, 0, 0, 0.5)
}
.quotes {
position: relative;
top: -90px
}
.quotes-img {
widows: 50px;
height: auto
}
.carousel-indicators li {
cursor: pointer;
border-radius: 50% !important;
width: 10px;
height: 10px;
opacity: 0.5;
margin: 0 15px 18px 15px;
color: #333;
background-color: #333 !important;
top: -10px;
position: relative
}
#carouselExampleIndicators {
box-shadow: -5px 15px 25px rgba(7, 7, 7, 0.5) !important
}
.carousel-inner {
border-radius: 15px !important
}