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

Meu background de beneficios não fica branco, ja tentei reescrever mas não vai

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

<div>

        <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 personalizado </li>
    <li class="itens">    Espaço diferenciado</li>
    <li class="itens">    Localização</li>
    <li class="itens">    Profissionais Qualificados</li>
</ul>

</div>
</body>

style.css

body {background: #cccccc}

#banner { width: 100%; }

p { text-align: center; background: #cccccc

 }

 h1{text-align: center; color: whitesmoke;}

em strong {color: lightgoldenrodyellow;}

.itens {font-style: italic;}

#missao{ font-size: 20px; text-align: center;"}

.Beneficios { background: #FFFFFF; }

5 respostas

Oi Thales, tudo bem?

Acho que seu código do index.htmlnão veio completo, você pode colar ele aqui usando essa ferramenta: print ferramenta bloco de código

Pode ser que seu style.css não esteja linkado corretamente com a página do HTML e por isso o css não esteja aplicando.

Mas de qualquer forma, fico no aguardo do código completo :D

ah certo,obg segue abaixo:

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


<body>

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

    <div>

            <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>Benefícios</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>
    </body>
</html>

Style.css

 body {background: #cccccc}
 #banner {
     width: 100%;
 }

p { text-align: center;
     background: #cccccc

     }

     h1{text-align: center; color: whitesmoke;}

  em strong {color: lightgoldenrodyellow;}

.itens {font-style: italic;}
  #missao{ font-size: 20px; text-align: center;"}


.beneficios { 
     background: #whitesmoke;
      }

o problema do seu codigo esta aqui

<div class="beneficios">
    <h2>Benefícios</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> <!--voce não pode fechar a div colocando uma classe nela-->
    </body>
</html>

você não pode fechar a div colocando uma classe nela ;) isso faz com que o navegador não intenda oque vc quer fazer com a divisão identificada como benefícios

Pior que na verdade eu ja tentei fechar sem incluir a classe no fechamento, porem como não estava indo inclui no fechamento para ver se era isso, mas não funcionou de nenhuma das forma =/ não sei se é o sublime, pois tentei em outro editor e foi, mas no sublime nao ta indo

solução!

tenta deixa seus mais arrumados, dando mais espaços é uma boa ideia

e vi que no seu .css tinha alguns erros também porem só removi um


body {
    background: #cccccc
  }


#banner {
     width: 100%;
 }

p { 
    text-align: center;
    background: #cccccc

     }

h1{
   text-align: center;
   color: whitesmoke;
  }

  em strong {
    color: lightgoldenrodyellow;
  }

.itens {
    font-style: italic;
}
#missao{ 
    font-size:  20px; 
    text-align: center;

}


.beneficios { 
     background: whitesmoke; /*quando escrever o nome da cor, não usa # pois isso é só pra hexadecimal */
}

não tem nescessidade de colocar muitas cor de fundo mais pra frente nos seus curso vai ver como fazer isso e como deixar seu código melhor

veja meu plano de estudos no meu perfil, quem sabe não da uma luz ;)