Oi gente! Espero que estejam bem! Fiz uma versão minha para o projeto porém, não consigo encontrar o erro para os meus links, eles deveriam estar um do lado do outro. Acredito que seja algo simples, mas ainda não consegui identificar onde estou errando! Poderiam me ajudar por favor? Obrigada!! :)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Barbearia Alura</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class = "caixa">
<h1> <img src ="logo.png"> </h1>
<nav>
<ul class = "navegacao">
<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">
<div class = "principal">
<h2 class = "titulo-centralizado">Sobre a Barbearia Alura</h2>
<p>Localizada no coração da cidade a <b>Barbearia Alura</b> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada e m 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>
<li class = "itens">Atendimento ao cliente</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
</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%;
margin: 5px 0;
}
.principal {
width: 1210px;
margin: 10px auto;
background: #ECF0F1;
padding: 10px;
box-sizing: border-box;
border: 5px solid #000000;
border-radius: 10px;
}
.titulo-principal {
padding-left: 20px;
}
.titulo-centralizado {
font-size: 20px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
padding-bottom: 20px;
}
p {
text-align: center;
}
#missao {
font-size: 20px
}
strong {
color: #FF0000; /*posso mudar a cor de acordo com o que esta selecionado na tag strong!*/
}
.itens {
font-size: 15px;
font-style: italic;
font-weight: bold;
padding: 5px 0;
}
.beneficios {
width: 1210px;
background: #ECF0F1;
padding: 20px 0;
margin: 10px auto;
box-sizing: border-box;
border: 5px solid #000000;
border-radius: 10px;
}
.itens-beneficios {
font-style: italic;
display: inline-block;
vertical-align: top;
padding-top: 30px;
width: 30%;
margin-left: 12.5%;
}
ul {
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; /* espaçamento interno*/
}
.copyright {
color: #FFFFFF;
font-size: 13px;
margin: 20px;
}
