Cómo agregar un pie de página como el de Strato en mi página web

.footer-outer-wrapper {
  background: none repeat scroll 0 0 #333333;
  border-top: 5px solid #cccccc;
  margin-top: 20px;
}
.copyright-outer-wrapper {
  background: none repeat scroll 0 0 #292929;
  padding-top: 20px;
}
.copyright-wrapper {
  color: #999999;
}
.b20 {
  margin-bottom: 20px !important;
}
.left {
  float: left;
}
.b20 {
  margin-bottom: 20px !important;
}
.text-right {
  text-align: right;
}
.right {
  float: right;
}

<div class="footer-outer-wrapper">
<div class="copyright-outer-wrapper">
<div class="copyright-wrapper container">
<div class="row clearfix">
<div class="copyright-left left b20">
<nav class="footer-nav">
<div class="menu">
<ul>
<li>
<a href="http://www.hostingmundo.com/">Inicio</a>
</li>
<li class="page_item page-item-2">
<a href="http://www.hostingmundo.com/acerca-de/">Acerca de</a>
</li>
<li class="page_item page-item-58">
<a href="http://www.hostingmundo.com/cloud-hosting/">Cloud Hosting</a>
</li>
<li class="page_item page-item-18">
<a href="http://www.hostingmundo.com/contacto/">Contacto</a>
</li>
<li class="page_item page-item-50">
<a href="http://www.hostingmundo.com/vps-servidores-privados-virtuales/">VPS – Servidores Privados Virtuales</a>
</li>
<li class="page_item page-item-53">
<a href="http://www.hostingmundo.com/servidores-dedicados/">¿Cuales son los mejores Servidores Dedicados de España?</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="copyright-right right b20 text-right"> © 2014. Creado con amor desde Quondos.com </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>

<div class="contenedor-pie-articulo">
    <div class="pie-articulo">
        <div class="columna center">
            <img src="http://lorempixel.com/400/300/">
        </div>
        <div class="columna center">
            <a href="#" class="boton">Hola mundo</a>
        </div>
        <div class="columna">
            <h2>Ventajas</h2>
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
            </ul>
        </div>
    </div>
</div>

.contenedor-pie-articulo{
    padding: 10px;
    display: block;
    border-radius: 3px;
    border: solid 1px #EEEEEE;
    
    /*DEGRADADO*/
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f0f0f0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#f0f0f0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */

}

.pie-articulo{
    display: block;
    width: 100%;
    overflow: hidden;
    
    font-family: Verdana, sans-serif;
}
.pie-articulo *{
    max-width: 100%;
}
.columna{
    display:block;
    float:left;
    width: calc(100%/3);
    min-height:20px;
}

.boton{
    display: inline-block;
    border-radius: 3px;
    padding: 10px 15px 10px 15px;
    margin-top: 50px;
    color: #DDDDCF;
    text-transform: uppercase;
    font-family: 'Lucida Console', monospace;
    border: solid 1px #CEDD2E;
    border-bottom: none;
    
    transition: opacity 0.5s;
    transition-delay: 0.5s;
    
    /*DEGRADADO*/
    background: #d0df36; /* Old browsers */
    background: -moz-linear-gradient(top,  #d0df36 0%, #5e7e00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0df36), color-stop(100%,#5e7e00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d0df36 0%,#5e7e00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d0df36 0%,#5e7e00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d0df36 0%,#5e7e00 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #d0df36 0%,#5e7e00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0df36', endColorstr='#5e7e00',GradientType=0 ); /* IE6-9 */
    
    /*SOMBRA*/
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.75);
}

.boton:hover{
    text-decoration: none;
    opacity: 0.7;
}

.pie-articulo h2{
    padding: 0px;
    margin: 0px;
    margin-bottom: 20px;
    font-weight: normal;
    font-size: 16px;
}

.pie-articulo ul{
    font-size: 15px;
    list-style: square url("http://www.hostingmundo.com/wp-includes/images/plus.png");
}
.pie-articulo li{
    margin-bottom: 5px;
}

.center{
    text-align: center;
}