Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Praticando - Projeto Pessoal :)

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%;
}
2 respostas
solução!

Oi Matheus, tudo bem?

Essa saga tá indo bem hein? Gostei bastante dos comentários que você fez no código,

/*
    Ajustando a posição de navegação. 
    (Absolute serve para quebrar a posição padrão de um item, podendo assim, realocar o mesmo)
    */

Ajuda bastante para quando você for ler de novo seu código saber o por quê fez cada coisa.

Parabéns pelo seu esforço. :D

E bons estudos.

Valeu Lorena!