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

Gradiente não está aplicando no Main

Salve turma! Estou com um problema, estou aplicando o gradiente no main, mas nao está funcionando. segue o código:

<title>Home - Barbearia Alura</title>
        <img src="logo.png" alt="">

        <nav>
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>
    </div>

</header>

<main class="container">
    <div class="sobreNos">

        <img id="banner" src="banner.jpg" alt="">
        <div>
            <h2>Sobre a Barbearia Alura </h2>
            <p>Localizada no coração da cidade a Barbearia Alura 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.
                Nossa missão é: "Proporcionar auto-estima e qualidade de vida aos clientes".

                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>

    <div class="beneficios">
        <div>
            <h2>Beneficios</h2>
            <ul >
                <li>Atendimento aos Clientes</li>
                <li>Espaço diferenciado</li>
                <li>Localização</li>
                <li>Profissionais Qualificados</li>
                <li>Pontualidade</li>
                <li>Limpeza</li>
            </ul>
        </div>
        <img id="imgbeneficio" src="beneficios.jpg" alt="">

    </div>

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

    <div class="mapa">
        <h2>Nosso Estabelecimento</h2>
        <p>Nosso estabelecimento está localizado em Osasco - SP</p>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.2506117229455!2d-46.785167385292844!3d-23.559441084683783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ceff7e5d5b4077%3A0x2fbe9f3908617320!2sR.%20Bar%C3%A3o%20do%20Rio%20Branco%2C%20151%20-%20Jaguaribe%2C%20Osasco%20-%20SP%2C%2006050-280!5e0!3m2!1spt-BR!2sbr!4v1656198609309!5m2!1spt-BR!2sbr" width="940" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
</main>

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

Codigo CSS: body{ font-family: 'Montserrat', sans-serif; } header{ background: #BBBBBB; padding: 20px 0; }

.caixa{ width: 940px; position: relative; margin: auto; }

nav{ position: absolute; top: 110px ; right: 0; }

nav li{ display: inline; margin: 0 0 0 15px; }

nav a{ color: black; font-size: 22px; text-transform: uppercase; font-weight: bold; text-decoration: none; } nav a:hover{ color: #C78C19; text-decoration: underline; }

main{ background: linear-gradient(to top, #FFF, gray);

} .container{ width: 940px; margin: 0 auto; padding: 60px 0;

}

.container h2{ font-weight: bolder; font-size: 22px; }

.sobreNos{ display: flex; }

.sobreNos #banner{ width: 450px; margin-right: 50px; border-radius: 20px; }

.sobreNos p{

text-align: justify;
margin: 20px auto;

}

#imgbeneficio{ width: 440px; border-radius: 20px; }

.beneficios{ display: flex; flex-direction: row; justify-content: space-between; padding-top: 30px; width: 100%;

}

.beneficios h2{ padding-left: 30px; }

.beneficios li{ padding: 15px 50px; /* muda o espaçamento interno do elemento / border-radius: 5px; /coloca borda arredondada na imagem / line-height: 1.5; / muda o espaçamento da linha */ } .beneficios li:hover{ border-color: #C78C19; font-weight:bolder ; background: #BBBBBB;

}

.beneficios li:active { border-color: #088C19;}

.video{ width: 940px; margin: 2em auto; } .mapa{ text-align: center; margin: 50px 0; } .mapa p{ padding: 15px 0; }

footer{ text-align: center; background: url(bg.jpg); padding: 30px 0; }

.copyright{ color: white; font-size: 13px; }

solução!

Oi Hebert, tudo bem?

O seu código HTML veio completo? Pelo o que vejo estão faltando os links de import do CSS, como:

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">

Sem a importação do style.css nenhuma alteração que fizer no CSS irá ter resultado. Depois que resolver esse problema, sugiro usar assim no seu CSS:

background: linear-gradient(#FEFEFE, #888888);

Sem o to top, pois fiz uns testes e funcionou :D

Bons estudos!

Olá Lorena, muito obrigado pela ajuda. o código de fato nao copiou completo e eu nem me atentei a isso. mas eu tinha feito o "referenciamento" do CSS com o HTML sim... Acabei que tirei a largura max de 940px do main, coloquei nas classes individuais e no main coloquei o gradiente, aí funcionou...