No inicio da aula percebi pelo vídeo do professor que o header dele continua na mesma linha as palavras "home produtos contato", já na minha página contatos elas ficaram uma em cada linha. Porém, na minha página dos Produtos, elas seguem da mesma maneira, todas na mesma linha. Deixo abaixo meu produtos.css, o style.css e o contato.html
header{
background: #BBBBBB;
padding: 20px 0;
}
.caixa {
position:relative;
width: 940px;
margin: 0 auto;
}
nav{
position: absolute;
top: 110px;
right: 0;
}
nav li {
display: inline;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover{
color: #C78C19;
text-decoration: underline;
}
.produtos {
width:940px;
margin: 0 auto;
padding: 50px 0;
}
.produtos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid #000000;
border-radius: 10px;
}
.produtos li:hover{
border-color: #C78C19;
}
.produtos li:active{
border-color: #088C19;
}
.produtos li:hover h2{
font-size: 34px;
}
.produtos h2{
font-size: 30px;
font-weight: bold;
}
.produto-descricao{
font-size: 18px;
}
.produto-preco{
font-size: 22px;
font-weight: bold;
margin-top: 10px;
}
footer{
text-align: center;
background-image: url("img/bg.jpg");
padding: 40px 0;
}
.copyright{
color: #FFFFFF;
font-size: 13px;
margin-top: 20px;
}body {
}
h1{
padding-left: 20px;
}
#banner{
width: 100%;
}
.principal{
background: #CCCCCC;
padding: 30px;
}
h2,
h3,
p{
text-align: center;
}
em strong{
color: red;
}
em{
font-size: 20px;
}
.beneficios{
background: #FFFFFF;
padding: 20px;
}
ul{
display: inline-block;
vertical-align: top;
width: 20%;
padding-right:15%;
}
.itens{
font-style: italic;
}
.imagembeneficios{
width: 50%;
}
main {
width: 940px;
margin: 0 auto;
}
form {
margin: 40px 0;
}
form label,
form p{
margin-bottom: 10px;
display: block;
font-size: 20px;
text-align: left;
}
.input-padrão{
width: 50%;
display: block;
margin-bottom: 20px;
padding: 10px 25px;
}
.checkbox{
margin: 20px 0;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="produtos.css">
<link rel="stylesheet" href="style.css">
<title>Contato - Barbearia Alura</title>
</head>
<body>
<header>
<div class="caixa">
<h1><img src="img/logo.png"></h1>
<nav>
<ul>
<li><a href="index.html" target="_blank">Home</a></li>
<li><a href="produtos.html" target="_blank">Produtos</a></li>
<li><a href="contatos.html" target="_blank">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main>
<form>
<label for="nomeesobrenome">Nome e Sobrenome</label>
<input type="text" id="nomeesobrenome" class="input-padrão">
<label for="email">Email</label>
<input type="email" id="email" class="input-padrão">
<label for="telefone">Telefone</label>
<input type="tel" id="telefone" class="input-padrão">
<label for="mensagem">Mensagem</label>
<textarea cols="70"rows="10" id="mensagem" class="input-padrão"></textarea>
<div>
<p>Como prefere nosso contato?</p>
<label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>
<label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone</label>
<label for="radio-whatsapp"><input type="radio" name="contato" value="whatsapp" id="radio-whatsapp">Whatsapp</label>
</div>
<div>
<p>Qual horário prefere ser atendido?</p>
<select>
<option>Manhã</option>
<option>Tarde</option>
<option>Noite</option>
</select>
</div>
<label class="checkbox"><input type="checkbox">Gostaria de receber nossas novidades por email?</label>
<input type="submit" value="Enviar Formulário">
</form>
</main>
<footer>
<img src="img/logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>
</body>
</html>
