Skip to content

Instantly share code, notes, and snippets.

@ralexrdz
Created October 18, 2016 03:57
Show Gist options
  • Save ralexrdz/9c1aaa75877488cd58b4f73fb303ef83 to your computer and use it in GitHub Desktop.
Save ralexrdz/9c1aaa75877488cd58b4f73fb303ef83 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vientos</title>
<link rel="stylesheet" href="assets/css/vientos-frontend.min.css">
</head>
<body class="rel">
<!--
<section id="cargando" class="container-fluid w-100-v h-100-v color-primario-bg z1k1 absUpL">
<div class="wh-100 v-center">
<div class="contenedor w-a h-30-v">
<div class="imagen imagen-girando imgLiquid imgLiquidNoFill text-center">
<img src="assets/img/logotipo-300w-2x.png" alt="">
</div>
</div>
</div>
</section>
-->
<header id="cabecera" class="container-fluid h-10-v text-center">
<nav class="navbar navbar-default navbar-fixed-top h-10-v z1k">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header p-0">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-1 h-10-v p-0 m-0">
<a class="w-a h-100 navbar-brand" href="#">
<div class="logotipo h-100">
<img
data-src="assets/img/logotipo-75w.png" alt=""
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="b-lazy h-100"
/>
</div>
</a>
</div>
</div>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- markup para links activos: -->
<!-- <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> -->
<li class="h-10-v v-center m-l-1"><a href="#" class="btn p-0 color-primario-bg color-white p-0-2">Cerca de mí <i class="fa fa-crosshairs p-l-1 font-l"></i></a></li>
<li class="h-10-v v-center m-l-1"><a href="#" class="btn p-0 color-secundario-bg color-white p-0-2">Colabora <i class="fa fa-map-marker p-l-1 font-l"></i></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="h-10-v v-center m-l-1"><a href="#" class="btn p-0 color-primario-bg color-white p-0-2">Regístrate <i class="fa fa-pencil p-l-1 font-l"></i></a></li>
<li class="h-10-v v-center m-l-1"><a href="#" class="btn p-0 color-secundario-bg color-white p-0-2">Ingresa <i class="fa fa-user p-l-1 font-l"></i></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</header>
<main class="container-fluid h-a p-0">
<section id="portada" class="container-fluid p-3 p-t-1 h-60-v h-65-sm-v text-center rel">
<!-- <div id="portada-fondo-chico" class="visible-xs visible-sm imagen wh-100 imgLiquid imgLiquidFill absUpL">
<img
data-src="assets/img/fondo-350w-2x.png" alt=""
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="b-lazy"
/>
</div>
<div id="portada-fondo-grande" class="hidden-xs hidden-sm imagen wh-100 imgLiquid imgLiquidFill absUpL">
<img
data-src="assets/img/fondo-1200w.png" alt=""
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="b-lazy"
/>
</div>
-->
<div id="portada-fondo" class="imagen wh-100 imgLiquid imgLiquidFill absUpL">
<img
data-src="assets/img/fondo-1200w.png" alt=""
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="b-lazy"
/>
</div>
<div id="portada-contenedor" class="wh-100 absUpL z1 v-center ">
<div id="portada-logotipo" class="col-sm-6 col-md-4 col-lg-2 col-sm-offset-3 col-md-offset-4 col-lg-offset-5 h-a text-center">
<div class="imagen imgLiquid imgLiquidNoFill h-20-v">
<img
data-src="assets/img/logotipo-300w-2x.png" alt=""
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="b-lazy"
>
</div>
<div class="p-0 color-primario h-10-v">
<h1>Vientos</h1>
</div>
<div class="p-0 h-10-v">
<button class="color-primario-bg color-white btn">
Plataforma de Colaboración
</button>
</div>
</div>
</div>
</section>
<section id="inicio-actores" class="container-fluid h-30-v h-25-sm-v p0 color-secundario-bg color-white">
<div id="inicio-actores-iconos" class="h-70 text-center rel">
<div class="actor col-xs-4 text-center v-center ">
<div class="col-md-4 col-lg-3 col-lg-offset-2 h-a p-b-0-2">
<i class="font-xs-xl font-l-md font-xxl-lg fa fa-user"></i>
</div>
<div class="col-md-8 col-lg-5 h-a text-md-left font-xs-s font-md-l font-lg-xl font-l-sm">
Personas
</div>
</div>
<div class="actor col-xs-4 text-center v-center ">
<div class="col-md-4 col-lg-3 col-lg-offset-2 h-a p-b-0-2">
<i class="font-xs-xl font-l-md font-xxl-lg fa fa-users"></i>
</div>
<div class="col-md-8 col-lg-5 h-a text-md-left font-xs-s font-md-l font-lg-xl font-l-sm">
Proyectos Sociales
</div>
</div>
<div class="actor col-xs-4 text-center v-center ">
<div class="col-md-4 col-lg-3 col-lg-offset-2 h-a p-b-0-2">
<i class="font-xs-xl font-l-md font-xxl-lg fa fa-balance-scale"></i>
</div>
<div class="col-md-8 col-lg-5 h-a text-md-left font-xs-s font-md-l font-lg-xl font-l-sm">
Economía Solidaria
</div>
</div>
</div>
<div class="h-30 v-center text-center white">
<div class="h-a font-m font-md-xl font-lg-xxl font-xl-xxxl">
Colaborando en:
</div>
</div>
</section>
<section id="inicio-categorias" class="container-fluid h-90-v rel v-center">
<div id="inicio-categorias-fondo" class="imagen w-100 h-100 absUpL z1">
<img
data-src="assets/img/mapa-750w-2x.png" alt=""
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="b-lazy"
>
</div>
<div class="cortina-clara z1"></div>
<div class="listado wh-100 p-1 absUpL z1 p-3 p-1-sm">
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-15-sm-v h-10-md-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-globe color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Derechos Humanos
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-shopping-basket color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Consumo Ético
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-pagelines color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Medio Ambiente
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-paint-brush color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Arte y Cultura
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-transgender-alt color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Género
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-medkit color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Salud
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-book color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Educación
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-cutlery color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Alimentación
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-home color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Vivienda
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-scissors color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Vestido
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-bullhorn color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Comunicación
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-cogs color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Tecnología
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-bicycle color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Transporte
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
<div id="categoria-id" class="category categoria col-xs-4 col-md-3 col-lg-2 h-20-v h-15-sm-v h-25-lg-v text-center tarjeta">
<div class="circle w-80 squareH v-center text-center">
<i class="fa fa-cubes color-white font-xs-m font-sm-l font-md-xl font-lg-xxl" title=""></i>
<!-- <i class="fa {{icon}}" title="{{collTag}}"></i> -->
</div>
<div class="catLabel text-center font-s m-t-sm-0-2">
Red
</div>
<!-- <div class="catLabel">{{catTag}}</div> -->
</div>
</div>
</section>
<section id="inicio-colaboracion-invitacion" class="container-fluid h-35-xs-v h-50-md-v p-t-1 h-a text-center rel ">
<div class="columns h-30 v-center">
<h2 class="font-xxl font-l-sm">Puedes colaborar de muchas maneras:</h2>
</div>
<div id="inicio-colaboracion-conceptos" class="columns h-70 rel p-b-sm-2 m-b-sm-2">
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Materiales y Herramientas</div>
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Conocimientos y Habilidades</div>
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Eventos y Talleres</div>
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Trabajo Comunitario</div>
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Difusión de proyectos</div>
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Productos</div>
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Servicios</div>
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Chambas</div>
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Espacios</div>
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Recomienda y vincula</div>
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Comparte tu arte</div>
<div class="concepto-colaboracion col-xs-6 col-md-3 col-lg-2 col-xl-1 h-a p-1">Fondeo Colectivo</div>
</div>
</section>
<section id="inicio-actores-desglose">
<div class="col-md-4 h-sm-a p-5 v-center text-center color-primario-bg white">
<h3>Personas</h3>
<ul class="font-xs-s">
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Colabora con proyectos sociales</li>
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Eventos, clases y talleres</li>
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Chambas y voluntariado</li>
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Compra local. Apoya negocios éticos</li>
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Tus intereses. Tus Habilidades</li>
</ul>
</div>
<div class="col-md-4 h-sm-a p-5 v-center text-center color-primario-bg white">
<h3>Economía Solidaria</h3>
<ul class="font-xs-s">
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Red Comercio justo y solidario</li>
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Cuenta la historia de tu negocio</li>
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Compra, venta y trueque</li>
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Productos y Servicios de tu comunidad</li>
</ul>
</div>
<div class="col-md-4 h-sm-a p-5 v-center text-center color-primario-bg white">
<h3>Proyecto Social</h3>
<ul class="font-xs-s">
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Recursos compartidos en tu zona</li>
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>No gastes, colabora</li>
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Agrega tu proyecto al mapa</li>
<li class="text-left p-1"><i class="fa fa-circle p-l-1 p-r-1"></i>Difunde tu proyecto y actividades</li>
</ul>
</div>
</section>
<section id="inicio-colaboradores" class="container p-2 p-1-sm">
<h2>
Los más colaboradores
</h2>
<div id="inicio-colaboradores-listado" class="p-2 p-1-2-sm">
<div class="col-md-4">
<div class="imagen h-20-v imgLiquid imgLiquidNoFill">
<img src="http://fakeimg.pl/300x220" alt="">
</div>
<h4 class="text-center mt1 mb1">
Título del Proyecto
</h4>
<p class="font-s">
<i>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti hic sint dolor consectetur nesciunt, numquam."
</i>
</p>
</div>
<div class="col-md-4">
<div class="imagen h-20-v imgLiquid imgLiquidNoFill">
<img src="http://fakeimg.pl/300x220" alt="">
</div>
<h4 class="text-center mt1 mb1">
Título del Proyecto
</h4>
<p class="font-s">
<i>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti hic sint dolor consectetur nesciunt, numquam."
</i>
</p>
</div>
<div class="col-md-4">
<div class="imagen h-20-v imgLiquid imgLiquidNoFill">
<img src="http://fakeimg.pl/300x220" alt="">
</div>
<h4 class="text-center mt1 mb1">
Título del Proyecto
</h4>
<p class="font-s">
<i>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti hic sint dolor consectetur nesciunt, numquam."
</i>
</p>
</div>
</div>
</section>
<section id="inicio-nosotros" class="container col-md-6 h-a p-2 p-1-sm">
<div class="h-xs-a h-60-v p-2 p-1-sm">
<div class="titulo h-a">
<h1 class="font-xs-l">Nosotros</h1>
</div>
<div class="texto h-xs-a h-md-90">
<p>
Vientos es una plataforma de fortalecimiento de proyectos sociales y de la economía solidaria mediante la colaboración entre ellos y con su comunidad.s
</p>
<p>
Somos un proyecto independiente, sin fines de lucro y bajo los principios de código libre y tecnología cívica.s
</p>
<p>
Los criterios que definen qué tan ético es un proyecto o negocio son votados por todos los usuarios de la página. s
</p>
</div>
</div>
</section>
<section id="inicio-valores" class="col-md-6 h-60-v h-70-sm-v p-2 p-1-2-sm v-center">
<li class="btn w-a f-l p-0-2 m-0-1 color-secundario-bg color-white">
Distribución de la Riqueza
</li>
<li class="btn w-a f-l p-0-2 m-0-1 color-secundario-bg color-white">
Cuidado del Medio Ambiente
</li>
<li class="btn w-a f-l p-0-2 m-0-1 color-secundario-bg color-white">
Producción Local y Artesanal
</li>
<li class="btn w-a f-l p-0-2 m-0-1 color-secundario-bg color-white">
Trabajo digno
</li>
<li class="btn w-a f-l p-0-2 m-0-1 color-secundario-bg color-white">
Sustentabilidad
</li>
<li class="btn w-a f-l p-0-2 m-0-1 color-secundario-bg color-white">
Cultura en Red
</li>
<li class="btn w-a f-l p-0-2 m-0-1 color-secundario-bg color-white">
Apoyo mutuo
</li>
</section>
</main>
<footer id="pie" class="container-fluid h-10-v h-40-sm-v text-center color-neutral_oscuro-bg color-white font-s">
<nav id="pie-menu" class="col-md-6 h-100 h-50-sm v-center">
<ul>
<li class="col-xs-6 h-100 v-center">
<div class="h-a">
<a href="#" class="color-white">
Preguntas Frecuentes
</a>
</div>
</li>
<li class="col-xs-6 h-100 v-center">
<div class="h-a">
<a href="#" class="color-white">
Términos Legales
</a>
</div>
</li>
</ul>
</nav>
<nav id="pie-redes" class="col-md-4 col-md-offset-2 col-lg-3 col-lg-offset-3 col-xl-2 col-xl-offset-4 h-100 h-50-sm font-l">
<ul class="h-100">
<li class="col-xs-4 h-100 v-center">
<a href="#" class="h-a">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="col-xs-4 h-100 v-center">
<a href="#" class="h-a">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="col-xs-4 h-100 v-center">
<a href="#" class="h-a">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</nav>
</footer>
<script src="assets/js/vientos-frontend.min.js" type="text/javascript"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment