2
respostas

[Bug] o fundo da minha pagina ficou totalmente branco

<body>
    <header>
        <h1 class="titulo-principal">Barbearia 2 Irmãos</h1>
    </header>
    <img id="banner" src="banner.jpg">

    <div class="principal">
        <h2 class="titulo-centralizado">Sobre a Barbearia </h1>

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

        <p style="font-size: 26px"><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="Benefícios">
        <h3 class="titulo-centralizado">Beneficios</h2>    
        <ul>
            <li class="itens">Atendimento aos Clientes</li> 
            <li class="itens">Espaços Diferenciados</li>
            <li class="itens">Localização</li>
            <li class="itens">Profissionais Qualificados</li> 
        </ul>

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

parte css.

body{ background: #cccccc; }

#banner{ width: 100%; }

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

.titulo-principal{ padding-left: 20px;

}

.titulo-centrlizado{ text-align: center; }

p { text-align: center; }

#missao{ font-size: 26px; } em strong{ color: red; }

.itens{ font-style: italic; }

.Benefícios{ background: #FFFFFF; padding: 20px; }

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

.imagembeneficios{ width: 50%; }

2 respostas

Na parte do CSS onde tu escreveu:

body { background: #CCCCCC; }

Você escreveu "background" em vez de "background-color", então o certo seria:

body { background-color: #CCCCCC; }

Estou lutando nesse chat kkkkk a diferença entre o nosso código está no CSS

Barbearia Alura

Sobre a Barbearia Alura

    <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"><strong> Nossa missão é: <em>"Proporcionar auto-estima e qualidade de vida aos clientes"</em>.</strong></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="titulo-centralizado">Benefícios</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 class="imagembeneficios" src="beneficios.jpg">S
</div>    

h1 { text-align: left; font-size: 3em; }

.titulo-esquerda{ padding-left: 20px; }

#banner { width: 100%; }

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

.titulo-centralizado { font-size: 2em; text-align: center; }

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

#missao{ font-size: 20px; }

strong { color: #000000; }

strong em { color:rgb(45, 45, 100); }

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

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

.itens { font-style: italic; }

.imagembeneficios { width: 50%; }