Respostas no Fórum
-
Posts
-
@charset “UTF-8”;
*{
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 0px;
margin: 0px;
box-sizing: border-box;
}body, html{
background-color: #8C5637;
height: 100vh;
width: 100vw;}
main{
height: 100vh;
width: 100vw;
position: relative;
}section#login{
background-color: white;
width: 250px;
height: 500px;
overflow: hidden;
border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.732);
}section#login > div#imagem{
background-color: #8C5637 url(../imagem/marrom.jpg) no-repeat ;
background-size: cover;
background-position: left bottom;
height: 200px;
display: block;
}section#login > div#formulario{
padding: 10px;
display: block;
}@charset “UTF-8”;
@media screen and (min-width: 768px) and (max-width: 992px) {
selection#login {
width: 90vw;
}
}section#login > div#imagem{
float: left;
width: 30%;
height: 100%;
}section#login > div#formulario{
float: right;
width: 70%;
}<!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 rel=”stylesheet” href=”estilos/style.css”>
<link rel=”shortcut icon” href=”Dtafalonso-Yosemite-Flat-Contacts.ico” type=”image/x-icon”>
<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>Sejam bem-vindos(as)! Façam o login para o acesso da sua conta para atualização dos dados.</p>
<form action=”login.php” method=”post”></form>
</div>
</section>
</main>
</body>
</html>
