Exercício CSS 08 - Tela de login com Flexbox e Media

Queries
A tela de login que foi desenvolvida neste
exemplo tem aparência e comportamento visual responsivos e utiliza os
recursos de flexbox e media queries para manter a compatibilidade e boa
experiência de usuário em diferentes dimensões de tela. 1.9) Desenvolver
a estrutura HTML:

A estrutura HTML da página é bastante simples, e é composta

basicamente por algumas divs, contendo um formulário com alguns
campos:

<div
class="container">
<div
class="form-box">
<form action=""
method="post">
<div>
<h1>Login</h1> </div>
<div>
<input type="text" name="username" placeholder="Informe seu login"
class="form-input"> </div> <div>
<input type="password" name="password" placeholder="Informe sua senha" class="form-input">
</div> <div>
<input type="submit" value="Entrar" class="form-btn"> </div>
<div>
Não é registrado? <a href="cadastro.html">Crie uma conta</a>. </div>
</form> </div> </div>

• Linha 1: essa div servirá como container geral para os demais

elementos
da página. Ela terá seu layout definido via flexbox para alinhar
a div "form box" no centro;
 Linha 2: a div "form-box" receberá as formatações de
dimensões, cores e será centralizada na div "container".
Como o elemento <div> representa um bloco/container de
uso geral, aplicamos a formatação via CSS a ela, ao
invés de fazê-lo no form;

Linha 3: aqui iniciamos o formulário, cuja propriedade action

deve ser alterada posteriormente, apontando para a
página no back-end que receberá os dados;
• Linhas 4 a 6: aqui temos uma div contendo apenas o título do
formulário,
para o qual usamos a tag
<h1>;

• Linhas 7 a 15: nesse trecho temos os inputs do formulário,

todos contidos
em divs para que sejam exibidos na forma de bloco (tomando toda a
linha), e não inline (lado a lado);

• Linhas 16 a 18: nessa última div temos um link para que o

usuário possa
se cadastrar, caso ainda não seja registrado no sistema. O
endereço da tag <a> deve ser alterado para apontar para a
página de cadastro do seu sistema.

2.9) Implementar o
CSS :
Para centralizar o formulário de login, tanto vertical quanto horizontalmente, de
forma independente da resolução da tela e dispositivo, utilizamos o recurso
felxbox do CSS3. Isso pode ser visto na classe container que definimos na
nossa folha de estilo, em que também fizemos as demais formatações
visuais de cor, borda, etc:
н
ш
.container {
width: 100vw; height:
100vh; background:
#6C7A89; display:
flex; flex-direction:
column;
justify-content:
center; align-items:
center
л
ст
со
о

Linhas 2 e 3: definimos, respectivamente, a largura e altura da diy

para ocupar 100% da tela. A unidades vw (vieweport width) e vh
(viewport height) são relativas às dimensões da área visível
(viewport);

• Linha 4: mudamos a cor de fundo do container, deixando-a escura

para
destacar o form de login no
centro (branco);

• Linha 5: definimos que o layout dessa div deve seguir o modelo

flexbox,
que nos oferece grande flexibilidade no posicionamento dos
seus elementos interno;
• Linha 6: a propriedade flex-direction define a direção em que os
elementos
internos serão dispostos. Nesse caso, definimos que eles
serão dispostos na vertical (em colunas);

Linha 7: a propriedade justify-content define como os elementos

internos serão alinhados. Nesse caso, eles serão alinhados ao
centro;

• Linha 8: a propriedade align-items define o alinhamento dos

elementos na
direção oposta ao que foi definido na propriedade flex-direction.
Ou seja, como definimos que os itens serão organizados em colunas, o
align-items define o alinhamento dos elementos na horizontal
(linhas). Nesse caso, os elementos itens serão alinhados também
ao centro.

Como ambas as propriedades justify-contente align-items estão

definidas como center, os elementos no interior da div container serão
centralizados na vertical e na horizontal

Além de centralizar o form na tela, adicionamos a ele um

comportamento diferenciado para telas com resolução muito
pequena. Nesses casos, o form ocupará toda a tela, ou seja, a área
cinza não aparecerá. Para isso usamos media queries, da seguinte forma:
min
@media screen and (max-width:
340px) {
.form-box {
 width: 100vw;
height: 100vh,

• Linha 1: essa media query faz com que os estilos definidos no seu interior
sejam aplicados a telas (screen) com até
340px de largura;

• Linhas 2 a 5: em telas pequenas, modificamos a classe

form-box para
ocupar toda a
tela.
RESULTADO ESPERADO PARA TELA DE
LOGIN

Login

Informe seu login

Informe sua senha

Entrar

Não é registrado? Crie uma

conta.
 RESULTADO ESPERADO PARA TELA DE CADASTRO

Cadastro

Informe seu login

Informe sua senha

Seu e-mail

Cadastrar

Já tem uma conta? Efetue

login.

CÓDIGO FONTE IMPLEMENTADO

cadastro.htm
Togin.html
estilo css
Nomes e extensões dos arquivos HTML e CSS.

cadastro.html
login.html
estilo.c:35

<!DOCTYPE html> <html lang="pt-br> <head>

<meta charset="UTF-8"> <title>Meu Sistema Login</title>
<link rel="stylesheet" href=css/estilo.css"> </head> <body>
<div class="container">
<div class=form-box">
<form action=method= post->
<div>
<h1>Login</h1> </div>

<div>
<input type=text" name="username" placeholder= Informe seu login"
class="form-input"> </div>

<div>
<input type=password" name="password" placeholder="Informe sua senha
class="form-input> </div>

<div>
<input type="submit" value="Entrar" class="form-btn"> </div>

<div>
Não é registrado? <a href="cadastro.html"Crie uma conta</a>. </div> </form>
</div> </div> </body> </html>
cadastro html
lagin.html
esta.css

<!DOCTYPE html> <html lang="en > <head>

<meta charset=UTF-8 > <title Meu Sistema Cadastro</title>
<link rel="stylesheet" href="css/estilo.css"> </head> <body>
<div class container">
<div class="form-box
form action= painel.html" method=post
<div>
chi Cadastro /h1> </div>

<div>

<input type="text" name="username placeholder="Informe seu

login class-for-inputs

<div>
<input type="password" name=password" placeholder="Informe sua
senha class-form-input </div>

<input type"email" name="email placeholder=seu e-saill class-for-input

</div>

<input type="submits value=Cadastrar class="form-btn </div>

<div>
Já tem uma conta? <a href="login.html >Efetue login</a>.

ctform </div> </div> </body>

J

cadastro.html
login.html
estilo css

1
import url("https://fonts.googleapis.com/css?family=Lato")
Nm
body {
padding: 0; margin: 0;
0 9
.container {
width: 100vw; height: 100vh; background: #6C7A89; display: flex;
flex-direction: column; justify-content: center; align-items: center
9
9 9
.form-box {
Width: 300px; background: #fff; font-family: Lato; text-align: center;
padding: 20px; box-sizing: border-box; border-top: 10px solid #1BA390
&
&
& RA
form-box .form-input {
border: none; background: #eee; width: 100%; height: 50px; text-align:
center; font-size: large; margin-bottom: 16px
M
8 9
.form-box .form-btn {
border: none; background: #1BA390; width: 100%; height: 50px;
font-size: large; color: #fff; margin-bottom: 10px
#
$ $&A A A
@media screen and (max-width:346px {
.form-box {
width: 100vw; height: 100vh