<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Head tags to include FontAwesome -->
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<div class="container">
<div class='row'>
<div class='col-md-12'>
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row row-eq-height">
<div class="col-sm-12 col-lg-5 text-center borda-imagem ">
<img class="img-box" src="http://www.parlamento-juvenil.rj.gov.br/files/apps/parlamentojuvenil/parlamentares/fotos/8a%20edicao%20(2014)/recortadas/Joao%20Pedro%20Aguiar%20Moreira%20-%20Cordeiro.jpg">
</div>
<div class="col-sm-12 col-lg-7 borda-preta fundo-branco">
<div class="titulo-projeto">Projeto de Lei Nº 51212/2016 </div>
<div class="dados-projeto">
<div class="autor-projeto text-center">Autor do Projeto </div>
<div class="cidade-projeto text-center">Barra Mansa</div>
</div>
<div class="texto-projeto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue tellus felis, ut semper nulla ultricies fermentum. Morbi aliquam mi id posuere elementum. Donec fermentum vel augue vel congue. Aenean at lorem a odio mattis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed venenatis ut mi pretium ultricies. Morbi non metus accumsan, condimentum odio at, euismod libero. Vivamus ut fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nam elementum odio et justo tempor rhoncus. Phasellus malesuada, tortor vitae faucibus cursus, est neque semper arcu, non suscipit nunc magna sed quam. Curabitur vel auctor tellus. Donec rutrum mollis lacinia. Phasellus vel arcu id ante sollicitudin tincidunt. Curabitur porta diam augue. Fusce et porta libero, id rhoncus sapien
Nam elementum odio et justo tempor rhoncus. Phasellus malesuada, tortor vitae faucibus cursus, est neque semper arcu, non suscipit nunc magna sed quam. Curabitur vel auctor tellus. Donec rutrum mollis lacinia. Phasellus vel arcu id ante sollicitudin tincidunt. Curabitur porta diam augue. Fusce et porta libero, id rhoncus sapien
</p>
</div>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item ">
<blockquote>
<div class="row row-eq-height">
<div class="col-sm-12 col-lg-5 text-center borda-imagem">
<img class="img-box" src="http://www.parlamento-juvenil.rj.gov.br/files/apps/parlamentojuvenil/parlamentares/fotos/8a%20edicao%20(2014)/recortadas/Joao%20Pedro%20Aguiar%20Moreira%20-%20Cordeiro.jpg">
</div>
<div class="col-sm-12 col-lg-7 borda-preta fundo-branco">
<div class="titulo-projeto">Projeto de Lei Nº 51212/2016 </div>
<div class="dados-projeto">
<div class="autor-projeto text-center">Autor do Projeto </div>
<div class="cidade-projeto text-center">Barra Mansa</div>
</div>
<div class="texto-projeto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue tellus felis, ut semper nulla ultricies fermentum. Morbi aliquam mi id posuere elementum. Donec fermentum vel augue vel congue. Aenean at lorem a odio mattis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed venenatis ut mi pretium ultricies. Morbi non metus accumsan, condimentum odio at, euismod libero. Vivamus ut fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nam elementum odio et justo tempor rhoncus. Phasellus malesuada, tortor vitae faucibus cursus, est neque semper arcu, non suscipit nunc magna sed quam. Curabitur vel auctor tellus. Donec rutrum mollis lacinia. Phasellus vel arcu id ante sollicitudin tincidunt. Curabitur porta diam augue. Fusce et porta libero, id rhoncus sapien
Nam elementum odio et justo tempor rhoncus. Phasellus malesuada, tortor vitae faucibus cursus, est neque semper arcu, non suscipit nunc magna sed quam. Curabitur vel auctor tellus. Donec rutrum mollis lacinia. Phasellus vel arcu id ante sollicitudin tincidunt. Curabitur porta diam augue. Fusce et porta libero, id rhoncus sapien
</p>
</div>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item ">
<blockquote>
<div class="row row-eq-height">
<div class="col-sm-12 col-lg-5 text-center borda-imagem">
<img class="img-box" src="http://www.parlamento-juvenil.rj.gov.br/files/apps/parlamentojuvenil/parlamentares/fotos/8a%20edicao%20(2014)/recortadas/Patrick%20Santos%20Silva%20-%20Cantagalo.jpg">
</div>
<div class="col-sm-12 col-lg-7 borda-preta fundo-branco">
<div class="titulo-projeto">Projeto de Lei Nº 51212/2016 </div>
<div class="dados-projeto">
<div class="autor-projeto text-center">Autor do Projeto </div>
<div class="cidade-projeto text-center">Barra Mansa</div>
</div>
<div class="texto-projeto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue tellus felis, ut semper nulla ultricies fermentum. Morbi aliquam mi id posuere elementum. Donec fermentum vel augue vel congue. Aenean at lorem a odio mattis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed venenatis ut mi pretium ultricies. Morbi non metus accumsan, condimentum odio at, euismod libero. Vivamus ut fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>
Nam elementum odio et justo tempor rhoncus. Phasellus malesuada, tortor vitae faucibus cursus, est neque semper arcu, non suscipit nunc magna sed quam. Curabitur vel auctor tellus. Donec rutrum mollis lacinia. Phasellus vel arcu id ante sollicitudin tincidunt. Curabitur porta diam augue. Fusce et porta libero, id rhoncus sapien
</p>
</div>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
/* Row with equal height columns */
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.fundo-pink{
background: #f0f;
}
.fundo-branco{
background: #fff;
}
.fundo-preto{
background: #000;
color: #fff;
}
.borda-preta{
border: solid 4px #000;
}
.borda-imagem{
border-top: solid 4px #000;
border-left: solid 4px #000;
border-bottom: solid 4px #000;
padding:0;
margin:0;
}
.autoria{
width: 100%;
position: absolute;
bottom: 0;
}
.titulo-projeto {
background-color: #FFC908;
margin: 0 -15px 0 -15px;
text-transform: uppercase;
padding: 10px 0 10px 0px ;
color: #000000;
font-size: 130%;
font-weight: 700 ;
text-align: center;
}
.dados-projeto{
background-color: #FFC908;
border-bottom: solid #000000 4px;
margin: 0 -15px 0 -15px;
padding-bottom:10px;
}
.texto-projeto {
font-size: 80%;
margin-top: 20px;
}
.cidade-projeto {
font-size: 80%;
}
/* carousel */
#quote-carousel
{
padding: 0 10px 30px 10px;
margin-top: 30px;
}
/* Control buttons */
#quote-carousel .carousel-control
{
background: none;
color: #222;
font-size: 85px;
text-shadow: none;
margin-top: 170px;
}
/* Previous button */
#quote-carousel .carousel-control.left
{
left: -82px;
}
/* Next button */
#quote-carousel .carousel-control.right
{
right: -82px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li
{
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active
{
background: #333333;
}
#quote-carousel img
{
width: 100%;
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
}
/*.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}*/
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#quote-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
.borda-imagem{
border-top: solid 4px #000;
border-left: solid 4px #000;
border-right: solid 4px #000;
border-bottom: 0px;
padding:0;
margin:0;
}
/* Row with equal height columns */
.row-eq-height {
display: block;
}
.autoria{
position: static;
}
}
