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

[Dúvida] width nao funciona

estou estudando html e css e no meu projeto tem uma imagem que nao estou conseguindo aplicar 'width', tentei de muitas formas e nao estou conseguindo identificar o problema.

a imagem é o banner.

<!DOCTYPE html>
<html lang="pt-br">
        <head>
            <meta charset="UTF-8">
            <title>barbearia alura</title>
            <link rel="stylesheet" href="reset.css">
            <link rel="stylesheet" href="style.css">



        </head>

        <body>
            <header>
                <div class="caixa">

                    <h1><img src="./imagens/logo.png"></h1>

                        <nav>
                            <ul>
                                <li><a href="index.html">home</a></li>
                                <li><a href="produtos.html">produtos</a></li>
                                <li><a href="contato">contato</a></li>
                            </ul>
                        </nav>
                </div>
            </header>

            <img class="banner" src="./imagens/banner.jpg">
            <main>
            <section class="principal">
                <h2 class="titulo-principal">Sobre a Barbearia Alura</h2>

                <img src="./imagens/utensilios.jpg" class="utensilios" alt="utensilios de barbearia.">

                <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>

                </section>

            <section class="beneficios">

                <h3 class="titulo-principal"> beneficios</h3>

                <ul>
                    <li class="itens">atendimento ao cliente</li>
                    <li class="itens">espaço diferenciado</li>
                    <li class="itens">localização</li>
                    <li class="itens">profissionais qualificados</li>
                </ul>
                <img src="./imagens/beneficios.jpg" class="imagembeneficios">

            </section>

        </main>

            <footer>
                <img src="./imagens/logo-branco.png">
                <p class="copiright">&copy; copiright barbearia alura 2019</p>

            </footer>
        </body>

</html>

css:

.banner {

width: 100% ;    
}

.principal{
    background: #b5b5b5;
    padding: 30px;

}

.titulo-principal{

    padding-left: 20px;
}

.titulo-centralizado{

text-align: center;

}

p{

text-align: center

}

em strong{

    color: #FF0000

    }    

#missao {
    font-size: 20px
}

.itens {
      font-style: italic
}


.beneficios{
    background-color: #ffffff;
    padding: 20px
}

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

}

.imagembeneficios{
    width: 50%
}
4 respostas

Opa Bruno, tudo bem?

Uma possível causa desse comportamento pode ser pela falta do ";" no seu width, a falta do fechamento pode causar erros no seu projeto:

.imagembeneficios{
    width: 50%;
}

Poderia por gentileza em enviar o seu projeto completo? Dessa forma posso analisar o seu código na totalidade e simular o problema para ajudá-lo de forma mais assertiva.

Você pode compartilhar o link do seu projeto via Github.

Fico à disposição.

Tenha um bom dia e bons estudos.

https://github.com/brunonunezs

Opa Bruno.

Analisando seu código, os estilos que definem o tamanho do banner estão no arquivo “style-home.css”, porém, para que haja a conexão entre o CSS e o HTML precisamos que este arquivo seja referenciado no seu index.html:

<link rel="stylesheet" href="style-home.css">

Adicionando ao seu index a referência do CSS funcionará como deseja!

Fico à disposição, conte comigo!

Tenha um bom dia e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓
solução!

funcionou, era isso mesmo! muito obrigado pela ajuda :)