Solucionado
Pessoal preciso de uma ajuda, estou tentando usar o link do Set no exercício da aula um, na pagina da barbearia, porem estou colocando acima de tudo para não limpar o que já foi criado, porem esta limpando tudo e não consigo fazer as correções, o que estou fazendo de errado?
<head>
<meta charset="UTF-8">
<title>Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="tituloPrincipal">Barbearia Alura</h1>
</header>
<img id="banner" src="banner.jpg">
<div class="principal">
<h2 class="tituloCentralizado">Sobre a Barbearia Alura</h2>
<p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
<p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</div>
<div class="beneficios">
<h3 class="tituloCentralizado">Beneficios</h3>
<ul>
<li class="itens">Atendimento aos Cientes</li>
<li class="itens">Espaço diferenciado</li>
<li class="itens">Localização</li>
<li class="itens">Profissional Qualificados</li>
</ul>
<img src="beneficios.jpg" class="beneficiopic">
</div>
</body>
Oi João, tudo bem?
Visualizando seu html está tudo certo, a posição do reset é essa mesmo.
Mas você poderia, por favor, nos mostar como está o seu css colando ele aqui?
Abraços e bons estudos.
então esse ja resolvi, fiz uma copia e fui alterando o arquivo do reset ate achar o que estava causando aquilo, porem estou com outro problema.
<body>
<header>
<div class="caixa">
<h1><img src="logo.png"></h1>
<nav>
<ul>
<li><a href="index_copy.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<img class="banner" src="banner.jpg">
<div class="principal">
<h2 class="tituloCentralizado">Sobre a Barbearia Alura</h2>
<p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
<p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</div>
<div class="beneficios">
<h3 class="tituloCentralizado">Beneficios</h3>
<ul>
<li class="itens">Atendimento aos Clientes</li>
<li class="itens">Espaço diferenciado</li>
<li class="itens">Localização</li>
<li class="itens">Profissional Qualificados</li>
</ul>
<img src="beneficios.jpg" class="beneficiopic">
</div>
<footer>
<img src="logo-branco.png">
<p class=copyright> ©Copyright Barbearia Alura – 2019</p>
</footer>
</body>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CSS
header { background: #BBBBBB; padding: 20px 0; }
.caixa { position: relative; width: 940px; margin: auto; }
nav { position: absolute; top: 30px; right: 0; }
nav li { display: inline; }
nav a { text-transform: uppercase; color: black; font-weight: bold; font-size: 22px; text-decoration: none; }
nav a:hover { color: goldenrod; text-decoration: overline; }
.produtos li:hover{ border-color: goldenrod; }
.produtos li:hover h2{ font-size: 40px; }
.produtos li:active { border-color: navajoWhite; }
.produtos li:hover .preco-produtos{ font-size: 35px; }
.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 black; border-radius: 10px; }
.produtos h2{ font-size: 30px; font-weight: bold; }
.descricao-produtos{ font-size: 18px; }
.preco-produtos{ font-size: 20px; font-weight: bold; margin-top: 10px; }
footer { text-align: center; background: url(bg.jpg); padding: 40px 0; }
.copyright { font-size: 13px; color: white; margin-top: 20px; }
.principal { background: lightgray; padding: 30px; }
.tituloPrincipal { font-size: 50px; padding: 20px; display: inline-block; vertical-align: top; margin-top: 85px ; margin-right: 5%; }
.tituloCentralizado { text-align: center; font-size: 30px; margin: 20px; }
p { text-align: center; } .banner { width: 100%; }
em strong { color: red; }
#missao { font-size: 20px; }
.itens { font-style: italic; font-size: 25px; }
.itens:hover { color: goldenrod; }
ul { display: inline-block; vertical-align: top; width: 20%; margin-right: 15%; padding: 55px; }
.beneficiopic { vertical-align: top; width: 50%; padding: 20px; padding-top: 0px; }
XXXXXXXXXXXXXXXX
Alterei meu home para ficar patrão, tenho que mexer na estrutura do meu código para ficar mais limpo, porem agora cada meu li do top não esta mais em inline, e sim um em cima do outro.
Oi João, testei seu código e vi umas coisas:
No seu html está faltando o head que é uma parte muito importante, pois é onde vai o título da página, os metadados e links de importação de coisas como o css.
No css na parte de .caixa, coloque uma margin 0 antes do auto:
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}No nav, coloque:
nav {
position: absolute;
top: 110px;
right: 0;
}No nav li, coloque:
nav li {
display: inline;
margin: 0 0 0 15px;
}Veja se com essas soluções, você consegue ajustar seu projeto.
Bons estudos.