Footer Html css – Clean

Postado: 5 de dezembro de 2021

Footer Html css – Clean

Neste tutorial vamos fazer um rodapé com html 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 !

Baixar Código Veja Funcionando

Publicado por: loopnerd

871 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.