Skip to content

Commit 5c1f473

Browse files
EddyLopesEddyLopes
committed
incluído formulário login
1 parent 4e9e36e commit 5c1f473

File tree

3 files changed

+88
-2
lines changed

3 files changed

+88
-2
lines changed

‎Curso-em-Video-Html-CSS/Html-css/Desafios/d015/estilos/media-query.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@charset "UTF-8";
2+
3+
/*
4+
pesquisar sobre Typical Device Breakpoints
5+
Recomendações do W3C:
6+
Pequenas telas: até 600px
7+
Celular: de 600px até 768px
8+
Tablet: de 768px até 992px
9+
Desktop: de 992px até 1200px
10+
Grandes telas: acima de 1200px
11+
*/
12+
13+
@media screen and (min-width: 768px) and (max-width:992px){ /*Tablet*/
14+
body {
15+
background-image: linear-gradient(to top, #49a09d,#5f2c82);
16+
}
17+
18+
section#login {
19+
width: 80vw;
20+
}
21+
22+
section#login > div#imagem {
23+
float: left;
24+
width: 30%;
25+
height: 100%;
26+
}
27+
28+
section#login > div#formulario {
29+
float: right;
30+
width: 70%;
31+
}
32+
}
33+
34+
@media screen and (min-width: 992px) { /*telas grandes*/
35+
body {
36+
background-image: linear-gradient(to top, #49a09d,#5f2c82);
37+
}
38+
39+
section#login {
40+
width: 950px;
41+
}
42+
43+
section#login > div#imagem {
44+
float: right;
45+
width: 50%;
46+
height: 100%;
47+
}
48+
49+
section#login > div#formulario {
50+
float: left;
51+
width: 50%;
52+
}
53+
54+
div#formulario > h1 {
55+
font-size: 2em;
56+
}
57+
58+
div#formulario > p {
59+
font-size: 1.2em;
60+
}
61+
}

‎Curso-em-Video-Html-CSS/Html-css/Desafios/d015/estilos/style.css

+12
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ section#login {
3737
border-radius: 20px;
3838
overflow: hidden;
3939
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.450);
40+
41+
transition: width 0.3s, height 0.3s;
42+
transition-timing-function: ease;
4043
}
4144

4245
section#login > div#imagem {
@@ -50,4 +53,13 @@ section#login > div#imagem {
5053
section#login > div#formulario {
5154
display: block;
5255
padding: 10px;
56+
}
57+
58+
div#formulario > h1 {
59+
text-align: center;
60+
margin-bottom: 10px;
61+
}
62+
63+
div#formulario > p {
64+
font-size: 0.8em;
5365
}

‎Curso-em-Video-Html-CSS/Html-css/Desafios/d015/index.html

+15-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Login</title>
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
78
<link rel="stylesheet" href="estilos/style.css">
9+
<link rel="stylesheet" href="estilos/media-query.css">
810
</head>
911
<body>
1012
<main>
@@ -16,8 +18,19 @@
1618
<div id="formulario">
1719
<h1>Login</h1>
1820
<p>Seja bem-vindo(a) novamente. Faça login para acessar a sua conta e poder fazer as configurações no seu ambiente.</p>
19-
<form action="login.php" method="post">
20-
21+
<form action="login.php" method="post" autocomplete="on">
22+
<div class="campo">
23+
<i class="material-icons">person</i>
24+
<input type="email" name="email" id="iemail" placeholder="Seu e-mail" autocomplete="email" required maxlength="30">
25+
<label for="ilogin">Login</label>
26+
</div>
27+
<div class="campo">
28+
<i class="material-icons">vpn_key</i>
29+
<input type="password" name="Senha" id="isenha" placeholder="Sua senha" autocomplete="current-password" required minlength="8" maxlength="20">
30+
<label for="isenha">Senha</label>
31+
</div>
32+
<input type="submit" value="Entrar">
33+
<a href="esqueci.html">Esqueci a senha <i class="material-icons">mail</i></a>
2134
</form>
2235
</div>
2336
</section>

0 commit comments

Comments
 (0)