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 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