"Services Blocks"
Bootstrap 3.3.0 Snippet by brenot

Post to Facebook Tweet this

<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 ----------> <div class="fundo transparencia"> <div class="container"> <div class="row"> <div class="row"> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <img src="https://i.imgsafe.org/18650bed11.png"> <h3 class="tag-title">Informações e Ajuda</h3> <ul> <li><a href="#">Como pedir uma Informação?</a></li> <li><a href="#">Como acompanhar o seu pedido?</a></li> <li><a href="#">Perguntas Frequentes - FAQ</a></li> <li><a href="#">Perguntas e Respoastas</a></li> </ul> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Saiba Mais</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <img src="https://i.imgsafe.org/1864dca9ce.png"> <h3 class="tag-title">Receitas e Orçamentos</h3> <ul> <li><a href="#">Como pedir uma Informação?</a></li> <li><a href="#">Como acompanhar o seu pedido?</a></li> <li><a href="#">Perguntas Frequentes - FAQ</a></li> <li><a href="#">Perguntas e Respoastas</a></li> </ul> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Saiba Mais</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <img src="https://i.imgsafe.org/1864c7805e.png"> <h3 class="tag-title">Deputados, Gabinetes e Lideranças</h3> <ul> <li><a href="#">Como pedir uma Informação?</a></li> <li><a href="#">Como acompanhar o seu pedido?</a></li> <li><a href="#">Perguntas Frequentes - FAQ</a></li> <li><a href="#">Perguntas e Respoastas</a></li> </ul> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Saiba Mais</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <img src="https://i.imgsafe.org/1864cd882b.png"> <h3 class="tag-title">Funcionários</h3> <ul> <li><a href="#">Quantitativo de Funcionários?</a></li> <li><a href="#">Salário</a></li> <li><a href="#">Subsidios, vencimentos e gratificações</a></li> <li><a href="#">Alimentação</a></li> <!----<li><a href="#">Bolsa de Reforço Escolar</a></li> <li><a href="#">Viagens</a></li> <li><a href="#">Plano de Saude - IPALERJ</a></li> <li><a href="#">Vagas de garagem</a></li>----> </ul> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Saiba Mais</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <img src="https://i.imgsafe.org/186b0ee82f.png"> <h3 class="tag-title">Licitações e Concorrências</h3> <ul> <li><a href="#">Licitações</a></li> <li><a href="#">Pregoeiros</a></li> <li><a href="#">Composição CPL</a></li> <li><a href="#">Atas de Registro de Preço</a></li> </ul> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Saiba Mais</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <img src="https://i.imgsafe.org/1864d506b0.png"> <h3 class="tag-title">Orçamentos e Finanças</h3> <ul> <li><a href="#">Cronograma de ações</a></li> <li><a href="#">Gastos do Poder Legislativo</a></li> <li><a href="#">Relatório de Gestão Fiscal</a></li> <li><a href="#">Relatório de Gestão Fiscal</a></li> </ul> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Saiba Mais</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <img src="https://i.imgsafe.org/1864f2f343.png"> <h3 class="tag-title">Estagiários</h3> <ul> <li><a href="#">Nível médio</a></li> <li><a href="#">Nível superior</a></li> </ul> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Saiba Mais</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <img src="https://i.imgsafe.org/1864fa08e0.png"> <h3 class="tag-title">Relatórios Anuais</h3> <ul> <li><a href="#">Relatório de Gestão Fiscal</a></li> <li><a href="#">Relatório Anual de Atividades</a></li> </ul> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Saiba Mais</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <img src="https://i.imgsafe.org/1865130ffb.png"> <h3 class="tag-title">Trasnparência no Rio de Janeiro</h3> <ul> <li><a href="#">Executivo</a></li> <li><a href="#">Judiciario</a></li> <li><a href="#">Ministerio Publico</a></li> <li><a href="#">TCE</a></li> <li><a href="#">Junta Comercial</a></li> </ul> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Saiba Mais</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <img src="https://i.imgsafe.org/1865013d8d.png"> <h3 class="tag-title">Diário Oficial</h3> <ul> <li><a href="#">D.O. Notícias</a></li> <li><a href="#">Parte I (Poder Executivo)</a></li> <li><a href="#">Parte IA - (Ministério Público)</a></li> <li><a href="#">Parte IB - (Tribunal de Contas)</a></li> <li><a href="#">Parte I DPGE - (Defensoria Pública Geral do Estado)</a></li> <li><a href="#">Parte I JC (Junta Comercial)</a></li> <li><a href="#">Parte II (Poder Legislativo)</a></li> </ul> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Saiba Mais</a> </div> </div> </div> </div> </div> </div> </div>
.fundo { background: url("https://i.imgsafe.org/17d3befffc.jpg"); } .transparencia .btn-primary { color: #fff; background-color: #b6ba8d; border-color: #7d824f; } .transparencia ul,.transparencia ol { margin-top: 0; margin-bottom: 10px; list-style-type: none; -webkit-padding-start: 0px; } .transparencia li { background: #eff1e4; margin-bottom: 3px; padding: 5px 0; } .transparencia ul li a { color: #7d824f; text-decoration: none; font-weight: 600; } .tag-title { color: #7d824f; } .box { background:#fff; transition:all 0.2s ease; border:2px dashed #d1d5b0; margin-top: 10px; box-sizing: border-box; border-radius: 5px; background-clip: padding-box; padding:0 20px 20px 20px; min-height:340px; } .box:hover { border:2px solid #9ea74a; } .box span.box-title { color: #fff; font-size: 24px; font-weight: 300; text-transform: uppercase; } .box .box-content { padding: 16px; border-radius: 0 0 2px 2px; background-clip: padding-box; box-sizing: border-box; } .box .box-content p { color:#515c66; text-transform:none; }

Questions / Comments: