Estou tentando criar uma tela de login, na hora de diminuir a imagem ele permanece igual. Tentei por, na classe da imagem, width de 50% mas nada mudou, segue o codigo:
HTML:
<!DOCTYPE html>
<html lang="en">
<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 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="principal">
<section class="principal__um">
<img class="imagem" src="./assets/phone.png" alt="Foto de Pessoa usando o celular">
<h1>Comece de graça e consiga enormes vantagens.</h1>
</section>
<section class="principal__dois">
<h2>Faça seu cadastro</h2>
<div class="login">
<p>Já tem uma conta? </p>
<p>Login</p>
</div>
<div>
<a href="#">Faça login com Google</a>
<a href="#">Faça login com Facebook</a>
</div>
<p> ou </p>
<form action="#">
<label for="email"></label>
<input type="text" name="email" id="">
</form>
<form action="">
<label for="password"></label>
<input type="hidden" name="password">
</form>
</section>
</main>
</body>
</html>
CSS:
.principal{
display: flex;
justify-content: center;
align-items: center;
border: solid;
height: 100vh;
}
.principal__um{
border: solid;
}
.imagem{
height: 50%;
}
.login{
display: flex;
}
principal__um
não especificou a altura, e a classeimagem
ta seguindo essa especificação. Se colocar oheight
na classeprincipal__um
deve resolver o tamanho,.principal__um{border: solid; height: 100%;}