Material Admin

Footer Example Ejemplo de Footer para web.

Footer code Html Code html.

                                
<footer id="fo-footer">
      <div class="col-md-6 col-sm-6 col-xs-12" style="text-align:left;">
         <a href="https://tec.mx/" target="_blank">
            <img class="f-imagTec" src="http://cdnitesm.azureedge.net/img/logotec.png">
         </a>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 f-siguiente">
      <label class="f-siguiente-lb">SÍGUENOS</label>
         <ul class="f-social">
             <li class="f-social-li">
                <a href="https://www.instagram.com/tecdemonterrey/" target="_blank"><i class="zmdi zmdi-instagram f-icon"></i></a>
             </li>
                <li class="f-social-li">
                <a href="https://www.youtube.com/TECdeMonterrey" target="_blank"><i class="zmdi zmdi-youtube f-icon"></i></a>
             </li>
             <li class="f-social-li">
                <a href="https://www.linkedin.com/company/itesm" target="_blank"><i class="zmdi zmdi-linkedin f-icon"></i></a>
             </li>
             <li class="f-social-li">
                <a href="https://twitter.com/TecdeMonterrey" target="_blank"><i class="zmdi zmdi-twitter f-icon"></i></a>
             </li>
             <li class="f-social-li">
                <a href="https://www.facebook.com/TecdeMonterrey/?fref=ts" target="_blank"><i class="zmdi zmdi-facebook f-icon"></i></a>
             </li>
         </ul>
      </div>
      <div class="col-md-12 col-ms-12 col-xs-12 f-linea"></div>
      <div class="col-md-6 col-ms-6 col-xs-12 f-legal">
         <p>AV. EUGENIO GARZA SADA 2501 SUR COL. TECNOLÓGICO C.P. 64849 | MONTERREY, NUEVO LEÓN, MÉXICO | TEL. +52 (81) 8358-2000 D.R.© INSTITUTO TECNOLÓGICO Y DE ESTUDIOS SUPERIORES DE MONTERREY, MÉXICO. 2017</p>
      </div>
      <div class="col-md-6 col-ms-6 col-xs-12" style="text-align: right; font-size:12px; color:white; text-transform: uppercase; padding-right:32px;">
         <p>
            <a href="https://tec.mx/es/aviso-legal" data-drupal-link-system-path="node/90" target="_blank" style="color: white;">Aviso legal</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="https://tec.mx/es/politicas-de-privacidad-del-tecnologico-de-monterrey" data-drupal-link-system-path="node/88" target="_blank" style="color: white;">Políticas de privacidad</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="https://tec.mx/es/aviso-de-privacidad-consejeros" target="_blank" title="Aviso de Privacidad" data-drupal-link-system-path="node/38" style="color: white;">Aviso de privacidad</a>
        </p>
      </div>
</footer>

Footer Css Code Css

                            

#fo-footer {
    position: absolute;
    text-align: center;
    width: 100%;
    height: auto;
    color: #a2a2a2;
    padding-top: 35px;
    padding-bottom: 15px;
    background:black!important;
}
.f-social {
    font-size: 20px;
    position: relative;
    top: -17px;
    display: block;
    width: 100%;
    padding-left: 0;
    list-style: none;
    margin-left: -5px;
    margin-top: 8px;
}
.f-imagTec{
    max-height:50px;
    padding-left:18px;
}
.f-social-li {
    float: right;
    margin: 10px;
    color: white;
}
.f-legal {
    text-align: left;
    font-size: 10px;
    color: white;
    padding-left: 32px;
}
.f-linea {
    background: white;
    height: 1px;
    margin-bottom: 10px;
}
.f-icon{
    color: white; 
    width: 1em; 
    font-size:18px;
}
.f-siguiente{
    text-align:right; 
    padding-right:32px;
}
.f-siguiente-lb{
    color:white; 
    position: relative; 
    top: -5px;
}
.f-avisos{
    color:white;
}
.f-avisos-legal{
    text-align: right; 
    font-size:12px; 
    color:white; 
    text-transform: uppercase; 
    padding-right:32px;
}

@media (min-width: 1280px){
    #fo-footer {
        padding-left: 268px;
    }

}

