<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="tcb-quote-carousel">
<div class="carousel slide carousel-fade" id="fade-quote-carousel" data-ride="carousel" data-interval="3000">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#fade-quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#fade-quote-carousel" data-slide-to="1"></li>
<li data-target="#fade-quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="profile-circle"><img class="img-responsive " src="https://i.imgur.com/ctvpjSP.png" alt=""></div>
<blockquote>
<p>Welcome to Apex! <br> Now the site is running and open, we expect profiles to be done. There is a template you can fill in, instead of creating your own. Feel free to RP whenever, and start meeting people! </p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle"><img class="img-responsive " src="https://i.imgur.com/hZFrbJJ.jpg" alt=""></div>
<blockquote>
<p> <I> Current Plot: </I>
<br>
Humans have been surviving against the animals ever since the first outbreak. Yet a cure has been found, and worked upon domestic dogs. This is the only species that is cured as for now. The cure is developing to spread across the whole animal kingdom and world. This is a slow process.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle"><img class="img-responsive " src="https://i.imgur.com/e5TBLka.jpg" alt=""></div>
<blockquote>
<p><I> Bi-Weekly Challenge:</I>
<br> Moles have been getting into the underground system. Some areas are closed off due to weak or broken frame work. The community must find a way to remove of the moles and construct the buildings again. Points will be deducted, for any animals damaged, total points can be seen on the point page.</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<br />
</div>
.tcb-quote-carousel {
background: #17171c;
padding-top: 30px;
margin-top: 40px;
.quote {
color: rgba(0, 0, 0, .1);
text-align: center;
margin-bottom: 30px;
}
.carousel {
padding-bottom: 30px;
.carousel-indicators > li {
background-color: #141e2e;
border: none;
}
}
blockquote {
margin-top: 5px;
text-align: center;
border: none;
color: grey;
font-size: 10px;
}
.profile-circle {
width: 50px;
height: 50px;
margin: 0 auto;
overflow: hidden;
border-radius: 100px;
}
}
.carousel-fade {
.carousel-inner {
.item {
transition-property: opacity;
}
.item,
.active.left,
.active.right {
opacity: 0;
}
.active,
.next.left,
.prev.right {
opacity: 1;
}
.next,
.prev,
.active.left,
.active.right {
left: 0;
transform: translate3d(0, 0, 0);
}
}
}
View Compiled