- Página Inicial
- Códigos CSS Prontos
- Footer HTML e CSS Formato Arrow
- Voltar
Footer HTML e CSS Formato Arrow
Neste tutorial vamos aprender a criar um footer com formato Arrow.
Vamos usar o Shape Divider que é uma ferramenta gratuita para tornar mais fácil para designers e desenvolvedores exportar um belo divisor de forma SVG para seu projeto mais recente.
Tem varios formatos que podemos usar:
Onda, Curvas, Triangulo, Flecha, Livro e inclinar.
Alem disso também podemos usar Top Bottom e Left e Right.
Shape Divider é legal para criar aquelas sections no html e css com efeito parallax.
Visite o site veja : Shape Divider
Nesta seção, projetaremos uma estrutura simples na tag <footer>, <h3>, <div>, <svg>, <path>, <i> e o <href> para inserirmos um link de destino.
Essas são as tags que usaremos para criar o nosso Footer Html Arrow
.
Vamos Adicionar o HTML
<!--Inicia Footer--> <div class="footer-arrow"> <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> <path d="M649.97 0L550.03 0 599.91 54.12 649.97 0z" class="shape-fill"></path> </svg> </div> <footer class="main_footer container"> <div class="content"> <div class="colfooter"> <h4 class="titleFooter"> Menu</h4> <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"> <h4 class="titleFooter">Contato</h4> <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"> <h4 class="titleFooter"> Redes Sociais</h4> <a href="#" class="redesocial"><span> <i class="icon icon-facebook"></i>/loopnerd</span></a> <a href="#" class="redesocial"><span> <i class="icon icon-instagram"></i>/blog.loopnerd</span></a> <a href="#" class="redesocial"><span> <i class="icon icon-twitter"></i>/LoopNerd</span></a> <a href="#" class="redesocial"><span> <i class="icon icon-pinterest"></i>/loopnerd</span></a> </form> </div><!--Col Footer 3--> <div class="clear"></div> </div><!--Contant--> <div class="main_footer_copy"> <p class="m-b-footer"> Seusite - 2023, todos os direitos reservados.</p> <p class="by"><i class="icon icon-heart-3"></i> Desenvolvido por: <a href="#" title="Loop Nerd">Loop Nerd</a></p> </div> </footer> <!--Fecha Footer-->
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Footer Html
.
.footer-arrow { float:left ; width: 100%; overflow: hidden; line-height: 0; } .footer-arrow svg { display: block; width: calc(100% + 1.3px); height: 30px; background-color: #059767; } .footer-arrow .shape-fill { fill: #f4f4f4;; } .main_footer { background-color:#059767; color:#fff; font-size:1em; } .main_footer .content { float:left; width:80%; margin:0 10%; padding: 5em 0; } .container { float:left; width:100%; } .colfooter { width:100%; height:auto; float:left; margin-bottom:2em; } .colfooter ul { width:100%; float:left; } .colfooter ul li { padding:0.2em 0em; } .colfooter ul li a { text-decoration:none; color:#ffffff; font-size:1em; transition:0.2s; } .colfooter ul li a i { font-size:0.5em; } .colfooter ul li a:hover { color:#fffb00; } .colfooter .titleFooter { font-family: 'Lato', sans-serif; font-size:1.3em; color:#ffffff; padding-bottom: 0.5em; margin-bottom:0.5em; border-bottom: 1px #27b385 solid; } .colfooter p { font-family: 'Lato', sans-serif; color:#ffffff; font-size:1em; height:25px; } .colfooter .redesocial { color: #ffffff; float: left; text-decoration: none; display: block; width: 100%; margin-bottom: 10px; transition:0.2s; } .colfooter .redesocial:hover { color: #fffb00; transition:0.2s; } .main_footer_copy { background-color:#01a26d; width:100%; float:left; font-family: 'Lato', sans-serif; text-align:center; padding:1.5em 0em; } .main_footer_copy p { font-size:1em; color:#ffffff; height:20px; } .main_footer_copy .m-b-footer { margin-bottom:0.5em; } .main_footer_copy .by { font-size:0.96em; } .main_footer_copy .by a { color:#fff; text-decoration:none; font-weight:600; transition:0.2s; } .main_footer_copy .by a:hover { text-decoration:underline; color:#fffb00 } .main_footer_copy .by i { font-size:0.96em; margin-right:3px; color:#e82626; } /*Responsivo*/ /*768PX BREAKPOINT*/ @media (min-width:48em){ .colfooter { width:30%; margin-right:5%; margin-bottom:0; } .colfooter:nth-of-type(3n+0){ margin-right:0; border-right:0;} .footer-arrow svg { height:50px; } } /*960PX BREAKPOINT*/ @media (min-width:60em){ .footer-arrow svg { height:70px; } } /*1280PX BREAKPOINT*/ @media (min-width:80em){ .footer-arrow svg { height:90px; } }
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Footer HTML e CSS Formato Arrow
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
539 Visualizações
Deixe um comentário