Ao aplicar os conceitos aprendidos nesse módulo do curso na página "home" da barbearia alura, algumas dúvidas surgiram:
- Ao linkar o reset.css, as propriedades "h1", "h2", "strong", "em" e "li" perderam suas funções. Para resolver, eu retribui as funções "originais" delas no stylesheet dessa maneira:
.titulo-principal {
font-size: 24px;
text-align: center;
font-weight: bold;
margin: 0 0 15px 0;
strong {
font-weight: bold;
}
em {
font-style: italic;
}E no caso do "li", que não colocava mais os bullets em frente dos itens listados, eu usei o unicode no arquivo html, da mesma forma que colocamos o "c" do copyright:
<h3 class="titulo-beneficios">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>Minha dúvida é: existe alguma forma mais "elegante" de fazer isso?
- A outra dúvida é que entre a imagem do banner e o conteúdo principal ficou uma pequena linha em branco separando as duas. Busquei no console do navegador se havia alguma margem ou algo assim que estava separando as duas, porém não achei. Como fazer ela sumir?
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>
<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>
<main>
<img id="banner" src="banner.jpg">
<div class="principal">
<h2 class="titulo-principal">Sobre a Barbearia Alura</h2>
<p class="texto-principal">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.</p>
<p class="texto-principal">Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p class="texto-principal">Nossa missão é:<em>"Proporcionar auto-estima e qualidade de vida aos clientes"</em>.</p>
<p class="texto-principal">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-beneficios">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 id="img-beneficios" src="beneficios.jpg">
</div>
</main>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2020</p>
</footer>
</body>
</html>
CSS:
header {
background: #BBBBBB;
padding: 20px;
}
.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: 40px;
}
.titulo-principal {
font-size: 24px;
text-align: center;
font-weight: bold;
margin: 0 0 15px 0;
}
.texto-principal {
font-size: 18px;
text-align: left;
margin: 0 0 10px 0;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
.texto-principal em {
color: #FF0000;
}
.beneficios {
background: #FFFFFF;
padding: 30px;
}
.titulo-beneficios {
font-size: 24px;
text-align: center;
font-weight: bold;
margin: 0 0 15px 0;
}
.beneficios ul {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%;
}
.itens{
font-size: 18px;
font-style: italic;
margin: 0 0 15px 0;
}
#img-beneficios {
position: relative;
width: 30%;
left: 30%;
}
footer {
text-align: center;
background: url(bg.jpg);
padding: 40px 0;
}
.copyright {
color: #FFFFFF;
font-size: 13px;
}Obrigado!
