001. Footer Clássico - Comp. Interago
Footer clássico - Componente responsivo e com todas as diretrizes pré-prontas
FIDDLE: https://jsfiddle.net/francisco_negrao/5rq482pj/49/
HTML:
<footer> <div class="boxInstitutional py-5"> <div class="container"> <div class="row"> <div class="col-lg-3 footerColumn1"> <div class="footerLogo"> <img width="166" height="42" src="https://www.interago.com.br/App/Sites/40/mc/logotipos/logoEcoWebdesign.svg" alt="Logo Rodapé" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis mattis lacus, non convallis sapien mattis ut. Curabitur nec porttitor felis. </p> </div> </div> <div class="col-lg-2 footerColumn2"> <div class="footerTitle"> <h2>Institucional</h2> </div> <ul class="footerList"> <li><a rel="nofollow" href="" title="Ir para a página inicial">Página Inicial</a> </li> <li><a rel="nofollow" href="produtos" title="Conhecer os produtos da NOME DA EMPRESA">Produtos</a></li> <li><a rel="nofollow" href="galeria" title="Portfólio com serviços da NOME DA EMPRESA">Galeria</a></li> <li><a rel="nofollow" href="noticias" title="Fique por dentro das novidades da NOME DA EMPRESA">Notícias</a> </li> <li><a rel="nofollow" href="contato" title="Entre em contato com a NOME DA EMPRESA">Contato</a></li> </ul> </div> <div class="col-lg-4 footerColumn3"> <div class="footerTitle"> <h2>Contato e Endereço</h2> </div> <div class="footerContent"> <a href="#colocarLinkMaps" target="_blank" title="Clique para falar conosco no telefone fixo" rel="noopener noreferrer nofollow"> <img width="16" height="16" src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-map-marker-alt.svg" alt="Ícone Ponteiro" /> Av. México, 688 - Jardim Paulista, São José do Rio Preto - SP, 15055-340 </a> <a href="tel:01730223715" target="_blank" title="Clique para falar conosco no telefone fixo" rel="noopener noreferrer nofollow"> <img width="16" height="16" src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-phone-alt.svg" alt="Ícone Telefone Fixo" /> (17) 3022 3715 </a> <a href="https://api.whatsapp.com/send?phone=5577988060110" target="_blank" title="Clique para falar conosco no WhatsApp" class="whats-link" rel="noopener noreferrer nofollow"> <img width="16" height="16" src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-whatsapp.svg" alt="Ícone WhatsApp" /> (17) 98200-0895 </a> <a href="mailto:contato@ecowebdesign.com.br" target="_blank" title="Envie uma mensagem de e-mail para nossa equipe para tirar suas dúvidas" rel="noopener noreferrer nofollow"> <img width="16" height="16" src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-envelope.svg" alt="Ícone Envelope" /> contato@ecowebdesign.com.br </a> </div> </div> <div class="col-lg-3 footerColumn4"> <div class="footerHeader"> <h2>Redes Sociais</h2> </div> <div class="footerContent"> <a href="#" target="_blank" title="Ir para Perfil do Instagram - NOME EMPRESA" rel="noopener noreferrer nofollow" > <img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-instagram.svg" width="16" height="16" alt="Ícone Instagram" /> </a> <a href="#" target="_blank" title="Ir para a Página do Facebook - NOME EMPRESA" rel="noopener noreferrer nofollow" > <img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-facebook-square-o.svg" width="16" height="16" alt="Ícone Facebook" /> </a> <div class="footerHeader"> <h2>Horário de funcionamento</h2> </div> <p>Segunda a Sexta das 08h às 18h</p> </div> </div> </div> <!--row--> </div> </div> <div class="copyright"> <div class="container"> <small> © <span id="year"></span> <strong> Eco Webdesign Modelo</strong> - Todos os direitos reservados. Desenvolvimento<a title="Este website foi desenvolvido com muito amor por ECO WEBDESIGN" href="https://www.ecowebdesign.com.br" target="_blank" rel="noopener noreferrer nofollow">Eco Webdesign</a></small> </div> </div> </footer>
CSS:
body { height: 3000px; background-color: #000; margin: 0px; font-family: 'Futura Bk BT'; } /* FOOTER CSS */ footer { background-color: #ECECEC; } footer .boxInstitutional { background-color: #163d4f; } footer h2 { color: #fff; font-size: 18px; font-weight: 600; margin-top: 0px; } footer a { text-decoration: none; font-size: 14px; transition: 0.3s ease; color: #fff; display: flex; align-items: center; gap: 10px; } footer a:hover { color: #0198db; } footer a img { filter: brightness(0) invert(1); } footer p { color: #fff; font-size: 14px; } footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; } footer .footerContent { display: flex; flex-wrap: wrap; flex-direction: column; gap: 15px; } footer .footerColumn4 .footerContent { flex-direction: row; } footer .footerColumn4 .footerContent h2 { margin-bottom: 0px; } footer .footerColumn4 .footerContent .footerHeader { width: 100%; } footer .footerColumn4 .footerContent p { margin-top: 0px; } footer ul li img { margin-right: 10px; } /* Copyright */ .copyright { background-color: #0198db; color: #fff; padding: 8px 0px; } .copyright a { display: inline-block; font-size: 14px; color: #fff; font-weight: bold; margin-left: 5px; } .copyright p { display: inline-block; color: white; margin: 0; } .copyright img { max-width: 40px; height: auto; } @media (max-width: 992px) { footer { text-align: left; } footer ul li { justify-content: flex-start; } .footerColumn1 p { margin-bottom: 0px; } .footerColumn1 { border-bottom: solid 1px #104b66; padding-bottom: 20px; } .footerColumn3 { border-bottom: solid 1px #104b66; margin: 10px 0px; padding-bottom: 20px; } .footerColumn2 { border-bottom: solid 1px #104b66; padding-bottom: 20px; } footer ul li+li { margin-top: 2px; } .footerLogo img { max-width: 200px; } footer .boxInstitutional .row { display: flex; flex-direction: column; gap: 10px; } footer .boxInstitutional { padding-bottom: 20px; } }
JAVASCRIPT:
// SCRIPT atualização do ano copyright document.getElementById("year").innerHTML = new Date().getFullYear();