2
respostas

Faça como eu: Rodapé com linhas e colunas

Footer.

<footer class="footer">
    <div class="footer__columns">
  
    </div>
  </footer>
  <footer class="footer">
    <div class="footer__columns">
      <div class="footer__column-logo">
        <img
          src="./images/Logo-white.svg"
          class="footer__column-image"
          alt="logo luz e cena"
        />
        <h4 class="footer__column-text">
          Onde a realidade encontra a fantasia
        </h4>
      </div>
    </div>
  </footer>
  <footer class="footer">
    <div class="footer__columns">
      <div class="footer__column-logo">
        <img
          src="./images/Logo-white.svg"
          class="footer__column-image"
          alt="logo luz e cena"
        />
        <h4 class="footer__column-text">
          Onde a realidade encontra a fantasia
        </h4>
      </div>
  
      <div class="footer__column">
        <h4 class="footer__column-titulo">Funcionamento</h4>
        <ul class="footer__column-list">
          <li>
            <p>Segunda a sexta - 16h às 00h</p>
          </li>
          <li>
            <a href="mailto:ola@luzcena.com.br">ola@luzecena.com.br</a>
          </li>
          <li>
            <a href="tel:08000541320">0800 541 320</a>
          </li>
        </ul>
      </div>
    </div>
  </footer>
  <footer class="footer">
    <div class="footer__columns">
      <div class="footer__column-logo">
        <img
          src="./images/Logo-white.svg"
          class="footer__column-image"
          alt="logo luz e cena"
        />
        <h4 class="footer__column-text">
          Onde a realidade encontra a fantasia
        </h4>
      </div>
  
      <div class="footer__column">
        <h4 class="footer__column-titulo">Funcionamento</h4>
        <ul class="footer__column-list">
          <li>
            <p>Segunda a sexta - 16h às 00h</p>
          </li>
          <li>
            <a href="mailto:ola@luzcena.com.br">ola@luzecena.com.br</a>
          </li>
          <li>
            <a href="tel:08000541320">0800 541 320</a>
          </li>
        </ul>
      </div>
  
      <div class="footer__column">
        <h4 class="footer__column-titulo">Institucional</h4>
        <ul class="footer__column-list">
          <li>
            <a href="#">Sobre nós</a>
          </li>
          <li>
            <a href="#">Para empresas</a>
          </li>
          <li>
            <a href="#">Club fidelidade</a>
          </li>
        </ul>
      </div>
    </div>
  </footer>
  <footer class="footer">
    <div class="footer__columns">
      <div class="footer__column-logo">
        <img
          src="./images/Logo-white.svg"
          class="footer__column-image"
          alt="logo luz e cena"
        />
        <h4 class="footer__column-text">
          Onde a realidade encontra a fantasia
        </h4>
      </div>
  
      <div class="footer__column">
        <h4 class="footer__column-titulo">Funcionamento</h4>
        <ul class="footer__column-list">
          <li>
            <p>Segunda a sexta - 16h às 00h</p>
          </li>
          <li>
            <a href="mailto:ola@luzcena.com.br">ola@luzecena.com.br</a>
          </li>
          <li>
            <a href="tel:08000541320">0800 541 320</a>
          </li>
        </ul>
      </div>
  
      <div class="footer__column">
        <h4 class="footer__column-titulo">Institucional</h4>
        <ul class="footer__column-list">
          <li>
            <a href="#">Sobre nós</a>
          </li>
          <li>
            <a href="#">Para empresas</a>
          </li>
          <li>
            <a href="#">Club fidelidade</a>
          </li>
        </ul>
      </div>
  
      <div class="footer__column">
        <h4 class="footer__column-titulo">Siga nossas redes</h4>
        <ul class="footer__column-list footer__column-list-redes-sociais">
          <li>
            <a href="#">
              <img src="./images/Whatsapp.svg" alt="Whatsapp" />
            </a>
          </li>
  
          <li>
            <a href="#">
              <img src="./images/Instagram.svg" alt="Instagram" />
            </a>
          </li>
  
          <li>
            <a href="#">
              <img src="./images/Tiktok.svg" alt="Tiktok" />
            </a>
          </li>
        </ul>
      </div>
    

Footer column.

.footer__column-text {
    font-weight: 400;
    margin-top: var(--margin-s);
}
.footer__columns {
    display: flex;
    justify-content: space-around;
    gap: var(--gap-s);
    flex-flow: row wrap;
}
.footer__column-titulo {
    font-family: var(--fonte-titulo);
    font-size: var(--font-size-m);
    line-height: 1.2em;
    font-weight: 400;
2 respostas

Media screen.

@media screen and (max-width: 1200px) {
    .footer {
        padding: var(--padding-l);
    }
}
@media screen and (max-width: 1200px) {
    .footer {
        padding: var(--padding-l);
    }

    .footer__column-logo {
        flex-basis: 100%;
        text-align: center;
    }
}

Olá, Estanislau, como vai?

Reparei que você inseriu vários blocos <footer> completos no seu HTML. O ideal é que a página tenha apenas um único rodapé, com toda a estrutura interna necessária. Ter vários elementos <footer> repetidos acaba causando duplicidade no conteúdo e pode afetar tanto a semântica quanto a responsividade.

Se precisar de mais algum ajuste ou tiver dúvidas sobre o comportamento responsivo, o fórum está à disposição.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!