<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="container" id="features"> <div class="row"> <div class="col-md-4 feature"> <i class="glyphicon glyphicon-question-sign"></i> <h3>Informações e Ajuda</h3> <div class="title_border"></div> <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> </div> <div class="col-md-4 feature"> <i class="glyphicon glyphicon-th-list"></i> <h3>Receitas e Orçamentos</h3> <div class="title_border"></div> <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> </div> <div class="col-md-4 feature"> <i class="glyphicon glyphicon-briefcase"></i> <h3>Deputados,<br> Gabinetes e Lideranças</h3> <div class="title_border"></div> <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> </div> </div> <div class="row"> <div class="col-md-4 feature"> <i class="glyphicon glyphicon-user"></i> <h3>Funcionários</h3> <div class="title_border"></div> <ul> <li><a href="#">Quantitativo de Funcionários?</a></li> bov <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> </div> <div class="col-md-4 feature"> <i class="glyphicon glyphicon-globe"></i> <h3>Licitações e Concorrências</h3> <div class="title_border"></div> <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> </div> <div class="col-md-4 feature"> <i class="glyphicon glyphicon-briefcase"></i> <h3>Orçamentos e Finanças</h3> <div class="title_border"></div> <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> </ul> </div> </div> <div class="row"> <div class="col-md-4 feature"> <i class="glyphicon glyphicon-picture"></i> <h3>Estagiários</h3> <div class="title_border"></div> <ul> <li><a href="#">Nível médio</a></li> <li><a href="#">Nível superior</a></li> </ul> </div> <div class="col-md-4 feature"> <i class="glyphicon glyphicon-globe"></i> <h3>Relatórios Anuais</h3> <div class="title_border"></div> <ul> <li><a href="#">Relatório de Gestão Fiscal</a></li> <li><a href="#">Relatório Anual de Atividades</a></li> </ul> </div> <div class="col-md-4 feature"> <i class="glyphicon glyphicon-briefcase"></i> <h3>Trasnparência no Rio de Janeiro</h3> <div class="title_border"></div> <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> </div> <div class="col-md-4 feature"> <i class="glyphicon glyphicon-briefcase"></i> <h3>Diário Oficial</h3> <div class="title_border"></div> <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> </div> </div> </div>

#features { margin-top:20px; } .feature, .feature i, .feature h3, .feature .title_border { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .feature { background:#FFFFFF; text-align:center; padding:20px; border: solid 1px #cccccc; } .feature p { margin-top:20px; margin-bottom:30px; } .feature i{ font-size:80px; color:#FFFFFF; background:#1E825F; padding:30px; border-radius:50%; border: solid 3px #1E825F; } .feature h3 { color:#1E825F; min-height: 55px; } .feature:hover { background:#F5F5F5; -webkit-transform: translate(0,1em); -moz-transform: translate(0,1em); -o-transform: translate(0,1em); -ms-transform: translate(0,1em); transform: translate(0,1em); } .feature:hover i{ color:#1E825F; border-color:#1E825F; background:#FFFFFF; } .feature:hover .title_border { background-color:#1E825F; width:50%; } .feature .title_border { width: 0%; height: 3px; background:#1E825F; margin: 0 auto; margin-top: 12px; margin-bottom: 8px; }