Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Todos os backgrounds com dimensões erradas

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Melhorando o CSS e atividade Aplicando gradientes

por Nilson Cesar Oliveira Alves Filho
| 156.5k xp | 8 posts

Inicialmente pensei que somente na parte "benefícios" houve algum erro, mas aplicando o degradê percebi que ele ocorreu em todos os outros fundos. Desde já agradeço.

<!DOCTYPE html>

<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Home- Barbearia Alura</title>
        <link rel="icon" href="tesoura.png">


        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1> <img src="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.html">Contatos</a></li>
                </ul>
                </nav>
            </div>
        </header>


        <img class="banner" src="banner.jpg" alt="Banner da Barbearia Alura">
        <main>
            <section class="principal">

                <div class="caixaPrincipal">
                    <h2 class="tituloPrincipal">Um pouco de nós:</h2>

                    <img class="utensilios" src="utensilios.jpg" alt="Utensilios de uma barbearia"> 

                    <p>Localizada no coração da cidade, <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 autoestima e qualidade de vida aos clientes"</strong>.</em></p>

                    <p>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 aos nossos clientes.</p>
                </div>

            </section>

            <section class="mapa">
                <h3 class="tituloPrincipal">Nosso estabelecimento</h3>
                <p>Nosso estabelecimento está localizado no coração da cidade.</p>

                <div class="mapaConteudo">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.448598130907!2d-46.634653385542414!3d-23.588239368469353!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Escola%20de%20Tecnologia!5e0!3m2!1spt-BR!2sbr!4v1580916426151!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                </div>

            </section>

            <section class="beneficios">
                <h3 class="tituloPrincipal">Benefícios:</h3>

                <div class="conteudoBeneficio">
                    <ul class="listaBeneficio">
                        <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>
                        <li class="itens">Pontualidade;</li>
                        <li class="itens">Limpeza.</li>
                    </ul><img src="benefícios.jpg" class="imagemBeneficio">
                </div>

                <div class="video">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>

            </section>



        </main>

        <footer>
            <img src="logo-branco.png">
            <p class="copyright">&copy; Copyright - Barbearia Alura</p>
        </footer>

    </body>
</html>
5 respostas
por Nilson Cesar Oliveira Alves Filho
| 156.5k xp | 8 posts

Css:

/* Css da página inicial */
.banner {
    width: 100%;
}

.principal {
    padding: 3em 0;
    background: #FEFEFE;
    width: 100%;
    margin: 0 auto;
}


.tituloPrincipal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

.principal p {
    margin: 0 0 1em;
}

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

.utensilios {
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.mapa {
    padding: 3em 0;
    background: linear-gradient(#FEFEFE, #888888);
}

.mapaConteudo {
    width: 100%;
    margin: 0 auto;
}

.mapa p {
    margin: 0 0 2em;
    text-align: center;
}

.beneficios {
    padding: 3em 0;
    background: #888888;
    width: 100%;
    margin: 0 auto;
}

.conteudoBeneficio {
    width: 640px;
    margin: 0 auto;
}

.listaBeneficio {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.itens {
    line-height: 1.5;
}

.itens:first-child  {
    font-weight: bold;
}

.imagemBeneficio {
    width: 60%;
}

.video {
    width: 560px;
    margin: 2em auto;
}
por Giovanna Moeller
| 624.1k xp | 892 posts
Instrutor iOS Software Engineer

Oi Nilson, tudo bem? Qual é exatamente o problema? Porque eu rodei o seu código aqui e o gradiente está funcionando como desejado, já que você colocou-o somente na classe mapa.

Na parte de benefícios, você colocou um fundo sólido de cor #888888; e também está funcionando corretamente.

O footer (rodapé) está branco porque você ainda não o estilizou.

Dito isso, gostaria de entender mais afundo qual o problema que está acontecendo, para eu conseguir te ajudar melhor.

Aguardo um retorno, até mais!

por Nilson Cesar Oliveira Alves Filho
| 156.5k xp | 8 posts

Boa tarde! Por algum motivo, o fundo não está ajustado para preencher a tela inteira. Pode-se perceber que o cinza não está preenchendo devidamente toda a parte de "benefícios", ou aí está e para mim não?

solução!
por Giovanna Moeller
| 624.1k xp | 892 posts
Instrutor iOS Software Engineer

Nilson, aqui pra mim está normal! Vou te mandar uma foto do que eu vejo: https://i.imgur.com/WremSrY.png

Logo abaixo da parte "benefícios" tem um espaço em branco, mas está branco porque é o footer (rodapé) e você ainda não o estilizou!

Era pra ser algo diferente disso?

Aguardo seu retorno, abraços!

por Nilson Cesar Oliveira Alves Filho
| 156.5k xp | 8 posts

Olá Giovanna! Terminei o curso ontem e acho que esse foi o único "problema". Talvez seja a minha tela que não preencheu todo o fundo, mas o footer para mim está normal (com a logo branca e o copyright, além do fundo personalizado). No mais, agradeço pela ajuda!