Footer Simple Con Social y Marca ( Codigo HTML )
Aquí el ejemplo del código en HTML para su elaboración para sus sitios web, con una personalización adatable para dispositivos moviles .
<!-- ********* Footer SIMPLE CON SOCIAL Y MARCA. ********* -->
<div class="foot-sm foot-dark">
<div class="brand-cont">
<a class="footer-brand tem-a-dark" href="#">Cities & Maiki</a>
<ul class="pull-center">
<li>
<a href="#" class="foot-link tem-a-dark">Informacio</a>
</li>
<li>
<a href="#" class="foot-link tem-a-dark">Sobre Nosotros</a>
</li>
<li>
<a href="#" class="foot-link tem-a-dark">Blog</a>
</li>
<li>
<a href="#" class="foot-link tem-a-dark">Licencia </a>
</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" target="_blank"></a><i class="fa fa-instagram"></i>
</li>
<li>
<a href="#" target="_blank"></a><i class="fa fa-facebook"></i>
</li>
<li>
<a href="#" target="_blank"></a><i class="fa fa-twitter"></i>
</li>
</ul>
</div>
</div>
<!-- ********* Fin Footer SIMPLE CON SOCIAL Y MARCA. ********* -->
Hoja de Estilo ( css )
.foot-sm {
display: inline-block;
width:100%;
height: 10%;
margin:0;
padding: 5px;
overflow:hidden;
z-index:2;
-webkit-animation:mainSlide 1s, mainFade 1s;
-moz-animation:mainSlide 1s, mainFade 1s;
-ms-animation:mainSlide 1s, mainFade 1s;
-o-animation:mainSlide 1s, mainFade 1s;
animation:mainSlide 1s, mainFade 1s;
}
.brand-cont {
width:calc(100% - 348px);
margin: 3px;
padding: 1.625em;
float:left;
padding-top: 1.625em;
margin-left:1.625em;
}
.footer-brand {
display: inline-block;
margin-left:1.625em;
text-decoration: none;
list-style: none;
padding: 20px;
}
Tipo de footer
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 últimos años, logramos ayudar a más de 350,000 desarrolladores web a crear proyectos 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.
.pull-center {
list-style: none;
text-align: center;
padding: 15px;
text-decoration: none;
display: inline-block;
}
.foot-link {
list-style: none;
text-decoration: none;
}
.pull-right {
display: inline-block;
padding: 15px 15px 10px 250px;
list-style: none;
text-decoration: none;
color: #f5f5f5;
}
li, a, .foot-link {
display: inline-block;
padding: 5px 5px 10px 15px;
list-style: none;
text-decoration: none;
}
Fontawesome
Es una gran fuente basada en íconos que se empareja muy a menudo con proyectos web basados en Bootstrap. Tiene una biblioteca de 605 íconos, más grande que los 200 glifos nativos de Bootstrap 3, y también puede desbloquear características únicas como íconos volteados, apilados o girados (y mucho más). ¿No sabes cómo configurar Font Awesome? Consulte la guía de inicio oficial, o simplemente incluya esta línea en su etiqueta <head> tag:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
.pull-right .fa-instagram {
padding: 5px 5px 10px 15px;
float:left;
list-style: none;
text-decoration: none;
display:inline-block;
vertical-align:middle;
fill:none;
stroke:white;
-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)
}
.pull-right .fa-facebook {
padding: 5px 5px 10px 15px;
float:left;
list-style: none;
text-decoration: none;
display:inline-block;
vertical-align:middle;
fill:none;
stroke:white;
-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)
}
.pull-right .fa-twitter {
padding: 5px 5px 10px 15px;
float:left;
list-style: none;
text-decoration: none;
vertical-align:middle;
display:inline-block;
fill:none;
stroke:white;
-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)
}
.pull-right .fa-facebook:hover,
.pull-right .fa-instagram:hover,
.pull-right .fa-twitter:hover{
list-style: none;
text-decoration: none;
color: rgb(255 ,255 ,255 );
fill:none;
stroke:white;
-webkit-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1);
transition:all 0.375s cubic-bezier(0.4, 0, 0.2, 1)
}
Temas para footer
Con css podemos hacer distintos tipos de temas para nuestra paguinas web, Desde una personalizacion basica, asta una mas profecional. Cities & Maiki les mustra unos temas basicos para nuestro footer con diseño de materiales o mejor conosido como ( materials design ), Diseño de materiales es un lenguaje visual y diseño sistema desarrollado por Google con un estilo casi planas y brillantes colores.
/* ======= Temas para footer =======*/
.foot-gris {
background:rgb(27, 38, 49);
}
.tem-a-gris {
color: rgb(224, 224, 224);
}
.foot-team {
background: rgb(0, 77, 64);
}
.tem-a-team {
color: rgb(255, 255, 255);
}
.foot-dark {
background:#232323;
}
.tem-a-dark {
color: rgb(213, 0, 0);
}
/* ======= fin Temas para footer =======*/
Simple Footer ( 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.
<!-- ********* SIMPLE FOOTER ********* --> <footer class="footer-2 tem-foot-dark"> <div class="conta-2"> <nav class="footer-nav"> <ul> <li> <a href="#" class="nav-link-2 tem-font-dark">Informacio</a> </li> <li> <a href="#" class="nav-link-2 tem-font-dark">Sobre Nosotros</a> </li> <li> <a href="#" class="nav-link-2 tem-font-dark">Blog</a> </li> <li> <a href="#" class="nav-link-2 tem-font-dark">Licencia </a> </li> </ul> </nav> <div class="extr"> <p class="copy-2 tem-font-dark"> © 2017 - <script> document.write(new Date().getFullYear())</script> | Diseñada por</p> <a href="#" class="copyright-link-1 tem-font-dark">Cities & Maiki</a> <p class="copy-1 tem-font-dark">.Codificado por </p> <a href="#" class="copyright-link-2 tem-font-dark">CSM.vl.1.0</a> </div> </div> </footer> <!-- ********* END SIMPLE FOOTER ********* -->
Hoja de Estilo ( css )
/* ======= Simple Footer ======= */
.footer-2 {
width: 99%;
padding: 6px;
display: inline-block;
}
.conta-2 {
width: 99.5%;
display: inline-block;
padding: 5px;
}
.footer-nav {
display: inline-block;
width: 40%;
padding: 5px;
margin: 2px;
}
.footer-nav ul {
margin: 20px;
overflow: hidden;
list-style: none;
}
.footer-nav ul li {
float: left;
}
.footer-nav ul li .nav-link-2 {
padding: 5px;
display: inline-block;
text-decoration: none;
}
.conta-2 .extr {
position: relative;
top: -40px;
left: 200px;
right: 100px;
bottom: 0;
display: inline-block;
width: 50%;
height: 10%;
padding: 5px;
margin: 2px;
}
.extr .copy-1 {
padding: 3px;
display: inline-block;
font-size: 12px;
}
.extr .copy-2 {
padding: 3px;
display: inline-block;
font-size: 12px;
}
.extr .copyright-link-1 {
margin: 18px;
font-size: 12px;
display: inline;
padding: 5px;
text-decoration: none;
}
.extr .copyright-link-2 {
margin: 18px;
font-size: 12px;
display: inline-flex;
padding: 5px;
text-decoration: none;
text-decoration: none;
}
.footer-nav ul li .nav-link-2:hover {
color: rgb(250, 250, 250);
}
.copyright-link-1:hover, .copyright-link-2:hover {
color: rgb(250, 250, 250);
}
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 ( tem-foot-blue ) que por la terminacion es color blue ( Azul ) con formato rgb, es compañado con su respetivo color de font O ( Tipo de letra ), ( tem-foot-dark ) que por la terminacion es color Dark ( Oscuro ) con formato rgb, es compañado con su respetivo color de font O ( Tipo de letra ), ( tem-foot-purple ) que por la terminacion es color Purple ( Purpura ) con formato rgb, es compañado con su respetivo color de font O ( Tipo de letra ), ( tem-foot-red ) que por la terminacion es color Red ( Rojo ) con formato rgb, es compañado con su respetivo color de font O ( Tipo de letra ).
/* ======= Temas Footer ======= */
.tem-foot-blue {
background: rgb(2, 8, 22);
}
.tem-font-blue {
color: #ccc;
}
.tem-foot-dark {
background: #232323;
}
.tem-font-dark {
color: rgb(216, 27, 96);
}
.tem-foot-purple {
background: rgb(81, 45, 168);
}
.tem-font-purple {
color: #ccc;
}
.tem-foot-red {
background: rgb(183, 28, 28);
}
.tem-font-red {
color: #f5f5f5f5;
}
/* ======= Fin Temas Footer ======= */
