Entrar Ainda não tem acesso?
2
respostas

Alguém me ajuda? Quero dimensionar igual (obs.: meu site tá diferente um pouco)

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Lidando com bordas e atividade Aplicando bordas

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

Seguinte, não usei os mesmos textos e imagens que o professor passou, pois já que estou aprendendo a fazer um site, resolvi fazer o meu próprio... só que tem um problema acontecendo. Minhas caixas de serviços estão com tamanho diferentes... eu resolvi de formada paliativa como eu pude fazer... mas queria ajuda para fazer de forma certa... saca como fica sem e com o paliativo... AS FOTOS TEM DIMENSÕES DIFERENTES EU SEI, MAS DEVE HAVER ALGUMA FORMA DE NÃO PRECISAR DIMENSIONA-LAS IGUALMENTE ... IMAGEM 1 - SEM PALIATIVO IMAGEM 2 - COM O PALIATIVO tirando o mouse de cimaFORMA PALIATIVA COM O CÓGIDO o paliativo

COMO EU FIZ - CRIEI 'P', DEI UM CLASS E ESCREVI '.' NO HTML

        <main>
            <ul class="produtos">
                <li id="personal">
                    <h2>Personal Trainer</h2>
                    <img src="personal6.png">
                    <pclass="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-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-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-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>

COMO DEIXO ISSO DE TAMANHO IGUAIS SEM O PALIATIVO?

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

meu código completo, não sei se será necessário html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Serviços - Peixe Personal</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="produtos.css">
    </head>
    <body>
        <header>
            <h1 class="titulo-principal">Peixe Personal LTDA.</h1>
            <div class="caixa">
                <h1><img src="peixepersonal.png"></h1>
                <nav>
                    <ul class="icon">
                        <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">
                    <pclass="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-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-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-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>
    </body>
</html>

css


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: 110px;
    right: 0;

}
nav li{
    display: inline-flex;
    margin: 0 0 0 15px;
}
.icon li 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: #a186b3;
}
.funcional:hover{
    transform: scale(1.2);
    transition: .3s;
    background: #f5a237;
}
#avaliacao:hover{
    transform: scale(1.2);
    transition: .3s;
    background: #fbff06;
}
.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;
}
por Renan Lima
| 3906.1k xp | 8275 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Jônatas.

Tudo bem?

As <li> que no caso são os seus cards, eles não tem um tamanho fixo, e quanto mais você escrever neles e dependendo do tamanho das imagens ele cresce ou diminui. O seu card que está menor (o de treinamento funcional), tem uma imagem de tamanho diferentes das outras, é só você padronizar o tamanho dela com as outras, que seus cards vão se igualar no comprimento.

Qualquer dúvida manda aqui no fórum. Valeu!