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

7 - Praticando HTML e CSS ;)

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

Olá, Matheus. Tudo bem?

Eu baixei o seu projeto do seu repositório do GitHub e está bem legal! Parabéns pelo progresso.

Fala, Renan! Tudo ótimo e contigo? Muito obrigado, camarada.

Abraço!