Fala galera! Estou com criando um projeto a partir das aulas do curso de HTML e CSS. Pra quem quiser dar uma olhada, o projeto está lá no https://github.com/PhanthroX/studying-html-css. ;)
Inclusive, estou aprendendo a mexer com Git e no GitHub. Tentei organizar o projeto da melhor forma! Valeu!
pam.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Pâmela Medeiros</title>
<link rel="stylesheet" href="src/css/style.css">
</head>
<body>
<div class="principal">
<div class="principal-inicio">
<img id="logo-studio" src="src/img/Logo em png.png">
<p>Crie Seu Próprio Padrão de Beleza!</p>
</div>
<div class="principal-fotos">
<p><img id="foto" src="src/img/foto.jpg";></p>
<p><img id="foto3" src="src/img/foto3.jpeg"><img id="foto2" src="src/img/foto2.jpeg"></p>
</div>
</div>
<div class="servicos">
<h2>Serviços</h2>
<ul>
<li class="itens">Extensão de Cílios;</li>
<li class="itens">Micropigmentação;</li>
<li class="itens">Limpeza de Pele;</li>
<li class="itens">Lábios (Projeto PerfectLips);</li>
<li class="itens">Pealing;</li>
<li class="itens">Desing de Sobrancelha;</li>
<li class="itens">Entre outros.</li>
</ul>
<img id="foto_serv" src="src/img/foto_serv.png";>
</div>
</body>
</html>style.css
/*
Colorindo o fundo que envolve o body.
*/
body {
background: #cc047fb9;
}
/*
Colorindo o fundo e organizando a class principal.
*/
.principal {
background: #fc649ecb;
}
.principal-inicio {
text-align: center;
padding: 3%;
background: #fa81f0;
font-size: 35px;
font-style: italic;
text-align: center;
}
#logo-studio {
width: 1000px;
height: 800px;
}
.principal-fotos {
padding: 5%;
}
/*
Estilização das fotos.
*/
#foto {
width: 600px; height: 704px;
padding: 15px;
}
#foto2 {
width: 662px;
height: 704px;
padding: 10px;
}
#foto3 {
width: 662px;
height: 704px;
padding: 10px;
}
/*
Colorindo o texto / Alinhando ao centro e alterando o tamanho da fonte.
*/
h1 {
color:#3d001ff5;
text-align: center; font-size: 60px;
}
em {
color:#3d001ff5;
}
/*
Alinhando ao centro cada parágrafo.
*/
p {
text-align: center;
}
/*
Estilizando a class dos serviços.
*/
.itens {
font-style: italic;
font-size: 150%;
}
h2 {
text-align: center;
}
.servicos {
background: #be59ec;
padding: 20px;
}
ul {
display: inline-block;
vertical-align: top;
padding: 40px;
}
#foto_serv {
width: 250px;
}