how to use this footer design

hi i found this footer design online and it's free to use how can i put it on my forum? http://demo.tutorialzine.com/2015/01/freebie-5-responsive-footer-templates/footer-distributed-with-address-and-phones.html

up

up please

Bump

bump

Hello @George Abdo,

You want the exact footer or something similar to that?

@Luffy exact footer which they provided a code would be nice thank you for reply and help

This is the footer HMTL:

Code:

<footer class="footer-distributed">

         <div class="footer-left">

            <h3>Company<span>logo</span></h3>

            <p class="footer-links">
               <a href="#">Home</a>
               ·
               <a href="#">Blog</a>
               ·
               <a href="#">Pricing</a>
               ·
               <a href="#">About</a>
               ·
               <a href="#">Faq</a>
               ·
               <a href="#">Contact</a>
            </p>

            <p class="footer-company-name">Company Name 2015</p>
         </div>

         <div class="footer-center">

            <div>
               <i class="fa fa-map-marker"></i>
               <p><span>21 Revolution Street</span> Paris, France</p>
            </div>

            <div>
               <i class="fa fa-phone"></i>
               <p>+1 555 123456</p>
            </div>

            <div>
               <i class="fa fa-envelope"></i>
               <p><a href="mailto:support@company.com">support@company.com</a></p>
            </div>

         </div>

         <div class="footer-right">

            <p class="footer-company-about">
               <span>About the company</span>
               Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
            </p>

            <div class="footer-icons">

               <a href="#"><i class="fa fa-facebook"></i></a>
               <a href="#"><i class="fa fa-twitter"></i></a>
               <a href="#"><i class="fa fa-linkedin"></i></a>
               <a href="#"><i class="fa fa-github"></i></a>

            </div>

         </div>

      </footer>

And here's the CSS:

Code:

.footer-distributed{
   background-color: #292c2f;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
   box-sizing: border-box;
   width: 100%;
   text-align: left;
   font: bold 16px sans-serif;

   padding: 55px 50px;
   margin-top: 80px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
   display: inline-block;
   vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
   width: 40%;
}

/* The company logo */

.footer-distributed h3{
   color:  #ffffff;
   font: normal 36px 'Cookie', cursive;
   margin: 0;
}

.footer-distributed h3 span{
   color:  #5383d3;
}

/* Footer links */

.footer-distributed .footer-links{
   color:  #ffffff;
   margin: 20px 0 12px;
   padding: 0;
}

.footer-distributed .footer-links a{
   display:inline-block;
   line-height: 1.8;
   text-decoration: none;
   color:  inherit;
}

.footer-distributed .footer-company-name{
   color:  #8f9296;
   font-size: 14px;
   font-weight: normal;
   margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
   width: 35%;
}

.footer-distributed .footer-center i{
   background-color:  #33383b;
   color: #ffffff;
   font-size: 25px;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   text-align: center;
   line-height: 42px;
   margin: 10px 15px;
   vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
   font-size: 17px;
   line-height: 38px;
}

.footer-distributed .footer-center p{
   display: inline-block;
   color: #ffffff;
   vertical-align: middle;
   margin:0;
}

.footer-distributed .footer-center p span{
   display:block;
   font-weight: normal;
   font-size:14px;
   line-height:2;
}

.footer-distributed .footer-center p a{
   color:  #5383d3;
   text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
   width: 20%;
}

.footer-distributed .footer-company-about{
   line-height: 20px;
   color:  #92999f;
   font-size: 13px;
   font-weight: normal;
   margin: 0;
}

.footer-distributed .footer-company-about span{
   display: block;
   color:  #ffffff;
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 20px;
}

.footer-distributed .footer-icons{
   margin-top: 25px;
}

.footer-distributed .footer-icons a{
   display: inline-block;
   width: 35px;
   height: 35px;
   cursor: pointer;
   background-color:  #33383b;
   border-radius: 2px;

   font-size: 20px;
   color: #ffffff;
   text-align: center;
   line-height: 35px;

   margin-right: 3px;
   margin-bottom: 5px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

   .footer-distributed{
      font: bold 14px sans-serif;
   }

   .footer-distributed .footer-left,
   .footer-distributed .footer-center,
   .footer-distributed .footer-right{
      display: block;
      width: 100%;
      margin-bottom: 40px;
      text-align: center;
   }

   .footer-distributed .footer-center i{
      margin-left: 0;
   }

}

You can add the HTML in the template you want to wherever you want it to be shown!

i add it to overall_footer_begin and there is no result
this is what my template looks like now:

Code:

