<!DOCTYPE html>
<html>
<head> <!Info para navegador>
<meta charset="utf-8">
<title>Produtos - Barbearia Alura</title>
<link rel="stylesheet" href="reset.css"> <!Primeiro limpa, depois vem o nosso estilo>
<link rel="stylesheet" href="produtos.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logo.png"></h1>
<nav>
<ul><! Ul=Lista não ordenada, ou seja, a ordem dos links não importa>
<li><a href="index.html">Home</a></li> <!o A é uma TAG de conteúdo, mas ela precisa de um end de REFerência a = anchor, âncora>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li> <! Exemplo externo: ..="http://www.google.com">
</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$ 20,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>
</ul>
</main>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2021</p><!© é o símbolo>
</footer>
</body>
</html>
xxxxxxxxxxxxxxxxxx CSS: xxxxxxxxxxxxxxxxxxxxxx
header{
background: #BBBBBB; <! NÃO ESQUEÇA O PONTO-E-VÍRGULA>;
padding: 20px 0; <!padding = espaçamento>;
}
.caixa {
position: relative;
width: 940px;<! largura padrão para web>;
margin: 0 auto;
}
nav{
position: absolute;
top: 110px;
right: 0;
}
nav li{
display: inline;
margin: 0 0 0 15px; <!1* digito = top, 2* para right: , 3*para down; 4* para left: >;
}
nav a{
text-transform: uppercase; <!Transforma texto em maiúsculo>;
color: #000000; <!Cor do texto para preto>;
font-weight: bold; <! peso do texto em negrito>;
font-size: 22px; <!fonte em 22 pixels>;
text-decoration: none; <!tira o sublinhado padrão de link azul>;
}
nav a:hover { <!Pega todo movimento do mouse dentro dos links do menu de NAVegacao de a>;
color: #C78C19; <!Cor mostarda>;
text-decoration: underline; <!Coloca underline ao passar o mouse>;
}
.produtos{
width: 940px;
margin: 0px auto;
padding: 50px 0;
}
.produtos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
<!background: #CCCCCC; Só para montar, ter uma visão das caixas>;
margin: 0 1.5%;
padding: 30px 20px; <! 30 pixels para cima e para baixo, e 20 para os lados>;
box-sizing: border-box; <! as dimensões acima se tornam percentuais nas caixas>;
<! bordas: abaixo: tem tamanho, tipo e cor>;
<!border-color:#000000; border-width: 2px; border-style: solid; solid = linha, dotted=pontilhado, etc>;
<!Existe a border unificada: tamanho, tipo e cor>;
border: 2px solid #000000;
border-radius: 10px;
}
.produtos li:hover { <! ao passar o mouse na caixa dos produtos, muda:>;
border-color: #C78C19;
}
.produtos li:active { <!se for clicado, fica >;
border-color: #088C19; <!Verde>;
}
.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: 10px 0 0; espaçamento 10 para cima , 0 para os lados e 0 para baixo>;
margin-top: 10px; <!simplificada>;
}
footer {
text-align: center;
background: url("bg.jpg"); <!O fundo pode ser uma cor ou uma imagem>;
padding: 40px 0; <!40px para cima e baixo, 0 para laterais>;
}
.copyright {
color: #FFFFFF;
font-size: 13px;
margin: 20px;
<! R do registro é um unicode. Ver www.unicode-table>;
}
