002. Footer Minimalista - Comp. Interago

by francisco_negrao

HTML

<link rel="stylesheet" href="https://componentes.interago.com.br/bootstrap-grid.css">
<link rel="stylesheet" href="https://componentes.interago.com.br/global-css.css">
<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
           ...

CSS

body {
  height: 3000px;
  background-color: #000;
  margin: 0px;
  font-family: 'Futura Bk BT';
}


/* 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;
  }
}

JavaScript

// SCRIPT atualização do ano copyright

document.getElementById("year").innerHTML = new Date().getFullYear();