"login"
Bootstrap 4.1.1 Snippet by paulohnmatos

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="content"> <div class="left"> <h1>Seja Bem Vindo(a)!</h1> <p>Tela de login para acesso a informações<br> e processos dos clientes.</p> </div> <div class="right"> <img src="http://www.gam.com.br/index/wp-content/uploads/2017/10/default-logo.png" alt="Unidos Importados" width="150" /> <p>Digite o código de acesso</p> <div class="grupo-input"> <input type="password" name="codigo" id="codigo" class="input-codigo" placeholder="Digite aqui seu código de acesso" required> <img src="https://e7.pngegg.com/pngimages/975/821/png-clipart-password-manager-computer-icons-password-strength-password-safe-chang-miscellaneous-password-strength.png" alt="Código de Acesso" width="15" class="codigo-acesso" /> </div> <button class="button-acesso">Acessar</button> </div> </div> </div>
body { background-color: azure !important; } .container { height: 95vh; display: flex; justify-content: center; align-items: center; } .content { width: 1000px; max-width: 100%; border-radius: 5px; display: flex; height: 400px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } h1, p { text-align: center; } .left { width: 60%; border-right: 1px solid #fa2f2d; background-color: #fa2f2d; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 5px 0 0 5px; } .left h1, .left p { color: #fff; } .right { width: 40%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; border-radius: 0 5px 5px 0; } .right p { color: #7b7b80; } .grupo-input { width: 85%; position: relative; margin-bottom: 15px; } .input-codigo { width: 100%; height: 40px; border: 3px solid #b3b3b3; } .input-codigo, .button-acesso { outline: 0; } .codigo-acesso { position: absolute; right: 10px; top: 12px; } .button-acesso { background: #fa2f2d; width: 150px; height: 40px; border: none; color: #fff; text-transform: uppercase; font-weight: bold; font-size: 12px; border-radius: 3px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } @media (max-width: 700px) { .content { flex-direction: column; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .left, .right { width: 100%; border-radius: 0 !important; } .right { padding: 20px 0; } }

Related: See More


Questions / Comments: