Fiz o exercício proposto de melhorar a página do primeiro curso.
Segue o código para quem estiver fazendo poder pegar ideias e caso alguém queira sugerir alguma melhoria!
<!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>
<img id="banner" src="banner.jpg">
</header>
<main>
<div class="fundo-principal">
<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><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>
<div class="cor-beneficios">
<div class="beneficios">
<h3 class="titulo-centralizado">Benefícios</h3>
<ul class="itens">
<li>Atendimento aos clientes</li>
<li>Espaço diferenciado</li>
<li>Localização</li>
<li>Profissionais qualificados</li>
</ul>
<img src="beneficios.jpg" class="imagem-beneficios">
</div>
</div>
</main>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2021</p>
</footer>
</body>
</html>header { background: #825B53; }
.fundo-principal { background: #825B53; margin: 0; padding-bottom: 20px; padding-top: 20px;
}
.principal { position:relative; width: 940px; margin: 0 auto; }
#banner{ width: 100%; }
.titulo-principal{ padding-left: 20px; }
.titulo-centralizado{ text-align: center; padding: 10px; margin-bottom: 30px; font-size: 40px; font-weight: bold; font-family: cursive; }
.cor-beneficios { background: #FFFFFF }
.beneficios{ background: #FFFFFF; position: relative; width: 940px; margin: 30px auto;
}
.principal p { text-align: center; margin: 30px 0 30px 0; padding: 10px; font-family: cursive; }
.itens{ font-style: italic; font-weight: bold;
}
ul{ display: inline-block; vertical-align: top; width: 30%; padding-top: 30px; margin-top: 30px; margin-right: 5%; margin-bottom: 90px; }
.itens li { padding: 15px; margin: 15px; border: 2px solid #000000; border-radius: 5px; }
.imagem-beneficios{ width: 60%; float: right; }
footer { text-align: center; background: url(bg.jpg); padding: 40px 0; }
.copyright { color: #FFFFFF; font-size: 13px; margin: 20px 0 0; }
