Olá a todos,
Muitos conflitos apareceram , foi desafiador e ao mesmo tempo divertido. Na foi ficou perfeito, porém por ser leigo no assunto, creio ter tido um bom resultado, simples claro, mas tudo como esperava. Vou deixar me código aqui para observarem e avaliarem.
Abraços a todos
<!--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.css">
</head>
<body>
<!--Cabeçalho-->
<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>
<!--Fim Cabeçalho-->
<!--Principal-->
<div class="principal">
<h2 class="titulo1-centralizado">Sobre a Barbearia Alura</h2><br/>
<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>
<!--Fim Principal-->
<!--Beneficio-inicio-->
<div><h3 class="titulo2-centralizado">Benefícios</h3></div>
<div class="beneficios">
<ul>
<li class="itens">-Atendimento aos clientes</li>
<li class="itens">-Espaço diferenciado</li>
<li class="itens">-Localização</li>
<li class="itens">-Profissinais Qualificados</li>
</ul>
<img style="float: right;" alt="" src="beneficios.jpg" class="imagembeneficios">
</div>
<!--Beneficio-Fim-->
<!--Rodapé-Inicio-->
<footer>
<img src="logo-branco.png">
<p class="copyright">©Copyright Barbearia Alura - 2019</p>
</footer>
</body>
</html>/*CSS*/
/*Cabeçalho*/
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: 20px;
text-decoration: none;
}
/*Fim Cabeçalho*/
/*Principal Inicio*/
.principal {
background: #FFFFFF;
padding: 70px;
border:1px solid;
}
.titulo1-centralizado {
text-align: left;
font-style: normal;
font-size: 35px;
word-break: normal;
}
p {
text-align: left;
font-size: 23px;
}
#missao {
font-size: 23px;
}
em strong {
color: #FF0000;
}
/*Fim principal*/
/*Beneficios*/
.titulo2-centralizado
{
background:#BBBBBB;
text-align: center;
font-style: normal;
font-size: 35px;
}
.itens {
font-style: normal;
font-size: 25px;
text-decoration-style: solid;
}
.beneficios {
display: flex;
background: #BBBBBB;
padding: 30px;
left: auto;
}
.imagembeneficios{
position: relative;
width: 50%;
vertical-align: top;
left: 60px;
}
/*Fim beneficios*/
/*Rodapé*/
footer{
text-align: center;
background: url("bg.jpg");
padding:40px 0;
}
.copyright{
color: #FFFFFF;
font-size: 13px;
margin-top: 20px 0 0;
text-align: center;
}
