002. Footer Minimalista - Comp. Interago

Rodapé do website minimalista - Componente com UX aprimorada


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>

Você também pode gostar de ler

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

Em 22/07/2022 às 10h21 - Atualizado em 07/10/2022 às 11h02

Modelo Página de Contato - Websites Iniciaiss

Em 22/07/2022 às 09h09 - Atualizado em 07/10/2022 às 10h29

001. Footer Clássico - Comp. Interago

Em 10/06/2022 às 09h38 - Atualizado em 16/08/2022 às 09h09

Modelo Imobiliária 1 - Sessão Heróica Sobre

Em 10/06/2022 às 16h50 - Atualizado em 16/08/2022 às 09h09

Modelo Imobiliária 1 - Banner e Filtro

Em 18/05/2022 às 17h45 - Atualizado em 16/08/2022 às 09h09