- Página Inicial
- Códigos HTML Prontos
- HTML footer
- Voltar
Footer html como e quando usar ?
O elemento footer marca a área inferior, normalmente conhecida como rodapé do conteúdo geral do documento.
No footer pode conter um cabeçalho próprio com bloco de navegação que apontam para informações como:
Nome do autor, Links de Redes Sociais, Links de Paginas, e Copyright.
Veja na prática:
Vamos Adicionar o HTML
<footer> <div class="col-2"> <h3>Menu</h3> <ul> <li><a href="#">Sobre</a></li> <li><a href="#">Artigos</a></li> <li><a href="#">Categorias</a></li> <li><a href="#">Contato</a></li> </ul> </div> <div class="col-2"> <h3>Redes Sociais</h3> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Instagram</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Youtube</a></li> </ul> </div> <p>Loop Nerd - Todos os Direitos Reservados.</p> </footer>
Definição e Uso do Footer !
A tag <footer> define um rodapé para um documento ou seção.
Um elemento <footer> normalmente contém:
- Informações sobre direitos autorais
- Informações de Contato
- Mapa do site
- voltar aos links principais
- Documentos relacionados
- Link de Redes Sociais
Veja o Exemplo na pratica!
Footer Completo com varias informações.
<footer class="main_footer container"> <div class="content"> <div class="colfooter"> <h3 class="titleFooter"> Menu</h3> <ul> <li><a href="#" title="Página Inícial">Página Inícial</a></li> <li><a href="#" title="Sobre a Empresa">Sobre a Empresa</a></li> <li><a href="#" title="Galeria de Fotos">Galeria de Fotos</a></li> <li><a href="#" title="Fale Conosco">Fale Conosco</a></li> </ul> </div><!--Col Footer 1--> <div class="colfooter"> <h3 class="titleFooter"> Contato</h3> <p><i class="icon icon-mail"></i> contato@seusite.com.br</p> <p><i class="icon icon-phone"></i> 21 90000-0000</p> <p><i class="icon icon-whatsapp"></i> 21 90000-0000</p> </div><!--Col Footer 2--> <div class="colfooter"> <h3 class="titleFooter"> Redes Sociais</h3> <a href="#" class="botao"><span> <i class="icon icon-facebook"></i> </span></a> <a href="#" class="botao"><span> <i class="icon icon-instagram"></i> </span></a> <a href="#" class="botao"><span> <i class="icon icon-twitter"></i> </span></a> <a href="#" class="botao"><span> <i class="icon icon-pinterest"></i> </span></a> </div><!--Col Footer 3--> <div class="clear"></div> </div><!--Contant--> <div class="main_footer_copy"> <p class="m-b-footer"> Seusite - 2022, todos os direitos reservados.</p> <p class="by"><i class="icon icon-heart-3"></i> Desenvolvido por: <a href="#" title="Seu nome">Seu nome aqui</a></p> </div> </footer>
Veja mais Sobre Footer estilizado com Css aqui neste dois artigos
Footer Responsivo – html e css
Publicado por: Loop Nerd
3.215 Visualizações
Deixe um comentário