"Narciza-Banco Safira"
Bootstrap 4.1.1 Snippet by psd14t

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Safira</title> <meta charset="utf-8"> <STYLE TYPE="text/css"> .menu ul li {background-color: #121d5c; color: white; float: left; width: 200px; height: 40px; display: inline-block; text-align: center; line-height: 40px; font-size: 20px; } .menu ul li:hover {background-color: #4e65d4;} .menu ul {padding: 0;} .menu ul ul{display: none;} .menu ul li:hover > ul {display: block; } .acessar {width: 200px; height: 40px; color: white; background-color: #21cfed; font-size: 20px;} .logo img { border-radius: 100%; background-color: #21cfed; float: left; } body {background-color: #e4f0f7; } #cxtexto {width: 75%; position: relative; float: left;} .safira {width: 40%; border: 1px solid #b50909; margin-left: 2%; padding: 1%; float: left; margin-top: 30px; background-color: #fff;} .img {border-radius: 100%; border:double; } .cabecalho {color: #121d5c; } .banco {font-size: 2em; background-color: #21cfed; text-align: center; line-height: 100px; color: white;} </STYLE> </head> <body> <nav class="menu"> <div class="logo"><img src="https://live.staticflickr.com/65535/50039852313_7a2d81e61c_s.jpg" class="img-circle img-responsive" alt="logosafira (2)"> </div><p class="banco">MAIS QUE UM BANCO, SOMOS UM PARCEIRO. <ul> <li>Serviços <ul> <li>2º via de boletos</li> <li>Cartões</li> <li>Seguros</li> </ul> </li> <li>Relacionamento <ul> <li>Financeiro</li> <li>Investimento</li> <li>Renda</li> </ul> </li> <li>Investimento <ul> <li>Titulos Públicos</li> <li>Previdência Privada</li> <li>Ações</li> </ul> </li> <li>Sobre <ul> <li>Informações Financeiras</li> <li>Carreiras</li> <li>Nossa História</li> </ul> </li> <li>Atendimento <ul> <li>Canais Digitais</li> <li>Ouvidoria</li> <li>Agências</li> </ul> </li> </ul> <input class="acessar" type="submit" value="Acessar minha conta" class="btn btn-info"/> <br><br><br><br><br><br><br><br> </nav> <div class="pesquisa"> <input class "search-txt" type="text" name="" placeholder="tipo de Busca"> <a href="#" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> Buscar na Safira </a> <br><br> <section id="cxtexto"> <div class="safira"><h1>Conheça a Safira Digital</h1> <p>O Safira Digital é a conta digital do grupo Safra. Com ela você tem acesso a um portfólio com produtos de Renda Fixa e Renda Variável para diversificar sua carteira de investimentos.</p></div> <div class="safira"><h2>Tradição em investimentos</h2> <p>Usamos nossa credibilidade para disponibilizar uma plataforma com acesso aos melhores produtos do mercado e conta com a segurança de um grupo que desenvolve patrimônio há gerações.</p></div> <div class="safira"><h2>Portfólio Completo</h2> <p>Seja um investimento de Renda Fixa ou Variável, oferecemos produtos de altíssima qualidade para completar a sua carteira. Todos eles selecionados levando em consideração cada perfil, desde os mais conservadores até os mais dinâmicos.</p></div> <div class="safira"><h2>Relacionamento</h2> <p>Acreditamos no valor de ter alguém ao lado. Por isso, nossos especialistas se mantém sempre próximos, entendendo quais são as suas expectativas para, então, analisar e indicar apenas o que é melhor para você.</p></div> </section> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="page-header"> <h1 class="cabecalho">Facilidades</h1> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Crédito Imobiliário</h3> </div> <img class="img" src="https://live.staticflickr.com/65535/50058915162_87123bcdb5_s.jpg" width="75" height="75" alt="casa"><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script> </div> <section class="menu-vertical"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Renegociação de Dívidas</h3> </div> <img class="img" src="https://live.staticflickr.com/65535/50058718656_06da2b33d5_s.jpg" width="75" height="75" alt="maos"><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script> </div> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Pagamentos</h3> </div> <img class="img" src="https://live.staticflickr.com/65535/50059293106_13fd59e41a_s.jpg" width="75" height="75" alt="pagamentos"><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> </section> <div class="carousel-inner"> <div class="item active"> <img src="https://live.staticflickr.com/65535/50059673102_b2696bc8d6_s.jpg" width="90" height="90" alt="online"><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script> <div class="carousel-caption"> <h3>Cartão Virtual</h3> <p>Faça compras on-line com segurança</p> </div> </div> <div class="carousel-inner"> <div class="item active"> <img src="https://live.staticflickr.com/65535/50058923678_927df3b7d0_s.jpg" alt="agricultor"><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script> <div class="carousel-caption"> <h3>Plano Safra</h3> <p>Faça compras on-line com segurança</p> </div> </div> </body> </html>

Related: See More

BLK• Design System

Questions / Comments: