"login"
Bootstrap 4.1.1 Snippet by paulohnmatos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: