Cities & Maiki

Footer Social

Footer Social (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" data-background-color="gray">
		<div class="container"  data-gray-color="gray">
			<a class="foot-brand" href="#creative">Cities & Maiki
		<ul class="pull-center">
				<li>
					<a href="#" class="nav-link">Proyectos
				</li>
				<li>
					<a href="#" class="nav-link">Paginadores
				</li>
				<li>
					<a href="#" class="nav-link">Informacion
				</li>
				<li>
					<a href="#" class="nav-link">Sobre Nosotros
				</li>
			</ul>

		   <ul class="social-buttons pull-right">
				<li>
					<a href="#" class="btn btn-icon btn-neutral btn-twitter">
						<i class="fa fa-twitter">
					</a>
				</li>
				<li>
					<a href="#" class="btn btn-icon btn-neutral btn-dribbble">
						<i class="fa fa-dribbble">
					</a>
				</li>
				<li>
					<a href="#" class="btn btn-icon btn-neutral btn-google">
						<i class="fa fa-google-plus">
					</a>
				</li>
			</ul>
		</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.

      *,::after,
       ::before {
        box-sizing: border-box;
        }
/*
*
* Footer Areas
*
*/

.section-footer {
    padding: 50px 0;
    position: relative;
}
.container-footer {
	width:100%;
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto
}
.title-areas {
    font-weight: 700;
    padding-top: 30px;
    text-align: center;
}
.title-areas h3, .h3 {
    font-size: 1.825em;
    margin-bottom: 30px;
    line-height: 1.4em;
    font-weight: 400;
}
@media (min-width:576px) {
	.container-footer {
		max-width:540px
	}
}
@media (min-width:768px) {
	.container-footer {
		max-width:720px
	}
}
@media (min-width:992px) {
	.container-footer {
		max-width:960px
	}
}
@media (min-width:1200px) {
	.container-footer {
		max-width:1140px
	}
}
/*
*
* Fin Footer Areas
*
*/

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.


/*
*
* footer Social
*
*/

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

.footer-white {
    background-color: #fff;
}
.footer-font-white  {
    color: #232323;
}


.footer-grey {
    background-color:rgb(222, 222, 222);
}
.footer-font-grey {
    color: #232323;
}


.footer.footer-team {
    background-color: rgb(0, 77, 64);
}
.footer-font-team  {
	color: rgb(255, 255, 255);
}


.footer-dark {
    background-color: #232323;
}
.footer-font-dark {
    color: rgb(2, 255, 255);
}

.footer {
    padding: 1.125rem 0;
    text-align: center;
}
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

@media only screen and (max-width: 577px) {
	.footer .container {
		width: 100%;
		padding: 0px;
		margin:  0px;
	}

	.footer ul li a {
		padding: 0px;
		margin:  0px;
		text-transform: uppercase;
		text-decoration: none;
		float:left;
	}
	.footer .nav-link {
	  font-size: 11.10px;
		display: inline-block;
		position: relative;
		right: 18px;
		padding: -25px;
		margin:  -15px;
	}
	.footer dl, ol, ul {
		margin-top: 0;
		margin-bottom: 0;
	}
	.footer .pull-center {
	  display:inline-block;
	  width: 100%;
    padding: 0px;
		margin:  5px;
	}
	.footer .foot-brand {
	  display:inline-block;
		font-size: 12px;
		text-transform: uppercase;
		text-decoration: none;
		float: left;
		line-height:44px;
		padding: 1rem 1rem;

	}
	.footer .social-buttons  {
		padding: 1em 1em;
		margin:  1px;
		float: left;
	}
}


@media (min-width:992px) {
	.footer .container {
		max-width:960px
	}
}
@media (min-width:1200px) {
	.footer .container {
		max-width:1140px
	}
	
}

.footer .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.footer .foot-brand {
    font-size: 0.8571em;
    text-transform: uppercase;
    text-decoration: none;
    float: left;
    line-height:44px;
    padding: .2rem .2rem;
}

 .footer ul li a {
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
.footer ul:not(.links-vertical) {
    line-height: 3.1;
}
.footer .pull-center {
    display: inline-block;
    float: none;
}
.footer ul {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}
.footer dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
}
.footer ul li {
    display: inline-block;
}

.footer ul:not(.links-vertical) {
    line-height: 3.1;
}
.footer ul {
    list-style: none;
}
.footer {
    text-align: right;
}
.footer .nav-link {
    display: inline;
}
.footer ul li a {
    padding: 13px 0.5rem;
    font-size: 0.8571em;
    text-transform: uppercase;
    text-decoration: none;
}
.footer .nav-link {
    display: block;
    padding: .5rem 1rem;
}

.footer ul:not(.links-vertical) {
    line-height: 3.1;
}
.footer ul {
    list-style: none;
}
.footer ul {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}
.footer .pull-right {
    float: right;
}

Hoja de Estilo ( part 3 )

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.


/*
*
* Footer social-buttons
*
*
*/
.footer .social-buttons a, .footer .social-buttons .btn {
    margin: 0;
}

/*
*
* btn-twitter
*
*
*/
.btn.btn-twitter.btn-neutral, .navbar .navbar-nav > a.btn.btn-twitter.btn-neutral {
    color: #ccc;
    background-color: #232323;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn.btn-twitter, .navbar .navbar-nav > a.btn.btn-twitter {
    background-color: #ccc;
    color: #ccc;
}
.btn.btn-icon, .navbar .navbar-nav > a.btn.btn-icon {
    height: 2.375rem;
    min-width: 2.375rem;
    width: 2.375rem;
    padding: 0;
    font-size: 0.9375rem;
    overflow: hidden;
    position: relative;
    line-height: normal;
}

.btn-neutral {
    background-color: #FFFFFF;
    color: #f96332;
}
.btn, .navbar .navbar-nav > a.btn {
    border-width: 2px;
    font-weight: 400;
    font-size: 0.8571em;
    line-height: 1.35em;
    margin: 5px 1px;
    border: none;
    margin: 10px 1px;
    border-radius: 1.1875rem;
    padding: 11px 22px;
    cursor: pointer;
    background-color: #888888;
    color: #FFFFFF;
}
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 10.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn.btn-twitter.btn-neutral, .navbar .navbar-nav > a.btn.btn-twitter.btn-neutral {
    color: #ccc;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn.btn-twitter, .navbar .navbar-nav > a.btn.btn-twitter {
    color: #ccc;
}
.btn.btn-icon, .navbar .navbar-nav > a.btn.btn-icon {
    font-size: 0.9375rem;
    line-height: normal;
}

.btn-neutral {
    color: #f96332;
}
.btn, .navbar .navbar-nav > a.btn {
    font-weight: 400;
    font-size: 0.8571em;
    line-height: 1.35em;
    cursor: pointer;
    color: #FFFFFF;
}
.btn {
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.5;
}


/*
*
* Fin btn-twitter
*
*
*/

Hoja de Estilo ( part 4 )

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.


.footer .social-buttons a, .footer .social-buttons .btn {
    margin: 0;
}
.btn.btn-dribbble.btn-neutral, .navbar .navbar-nav > a.btn.btn-dribbble.btn-neutral {
    color: #ccc;
    background-color: #232323;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn.btn-dribbble, .navbar .navbar-nav > a.btn.btn-dribbble {
    background-color: #232323;
    color: #ccc;
}
.btn.btn-icon, .navbar .navbar-nav > a.btn.btn-icon {
    height: 2.375rem;
    min-width: 2.375rem;
    width: 2.375rem;
    padding: 0;
    font-size: 0.9375rem;
    overflow: hidden;
    position: relative;
    line-height: normal;
}

.btn-neutral {
    background-color: #FFFFFF;
    color: #f96332;
}



*, ::after, ::before {
    box-sizing: border-box;
}
.btn.btn-dribbble.btn-neutral, .navbar .navbar-nav > a.btn.btn-dribbble.btn-neutral {
    color: #ccc;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn.btn-dribbble, .navbar .navbar-nav > a.btn.btn-dribbble {
    color: #ccc;
}
.btn.btn-icon, .navbar .navbar-nav > a.btn.btn-icon {
    font-size: 0.9375rem;
    line-height: normal;
}

.btn-neutral {
    color: #f96332;
}
.btn, .navbar .navbar-nav > a.btn {
    font-weight: 400;
    font-size: 0.8571em;
    line-height: 1.35em;
    cursor: pointer;
    color: #FFFFFF;
}
.btn {
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.5;
}

.footer ul:not(.links-vertical) {
    line-height: 3.1;
}
.footer ul {
    list-style: none;
}
.footer {
    text-align: center;
}

.footer .social-buttons a, .footer .social-buttons .btn {
    margin: 0;
}
.btn.btn-google.btn-neutral, .navbar .navbar-nav > a.btn.btn-google.btn-neutral {
    color: #ccc;
    background-color: #232323;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn.btn-google, .navbar .navbar-nav > a.btn.btn-google {
    background-color: #232323;
    color: #ccc;
}
.btn.btn-icon, .navbar .navbar-nav > a.btn.btn-icon {
    height: 2.375rem;
    min-width: 2.375rem;
    width: 2.375rem;
    padding: 0;
    font-size: 0.9375rem;
    overflow: hidden;
    position: relative;
    line-height: normal;
}

.btn-neutral {
    background-color: #FFFFFF;
    color: #f96332;
}


.footer ul:not(.links-vertical) {
    line-height: 3.1;
}
.footer ul {
    list-style: none;
}
.footer {
    text-align: center;
}

.btn.btn-icon:not(.btn-footer) i.now-ui-icons, .btn.btn-icon:not(.btn-footer) i.fa, .navbar .navbar-nav > a.btn.btn-icon:not(.btn-footer) i.now-ui-icons, .navbar .navbar-nav > a.btn.btn-icon:not(.btn-footer) i.footer .container .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-12px, -12px);
    transform: translate(-12px, -12px);
    line-height: 1.5626rem;
    width: 25px;
}
.footer .container .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
        font-size: 14px;
        line-height: 1;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn.btn-google.btn-neutral, .navbar .navbar-nav > a.btn.btn-google.btn-neutral {
    color: #ccc;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn.btn-google, .navbar .navbar-nav > a.btn.btn-google {
    color: #ccc;
}
.btn.btn-icon, .navbar .navbar-nav > a.btn.btn-icon {
    font-size: 0.9375rem;
    line-height: normal;
}

.btn-neutral {
    color: #f96332;
}
.btn, .navbar .navbar-nav > a.btn {
    font-weight: 400;
    font-size: 0.8571em;
    line-height: 1.35em;
    cursor: pointer;
    color: #FFFFFF;
}
.btn {
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.5;
}

.footer ul:not(.links-vertical) {
    line-height: 3.1;
}
.footer ul {
    list-style: none;
}
.footer {
    text-align: right;
}

/*
*
* Fin footer social-buttons
*
*
*/

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 )

Ejemplo de Footer

Cities & Maiki