Curso Criando um Site do Zero - Aula 11 - Criando o rodapé

Na 11ª aula do curso Criando um site do zero aprenderemos como criar o rodapé das nossas páginas.

Como nosso rodapé estará presente em todas as páginas do nosso website, o primeiro passo é criar um arquivo externo (footer.php) dentro do diretório libraries. Esse arquivo externo receberá as informações do nosso rodapé.

<!-- Arquivo footer.php -->
<div class="Footer">
    <div class="FooterTexto">
        Rua dos Inconfidentes, 1220 - B. Floresta <br>
        Belo Horizonte / MG <br>
        Contato: (37) 98877-6655
    </div>

    <div class="FooterImage">
        <picture>
            <source media="(max-width: 480px)" srcset="../images/LogomarcaFooterMobile.png">
            <source media="(min-width: 481px) and (max-width: 768px)" srcset="../images/LogomarcaFooterMobile.png">
            <source media="(min-width: 769px)" srcset="../images/LogomarcaFooter.png">
            <img src="../images/LogomarcaFooterMobile.png" alt="Logomarca do Desenvolvedor" title="Logomarca do Desenvolvedor">
        </picture>
    </div>
</div>

Repare no código acima que temos uma div principal com a classe Footer, e dentro dela temos a class FooterTexto responsável pelo endereço, email e telefone, e outra div com a classe FooterImage que será responsável pelo pequeno ícone do desenvolvedor que fica no canto esquerdo inferior do rodapé. A classe FooterImage recebe a tag picture, pois utilizamos uma imagem para desktop e outra para dispositivos mobile.

Partiremos agora para a estilização do rodapé.

/*Smartphone*/
@media only screen and (max-width: 480px){
	.Footer{float:left; width: 100%; background: #A9CF46; border-top: 20px solid #678346; font-family: Verdana,sans-serif; font-size: 17px; line-height: 35px;}
		.FooterTexto{float:left;  width: 90%; margin: 20px 5%; text-align: center;}
		.FooterImage{float:left; width: 100%; text-align: center;}
}

/*Tablet*/
@media only screen and (min-width: 481px) and (max-width: 768px){
	.Footer{float:left; width: 100%; background: #A9CF46; padding: 20px; border-top: 20px solid #678346; font-family: Verdana,sans-serif; font-size: 17px; line-height: 35px;}
		.FooterTexto{float:left;  width: 100%; text-align: center; margin-bottom: 20px;}
		.FooterImage{float:left; width: 100%; text-align: center;}
}

/*Desktop*/
@media only screen and (min-width: 769px){
	.Footer{float:left; width: 100%; background: #A9CF46; padding: 20px; border-top: 20px solid #678346; font-family: Verdana,sans-serif; font-size: 17px; line-height: 35px;}
		.FooterTexto{float:left; margin-left: 5%; width: 60%;}
		.FooterImage{float:left; margin-right: 5%; width: 30%; text-align: right;}
}