# Uso

Nesta seção aprenderemos como utilizar footer

Footer simples

Este footer consiste apenas em um texto centralizado com uma linha superior

© 2019 My Website


<footer class="simple-footer">
  <p>© 2019 <span class="t-red-darken">My Website</span></p>
</footer>
          

Footer com grid

Existe outro footer que pode ser utilizado grids para acrescentar mais informações sobre seu website. Veja um exemplo a seguir:

Content Footer

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Link


<footer class="page">
  <div class="content">
    <div class="container">
      <div class="row">
        <div class="col-12 md-4 push-md-1">
          <div class="center">
            <h4>Content Footer</h4>
          </div>
          <p class="justify">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>
        </div>
        <div class="col-12 md-2 push-md-3">
          <h4>Link</h4>
          <ul class="circle">
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="copyright center">
    © 2019 <strong>Dinky UI CSS</strong>. Todos os direitos reservados.
  </div>
</footer>
          

Você pode alterar a cor do footer adicionando o nome de uma cor como classe do elemento. Veja abaixo:


<footer class="page blue">
  <div class="content"></div>
  <div class="copyright center">
    © 2019 <strong>Dinky UI CSS</strong>. Todos os direitos reservados.
  </div>
</footer>