3
respostas

Antes de eu definir as caracteristicas da classe beneficio as configurações estão iguais ao do video, depois q executo o codigo nao fica igual.

<!DOCTYPE html>

<html lang="pt-br">

    <head>

        <meta charset="utf-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="stile.css">

    </head>

    <body>

        <img id= "banner" src="banner.jpg">

        <div class="principal">

            <h1>Sobre a Barbearia Alura</h1>

            <p>Localizada no coração da cidade, a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

            <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes".</strong></em></p>

            <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p

        </div>


        <div class="Beneficios">
            <h2>Beneficios</h2>

            <ul>
                <li class="itens">Atendimento aos Clientes</li>
                <li class="itens">Espaço Diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais Qualificados</li>
            </ul>

            <img src="beneficios.jpg" class="imagembeneficio">



        </div>


    </body>    

</html>
body{


}

#banner{
    width: 100%;
}

.principal{

    background: #cccccc;
    padding: 28px;
}

h1{
    text-align: center;

}

p{

   text-align: center;

}

#missao{

    font-size: 20px;
}

em strong{

    color: red;
}

.itens{

    font-style: italic;
}

.Beneficios{

    background: #ffffff;
    padding: 20%;
}

h2{
    text-align: center;

}

ul{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;



}

.imagembeneficio{

    width: 50%;


}
3 respostas

Oi, Thiago, tudo bem?

São dois detalhes que estão fazendo ter essa diferença o com o instrutor:

1) Na classe .beneficios ao invés de padding: 20%; é padding: 20px;

.beneficios{

    background: #ffffff;
    padding: 20px;
}

2) E como no vídeo, a imagem aparece pegando toda a largura da página, o widht fica 100%:

.imagembeneficio{
    width: 100%;
}

Espero ter te ajudado!

Olá Thiago, tudo bem com você ?

Além das mudanças que a Laís comentou em relação ao seu css, existe um probleminha em seu html, veja:

No último <p> da sua div você acabou esquecendo de fechar

<p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p

Sem o fechamento dessa tag ele não ira conseguir estilizar corretamente também! Basta adicionar o </p> e as mudanças de css na classe benefícios que ja irá ficar novamente igual ao do instrutor :)

Abraços e Bons Estudos!

Fala ai Thiago, tudo bem? Conseguiu resolver seu problema? Acho que as respostas estão muito boas.

Caso a dúvida tenha sido esclarecida, não esqueça de marcar o tópico como solucionado, assim a gente consegue ajudar outros alunos com problemas iguais ou parecidos.

Abraços e bons estudos.