Solucionado
Boa tarde,
Fiz alterações na página Home, e pretendo nos próximos dias criar a página Contato. Estou com dificuldade de entender a configuração das margens e seus valores, por isso acredito que os códigos de css possam ser melhorados!!! Aguardo a avaliação de vcs!
hoje, com a Alura e o Google Gemini
INDEX.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-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="lista-beneficios">
<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>
</main>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>
</body>
</html>STYLE.CSS
header {
background-color: lightgray;
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: black;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover {
color: #c78c19;
text-decoration: underline;
}
#banner {
width: 100%;
}
.principal {
background-color: white;
padding: 30px;
font-size: 20px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 10px;
width: 95%;
margin: 2% 2%;
}
.titulo-centralizado {
text-align: center;
font-size: 30px;
font-weight: bold;
}
p {
text-align: center;
margin: 2% 2%;
}
#missao {
font-size: 20px
}
em strong {
color: red;
}
.itens {
font-style: italic;
margin: 1.5%;
}
.beneficios {
background-color: white;
padding: 20px;
font-size: 20px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 10px;
width: 95%;
margin: 2% 2%;
}
.lista-beneficios {
text-align: center;
margin: 2%;
}
.imagembeneficios {
width: 50%;
margin: 2% 25%;
}
footer {
text-align: center;
background: url("bg.jpg");
padding: 40px 0;
}
.copyright {
color: white;
font-size: 13px;
margin: 20px 0 0;
}PRODUTOS.HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Produtos - Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="produtos.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>
<ul class="produtos">
<li>
<h2>Cabelo</h2>
<img src="cabelo.jpg">
<p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
<p class="produto-preco">R$ 25,00
</p>
</li>
<li>
<h2>Barba</h2>
<img src="barba.jpg">
<p class="produto-descricao">Corte e desenho profissional de barba</p>
<p class="produto-preco">R$ 18,00</p>
</li>
<li>
<h2>Cabelo + Barba</h2>
<img src="cabelo+barba.jpg">
<p class="produto-descricao">Pacote completo de cabelo e barba</p>
<p class="produto-preco">R$ 35,00</p>
</li>
</li>
</ul>
</main>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>
</body>
</html>PRODUTOS.CSS
header {
background-color: lightgray;
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: black;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover {
color: #c78c19;
text-decoration: underline;
}
.produtos {
width: 940px;
margin: 0 auto;
padding: 50px 0;
}
.produtos li {
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 10px;
}
.produtos li:hover {
border-color: #c78c19;
}
.produtos li:active {
border-color: green;
}
.produtos li:hover h2 {
font-size: 34px;
}
.produtos h2 {
font-size: 30px;
font-weight: bold;
}
.produto-descricao {
font-size: 18px;
}
.produto-preco {
font-size: 22px;
font-weight: bold;
margin-top: 10px;
}
footer {
text-align: center;
background: url("bg.jpg");
padding: 40px 0;
}
.copyright {
color: white;
font-size: 13px;
margin: 20px 0 0;
}
Bom dia, Claudia. Como vai?
Testei aqui o seu projeto e ele está muito bom! Vi que você já usou o footer, que nem é ensinado nesse curso mais introdutório, parabéns!
Uma dica para entender melhor as propriedades do CSS, inclusive MARGIN, é editar o seu projeto através do Inspecionar. É só clicar com o botão direito do mouse no seu projeto aberto no navegador, e depois clicar com o botão esquerdo em "inspecionar". Vai aparecer igual na imagem abaixo.
Nele, você pode clicar em cada ítem e conferir as propriedades que você ou o instrutor estilizaram, além do Reset Meyer. Pode também editar de maneira rápida, sem precisar ficar salvando e apagando no editor de texto, o que ficaria mais cansativo e trabalhoso.
Pra ver mais sobre posicionamento de elementos, você pode selecionar algum ítem do projeto clicando no código no inspecionar, e rolar para baixo a página no inspecionar mesmo, que vai aparecer um quadrado com cada valor de margin, border e padding, e você pode editar nele mesmo. Como na imagem abaixo:
Espero ter ajudado! Bons estudos! =D
Oi Luan,
Na verdade o footer aprendi sim no curso, no módulo 2 do HTML e CSS. Essa função de inspecionar (F12) é muito útil mesmo, o professor fala sobre ela. A minha dificuldade é básica mesmo, não tenho conhecimento prévio nenhum, estou começando do zero, então não sei direito qto aplicar, fui tentando mas imagino que irei aprender a lógica disso rs! Qdo mudei a configuração da página HOME era confuso definir as margens, mas no início o que não é confuso né?! Vou continuar o curso e espero ir entendendo melhor essa questão.
Obg!
Ops hahahah ele ensina sim sobre footer no último capítulo, me confundi, perdão.
Exato, Claudia. Para entender sobre margin, é necessário entender também sobre border e padding, pois um influência no outro. E exercitar bastante, que é o que você já está fazendo.
É legal fazer a Formação HTML e CSS completa, pois ela trabalha bastante com posicionamento em vários projetos, e você vai poder exercitar mais. Também achei esse link do mozilla, que explica detalhadamente as diferentes formas de sintaxe para esta propriedade, e vai ajudar a entender melhor.
Sobre o inspecionar, ele pode assustar de cara sim, mas na verdade esta ferramenta é bastante eficiente para entender o código por trás das páginas web. Por exemplo, você pode ir num site como Youtube.com, e dar um inspecionar no logotipo, e editar o seu espaçamento e ir aprendendo e brincando com o layout das páginas.
Espero ter ajudado! Caso tenha mais dúvidas, pode contar com a gente! =D
Ajudou sim, muuuuuito obrigada!!!