- Este tópico contém 14 respostas, 2 vozes e foi atualizado pela última vez 2 anos, 6 meses atrás por
.
-
Posts
-
-
Não consigo manter a responsividade. No desktop está perfeito o posicionamento do formulário, mas quando vou diminuindo a tela o input do e-mail e password são deslocados. Segue código:
HTML:
<!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>Login</title>
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
<link rel=”stylesheet” href=”estilos/style.css”>
<link rel=”stylesheet” href=”estilos/media-query.css”>
</head>
<body>
<main>
<section id=”login”>
<div id=”imagem”></div>
<div id=”formulario”>
<h1>Login</h1>
<p>Seja bem-vindo(a) novamente. Faça login para acessar sua conta e poder fazer as configurações no seu ambiente.</p>
<form action=”login.php” method=”post” autocomplete=”on”>
<div class=”campo”>
<i class=”material-icons”>person</i>
<input type=”email” name=”login” id=”ilogin” placeholder=”seu e-mail” autocomplete=”email” required maxlength=”30″>
<label for=”ilogin”>Login</label>
</div>
<div class=”campo”>
<i class=”material-icons”>vpn_key</i>
<input type=”password” name=”senha” id=”isenha” placeholder=”sua senha” autocomplete=”current-password” required minlength=”8″ maxlength=”20″>
<label for=”isenha”>Senha</label>
</div>
<input type=”submit” value=”Entrar”>
Esqueci a senha
</form>
</div>
</section>
</main>
</body>
</html>CSS:
@charset “UTF-8”;
/*
Paleta de Cores
Verde: #49a09d
Lilás: #5f2c82*/
* {
font-family: system-ui, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif;
padding: 0px;
margin: 0px;
box-sizing: border-box;
}body, html {
background-color: #5f2c82;
height: 100vh;
width: 100vw;
}main {
position: relative;
height: 100vh;
width: 100vw;
}section#login {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
background-color: white;
width: 250px;
height: 515px;
border-radius: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.450);
transform: translate(-50%, -50%);
transition: width .3s, height .3s;
transition-timing-function: ease;
}section#login > div#imagem {
display: block;
background: #5f2c82 url(../imagens/pexels-adrien-olichon-3137087.jpg) no-repeat;
background-size: cover;
height: 200px;
}section#login > div#formulario {
display: block;
padding: 10px;
}div#formulario > h1 {
text-align: center;
margin-bottom: 10px;
}div#formulario > p {
font-size: 0.8em;
}form > div.campo{
background-color: #5f2c82;
border: 2px solid #5f2c82;
display: block;
width: 100%;
height: 40px;
border-radius: 8px;
margin: 5px 0px;
}div.campo > label {
display: none;
}div.campo > i {
color: white;
font-size: 2em;
width: 40px;
padding: 5px;
}div.campo > input {
background-color: #94cfcd;
font-size: 1em;
width: 90%;
height: 100%;
border: 0px;
border-radius: 8px;
padding: 4px;
transform: translateY(-12px);
}div.campo > input:focus-within {
background-color: white;
}form > input[type=submit]{
display: block;
font-size: 1em;
width: 100%;
height: 40px;
background-color: #49a09d;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}form > input[type=submit]:hover{
background-color: #21403f;
}form > a.botao{
display: block;
text-align: center;
font-size: 1em;
width: 100%;
height: 40px;
padding-top: 7px;
margin-top: 7px;
background-color: white;
color: #21403f;
border: 1px solid #49a09d;
border-radius: 5px;
text-decoration: none;
}form > a.botao:hover{
background-color: #6cd3cf;
}form > a.botao > i {
font-size: 0.8em;
}CSS:
@charset “UTF-8”;
@media screen and (min-width: 768px) and (max-width: 992px){
/* CONFIGURAÇÕES PARA TABLET */
body{
background-image: linear-gradient(to top, #49a09d, #5f2c82);
}
section#login {
width: 70vw;
height: 280px;
}
section#login > div#imagem {
float: left;
width: 30%;
height: 100%;
}
section#login > div#formulario {
float: right;
width: 70%;
}
div#formulario > h1 {
font-size: 1em;
}
div#formulario > p {
font-size: .7em;
margin: 20px 0px;
text-align: justify;
}
}@media screen and (min-width: 992px){
/* CONFIGURAÇÕES PARA DESKTOP */
body{
background-image: linear-gradient(to top, #49a09d, #5f2c82);
}
section#login {
width: 950px;
height: 350px;
}
section#login > div#imagem{
float: left;
width: 50%;
height: 100%;
}
section#login > div#formulario{
float: right;
width: 50%;
}
div#formulario > h1 {
font-size: 2em;
}
div#formulario > p {
font-size: 1em;
margin: 20px 0px;
}
} -
Bom dia Felipe, você tem algum repositório desse código no seu github?
Te sugiro dar uma olhada nas aulas anteriores onde é feita essa parte da responsividade e prestar bem atenção na sequência do código do professor Guanabara, pois isso pode interferir em alguma falha no seu código.
Caso não consiga, só voltar aqui no fórum que vamos tentar lhe ajudar. 🖖 -
Bom Dia,
Segue o link no github: https://felipesantinho.github.io/html-css/projeto-login/index.html
-
-
-
-
Arquivo no GitHub
https://github.com/felipesantinho/html-css/tree/main/projeto-login
-
Boa tarde, então Felipe, peço para que reveja o final da ultima aula e tenha atenção nesse trecho..
O seu código esta divergente ao que o professor Guanabara apresenta em aula:div.campo > input { background-color: #94cfcd; font-size: 1em; width: 90%; height: 100%; border: 0px; border-radius: 8px; padding: 4px; transform: translateY(-12px); } -
-
-
-
-
-
-
-
- Você deve fazer login para responder a este tópico.