Footer html css responsive

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 &copy; 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!

Baixar Código Veja Funcionando