Posicionar logo e campos de formulário
Estou desenvolvendo uma página de cadastro, e estou com problemas para posicionar o logo da página e os campos de formulário, queria que algum entendedor de CSS me explicasse a forma correta e mais fácil de se fazer essas duas coisas. Está como na primeira, e deve ficar como na segunda.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
#header {
background-color: #e0e80d;
}
#header-logo {
padding-left: 50px;
padding-top: 50px;
}
#titulo {
text-align: center;
position: relative;
bottom: 70px;
font-size: 24px;
}
#content {
margin-top: 30px;
}
#camposCadastro {
width: 60%;
margin: 0 auto;
}#camposCadastro input {
padding: 10px;
width: 25%;
border-style: none;
box-shadow: 0px 0.5px #888888;
}
#enviar {
margin-left: 43%;
padding: 15px;
background-color: #b4bb07;
border-style: none;
border-radius: 4px;
width: 15%;
height: 50px;
color: white;
box-shadow: 1px 1px 1px #888888;
}
#footer {
background-color: #e0e80d;
margin-top: 303px;
padding: 50px;
display: flex;
justify-content: center;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="header-logo">
<img src="img/logo.png">
<h4>Social Network</h4>
</div>
</div>
<h1 id="titulo">Cadastro</h1>
<div id="content">
<form id="formulario">
<div id="camposCadastro">
<p>
<label for="nome">Nome:</label><input type="text" name="nome" id="nome" placeholder="Digite aqui seu nome">
<label for="sbnome">Sobrenome:</label><input type="text" name="sbnome" id="sbnome" placeholder="Digite aqui seu sobrenome">
</p>
<p>
<label for="email">E-mail:</label><input type="email" name="email" id="email" placeholder="Digite aqui seu email">
<label for="idade">Idade:</label><input type="number" name="idade" id="idade" placeholder="Digite aqui sua idade">
<label for="cpf">CPF:</label><input type="number" name="cpf" id="cpf" placeholder="Digite aqui seu CPF">
</p>
<p>
<label for="cep">CEP:</label><input type="number" name="cep" id="cep" placeholder="Digite aqui seu cep">
<label for="endereco">Endereço:</label><input type="text" name="endereco" id="endereco" placeholder="Digite aqui seu endereço">
<label for="senha">Senha:</label><input type="password" name="senha" id="senha" placeholder="Digite aqui sua senha">
</p>
</div>
<input type="submit" name="enviar" id="enviar" value="ENVIAR">
</form>
<div id="footer">
<p>Projeto Realiza Digital © 2017</p>
</div>
</div>
</body>
</html>
Discussão (0)
Carregando comentários...