"Humberto - Banco"
Bootstrap 3.0.0 Snippet by psd14t

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html> <html lang="pt-br"> <head> <title>Curso Bootstrap3 - Devmedia</title> <!-- define a viewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <meta charset="utf-8"> <!-- adicionar CSS Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="all"> <!-- css personalizado --> <link href="css/site-banco.css" rel="stylesheet" media="all"> </head> <body> <input type="checkbox" id="chec"> <label for="chec"> <img src="https://cdn4.iconfinder.com/data/icons/thin-circle-ui/100/more-circle-512.png"> </label> <nav> <ul> <li class="col-xs-12"><a href=""> <div class="row"> <div class="col-xs-4"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTtBxlK1K1AIuAxDzK7aP6fmn4DM3mUyld1uw&usqp=CAU" class="img-circle img-responsive" /> </div> <div class="col-xs-6"> <h3>Olá, Beto </h3> </div> </div> </a></li> <br><br><br><br><br> <li><a href=""><h4>Transferência</h4></a></li> <li><a href=""><h4>Depositar</h4></a></li> <li><a href=""><h4>Recarga</h4></a></li> <li><a href=""><h4>Pagar</h4></a></li> </ul> </nav> <div class="container"> <div class="row"> <div class="col-xs-12 bg-color-padding"> <div class="caixa col-xs-10 col-xs-offset-2 col-md-4 col-md-offset-8"> <h2><a href="#"> Saldo: R$ 20,00 </a></h2> </div> </div> <div class="col-xs-12 bg-color-padding"> <div class="col-xs-5 col-xs-offset-1 atalhos col-md-2 "> <a href="#"> <img src="https://image.flaticon.com/icons/png/512/114/114903.png" id="extrato" alt="Extrato"> <label for="extrato">Extrato</label> </a> </div> <div class="col-xs-5 col-xs-offset-1 atalhos col-md-2 col-md-offset-1"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/1102/1102496.svg" id="fatura" alt="Fatura"> <label for="fatura">Fatura</label> </a> </div> <div class="col-xs-5 col-xs-offset-1 atalhos col-md-2 col-md-offset-1"> <a href="#"> <img src="https://www.revendedor.com.br/wp-content/uploads/2020/02/boleto-icon-150x150.png" id="pagar" alt="Pagar"> <label for="pagar">Pagar</label> </a> </div> <div class="col-xs-5 col-xs-offset-1 atalhos col-md-2 col-md-offset-1"> <a href="#"> <img src="https://image.flaticon.com/icons/png/512/1482/1482701.png" id="cards" alt="Cartões"> <label for="cards">Cartões</label> </a> </div> <div class="col-xs-11 col-xs-offset-1"> <div id="carousel01" class="carousel slide" data-ride="carousel" data-interval="4000"> <ol class="carousel-indicators"> <li data-target="#carousel01" data-slide-to="0" class="active"></li> <li data-target="#carousel01" data-slide-to="1"></li> <li data-target="#carousel01" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="https://cdls.org.br/wp-content/uploads/cndl/2019/10/bbva-banca-tarjetas.jpg" alt="Imagem escrito Foto1" > <div class="carousel-caption"> <h3>Peça já seu cartão de apoximação</h3> </div> </div> <div class="item"> <img src="https://media-manager.noticiasaominuto.com/1920/1470054825/naom_56bb97ec30c55.jpg" alt="Imagem escrito Foto2" > <div class="carousel-caption"> <h3>Traga o seu salário para o nosso banco</h3> </div> </div> <div class="item"> <img src="https://www.hmpx.com.br/wp-content/uploads/2018/08/Blog.jpg" alt="Imagem escrito Foto3" > <div class="carousel-caption"> <h3>Conheça nossas condições de cédito</h3> </div> </div> </div> <a class="left carousel-control" href="#carousel01" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel01" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/main.js"></script> </body> </html>
* { padding: 0px; margin: 0px; } nav a { text-decoration: none; color: black; display: block; padding: 20px 5px; color: white; } nav a:hover{ background-color: rgb(176, 224, 230); color: black; text-decoration: none; } body { font-family: Arial, Helvetica, sans-serif; background-color: #036564; } ul { list-style: none; text-align: center; } label img, .atalhos img{ width: 40px; } input[type="checkbox"] { display: none; } nav { background: rgba(16,16,16,.5); width: 300px; height: 100%; left: -300px; position: absolute; transition: all .5s; z-index: 1; } nav img { width: 60px; } input[type="checkbox"]:checked ~ nav { transform: translateX(300px); } ul { position: absolute; top: 50px; width: 100%; } /* li { height: 50px; } */ label { padding: 15px; position: absolute; z-index: 2; } a { text-decoration: none; color: black; display: block; color: white; } /* a:hover{ text-decoration: none; color: white; } */ .caixa { border: 3px #033649; border-style: outset; border-radius: 32px; background-color: #025250; margin-top: 15px; margin-bottom: 15px; height: 80px; } h3, h2 { color: #E8DDCB; text-align: center; } .atalhos { background: #025250; border-style: outset; border-color: #033649; padding-top: 10px; padding-bottom: 10px; margin-top: 5px; margin-bottom: 15px; height: 70px; } .carousel-caption h3{ color: whitesmoke; }

Related: See More

Now UI Dashboard React

Questions / Comments: