2
respostas

a imagem não se posiona como na video aula mostrada

<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>
    </div>
    <img src = "beneficios.jpg" class = "imagembeneficios">

</body>    
``` CSS body{

}

#banner { width: 100% ; }

h1{ text-align:center; }

.principal{ background:#CCCCCC; }

p { text-align: center; }

#missao { font-size : 20px; }

em strong{ color :#FF0000; }

.itens { font-style: italic; }

.beneficios{ background:#FFFFFF; }

h2{ text-align:center; }

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

.imagembeneficios{ width : 50%; } ```

2 respostas

Olá Erick, tudo certo?

No css, você esqueceu de fechar com ponto e vírgula o width da ul, o correto seria:

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

Acredito que isso resolve o seu problema.

Espero ter ajudado, bons estudos!

Fala ai Erick, tudo bem? O problema é onde você declarou a segunda imagem, a imagem imagembeneficios deve estar dentro da div beneficios, ou seja, a imagem deve ser irmão da ul:

<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 = "https://observatoriodocinema.bol.uol.com.br/wp-content/uploads/2019/12/simpsons_header-h_2018.jpg" class = "imagembeneficios">
</div>

Espero ter ajudado.