.listview {
    position: relative
}

.listview:not(.lv-lg):not(.lv-message) .lv-item {
    padding: 10px 15px
}

@media (min-width:480px) {
    .listview.lv-lg .lv-item {
        padding: 17px 35px 17px 25px
    }
}

@media (max-width:767px) {
    .listview.lv-lg .lv-item {
        padding: 17px 35px 17px 20px
    }
}

.listview.lv-lg .lv-item:hover {
    background-color: #FFFFDB
}

.listview .lv-item {
    position: relative;
    display: block;
    -webkit-transition: background-color;
    -o-transition: background-color;
    transition: background-color;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms
}

.listview .lv-item .lv-small {
    font-size: 12px;
    color: #A9A9A9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%
}

.listview .lv-item .checkbox, .listview .lv-item.media {
    margin: 0
}

.listview .lv-item .lv-actions {
    position: absolute
}

@media (min-width:480px) {
    .listview .lv-item .lv-actions {
        right: 15px;
        height: 30px;
        margin-top: -15px;
        top: 50%
    }
}

@media (max-width:767px) {
    .listview .lv-item .lv-actions {
        right: 7px;
        top: 10px
    }
}

.listview .lv-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block
}

.listview a.lv-item:hover {
    background: #ECF9FF
}

.listview [class*=lv-img] {
    border-radius: 50%
}

.listview .lv-img {
    width: 50px;
    height: 50px
}

.listview .lv-img-sm {
    width: 35px;
    height: 35px
}

.listview .lv-header {
    text-align: center;
    padding: 15px 10px 13px;
    line-height: 100%;
    text-transform: uppercase;
    border-bottom: 1px solid #F0F0F0;
    font-weight: 500;
    color: #4C4C4C
}

.listview .lv-header .actions {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 10
}

.listview .lv-header-alt {
    background: #f8f8f8;
    padding: 12px;
    border-bottom: 1px solid #EEE
}

.listview .lv-header-alt:before, .listview .lv-header-alt:after {
    content: " ";
    display: table
}

.listview .lv-header-alt:after {
    clear: both
}

.listview .lv-header-alt:before, .listview .lv-header-alt:after {
    content: " ";
    display: table
}

.listview .lv-header-alt:after {
    clear: both
}

.listview .lv-header-alt .lv-actions {
    z-index: 3;
    float: right;
    margin-top: 3px;
    position: relative
}

.listview .lv-header-alt .lv-actions>li>a {
    margin: 0 3px
}

.listview .lvh-label {
    color: #818181;
    display: inline-block;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    padding: 0 10px;
    line-height: 33px;
    vertical-align: middle
}

.listview .lv-footer {
    display: block;
    text-align: center;
    padding: 7px 10px 8px;
    border-top: 1px solid #F0F0F0;
    line-height: 100%;
    font-size: 11px;
    margin-top: 20px;
    color: #828282
}

.listview a.lv-footer:hover {
    color: #050505
}

.listview.lv-bordered .lv-item:not(:last-child) {
    border-bottom: 1px solid #f0f0f0
}

.listview .lv-attrs {
    list-style: none;
    padding: 0;
    margin: 5px 0 0
}

.listview .lv-attrs>li {
    display: inline-block;
    padding: 2px 10px 3px;
    font-size: 12px;
    margin-top: 5px;
    margin-right: 2px
}

.listview .lv-attrs>li:not(.info):not(.primary):not(.warning):not(.danger) {
    border: 1px solid #dedede;
    background: #fff;
    color: #5e5e5e
}

.listview .lv-attrs>li.info {
    border: 1px solid #00bcd4;
    background: #00bcd4;
    color: #fff
}

.listview .lv-attrs>li.primary {
    border: 1px solid #2196f3;
    background: #2196f3;
    color: #fff
}

.listview .lv-attrs>li.warning {
    border: 1px solid #ff9800;
    background: #ff9800;
    color: #fff
}

.listview .lv-attrs>li.danger {
    border: 1px solid #f44336;
    background: #f44336;
    color: #fff
}

.listview .lv-attrs>li>a {
    display: block
}

.listview:not(.lv-message)