Fala galera. Continuando a saga de desenvolvimento de um site pessoal. ;) O conteúdo completo está lá no meu repositório no https://github.com/PhanthroX
servicos.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Serviços - Pâmela Medeiros</title>
<link rel="stylesheet" href="src/css/reset.css">
<link rel="stylesheet" href="src/css/servicos.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img id="logo" src="src/img/foto_modelo2.png"></h1>
<nav>
<ul>
<li><a href="pam.html">Home</a></li>
<li><a href="servicos.html">Serviços</a></li>
<li><a href="contato.html">Contatos</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div>
<ul class="servicos1">
<h2 class="strong">Cílios</h2>
<li>
<h2 class="itens">Mega Volume Russo</h2>
<img class="fotos" src="src/img/russo mega.jpeg">
</li>
<li>
<h2 class="itens">Diamond Butterfly</h2>
<img class="fotos" src="src/img/russo diamond butterfly.jpeg">
</li>
<li>
<h2 class="itens">Volume Russo Light</h2>
<img class="fotos" src="src/img/russo light.jpeg">
</li>
</ul>
</div>
<div>
<ul class="servicos1">
<li>
<h2 class="itens">Volume Brasileiro</h2>
<img class="fotos" src="src/img/brasileiro.jpeg">
</li>
<li>
<h2 class="itens">Foxy Eyes</h2>
<img class="fotos" src="src/img/foxy eyes.jpeg">
</li>
<li>
<h2 class="itens">Volume Tradicional</h2>
<img class="fotos" src="src/img/tradicional2.jpeg">
</li>
</ul>
</div>
</main>
</body>
</html>servicos.css
/*
Adicionando cor ao fundo do cabeçalho e ajustando o padding.
*/
header {
background: #eeb3f3;
padding:0;
}
/*
Criando a posição da div caixa e centralizando a logo e a home na página.
*/
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}
/*
Ajustando o tamanho da logo.
*/
#logo {
width: 300px;
height: 350px;
}
/*
Ajustando a posição de navegação.
(Absolute serve para quebrar a posição padrão de um item, podendo assim, realocar o mesmo)
*/
nav {
position: absolute;
top: 170px;
right: 40px;
}
/*
Ajustando o display dos itens da home para que fiquem alinhados um ao lado do outro. (inline)
*/
nav li {
display: inline;
margin: 0 0 0 15px;
}
/*
Estilizando os itens da home.
(A tag <a> serve como âncora(link) para outra página html)
*/
nav a {
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
font-size: 22px;
}
/*
Class Strong para os títulos importantes e itens para italico.
*/
.servicos1 li{
display: inline-block;
margin-left: 08%;
vertical-align: top;
width: 30%;
box-sizing: border-box;
padding: 30px 20px;
background: #f19595;
margin: 0 1.5%;
text-align: center;
}
.servicos1 {
background: #ae04bea6;
}
.strong {
font-weight: bold;
font-size: 40px;
padding: 2%;
text-align: center;
color:aliceblue;
}
.itens {
font-style: italic;
font-size: 30px;
text-align: center;
margin-top: 2%;
color: aliceblue;
}
.fotos {
weight: 380px;
height: 540px;
padding: 1%;
margin-top: 2%;
}