Boa tarde!!!
Já revisei varias vezes e o titulo HOME; PRODUTOS e CONTATO não fica centralizado como o do Pedro. Acompanhei passo a pass e não consegui achar onde estou errando.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Boa tarde!!!
Já revisei varias vezes e o titulo HOME; PRODUTOS e CONTATO não fica centralizado como o do Pedro. Acompanhei passo a pass e não consegui achar onde estou errando.
Boa tarde Eduardo, poderia postar aqui seu codigo html e css para que eu possa dar uma olhada ?
Boa tarde João Vinícius.
Obrigado pela atenção e desculpe-me por só agora estar te retornando.
já consegui resolver o problema. Era um espaço que estava a mais.
Obrigado!!!
Estou com um problema parecido mas já olhei um monte e nada de achar o bendito haha. Após copiar o header da página Produtos, e transferir para a principal, os itens do menu não ficam lado a lado como o das outras páginas.
Vou deixar o código abaixo para ser analisado com olhos externos
index.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style-home.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contatos.html">Contatos</a></li>
</ul>
</nav>
</div>
</header>
<img id="banner" src="banner.jpg">
<main>
<section class="principal">
<h2 class="titulo-centralizado">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>
</section>
<section class="beneficios">
<h3 class="titulo-centralizado">Benefícios</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">*Profissionais Qualificados</li>
</ul>
<img src="beneficios.jpg" class="imagembeneficios">
</section>
</main>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>
</body>
</html>style-home.css
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;
}
#banner {
width: 100%;
}
.principal{
background: #CCCCCC;
padding: 30px;
}
.titulo-centralizado{
text-align: center;
}
p {
text-align: center;
}
#missao{
font-size: 20px;
}
em strong{
color: red;
}
.itens{
font-style: italic;
}
.beneficios{
background: #FFFFFF;
padding: 20px;
font-size: 23px;
}
ul{
font-size: 21px;
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 20%;
}
.imagembeneficios{
width: 50%;
}
footer{
text-align: center;
background: url(bg.jpg);
padding: 40px 0px;
}
Olá Jaisson,
Vi que você organizou a estrutura do css numa sequencia linear, indo do cabeçalho para o corpo e depois para o rodapé.
Os navegadores leem o css da mesma forma, porém aplicam os valores em uma "escala global", isso é, se no início você deu um atributo para uma classe e no final você deu outro atributo para a mesma classe, esse ultimo vai ser aplicado, sobrepondo o primeiro.
O erro ocorreu porque mesmo você tentando editar os atributos no início do css, uma tag que você usou na parte dos benefícios acabava aplicando os atributos para a lista de benefícios e também para a lista do cabeçalho.
Para resolver o problema, basta criar uma classe para essa ul dos benefícios:
.listabeneficios{
...
}Ou especificar qual ul esta sendo usado:
.beneficios ul{
...
}