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
Teste de matéria ao vivo
Criando um teste de matéria ao vivo. Criando um teste de matéria ao vivo Criando um teste de matéria ao vivo
Em 05/11/2024 às 16h12 - Atualizado em 07/02/2025 às 11h01
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