001. Footer Clássico - 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-5">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 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é" />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis mattis lacus, non convallis sapien mattis ut. Curabitur nec porttitor felis.
            </p>
          </div>
        </div>
        <div class="col-lg-2 footerColumn2">
          <div class="footerTitle">
            <h2>Institucional</h2>
          </div>
          <ul class="footerList">
            <li><a rel="nofollow" href="" title="Ir para a página inicial">Página Inicial</a> </li>
            <li><a rel="nofollow" href="produtos" title="Conhecer os produtos da NOME DA EMPRESA">Produtos</a></li>
            <li><a rel="nofollow" href="galeria" title="Portfólio com serviços da NOME DA EMPRESA">Galeria</a></li>
            <li><a rel="nofollow" href="noticias" title="Fique por dentro das novidades da NOME DA EMPRESA">Notícias</a> </li>
            <li><a rel="nofollow" href="contato" title="Entre em contato com a NOME DA EMPRESA">Contato</a></li>
          </ul>
        </div>
        <div class="col-lg-4 footerColumn3">
          <div class="footerTitle">
            <h2>Contato e Endereço</h2>
          </div>
          <div class="footerContent"> 
          <a href="#colocarLinkMaps" target="_blank" title="Clique para falar conosco no telefone fixo" rel="noopener noreferrer nofollow"> 
          <img width="16" height="16" src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-map-marker-alt.svg" alt="Ícone Ponteiro" /> Av. México,...

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);
}

footer p {
  color: #fff;
  font-size: 14px;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

footer .footerContent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 15px;
}

footer .footerColumn4 .footerContent {
  flex-direction: row;
}

footer .footerColumn4 .footerContent h2 {
  margin-bottom: 0px;
}

footer .footerColumn4 .footerContent .footerHeader {
  width: 100%;
}

footer .footerColumn4 .footerContent p {
  margin-top: 0px;
}

footer ul li img {
  margin-right: 10px;
}

/* Copyright */

.copyright {
  background-color: #0198db;
  color: #fff;
  padding: 8px 0px;
}

.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;
}

.copyright img {
  max-width: 40px;
  height: auto;
}

@media (max-width: 992px) {

  footer {
    text-align: left;
  }

  footer ul li {
    justify-content: flex-start;
  }
  
  .footerColumn1 p {
    margin-bottom: 0px;
  }
  
  .footerColumn1 {
    border-bottom: solid 1px #104b66;
    padding-bottom: 20px;
}

  .footerColumn3 {
    border-bottom: solid 1px #104b66;
    margin: 10px 0px;
    padding-bottom: 20px;
  }

  .footerColumn2 {
    border-bottom: solid 1px #104b66;
    padding-bottom: 20px;
  }

  footer ul li+li {
    margin-top: 2px;
  }

  .footerLogo img {
  ...

JavaScript

// SCRIPT atualização do ano copyright

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