Footer Html css – Clean
PRÓXIMO
Menu Nav – Hover Pontilhado
ANTERIOR
Html img
Postado: 5 de dezembro de 2021
Tempo de Leitura: 2 Minutos
Footer Html css – Clean
Neste tutorial vamos fazer um rodapé com html e css, conhecido também como Footer.
Vamos Adicionar o Html:
<footer class="main_footer container">
<div class="content">
<div class="colfooter">
<div class="titleFooter"> <span class="icon icon-world"></span> Menu</div>
<ul>
<li><a href="#" title="Página Inícial">Página Inícial</a></li>
<li><a href="#" title="Html5">Html5</a></li>
<li><a href="#" title="Css3">Css3</a></li>
<li><a href="#" title="jQuery">jQuery</a></li>
<li><a href="#" title="WordPress">WordPress</a></li>
<li><a href="#" title="Fale Conosco">Fale Conosco</a></li>
</ul>
</div><!--Col Footer 1-->
<div class="colfooter">
<div class="titleFooter"> <span class="icon icon-share-outline"></span> Redes Sociais</div>
<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>
</div><!--Col Footer 2-->
<div class="colfooter">
<div class="titleFooter"> <span class="icon icon-bubble-2"></span> Atendimentos</div>
<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 3-->
<div class="colfooter">
<div class="titleFooter"> <span class="icon icon-mail-3"></span> Contato</div>
<form class="my-formulario" action="#" method="post">
<label class="label">
<input class="effect-line" type="text" placeholder="Seu nome" autocomplete="off">
<span class="focus-border"></span>
</label>
<label class="label">
<input class="effect-line" type="text" placeholder="Seu e-mail" autocomplete="off">
<span class="focus-border"></span>
</label>
<label class="label">
<input class="effect-line" type="text" placeholder="Seu assunto" autocomplete="off">
<span class="focus-border"></span>
</label>
<label class="label">
<textarea class="effect-line" name="mensagem" placeholder="Deixe sua mensagem" rows="2" autocomplete="off"></textarea>
<span class="focus-border"></span>
</label>
<input type="hidden" name="acao" value="enviar">
<button class="btn-enviar" title="Enviar">Enviar</button>
</form>
</div><!--Col Footer 4-->
<div class="clear"></div>
</div><!--Contant-->
<div class="main_footer_copy">
<p class="m-b-footer"> Seusite - 2021, 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>
Vamos Adicionar o Css:
.main_footer {
background-color:#ffffff;
color:#fff;
font-size:0.875em;
}
.main_footer .content { float:left; width:90%; margin:0 5%; 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:#505050; font-size:1em; transition:0.2s; }
.colfooter ul li a i { font-size:0.5em; }
.colfooter ul li a:hover { color:#0acbd1; transition:0.2s; }
.titleFooter {
border-bottom:1px solid #eaeaea;
color:#505050;
margin-bottom:25px;
padding-bottom:0;
}
.titleFooter span {
display: inline-block;
font-family:'open_sansregular';
font-size:1.3em;
font-weight:900;
color:#505050;
margin-top:0;
margin-bottom:0;
}
.titleFooter span::after {
content:'';
display:block;
position:relative;
top:1px;
width:100%;
height:4px;
border-radius:6px;
background-color:#505050;
}
.colfooter p { font-family:'open_sanslight'; color:#505050; font-size:1em; height:25px; }
.colfooter .redesocial {
color: #505050;
float: left;
text-decoration: none;
display: block;
width: 100%;
margin-bottom: 10px;
transition:0.2s;
}
.colfooter .redesocial:hover {
color: #0acbd1;
transition:0.2s;
}
/*Formulário*/
.my-formulario {
width:100%;
float:left;
}
.label{
float:left;
width:100%;
margin-bottom:5px;
position:relative;
}
input[type="text"],textarea{
font-family:'open_sansregular';
font-size:1em;
color: #505050;
width: 100%;
box-sizing:border-box;
outline:none;
}
.effect-line:focus { color:#33dbdf; }
.effect-line {
border:0;
padding:7px 0;
border-bottom:1px solid #f0f0f0;
}
.effect-line ~ .focus-border{
position:absolute;
bottom:0;
left:0;
width:0;
height:2px;
background-color: #33dbdf;
transition: 0.4s;}
.effect-line:focus ~ .focus-border{ width:100%; transition:0.4s; }
.btn-enviar {
width: 80px;
float: left;
margin-top:5px;
background:transparent;
color: #505050;
border:1px #505050 solid;
cursor: pointer;
padding: 0.3em 0em;
border-radius:3px;
font-size: 1.2em;
font-family:'open_sansregular';
transition:0.2s;
}
.btn-enviar:hover { background-color:#33dbdf; color:#ffffff; border:1px #33dbdf solid; transition:0.2s; }
.main_footer_copy { background-color:#f4f4f4; width:100%; float:left; text-align:center; padding:1.5em 0em; }
.main_footer_copy p { font-family:'open_sanslight'; font-size:1em; color:#505050; 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:#0acbd1; text-decoration:none; transition:0.2s;}
.main_footer_copy .by a:hover { text-decoration:underline; transition:0.2s;}
.main_footer_copy .by i { font-size:0.96em; margin-right:3px; color:#e82626; }
/*Responsivo*/
/*960PX BREAKPOINT*/
@media (min-width:60em){
.colfooter { width:22%; margin-right:4%; margin-bottom:0; }
.colfooter:nth-of-type(4n+0){ margin-right:0; border-right:0;}
}
Veja o Resultado !
Deixe um comentário