Footer Simple ( Codigo HTML)

Código en HTML para su elaboración para sus sitios web, con una personalización adatable para dispositivos moviles, Totalmente sencillo o Simple,incluye los CSS para su elaboracion asi mismo como sus temas , aligual se pueden hacer temas mas perzonalizados.

		<div class="footer-89" data-backg-color="black">
		  <div class="conta-iner">
		    <nav>
			  <ul>
				 <li>
				    <a href="#">Informacio
				 </li>
				 <li>
			            <a href="#">Sobre Nosotros
				 </li>
				 <li>
				    <a href="#">Blog
				 </li>
				 <li>
				    <a href="#">License
				 </li>
			 </ul>
		   </nav>

		  <div class="copyright" data-font-color="gray">
		  ©2017,<script>document.write(new Date().getFullYear()) Diseñada Por <a href="#">Cities & Maiki. Codificado por <a href="#">CSM.vl.1.0.
                 </div>
              </div>
          </div>
	

Hoja de Estilo ( part 1)

Aquí el ejemplo del código en HTML para su elaboración para sus sitios web, con una personalización adatable para dispositivos moviles . Tipo de footer fue construido por el equipo detrás de Cities & Maiki. Somos una empresa de nueva creación donde creamos interfaz de usuario, paneles y temas de css de alta calidad. En los tres años, logramos crear a más proyectos con nuestros desarrolladores web web. Nuestros productos se utilizan en sitios web personales pequeños, aplicaciones de grandes empresas, Diseño de materiales adaptables para dispositivos moviles, webs corporativas, marketing.

			 /*
*
* Simple Footer
*
*/

.footer-89::after {
    display: table;
    clear: both;
    content: " ";
}

.footer-89 {
    padding: 1.125rem 0;
    text-align: center;
}
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}
*,
::after,
::before {
    box-sizing: border-box;
}
.conta-iner {
	width:100%;
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto
}
@media only screen and (max-width:576px) {
	
	.footer-89 {
		font-size: 13px;
		text-align: center;
	}
	.footer-89 .copyright {
    font-size: 0.8571em;
    text-align: left;
    }
}
@media (min-width:576px) {
	.conta-iner {
		max-width:540px
	}
}
@media (min-width:768px) {
	.conta-iner {
		max-width:720px
	}
}
@media (min-width:992px) {
	.conta-iner {
		max-width:960px
	}
}
@media (min-width:1200px) {
	.conta-iner {
		max-width:1140px
	}
}
*,
::after,
::before {
    box-sizing: border-box;
}
.footer-89  {
    text-align: center;
}
.footer-89 nav {
    display: inline-block;
    float: left;
}
.footer-89 ul:not(.links-vertical) {
    line-height: 3.1;
}
.footer-89 ul {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}
.footer-89 dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
}
.footer-89  ul li {
    display: inline-block;
}


/*
*
* Termina Simple Footer
*
*/
			 

Hoja de Estilo ( part 2 )

Aquí el ejemplo del código en HTML para su elaboración para sus sitios web, con una personalización adatable para dispositivos moviles . Tipo de footer fue construido por el equipo detrás de Cities & Maiki. Somos una empresa de nueva creación donde creamos interfaz de usuario, paneles y temas de css de alta calidad. En los tres años, logramos crear a más proyectos con nuestros desarrolladores web web. Nuestros productos se utilizan en sitios web personales pequeños, aplicaciones de grandes empresas, Diseño de materiales adaptables para dispositivos moviles, webs corporativas, marketing.

			 /*
*
* Simple Footer
*
*/


*,
::after,
::before {
    box-sizing: border-box;
}
.footer-89  ul:not(.links-vertical) {
    line-height: 3.1;
}
.footer-89  ul {
    list-style: none;
}
.footer-89 ul li a {
    color: inherit;
    padding: 13px 0.5rem;
    font-size: 0.8571em;
    text-transform: uppercase;
    text-decoration: none;
}
.footer-89 ul li a {
    color: #f96332;
}
.footer-89 ul li a {
    color: rgb(244, 81, 30);
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
.footer-89 ul li a:hover {
    color: rgb(222, 222, 222);
}
*
::after,
::before {
    box-sizing: border-box;
}
.footer-89 ul:not(.links-vertical) {
    line-height: 3.1;
}
.footer-89 ul {
    list-style: none;
}

.footer-89:not(.footer-big) .copyright {
    float: right;
}
@media screen and (min-width: 992px) {
	.footer-89:not(.footer-big) .copyright {
		float: right;
	}
	.footer-89:not(.footer-big) .copyright {
		text-align: center;
	}
}
.footer-89 .copyright {
    font-size: 0.8571em;
    line-height: 3.5;
}
*,
::after,
::before {
    box-sizing: border-box;
}
.copyright a {
	  color: rgb(244, 81, 30);
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
.copyright a:hover {
	color: #2222;
}

/*
*
* Termina Simple Footer
*
*/
			 

Temas de Footer

Con css podemos hacer distintos tipos de temas para nuestra paguinas web, Solo les mostramos ( 4 ) Ejemplos de temas con materials design,Empesamos con data-background-color="gray"que por la terminacion es color gray ( gris ) es compañado con data-background-color="orange", que por la terminacion es color orange ( naranja ) data-background-color="dark" que por la terminacion es color Dark ( Oscuro ) data-background-color="dark-blue" que por la terminacion es color Dark-blue ( Oscuro y azul )