Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] MEU BACKGROUD DO PRINCIPAL NAO MUDA

Referente ao curso HTML5 e CSS3 parte 1: crie uma página da Web, no capítulo Listas e divisões de conteúdo e atividade Divisões de conteúdo

por MATEUS DE CASTRO DA SILVA
| 27.1k xp | 37 posts

a pagina toda fica em branco

HTML

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

    </head>

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

    </body>


</html>

CSS

body{ 
 }

 #banner{
     width: 100%

 }

 .principal{
     background: #CCCCCC
 }

 h1{text-align: center
 }

P{
    text-align: center
 }

 #missao{
     font-size: 20px
 }

em strong{
     color: #669999
 }

 .itens{
     font-style: italic
 }

 .beneficios{
    background: #FFFFFF
}
1 resposta
solução!
por Lorena Garcia
| 8371.4k xp | 12219 posts
Alura Scuba Team Suporte Educacional

Oi Mateus, tudo bem?

Testei seu código e ele funcionou. Eu formatei seu código e vou colar aqui, tirei alguns espaços e adicionei alguns ; que faltavam no código CSS, às vezes a falta deles pode influenciar em erros.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>barbearia alura</title>
    <link rel="stylesheet" href="style.css">

</head>

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

</body>

</html>
body {}

#banner {
    width: 100%;
}

.principal {
    background: #CCCCCC;
}

h1 {
    text-align: center;
}

P {
    text-align: center;
}

#missao {
    font-size: 20px;
}

em strong {
    color: #669999;
}

.itens {
    font-style: italic;
}

.beneficios {
    background: #FFFFFF;
}

Veja como ficou:

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

É somente a cor que não está aplicando?

Lembre-se sempre de salvar os arquivos e atualizar a página para que os estilos se apliquem.

Um abraço e bons estudos.