Fiddle: https://jsfiddle.net/francisco_negrao/a021ukL8/32/
HTML:
<footer> <div class="boxInstitutional py-4"> <div class="container"> <div class="rowPersonal"> <div class="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é" /> </div> </div> <div class="separeLine"> </div> <div class="footerColumn2"> <div class="footerLinks"> <ul class="footerList"> <li><a rel="nofollow" href="" title="Ir para a página autores">Autores</a> </li> <li><a rel="nofollow" href="noticias/author/" title="Ir para a página de Assuntos da NOME DA EMPRESA">Assuntos</a></li> <li><a rel="nofollow" href="sobre" title="Ir para a página sobre NOME DA EMPRESA">Sobre</a></li> <li><a rel="nofollow" href="contato" title="Ir para a página de contato da NOME DA EMPRESA">Contato</a> </li> </ul> </div> <div class="footerSocial"> <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> <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 simple-tiktok.svg" width="16" height="16" alt="Ícone Tiktok" /> </a> </div> <div class="copyright"> <small> © <span id="year"></span> <strong> Eco Webdesign Modelo</strong> - Todos os direitos reservados. <span class="lineBreak">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></span></small> </div> </div> </div> <!--row--> </div> </div></footer>
CSS:
<style>
/* 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); transition: all 0.3s ease;}
footer a img:hover { transform: scale(1.1);}
footer p { color: #fff; font-size: 14px;}
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; gap: 15px; flex-wrap: wrap;}
footer .rowPersonal { display: flex; gap: 20px; align-items: center;}
footer .footerColumn2 { display: flex; flex-direction: column; gap: 15px; flex-wrap: wrap;}
footer .separeLine { display: block; height: 97px; width: 1px; background-color: #fff;}
footer .footerSocial { display: flex; gap: 10px}
footer .footerContent { display: flex; flex-wrap: wrap; flex-direction: column; gap: 15px;}
footer ul li img { margin-right: 10px;}
/* Copyright */
.copyright { color: #fff;}
.copyright .lineBreak { display: block;}
.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;}
@media (max-width: 992px) {
footer { text-align: left; } footer .rowPersonal { flex-wrap: wrap; } footer .separeLine { display: none; } .footerColumn1 p { margin-bottom: 0px; }
.footerColumn2 { border-bottom: solid 1px #104b66; padding-bottom: 20px; }}</style>
JS:
<script>
// SCRIPT atualização do ano copyright
document.getElementById("year").innerHTML = new Date().getFullYear();</script>
Você também pode gostar de ler
Call to Action - Website Inicial - App ou Botão
Call to Action estilo aplicativo motorista, fora da grid bootstrap.
Em 22/07/2022 às 10h21 - Atualizado em 07/10/2022 às 11h02
Modelo Página de Contato - Websites Iniciaiss
Modelo de página de contato padrão para os websites iniciais.
Em 22/07/2022 às 09h09 - Atualizado em 07/10/2022 às 10h29
001. Footer Clássico - Comp. Interago
Footer clássico - Componente responsivo e com todas as diretrizes pré-prontas
Em 10/06/2022 às 09h38 - Atualizado em 16/08/2022 às 09h09
002. Footer Minimalista - Comp. Interago
Rodapé do website minimalista - Componente com UX aprimorada
Em 10/06/2022 às 11h31 - Atualizado em 16/08/2022 às 09h09
Modelo Imobiliária 1 - Sessão Heróica Sobre
Sessão Heróica Sobre - Estilo do Modelo Imobiliária 01 - Responsivo e Otimizado com Webvitals
Em 10/06/2022 às 16h50 - Atualizado em 16/08/2022 às 09h09
Modelo Imobiliária 1 - Banner e Filtro
Componente criado com base no modelo desenhado de sites para imobiliárias
Em 18/05/2022 às 17h45 - Atualizado em 16/08/2022 às 09h09