1
resposta

[Dúvida] Sou nova aqui- Como botar o rodapé no final da página? Não sei onde tô errando!

Pet Shop Apolo

        <nav>
            <ul class="servicos">
                <li class="itens"><a href="pet.html">COMECE POR AQUI</a></li>
                <li class="itens"><a href="servicos.html">SERVIÇOS E PRODUTOS</a></li>
                <li class="itens"><a href="contato.html">FALE CONOSCO</a></li>
            </ul> 
        </nav>
        <img class="apolo1" src="apolo1.jpg" alt="Apolo com uma bola na boca">
    </header>

    <main>
        <section>
            <h2 class="titulo2">Nossa história</h2>
            <p>Nascemos através de sonho familiar de cuidar bem desses 
                seres lindos e amáveis que são os pets. Através da idealização
                da fundadora <strong> Ana Carolina</strong> e sua irmã <strong>Maria Clara,</strong> hoje somos a 
                maior rede de distribuição e serviços da cidade de Olinda - PE.</p>

            <p>Nossa missão é: <strong>Proporcionar qualidade no atendimento e 
                o melhor serviço para os nossos Aumiguinhos.</strong></p>

            <p>Oferecemos profissionais experientes e empáticos. O atendimento possui 
                padrão de excelência e agilidade, garantindo qualidade e 
                satisfação dos nossos clientes.</p>
        </section>

        <section>
            <h2 class="titulo2">Horário de Atendimento</h2>
            <ul>
                <li>Segunda à Sexta: Das 9h às 17h</li>
                <li>Sábados: Das 9h às 12h</li>
                <li>Não abriremos aos <strong>Domingos!!!</strong></li>
            </ul>
        </section>

        <section class="localizacao">
            <h2 class="titulo2">Nosso endereço:</h2>
            <div class="mapa"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3951.073511898802!2d-34.86807298576584!3d-7.991345481912333!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7ab17e30da4a995%3A0x61e7d00b44555e0e!2sAv.%20Sen.%20Nilo%20de%20Souza%20Coelho%2C%203345%20-%20Ouro%20Preto%2C%20Olinda%20-%20PE!5e0!3m2!1spt-BR!2sbr!4v1669127408756!5m2!1spt-BR!2sbr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>
        </section>

        <section class="conteudo-video">
            <h2 class="titulo2">Um pouco do nosso trabalho:</h2>
            <div class="video">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/n3m0MYzwKmE" 
                    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
                    encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </section>
    </main>

    <footer class="rodape">
        <img class="logo2" src="logo2.jpg" alt="logo do Pet shop Apolo">
        <img class="apolo7" src ="apolo7.jpg" alt="Apolo sentado">
        <p class="copyrigth">&copy; Copyrigth Pet Shop Apolo - 2022</p>
    </footer>
</body>
______________ CSS

main { background: linear-gradient(#C3EB14, white); height: 500px;

} .titulo2 { text-align: center; font-size: 40px; font-weight: bold; margin: 0 0 30px 10px; padding-top: 40px ; } strong { font-weight: bold; color: #758e13; text-decoration: underline; } main p , main li { text-align: center; font-size: 18px; font-family: "Roboto rev=2"; width: 940px; margin: 0 auto; padding: 10px 0; } .localizacao { text-align: center; background: linear-gradient(white, #EC940C);} .mapa { margin: 0 auto; padding: 20px; } .conteudo-video { background: #EC940C; } .video { width: 560px; margin: 0 auto; padding: 20px; } .rodape { background-color: #EC940C; width: 100%; height: 400px; }

NÃO BOTEI TUDO POR QUE NÃO COUBE!

1 resposta

O rodapé é indicado pela tag footer, você abriu e fechou, criou uma classe e foi montando o rodapé, o que está faltando para colocar o rodapé na sua página exatamente?