002. Footer Minimalista - Comp. Interago

Rodapé do website minimalista - Componente com UX aprimorada

Ícone Compartilhar no Whatsapp Ícone Compartilhar no Twitter Ícone Compartilhar por e-mail
Imagem 002-footer-minimalista

Fiddlehttps://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>

Gostei desse artigo Não gostei desse artigo

Você também pode gostar de ler

Imagem principal do artigo Teste de matéria ao vivo

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

Imagem principal do artigo Call to Action - Website Inicial - App ou Botão

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

Imagem principal do artigo Modelo Página de Contato - Websites Iniciaiss

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

Imagem principal do artigo 001. Footer Clássico - Comp. Interago

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

Imagem principal do artigo 002. Footer Minimalista - Comp. Interago

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

Imagem principal do artigo Modelo Imobiliária 1 - Sessão Heróica Sobre

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

Imagem principal do artigo Modelo Imobiliária 1 - Banner e Filtro

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