Footer html css responsive
Full screen menu com html e css
Full screen menu css
Footer html css responsive
Este tutorial veremos como criar um Footer html css responsive com html e css.
Nesta seção, projetaremos uma estrutura das seguintes tags abaixo.
Tags: <footer>, <div>, <h4>, <p>, <form>, <input>, <textarea>, <button> e a tag <a> para inserirmos o link de destino.
Essas tags usaremos para criar a nosso Footer html css responsive
com html e css.
Vamos Adicionar o HTML
<footer class="footer"> <div class="left"> <h4 class="title-footer">Loop <span>Nerd</span></h4> <p class="links"> <a href="#" title="Home">Home</a> <a href="#" title="Html">Códigos Html</a> <a href="#" title="Css">Códigos Css</a> <a href="#" title="jQuery">Templates Html Css</a> </p> <div class="footer-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-instagram"></i></a> <a href="#"><i class="fa fa-pinterest"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> </div> <p class="Copyright">Copyright © 2022 Seu site - Todos os Direitos Reservados.</p> </div><!--Left--> <div class="right"> <h4 class="title-footer">Contato</h4> <form action="#" method="post"> <input type="text" name="nome" placeholder="Nome" required=""/> <input type="email" name="email" placeholder="E-mail" required=""/> <input type="text" name="assunto" placeholder="assunto" required=""/> <textarea name="messagem" placeholder="Messagem" required=""></textarea> <button class="btn">Enviar</button> </form> </div><!--Right--> </footer>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar e projetar o nosso Footer.
Adicione este endereço na header do seu site
O Awesome Icons é um recurso grátis que permite alterar os ícones dos seus aplicativos e sites, de forma simples e rápida.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
.footer{ background-color: #121213; width: 100%; height:100%; float: left; font-size: 18px; padding: 50px 10px 50px 10px; } .footer .left{ width:100%; float:left; border-bottom:1px #222424 solid; border-right:0; margin-bottom:20px; padding-bottom:20px; } .footer .title-footer { color: #ffffff; font-family: 'DM Sans', sans-serif; font-weight: initial; font-size:26px; width:100%; float:left; margin-bottom:15px; } .footer .title-footer span{ color: #2fcacf; font-family:'DM Sans', sans-serif; font-weight: bold; } /* Footer links */ .footer .links{ width: 100%; float: left; color: #ffffff; margin-bottom: 20px; padding: 0; } .footer .links a{ display: block; line-height: 33px; text-decoration: none; color: #fff; font-family:'DM Sans', sans-serif; font-size:16px; transition:0.3s; } .footer .links a:hover { color:#2fcacf; } .footer .Copyright{ font-family:'DM Sans', sans-serif; color: #8f9296; font-size: 14px; font-weight: normal; margin-bottom: 10px; } /*Rede Sociais*/ .footer .footer-icons{ width:100%; float:left; margin-bottom:20px; } .footer .footer-icons a{ display: inline-block; width: 35px; height: 35px; cursor: pointer; background-color: #33383b; border-radius: 50px; font-family:'DM Sans', sans-serif; font-size: 20px; color: #ffffff; text-align: center; line-height: 35px; margin-bottom: 5px; transition:0.3s; } .footer .footer-icons a:hover{ background-color:#2fcacf; } /*Right*/ .footer .right { width:100%; float:left; } .footer .right p { font-family: 'DM Sans', sans-serif; font-weight: initial; display: inline-block; vertical-align: top; font-size: 30px; color: #ffffff; } /*formulario*/ .footer form { width:100%; float:left; } .footer form input, .footer form textarea{ display: block; border-radius: 3px; box-sizing: border-box; background-color: #1f2022; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1); border: none; resize: none; outline: none; font: inherit; font-size: 14px; font-family:'DM Sans', sans-serif; font-weight: normal; color: #d1d2d2; width: 100%; padding: 18px; } .footer ::-webkit-input-placeholder { color: #5c666b; } .footer ::-moz-placeholder { color: #5c666b; opacity: 1; } .footer :-ms-input-placeholder{ color: #5c666b; } .footer form input{ width: 100%; height: 55px; float: left; margin-bottom: 15px; } .footer form textarea{ height: 100px; margin-bottom: 20px; } .footer form .btn{ border-radius: 3px; background-color: #1f2022; color: #ffffff; border: 0; padding: 15px 50px; font-family: 'DM Sans', sans-serif; font-weight: bold; float: left; cursor: pointer; transition: 0.3s; } .footer form .btn:hover { background-color: #2fcacf; } /*Responsive*/ @media (min-width: 1280px) { .footer { padding: 100px 50px 50px 100px; } .footer .Copyright { font-size: 16px; } .footer form input, .footer form textarea { width: 100%; float:left; } .footer form button { padding: 10px 35px; } } @media (min-width: 768px) { .footer .left { width:48%; border-bottom:0; } .footer .right { width:48%; padding-left: 4%; border-left: 1px #222424 solid; } .footer form { margin-top: 30px; } .footer form { display: block; } .footer form button { float: none; } }
Combinando as Duas seções acima Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Olá Edu!
eu vou te mandar um e-mail explicando mais detalhado.
Mano, eu consegui utilizar tudo oque vc me forneceu neste post, mas, estava limitado para mim e fui no site awesome para atualizar pois os icones da versão atual estão mais ao meu uso, infelizmente criei a conta e adicionei meu domínio ao kit free mas não consigo pegar o link para adicionar a monha head e desfrutar dos icones atualizados…. Pode me ajudar ou Atualizar os códigos?
Olá Alef, tudo bem !
Obrigado pela visita no BLOG.
O Awesome Icons é um recurso grátis que permite alterar os ícones dos seus aplicativos e sites, de forma simples e rápida.
Eu adicionei o link dos icones aqui no artigo também veja ali em cima.
Não esta aparecendo porque você tem que linkar O (Awesome Icons) dentro da tag header
Os icones das redes sociais sumiram, como acrescentar?!