<!-- BEGIN html_validation -->
<footer class="footer-distributed">
 
        <div class="footer-left">
 
            <h3>Company<span>logo</span></h3>
 
            <p class="footer-links">
              <a href="#">Home</a>
              ·
              <a href="#">Blog</a>
              ·
              <a href="#">Pricing</a>
              ·
              <a href="#">About</a>
              ·
              <a href="#">Faq</a>
              ·
              <a href="#">Contact</a>
            </p>
 
            <p class="footer-company-name">Company Name 2015</p>
        </div>
 
        <div class="footer-center">
 
            <div>
              <i class="fa fa-map-marker"></i>
              <p><span>21 Revolution Street</span> Paris, France</p>
            </div>
 
            <div>
              <i class="fa fa-phone"></i>
              <p>+1 555 123456</p>
            </div>
 
            <div>
              <i class="fa fa-envelope"></i>
              <p><a href="mailto:support@company.com">support@company.com</a></p>
            </div>
 
        </div>
 
        <div class="footer-right">
 
            <p class="footer-company-about">
              <span>About the company</span>
              Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
            </p>
 
            <div class="footer-icons">
 
              <a href="#"><i class="fa fa-facebook"></i></a>
              <a href="#"><i class="fa fa-twitter"></i></a>
              <a href="#"><i class="fa fa-linkedin"></i></a>
              <a href="#"><i class="fa fa-github"></i></a>
 
            </div>
 
        </div>
 
      </footer>
<div>
   <div>
      <table>
         <tbody>
            <tr>
               <td>
<!-- END html_validation -->
               </td>
               <td valign="top" width="{C3SIZE}">
               <div id="{ID_RIGHT}">
                  <!-- BEGIN giefmod_index2 -->
                  {giefmod_index2.MODVAR}
                  <!-- BEGIN saut -->
                  <div style="height: {SPACE_ROW}px"></div>
                  <!-- END saut -->
                  <!-- END giefmod_index2 -->
               </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
<!-- close div id="page-body" -->
<div id="page-footer">
   <div align="center">
      <div class="gen">
<!-- BEGIN html_validation -->
      </div>
   </div>
</div>
<!-- END html_validation -->

this is my forum link http://montadasy.arab.st/

@George Abdo maybe the place you added it it's not showing up right. Try somewhere else.

thank you luffy it work now but one problem how can i make it stretch all the way? like in this image http://prnt.sc/b9n39l

and if i want to use this one http://demo.tutorialzine.com/2015/01/freebie-5-responsive-footer-templates/footer-distributed.html
what should i do?

You have to download the files and manually add them to your forum.

i have downloaded the files but i don't know how to open them or how to know what code is html and what is css like what @Luffy posted before
luffy can you tell me codes for this please?
http://demo.tutorialzine.com/2015/01/freebie-5-responsive-footer-templates/footer-distributed.html

Are they in a zip file?  If yes, just click it to open it.

You have to open it and extract all the files to your computer. That way all designs are displayed there and everything are in folders.

This is the HMTL for that footer:

Code:

<footer class="footer-distributed">

         <div class="footer-right">

            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-linkedin"></i></a>
            <a href="#"><i class="fa fa-github"></i></a>

         </div>

         <div class="footer-left">

            <p class="footer-links">
               <a href="#">Home</a>
               ·
               <a href="#">Blog</a>
               ·
               <a href="#">Pricing</a>
               ·
               <a href="#">About</a>
               ·
               <a href="#">Faq</a>
               ·
               <a href="#">Contact</a>
            </p>

            <p>Company Name © 2015</p>
         </div>

      </footer>

and this is its CSS:

Code:

.footer-distributed{
   background-color: #292c2f;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
   box-sizing: border-box;
   width: 100%;
   text-align: left;
   font: normal 16px sans-serif;

   padding: 45px 50px;
   margin-top: 80px;
}

.footer-distributed .footer-left p{
   color:  #8f9296;
   font-size: 14px;
   margin: 0;
}

/* Footer links */

.footer-distributed p.footer-links{
   font-size:18px;
   font-weight: bold;
   color:  #ffffff;
   margin: 0 0 10px;
   padding: 0;
}

.footer-distributed p.footer-links a{
   display:inline-block;
   line-height: 1.8;
   text-decoration: none;
   color:  inherit;
}

.footer-distributed .footer-right{
   float: right;
   margin-top: 6px;
   max-width: 180px;
}

.footer-distributed .footer-right a{
   display: inline-block;
   width: 35px;
   height: 35px;
   background-color:  #33383b;
   border-radius: 2px;

   font-size: 20px;
   color: #ffffff;
   text-align: center;
   line-height: 35px;

   margin-left: 3px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 600px) {

   .footer-distributed .footer-left,
   .footer-distributed .footer-right{
      text-align: center;
   }

   .footer-distributed .footer-right{
      float: none;
      margin: 0 auto 20px;
   }

   .footer-distributed .footer-left p.footer-links{
      line-height: 1.8;
   }
}