002. Footer Minimalista - Comp. Interago
Rodapé do website minimalista - Componente com UX aprimorada
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>