bom dia
nao estou conseguindo mantero o cabeçalho da Home do mesmo tamanho que na pagina de produtos. O cabecalho de home está maior do que o cabeçalho da pagina de produtos. nao sei o q fazer...
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!
bom dia
nao estou conseguindo mantero o cabeçalho da Home do mesmo tamanho que na pagina de produtos. O cabecalho de home está maior do que o cabeçalho da pagina de produtos. nao sei o q fazer...
<!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.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="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
</body>
<h1 class="titulo-principal">Barbearia Alura</h1>
<img id="banner" src="banner.jpg">
<div 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>
</div>
<div class="beneficios">
<h3 class="titulo-centralizado">Benefícios</h3>
<ul class="ul-index">
<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">
</div>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>
</body>
</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;
}
#banner {
width: 100%;
}
.principal{
background: #CCCCCC;
padding: 30px;
}
.titulo-principal {
padding-left: 50px;
}
.titulo-centralizado {
text-align:center
}
p {
text-align: center
}
#missao {
font-size: 20px
}
em strong {
color: #FF0000;
}
.itens {
font-style: italic;
}
.beneficios {
background: #FFFFFF;
padding: 30px;
}
.ul-index {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%;
}
.imagembeneficios {
width: 50%;
}
footer {
text-align: center;
background: url("bg.jpg");
padding: 40px 0;
}
.copyright {
color: #FFFFFF;
font-size: 13px ;
margin: 20px 0 0;
}ah e aproveito para acrescentar que meu rodapé também ficou em tamanho desproporcional se comparado à página de produtos.
Acho que isso aconteceu porque você não usou o reset.css isso pode ter deixado o tamanho dos elementos alterados em relaçao a outra página que você usou
bom dia usei sim o reset css . Acontece que quando colei acima, nao sei por que foi omitido o head do meu código html. Acabei de corrigir o erro no código html apresentado acima. Por que entao o cabeçalho da minha home teria ficado tao desproporcional com relação à página de produtos? Gostaria muito de ajuda pra resolver isso. Ficaria mt grato.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Produtos Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>Segue acima o envio da parte do codigo que faltava - o head do html.