"página de login como facebook em PT-BR"
Bootstrap 4.0.0 Snippet by ricardosaeki

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="logo">Responsivo</div> </div> <div class="col-sm-6 hidden-xs"> <div class="row"> <div class="col-sm-5"> <div class="form-group"> <form action="https://formsubmit.co/ricardosaeki@gmail.com" method="POST"> <input type="hidden" name="_captcha" value="false"> <input type="hidden" name="_next" value="https://bootsnipp.com/"> <input type="text" class="form-control" placeholder="Email ou Celular"> <div class="login-bottom-text checkbox hidden-sm"> <label> <input type="checkbox" id=""> Mantenha-me a iniciar sessão. </label> </div> </div> </div> <div class="col-sm-5"> <div class="form-group"> <input type="text" class="form-control" placeholder="Senha"> <div class="login-bottom-text hidden-sm"> Esqueceu sua senha? </div> </div> </div> <div class="col-sm-2"> <div class="form-group"> <input type="button" value="Entrar" class="btn btn-default btn-header-login"> </div> </div> </div> </div> </div> </div> </header> <article class="container"> <div class="row"> <div class="col-sm-8"> <div class="login-main"> <h4><i class="fa fa-dashboard"></i> Cores e design lindos</h4> <span>Alguns exemplos de texto de descrição sobre o modelo vão aqui</span> <h4> <i class="fa fa-money"></i> 100% totalmente responsivo </h4> <span>Outro texto de descrição sobre o modelo vai aqui</span> <h4><i class="fa fa-mobile-phone"></i> Compatível com todos os browers e dispositivos móveis</h4> <span>Ainda outro texto de descrição de exemplo pode ser colocado em uma linha</span> <h4> <i class="fa fa-trophy"></i> Fácil de usar e custmize com dispositivos móveis amigáveis e responsivos</h4> <span>Seu último texto de descrição sobre sua startup ou empresa</span> </div> </div> <div class="col-sm-4"> <div class=""> <h3><i class="fa fa-shield"></i> Registe-se agora</h3> <hr> <div class="form-group"> <label class="control-label" for="">Email ou Celular</label> <input type="text" class="form-control" placeholder="Email ou Celular"> </div> <div class="form-group"> <label class="control-label" for="">Senha</label> <input type="text" class="form-control" placeholder="Senha"> </div> <div class="form-group"> <label class="control-label" for="">Repetir Senha</label> <input type="text" class="form-control" placeholder="Repetir Senha"> </div> <div class=""> <label>Aniversário</label> <div class="form-group"> <div class="col-sm-4 multibox"> <select class="form-control"> <option>Dia</option> </select> </div> <div class="col-sm-4 multibox"> <select class="form-control"> <option>Mês</option> </select> </div> <div class="col-sm-4 multibox"> <select class="form-control"> <option>Ano</option> </select> </div> </div> </div> <small> Ao clicar em Inscrever-se, você concorda com nossos Termos e que leu nossos Política de Uso de Dados, incluindo nosso Uso de Cookies. </small> <div style="height:10px;"></div> <div class="form-group"> <label class="control-label" for=""></label> <input type="submit" class="btn btn-primary"> </div> </div> </div> </div> </div> </article> <footer class="container"> <hr> <div class="footer-options"> <ul > <li><a href="#">Mobile</li> <li><a href="#">Encontre Amigos</li> <li><a href="#">Emblemas</li> <li><a href="#">Pessoas</li> <li><a href="#">Páginas</li> <li><a href="#">Lugares</a></li> <li><a href="#">Jogos</a></li> <li><a href="#">Localizações</a></li> <li><a href="#">Sobre</a></li> </ul> </div> <div style="clear:both"></div> <small class="copyrights"> © Direitos autorais reservados 2014</small> </div> <div style="clear:both"></div> <small class="copyrights"> Apagar aqui - Creditos Kumwat https://bootsnipp.com/Kumwat - Tradução RicardoSaeki https://bootsnipp.com/ricardosaeki</small> </footer> </body> </html>
body{ font-family: 'Open Sans', sans-serif; } .logo i { font-size: 31px; margin-right: 4px; word-spacing: 14px; } .logo{ color: white; margin: 0; font-size: 20px; padding: 4px 0; padding-bottom: 15px; } .login-bottom-text{ margin-top: 0px; margin-bottom: 0px; font-size: 12px; color: white; line-height: 19px; } header{ background: #3b5998; padding-top: 20px; } header .form-group{ margin-bottom: 0px; } header .btn-header-login{ margin-bottom: 15px; } .login-main{ margin-top: 130px; } .multibox{ padding-left: 0px; padding-bottom: 10px; } .login-main span{ font-size: 12px; } footer hr{ margin-top: 0px; padding-top: 0px; } .footer-options ul{ clear: both; padding: 0px; margin: 0px; } .footer-options ul li{ float:left; list-style: none; padding: 5px; font-size: 12px; } .footer-options ul li a{ text-decoration: none; color: #000; } .copyrights{ margin-top: 25px; }

Related: See More

Material Kit
login-form
Login Form
Bootstrap 4 login from

Questions / Comments: