Entrar Ainda não tem acesso?
3
respostas

Aproveitei para fazer Meu Site pessoal - Ainda precisa de ajuste, mas tá ok...

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Finalizando a página de produtos e atividade Conclusão

por JÔNATAS CASSIANO GOUVEIA DE ARAÚJO
| 56.8k xp | 62 posts
professor

decide fazer meu site pessoal para aproveitar melhor o tempo... foi bom o resultado até o momento para quem é novo na área... ainda faltam algumas informações, mas são duas da manhã e to com sono... kkkk no próximo curso entrego concluido com mais detalhes... valeu professor, foi bom pakas! INICIO

MEIOFIM1MEU HOVER NO MENU COLOQUEI BACKGROUND E SCALE MENU PÁGINA 2 PAGE2PRA CADA SERVICO DEI UMA COR SERVIÇOS

E MEU CÓDIGO DA PÁGINA DE SERVIÇOS FICOU ASSIM: HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Serviços - Peixe Personal</title>
        <link rel="stylesheet" href="reset.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="produtos.css">
    </head>
    <body>
        <header>
            <h1 class="titulo-principal">Peixe Personal LTDA.</h1>
            <div class="caixa">
                <h1><img class="pps" src="peixepersonal.png"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Serviços</a></li>
                        <li><a href="contato.html">Contato</a></li>
                        <li><a href="http://www.saudeemmovimento.com.br/saude/avaliation_fisica_i.htm">Avaliação Física</a></li>                
                    </ul>
                </nav>
            </div>

        </header>
        <main>
            <ul class="produtos">
                <li id="personal">
                    <h2>Personal Trainer</h2>
                    <img src="personal6.png">
                    <p class="produto-descricao">Em Casa ou Academia</p>
                    <p class="produto-descricao">Planos de 2, 3, 4, 5 vezes por semana</p>
                    <p class="produto-preco">Valores a se Combinar</p>
                </li>
                <li id="consultoria">
                    <h2>Consultoria Online</h2>
                    <img src="consultoria4.jpg">
                    <p class="produto-linha"><br></p> 
                    <p class="produto-descricao">O seu Treino na Palma da Mão via APP</p>
                    <p class="produto-linha"><br></p>
                    <p class="produto-preco">Valores Especiais</p>
                </li>
                <li class="funcional">
                    <h2>Treinamento Funcional</h2>
                    <img src="kinesis1.png">
                    <p class="produto-linha"><br></p> 
                    <p class="produto-linha"><br></p>
                    <p class="produto-linha"><br></p>  
                    <p class="produto-descricao">Melhor Grupo de Funcional da Orla de Candeias</p>
                    <p class="produto-linha"><br></p> 
                    <p class="produto-linha"><br></p>  
                    <p class="produto-preco">Pacotes com 2, 3 ou 4 aulas por semana</p>
                </li>
                <li id="avaliacao">
                    <h2>Avaliação Física</h2>
                    <img src="av2.png">
                    <p class="produto-linha"><br></p> 
                    <p class="produto-descricao">No conforto do seu Lar</p>
                    <p class="produto-linha"><br></p>  
                    <p class="produto-linha"><br></p>  
                    <p class="produto-preco">Avaliação Completa</p>
                </li>
            </ul>
        </main>
        <footer>
            <img src="personalBranco.png">
            <p class="copyright">&copy;Copyright Peixe Personal LTDA - 2022</p>
        </footer>
    </body>
</html>
3 respostas
por JÔNATAS CASSIANO GOUVEIA DE ARAÚJO
| 56.8k xp | 62 posts
professor

CSS

*{
    max-width: 100%;
}
header{
    background: linear-gradient(#BBBBBB, #ffffff) ;
    padding: 20px 0;
}
h1{
    display: flex;
    font-weight: normal;
    font-size: 16px;
}
.caixa{

    position: relative;
    width: 1280px;
    margin: 0 auto;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

nav{
    display: inline-flex;
    position: absolute;
    top: 50%;
    right: 0;

}
nav li{
    display: inline-flex;
    margin: 0 0 0 15px;
}

nav a:hover{
    transform: scale(1.1);
    transition: .2s;
    background: rgb(136, 240, 158);
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

.titulo-principal{
    padding-left: 20px;
}
.produtos{
    width: 1280px;
    margin: 0 auto;
    padding: 50px 0;
}
.produtos li{
    display: inline-block;
    text-align: center;
    width: 22%;
    vertical-align: top;

    margin: 0.8% 1.2%;
    padding: 30px 20px;
    box-sizing: border-box;

    border: 2px solid #000;
    border-radius: 20px;
}

#personal:hover{
    transform: scale(1.2);
    transition: .3s;
    background: #BBffbb;
}
#consultoria:hover{
    transform: scale(1.2);
    transition: .3s;
    background: #fbff06;

}
.funcional:hover{
    transform: scale(1.2);
    transition: .3s;
    background: #f5a237;
}
#avaliacao:hover{
    transform: scale(1.2);
    transition: .3s;
    background: #a186b3;
}
.produtos h2{
    font-size: 30px;
    font-weight: body;
}
.produto-descricao{
    font-size: 18px;
}
.produto-linha{
    opacity: 0%;
}
.produto-preco{
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}
@media (max-width: 800px){
    .pps{
        display: none;
    }
    .caixa{

        text-align: center;
        font-size: 100%;
        vertical-align: top;
        width: 100%;
    }
    #personal{
        margin-top: 25%;
    }
    .produtos li{
        margin-top: 0%;
        width: 100%;
    }
}
footer{
    text-align: center;
    background: url("logof.png");
    padding: 40px 0;
}
.copyright{
    color: #FFF;
    font-size: 13px;
    margin-top: 20px;
}
por Renan Lima
| 3715.3k xp | 7853 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Jônatas.

Tudo bem?

Eu gosto de conferir o código de HTML e CSS para ver se está certinho e bem estruturado. O seu ta certinho essa é a estrutura básica e com ela é possível fazer muita coisa. Esse seu site tem listas, textos, imagens, cards, tem efeitos como o de hover, etc. Você conseguiu fazer bastante coisa legal e agora só tem que gravar essa parte que vai usar muito como desenvolvedor(a) e evoluir mais e mais.

Parabéns Jônatas! Qualquer dúvida manda aqui no fórum. Bons estudos.

por Amanda Carolina Pinto Lauxen Kehl
| 157.4k xp | 129 posts
Technical Support Engineer

Ficou muito legal!

Parabéns pelo esforço e sucesso nos estudos :)