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

Imagem do Benefícios está pequena e não está indo ao lado.

Vi algumas perguntas semelhantes ao meu problema no fórum, entretanto, não achei uma resposta mesmo testando algumas sugestões informadas. Segues o html e o css para me ajudarem a achar o erro. Já revi o nos códigos disponibilizados ao final das aulas e está tudo praticamente igual. Obs: Já tentei incluir o comando width no body no html, mas não deu certo. Insira aqui a descrição dessa imagem para ajudar na acessibilidadeHTML

</head>
<body>
    <header>
        <h1 class="tituloprincipal">Barbearia Alura</h1>
    </header>
    <img id="banner" src="banner.jpg">
    <div class="principal">
        <h2 class="titulocentralizado">Sobre a Barbearia Alura</h2>

        <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">
    <h3 class="titulocentralizado", text-align="center">Benefícios</h3>
    <ul>
        <li class="itens">Atendimento</li>
        <li class="itens">Localização</li>
        <li class="itens">Profissionais qualificados</li>
        <li class="itens">Espaço moderno</li>
    <ul/>

    <img src="beneficios.jpg" class="imagembeneficios">
    </div>
</body>
3 respostas

CSS

body {

}

#banner { width: 100%; }

.principal { background: #CCCCCC; padding: 30px ; }

.tituloprincipal { padding-left: 20px; }

.titulocentralizado { text-align: center }

P { text-align: center; }

#missao { font-size: 20px }

em strong { color: #FF0000; }

.itens { font-style: italic; }

.beneficios { background: #FFFFFF; padding: 20px; }

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

.imagembeneficios { width: 50%; }

solução!

Você limitou a área de toda essa parte a 20% devido a localização errada da barra:

<ul>
        <li class="itens">Atendimento</li>
        <li class="itens">Localização</li>
        <li class="itens">Profissionais qualificados</li>
        <li class="itens">Espaço moderno</li>
    <ul/>

    <img src="beneficios.jpg" class="imagembeneficios">
    </div>
</body>

Como no arquivo CSS o <ul> está limitado a 20% da largura, por estar dentro desses 20%, a imagem irá ocupar 50% dentro desses 20%.

Para corrigir é só colocar a barra no lugar. Onde está <ul/> colocar </ul>.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Dicas

Cores no Sublime

Usei o sublime para verificar seu código, se você também estiver usando, preste atenção nas cores.

Observe, a barra no local errado está branca e as barras corretas estão verdes.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Código no fórum

Nem sempre quem vai te ajudar está no mesmo curso, talvez é alguém que está pegando conhecimento em outra área, viu sua dúvida no fórum e resolveu ajudar.

Então sempre poste o código completo. Senão, para tentar verificar seu código, a pessoa vai ter que fazer a href do seu código com o arquivo css, dependendo da dúvida até mais coisas.

Postando código no fórum

Tente postar o código dentro de um par de crases, isso vai facilitar de copiar seu código, pois dentro dessa formatação o post do fórum vai criar um botão e com 1 clique já está tudo copiado, sem precisar selecionar nada.

Exemplo para você ver o botão:

/* painel de seleção superior */
.menu a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 35px;
    text-decoration: none;
    /* Fonte do menu de seleção superior */
    font-family: 'Secular One', sans-serif;
}

Exemplo de como digitar para postar:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Ok! Obrigado pelos esclarecimentos. Realmente era só a barra invertida. São pequenos detalhes que fazem toda a diferença.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software