Landing page css - responsive - images

This commit is contained in:
kleper 2017-03-10 13:42:43 -05:00
parent e92c288f26
commit c636afff0a
10 changed files with 600 additions and 335 deletions

View File

@ -294,7 +294,7 @@
<div class="col-sm-12"> <div class="container-principal">
<nav class='navbar navbar-inverse navbar-toggleable-md navbar-fixed-top'> <nav class='navbar navbar-inverse navbar-toggleable-md navbar-fixed-top'>
<div class='container navegacion'> <div class='container navegacion'>
<div class='navbar-header'> <div class='navbar-header'>
@ -344,18 +344,18 @@
<div class='row'> <div class='row'>
<div class='col-sm-4'> <div class='col-sm-4'>
<div class='row'> <div class='row'>
<div class='col-sm-10 col-sm-offset-2 text-center'><h3>Activismo</h3><p>Promover la Transparencia para propiciar el establecimiento de una cultura de acceso abierto a la información y de reutilización de los datos públicos. <div class='col-sm-10 col-sm-offset-2 text-center'><h3>Activismo</h3><p>Promueve la transparencia para propiciar el establecimiento de una cultura de acceso abierto a la información y de reutilización de los datos públicos.
</p><span class='glyphicon glyphicon-search ' aria-hidden='true'></span></div> </p><span class='glyphicon glyphicon-search ' aria-hidden='true'></span></div>
</div> </div>
</div> </div>
<div class='col-sm-4 text-center'> <div class='col-sm-4 text-center'>
<div class='row'> <div class='row'>
<div class='col-sm-10 col-sm-offset-1 text-center'><h3>Memoria</h3><p>Impulsar la conservación de memoria y el seguimiento de los procesos, desarrollando mayores y mejores mecanismos que permitan privilegiar el interés colectivo por sobre los intereses individuales.</p><span class='glyphicon glyphicon-user' aria-hidden='true'></span></div> <div class='col-sm-10 col-sm-offset-1 text-center'><h3>Memoria</h3><p>Impulsa la conservación de memoria y el seguimiento de los procesos, desarrollando mayores y mejores mecanismos que permitan privilegiar el interés colectivo por sobre los intereses individuales.</p><span class='glyphicon glyphicon-user' aria-hidden='true'></span></div>
</div> </div>
</div> </div>
<div class='col-sm-4 text-center'> <div class='col-sm-4 text-center'>
<div class='row'> <div class='row'>
<div class='col-sm-10 text-center'><h3>Procesos</h3><p>Fortalecer la Participación Ciudadana efectiva y fomentar la acción colectiva, consolidando así procesos de mayor impacto, más representativos y vinculantes.</p><span class='glyphicon glyphicon-stats' aria-hidden='true'></span></div> <div class='col-sm-10 text-center'><h3>Procesos</h3><p>Fortalece la participación ciudadana y campesina efectiva y fomenta la acción colectiva, consolidando así procesos de mayor impacto, más representativos y vinculantes.</p><span class='glyphicon glyphicon-stats' aria-hidden='true'></span></div>
</div> </div>
</div> </div>
</div><!--/row--> </div><!--/row-->
@ -382,7 +382,7 @@
<section class='container-fluid' id='proyectos'> <section class='container-fluid' id='proyectos'>
<div class='col-sm-8 col-sm-offset-2 text-center'> <div class='col-sm-8 col-sm-offset-2 text-center'>
<h1>Proyectos</h1> <h1>Proyectos</h1>
<p class='lead'>Conoce los proyectos que usan Tupale.co para la implementación de sus herramientas, selecciona para conocer más</p> <p class='lead'>Conoce los proyectos que usan Tupale.co para la implementación de sus herramientas, selecciona para conocer más.</p>
</div> </div>
<div class='container principal'> <div class='container principal'>
<div class='container box_proyectos'> <div class='container box_proyectos'>
@ -390,7 +390,7 @@
<div class='div_proyecto'> <div class='div_proyecto'>
<a href='e82' data-toggle='modal' data-target='#myModal'> <a href='e82' data-toggle='modal' data-target='#myModal'>
<div class='proyecto_titulo' >Red de Huertas del Quindío</div> <div class='proyecto_titulo' >Red de Huertas del Quindío</div>
<img class='img-gris' style='' class=' img-circle ' alt='Red de Huertas del Quindío' src='milfs/images/secure/?file=150/d3f718c67c7a9b852eb892b1a5e8ea3a.jpg'> <img class='img-gris' style='' class='img-circle' alt='Red de Huertas del Quindío' src='milfs/images/secure/?file=150/d3f718c67c7a9b852eb892b1a5e8ea3a.jpg'>
</a> </a>
</div> </div>
@ -709,6 +709,8 @@
</div> </div>
</section> </section>
<!-- FIN Proyectos --> <!-- FIN Proyectos -->
<!-- SERVICIOS -->
<section class='container-fluid' id='servicios'> <section class='container-fluid' id='servicios'>
<div class="col-sm-8 col-sm-offset-2 text-center"> <div class="col-sm-8 col-sm-offset-2 text-center">
<h1>Servicios</h1> <h1>Servicios</h1>
@ -722,279 +724,498 @@
<img src="http://www.consumer.es/imgs/2016/12/comprar-online-seguridad-consejos.jpg" alt="..."> <img src="http://www.consumer.es/imgs/2016/12/comprar-online-seguridad-consejos.jpg" alt="...">
<div class="caption"> <div class="caption">
<h3>RAW</h3> <h3>RAW</h3>
<p>Convertimos los datos en visualizaciones con RAW. Tu tambien puedes crear tus visualizaciones de forma rápida y práctica, emplea la API simple de Tupale para experimentar con esta herramienta.</p> <p>Convertimos los datos en visualizaciones con RAW. Tu tambien puedes crear tus visualizaciones de forma rápida y práctica, emplea la API simple de Tupale para experimentar con esta herramienta.
</p>
<p> <p>
<a href="http://rawgraphs.io/" class="btn btn-default " role="button">Fuente</a> <a href="http://rawgraphs.io/" class="btn btn-default " role="button">Fuente</a>
<a href="https://raw.tupale.co/" class="btn btn-danger pull-right" role="button">En tupale</a></p> <a href="https://raw.tupale.co/" class="btn btn-danger pull-right" role="button">En tupale</a>
</div> </p>
</div> </div>
</div> </div>
<div class="col-sm-6 col-md-3"> </div>
<div class="thumbnail"> <div class="col-sm-6 col-md-3">
<img src="temas/landingpage/images/pad_servicios.jpg" alt="servicio_pad"> <div class="thumbnail">
<div class="caption"> <img src="temas/landingpage/images/pad_servicios.jpg" alt="servicio_pad">
<h3>PAD</h3> <div class="caption">
<p>Escribimos y compartimos ideas en textos digitales y todo comienza a suceder . Escribe tu tambien de forma colaborativa, crea documentos con tu equipo en tiempo real desde cualquier lugar.</p> <h3>PAD</h3>
<p> <p>Escribimos y compartimos ideas en textos digitales y todo comienza a suceder . Escribe tu tambien de forma colaborativa, crea documentos con tu equipo en tiempo real desde cualquier lugar.
<a href="http://etherpad.org/" class="btn btn-default" role="button">Fuente</a> </p>
<a href="https://pad.tupale.co/" class="btn btn-danger pull-right" role="button">En Tupale</a> <p>
</p> <a href="http://etherpad.org/" class="btn btn-default" role="button">Fuente</a>
</div> <a href="https://pad.tupale.co/" class="btn btn-danger pull-right" role="button">En Tupale</a>
</p>
</div> </div>
</div> </div>
<div class="col-sm-6 col-md-3"> </div>
<div class="thumbnail"> <div class="col-sm-6 col-md-3">
<img src="http://www.consumer.es/imgs/2016/06/compraenredessociales-sophia-portada1-750.png" alt="..."> <div class="thumbnail">
<div class="caption"> <img src="http://www.consumer.es/imgs/2016/06/compraenredessociales-sophia-portada1-750.png" alt="...">
<h3>CALC</h3> <div class="caption">
<p>Las estructuras de datos que alimentan las aplicaciones en Tupale toman vida con CALC. Comienza, actualiza y comparte hojas de calculo en linea, desde cualquier lugar en tiempo real.</p> <h3>CALC</h3>
<p> <p>Las estructuras de datos que alimentan las aplicaciones en Tupale toman vida con CALC. Comienza, actualiza y comparte hojas de calculo en linea, desde cualquier lugar en tiempo real.</p>
<a href="https://ethercalc.net/" class="btn btn-default" role="button">Fuente</a> <p>
<a href="https://calc.tupale.co/" class="btn btn-danger pull-right" role="button">En Tupale</a> <a href="https://ethercalc.net/" class="btn btn-default" role="button">Fuente</a>
</p> <a href="https://calc.tupale.co/" class="btn btn-danger pull-right" role="button">En Tupale</a>
</div> </p>
</div> </div>
</div> </div>
<div class="col-sm-6 col-md-3"> </div>
<div class="thumbnail"> <div class="col-sm-6 col-md-3">
<img src="temas/landingpage/images/piwik_servicios.jpg" alt="servicio_piwik"> <div class="thumbnail">
<div class="caption"> <img src="temas/landingpage/images/piwik_servicios.jpg" alt="servicio_piwik">
<h3>PIWIK</h3> <div class="caption">
<p>¿Quien accede y visita tu sitio? Usamos PIWIK para la consulta de uso de Tupale.co y los diferentes proyectos alojados en Tupale. Tambien puedes implementarla para cualquier sitio</p> <h3>PIWIK</h3>
<p>¿Quien accede y visita tu sitio? Usamos PIWIK para la consulta de uso de Tupale.co y los diferentes proyectos alojados en Tupale. Tambien puedes implementarla para cualquier sitio.
</p>
<p>
<a href="https://stats.tupale.co" class="btn btn-default" role="button">Fuente</a> <a href="https://stats.tupale.co" class="btn btn-default" role="button">Fuente</a>
<a href="https://piwik.org/" class="btn btn-danger pull-right" role="button">En Tupale</a></p> <a href="https://piwik.org/" class="btn btn-danger pull-right" role="button">En Tupale</a>
</div> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<!-- Fin sección servicios --> </section>
<!-- PRECIOS --> <!-- Fin sección servicios -->
<section class="container-fluid" id="precios"> <!-- Carrusel APIS Open Data -->
<div class="col-sm-8 col-sm-offset-2 text-center"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<h1>Precios</h1> <!-- Indicators -->
<p class="lead">Tupale es una herramienta de código abierto, puede ser descargada e implementada libremente. Los valores propuestos cubren servicios de administración, hosting, reinversión en desarrollo, capacitación en uso y manejo</p> <ol class="carousel-indicators">
</div> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<div class="container"> <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<div class="row"> <li data-target="#carousel-example-generic" data-slide-to="2"></li>
<!-- item --> </ol>
<div class="col-md-3"> <!-- Wrapper for slides -->
<div class="panel panel-black"> <div class="carousel-inner" role="listbox">
<div class="panel-heading"> <div class="item active">
<h3 class="text-center">INSTANCIA DE TUPALE</h3> <img src="https://cldup.com/VvvJCGnUXw.png" alt="portal_open_data">
<p class="text-center">VALOR ANUAL</p> <div class="carousel-caption">
</div> <h3>Portal de Open Data</h3>
<div class="panel-body text-center"> <p>Multiples opciones de manejo de datos con estandares mundiales de Open Data</p>
<p class="lead" style="font-size:30px"><strong>$250 USD</strong></p> </div>
</div> </div>
<ul class="list-group list-group-flush text-left"> <div class="item">
<li class="list-group-item"> <img src="https://cldup.com/cwy7fakMG3.png" alt="apis_json">
<span class="glyphicon glyphicon-ok-sign"></span> Aplicaciones ilimitadas <div class="carousel-caption">
</li> <h3>APIS JSON</h3>
<li class="list-group-item"> <p>api json y api json simple para integraciones y programación</p>
<span class="glyphicon glyphicon-ok-sign"></span> Usuarios ilimitados </div>
</li> </div>
<li class="list-group-item"> <div class="item">
<span class="glyphicon glyphicon-ok-sign"></span> Personalización visual básica y plantillas gráficas iniciales <img src="https://cldup.com/e2fps1PMMd.png" alt="apis_json">
</li> <div class="carousel-caption">
<li class="list-group-item"> <h3>Visualizaciones</h3>
<span class="glyphicon glyphicon-ok-sign"></span> Redirección o integración con dominio o subdominio a Tupale.co. <p>Mapas y visualizaciónes básicas</p>
</li> </div>
</ul> </div>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">Contáctanos</a> </div> </div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- FIN Carrusel -->
<!-- PRECIOS -->
<section class="container-fluid" id="precios">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h1>Precios</h1>
<p class="lead">Tupale es una herramienta de código abierto, puede ser descargada e implementada libremente. Los valores propuestos cubren servicios de administración, hosting, reinversión en desarrollo, capacitación en uso y manejo.</p>
</div>
<div class="container">
<div class="row">
<!-- item -->
<div class="col-md-3">
<div class="panel panel-black">
<div class="panel-heading">
<h3 class="text-center">INSTANCIA DE TUPALE</h3>
<p class="text-center">VALOR ANUAL</p>
</div> </div>
<div class="panel-body text-center">
<p class="lead" style="font-size:30px"><strong>$250 USD</strong></p>
</div>
<ul class="list-group list-group-flush text-left">
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Aplicaciones ilimitadas
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Usuarios ilimitados
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Personalización visual básica y plantillas gráficas iniciales
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Redirección o integración con dominio o subdominio a Tupale.co.
</li>
</ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">Contáctanos</a> </div>
</div> </div>
<!-- /item --> </div>
<!-- item --> <!-- /item -->
<div class="col-md-3"> <!-- item -->
<div class="panel panel-black"> <div class="col-md-3">
<div class="panel-heading"> <div class="panel panel-black">
<h3 class="text-center">TALLER BÁSICO</h3> <div class="panel-heading">
<p class="text-center">VALOR PARA 6 PERSONAS</p> <h3 class="text-center">TALLER BÁSICO</h3>
</div> <p class="text-center">VALOR PARA 6 PERSONAS</p>
<div class="panel-body text-center"> </div>
<p class="lead" style="font-size:30px"><strong>$240 USD</strong></p> <div class="panel-body text-center">
</div> <p class="lead" style="font-size:30px"><strong>$240 USD</strong></p>
<ul class="list-group list-group-flush text-left"> </div>
<li class="list-group-item"> <ul class="list-group list-group-flush text-left">
<span class="glyphicon glyphicon-ok-sign"></span> Creación de modelo de datos <li class="list-group-item">
</li> <span class="glyphicon glyphicon-ok-sign"></span> Creación de modelo de datos
<li class="list-group-item"> </li>
<span class="glyphicon glyphicon-ok-sign"></span> Creación de usuarios <li class="list-group-item">
</li> <span class="glyphicon glyphicon-ok-sign"></span> Creación de usuarios
<li class="list-group-item"> </li>
<span class="glyphicon glyphicon-ok-sign"></span> Creación de aplicacioes <li class="list-group-item">
</li> <span class="glyphicon glyphicon-ok-sign"></span> Creación de aplicacioes
</li>
<li class="list-group-item"> <li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Creación y modificación de campos <span class="glyphicon glyphicon-ok-sign"></span> Creación y modificación de campos
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Guia básica de plantillas <span class="glyphicon glyphicon-ok-sign"></span> Guia básica de plantillas
</li> </li>
</ul> </ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">CONTÁCTANOS</a> </div> <div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">CONTÁCTANOS</a> </div>
</div>
</div> </div>
<!-- /item --> </div>
<!-- item --> <!-- /item -->
<div class="col-md-3"> <!-- item -->
<div class="panel panel-black"> <div class="col-md-3">
<div class="panel-heading"> <div class="panel panel-black">
<h3 class="text-center">TALLER MEDIO</h3> <div class="panel-heading">
<p class="text-center">VALOR PARA 6 PERSONAS</p> <h3 class="text-center">TALLER MEDIO</h3>
</div> <p class="text-center">VALOR PARA 6 PERSONAS</p>
<div class="panel-body text-center">
<p class="lead" style="font-size:30px"><strong>$480 USD</strong></p>
</div>
<ul class="list-group list-group-flush text-left">
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> TALLER BÁSICO</span>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Uso de campos especiales
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Creación de mapas
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Guia avanzada de plantillas y parametrización
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Generación de informes
</li>
</ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">CONTÁCTANOS</a> </div>
</div> </div>
<div class="panel-body text-center">
<p class="lead" style="font-size:30px"><strong>$480 USD</strong></p>
</div>
<ul class="list-group list-group-flush text-left">
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> TALLER BÁSICO</span>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Uso de campos especiales
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Creación de mapas
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Guia avanzada de plantillas y parametrización
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Generación de informes
</li>
</ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">CONTÁCTANOS</a> </div>
</div> </div>
<!-- /item --> </div>
<!-- /item -->
<!-- item --> <!-- item -->
<div class="col-md-3"> <div class="col-md-3">
<div class="panel panel-black"> <div class="panel panel-black">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="text-center">TALLER AVANZADO</h3> <h3 class="text-center">TALLER AVANZADO</h3>
<p class="text-center">VALOR PARA 6 PERSONAS</p> <p class="text-center">VALOR PARA 6 PERSONAS</p>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:30px"><strong>$960 USD</strong></p>
</div>
<ul class="list-group list-group-flush text-left">
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> TALLER BÁSICO </span> TALLER MEDIO </span>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Creación de usuarios
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Uso básico de las API para visualizacioens
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Exportación de datos a diferentes formatos
</li>
</ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">Contáctanos</a> </div>
</div> </div>
<div class="panel-body text-center">
<p class="lead" style="font-size:30px"><strong>$960 USD</strong></p>
</div>
<ul class="list-group list-group-flush text-left">
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> TALLER BÁSICO </span> TALLER MEDIO </span>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Creación de usuarios
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Uso básico de las API para visualizacioens
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Exportación de datos a diferentes formatos
</li>
</ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">Contáctanos</a> </div>
</div> </div>
<!-- /item --> </div>
<!-- /item -->
</div>
</div>
</section>
<section class="container-fluid" id="patrocinio">
<div class="col-sm-8 col-sm-offset-2 ">
<div class="text-center">
<h1>Patrocinadores</h1>
<p class="lead">Conoce las empresas, instituciones y organizaciones que han invertido a través de sus proyectos con el avance de la herramienta, todos los desarrollos que han sido adelantados son de acceso libre para toda la comunidad. </p>
</div>
</div>
<div class="container principal">
<div class="container box_proyectos">
<!-- Thumbnail link para el logo de pasocolombia -->
<div class="patrocina">
<a href="#" data-toggle="modal" data-target="#myModal">
<img src="assets/pasocolombia.png" class="img-responsive img-rounded center-block" alt="">
</a>
</div>
<!-- Thumbnail link para el logo de red de huerteros -->
<div class=" patrocina">
<a href="#" data-toggle="modal" data-target="#myModal">
<img src="assets/red_huerteros.png" class="img-responsive img-rounded center-block" alt="">
</a>
</div>
<!-- Thumbnail link para el logo avanto -->
<div class=" patrocina">
<a href="#" data-toggle="modal" data-target="#myModal">
<img src="assets/avanto.png" class="img-responsive img-rounded center-block" alt="">
</a>
</div>
<!-- Thumbnail link para el logo brigada -->
<div class=" patrocina">
<a href="#" data-toggle="modal" data-target="#myModal">
<img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
</a>
</div>
<div class=" patrocina">
<a href="#" data-toggle="modal" data-target="#myModal">
<img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
</a>
</div>
<div class=" patrocina">
<a href="#" data-toggle="modal" data-target="#myModal">
<img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
</a>
</div>
<div class=" patrocina">
<a href="#" data-toggle="modal" data-target="#myModal">
<img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
</a>
</div>
<div class="patrocina">
<a href="#" data-toggle="modal" data-target="#myModal">
<img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
</a>
</div>
<div class="patrocina">
<a href="#" data-toggle="modal" data-target="#myModal">
<img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
</a>
</div> </div>
</div> </div>
</section> </div>
<!--EQUIPO --> </section>
<section class="container-fluid" id="equipo">
<div class="col-sm-8 col-sm-offset-2"> <!--EQUIPO -->
<div class="text-center"> <section class="container-fluid" id="equipo">
<h1>Equipo</h1> <div class="col-sm-8 col-sm-offset-2">
<p class="lead">Tupale es la dependiencia activista de <a href="https://github.com/humano/milfs">MILF</a>, a esta propuesta inicial se han vinculado de manera orgánica compañeros y amigos aportando al crecimiento del entorno de herramientas que facilitan el desarrollo de Tupale y la integración con proyectos, equipos, instituciones y causas.</p> <div class="text-center">
</div> <h1>Equipo</h1>
<p class="lead">Tupale es la dependiencia activista de <a href="https://github.com/humano/milfs">MILF</a>, a esta propuesta inicial se han vinculado de manera orgánica compañeros y amigos aportando al crecimiento del entorno de herramientas que facilitan el desarrollo de Tupale y la integración con proyectos, equipos, instituciones y causas.</p>
</div> </div>
<div class="row text-center"> </div>
<div class="col-lg-4 "> <div class="container text-center">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> <div class="row">
<h2>La Manada</h2> <div class="col-sm-4 col-lg-4">
<p> Lara una agerrida Pastor Malinois y Canquis un lambetas Pastor Aleman, y sus hijo, Alpha, Amed ,Akrus. Amigos, terapistas, motivación y compañía para la actividad de cada día</p> <img class="img-circle" src="temas/landingpage/images/equipo_manada.png" alt="manada malinois" width="140" height="140">
<h2>La manada malinois</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.
</p>
<p><a class="btn btn-default" href="#" role="button">Conocer más</a></p>
</div>
<div class="col-sm-4 col-lg-4">
<img class="img-circle" src="temas/landingpage/images/equipo_tigre.png" alt="tigre" width="140" height="140">
<h2>El Tigre</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
</p>
<p><a class="btn btn-default" href="#" role="button">Conocer más</a></p>
</div>
<div class="col-sm-4 col-lg-4">
<img class="img-circle" src="temas/landingpage/images/equipo_tigra.png" alt="tigra" width="140" height="140">
<h2>La Tigra</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<p><a class="btn btn-default" href="#" role="button">Conocer más</a></p>
</div>
<div class="col-sm-4 col-sm-offset-2 col-lg-4 col-lg-offset-2">
<img class="img-circle" src="temas/landingpage/images/equipo_kleper.png" alt="kleper" width="140" height="140">
<h2>Kleper</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
</p>
<p><a class="btn btn-default" href="#" role="button">Conocer más</a></p>
</div>
<div class="col-sm-4 col-lg-4">
<img class="img-circle" src="temas/landingpage/images/equipo_pionerita.png" alt="pionerita" width="140" height="140">
<h2>Pionerita</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<p><a class="btn btn-default" href="#" role="button">Conocer más</a></p> <p><a class="btn btn-default" href="#" role="button">Conocer más</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>El Tigre</h2>
<p>Creador de MILF base del funcionamiento de túpale</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="https://scontent.feoh1-1.fna.fbcdn.net/v/t1.0-9/12308647_10206780410127218_7218226509985424775_n.jpg?oh=ff4be6cd46b77313b33ea136302ecd0a&oe=5965D251" alt="Generic placeholder image" width="140" height="140">
<h2>La Tigra</h2>
<p>Apoyo moral incondicional, administradora y facilitadora de procesos</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</section>
<div class='container-fluid'> </div>
<footer id="fh5co-footer">
<small>
<p class="">Tupale.co funciona gracias a <a href='https://QWERTY.co/milfs'>&copy; MILFS Un proyecto de https://QWERTY.co</a> Se distribuye bajo licencia GPL V3
<a href="milfs/?psi" ><i class="fa fa-smile-o "></i> Políticas de privacidad y protección de datos.</a></p>
</small>
</footer>
</div> </div>
</div> </div>
<div class='modal fade ' id='muestraInfo' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> </div>
<div class='modal-dialog modal-lg' > </section>
<div class='modal-content'> <!-- ESTADISTICAS -->
<div class='modal-header' > <section class="container-fluid" id="visitas">
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'><i class='fa fa-times-circle'></i></button> <div class="col-sm-8 col-sm-offset-2">
<h4 class='modal-title' id='myModalLabel_info'><div id='titulo_modal'></div></h4> <div class="text-center">
</div> <h1>Estadísticas de visita Tupale</h1>
<div class='modal-body'> </div>
</div>
<div id='muestra_form'> <div class="container col-lg-8 col-md-offset-2 text-center">
<ul class="nav nav-tabs">
</div> <li class="active"><a href="#real-time" data-toggle="tab" aria-expanded="true">Tiempo Real</a></li>
</div> <li ><a href="#semanas" data-toggle="tab" aria-expanded="true">Ultimas semanas</a></li>
<div class='modal-footer' id='pie_modal'> <li ><a href="#dias" data-toggle="tab" aria-expanded="true">Ultimos días</a></li>
</ul>
<div id="myTabContent" class="tab-content">
</div> <div class="tab-pane fade active in" id="real-time">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" id="real-time" scrolling="no" src="https://stats.tupale.co/index.php?module=Widgetize&action=iframe&widget=1&moduleToWidgetize=Live&actionToWidgetize=getSimpleLastVisitCount&idSite=1&period=day&date=yesterday&disableLink=1&widget=1"></iframe>
</div>
</div>
<div class="tab-pane fade" id="semanas">
<div class="embed-responsive embed-responsive-16by9">
<iframe scrolling="no" class="embed-responsive-item" src="https://stats.tupale.co/index.php?module=Widgetize&action=iframe&forceView=1&viewDataTable=graphEvolution&widget=1&moduleToWidgetize=VisitsSummary&actionToWidgetize=getEvolutionGraph&idSite=1&period=week&date=yesterday&disableLink=1&widget=1"></iframe>
</div>
</div>
<div class="tab-pane fade" id="dias">
<div class="embed-responsive embed-responsive-16by9">
<iframe scrolling="no" class="embed-responsive-item" src="https://stats.tupale.co/index.php?module=Widgetize&action=iframe&widget=1&moduleToWidgetize=VisitTime&actionToWidgetize=getByDayOfWeek&idSite=1&period=month&date=yesterday&disableLink=1&widget=1"></iframe>
</div> </div>
</div> </div>
</div> </div>
<!-- Modal --> </div>
<!-- Footer --> </section>
<!-- FIN equipo -->
<!--FOOTER -->
<footer id="footer" class="clearfix">
<div id="footer-widgets">
<div class="container">
<div id="footer-wrapper">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-2">
<div id="meta-3" class="widget widgetFooter widget_meta">
<h4 class="widgettitle">Más informacion</h4>
<ul>
<li><a href="#"><i class="fa fa-info-circle" aria-hidden="true">
</i> Datos Abiertos</a>
</li>
<li><a href="#"><i class="fa fa-external-link" aria-hidden="true"></i> Manifiesto</a>
</li>
<li><a href="#"><i class="fa fa-eye" aria-hidden="true"></i> Recomendado</a>
</li>
</ul>
</div>
</div> <!-- end widget1 -->
<div class="col-xs-6 col-sm-6 col-md-2">
<div id="recent-posts-3" class="widget widgetFooter widget_recent_entries">
<h4 class="widgettitle">Buscanos en redes</h4>
<ul>
<li>
<a href="https://www.facebook.com/tupaleco" target="_blank"><i class="fa fa-facebook"></i> Facebook</a>
</li>
<li>
<a href="https://twitter.com/tupaleco" target="_blank"><i class="fa fa-twitter"></i> Twitter</a>
</li>
<li>
<a href="https://t.me/tupale" target="_blank"><i class="fa fa-paper-plane" aria-hidden="true"></i> Telegram</a>
</li>
</ul>
</div>
</div> <!-- end widget1 -->
<div class="col-sm-6 col-md-4">
<div id="meta-4" class="widget widgetFooter widget_meta">
<h4 class="widgettitle">Contáctanos</h4>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa-fw"></i></span>
<input class="form-control" placeholder="Correo de contacto" type="text">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-file-text" aria-hidden="true"></i></span>
<textarea class="form-control" placeholder="Escribenos" rows="2" id="comment"></textarea>
<span class="input-group-btn">
<button class="btn btn-danger" type="button">Enviar</button>
</span>
</div>
</div>
</div>
</div> <!-- end widget1 -->
<div class="col-sm-12 col-md-4">
<div id="search-3" class="widget widgetFooter widget_search"><h4 class="widgettitle">Busca en el sitio:</h4>
<div class="form-group">
<label class="control-label">Quieres buscar en Tupale</label>
<div class="input-group">
<span class="input-group-addon">¿Que buscas?</span>
<input class="form-control" placeholder="Palabra clave" type="text">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">Buscar</button>
</span>
</div>
</div>
</div>
</div> <!-- end widget1 -->
</div> <!-- end .row -->
</div> <!-- end #footer-wrapper -->
</div> <!-- end .container -->
</div> <!-- end #footer-widgets -->
</footer>
<div id="sub-floor">
<div class="container text-center">
<div class="row">
<small>
<p class="">Tupale.co funciona gracias a <a href='https://QWERTY.co/milfs'>&copy; MILFS Un proyecto de https://QWERTY.co</a> Se distribuye bajo licencia GPL V3
<a href="milfs/?psi" ><i class="fa fa-smile-o "></i> Políticas de privacidad y protección de datos.</a></p>
</small>
</div> <!-- end .row -->
</div>
</div>
<script type="text/javascript"> <script type="text/javascript">
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) { $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault(); event.preventDefault();
$(this).ekkoLightbox(); $(this).ekkoLightbox();
}); });
//// wysiwyg //// wysiwyg
var edit = function() { var edit = function() {
$('.wysiwyg').summernote({height: 250, codemirror: { theme: 'default' },dialogsInBody: true}); $('.wysiwyg').summernote({height: 250, codemirror: { theme: 'default' },dialogsInBody: true});
}; };
var save = function() { var save = function() {
var makrup = $('.wysiwyg').summernote('code'); var makrup = $('.wysiwyg').summernote('code');
$('.wysiwyg').summernote('destroy'); $('.wysiwyg').summernote('destroy');
}; };
$(document).ready(function() { $(document).ready(function() {
$('.wysiwyg_auto').summernote({dialogsInBody: true}); $('.wysiwyg_auto').summernote({dialogsInBody: true});
}); });
</script> </script>
<!-- Piwik --> <!-- Piwik -->
<script type="text/javascript"> <script type="text/javascript">
var _paq = _paq || []; var _paq = _paq || [];
_paq.push(['trackPageView']); _paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']); _paq.push(['enableLinkTracking']);
(function() { (function() {
var u="//stats.tupale.co/"; var u="//stats.tupale.co/";
_paq.push(['setTrackerUrl', u+'piwik.php']); _paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]); _paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s); g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})(); })();
</script> </script>
<noscript><p><img src="//stats.tupale.co/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript> <noscript><p><img src="//stats.tupale.co/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code --> <!-- End Piwik Code -->
</body> </body>
</html> </html>

View File

@ -34,34 +34,40 @@ p{
margin: 0 0 10px; margin: 0 0 10px;
} }
.btn {
margin-right: 0px;
}
.btn-danger{ .container-principal{
font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; padding-left: 0px;
display: inline-block; padding-right: 0px;
font-weight: normal;
text-align: center;
font-size: 13px;
line-height: 1.846;
} }
.btn-default{ .btn {
margin-right: 0px;
font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
line-height: 1.846; line-height: 1.846;
padding: 5px 10px !important;
} }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
background: #ff0000 !important; background: #ff0000 !important;
border-color: #ff0000 !important; border-color: #ff0000 !important;
} }
.input-group-addon {
margin-right: 0px;
font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
text-align: center;
font-size: 13px;
line-height: 1.846;
padding: 5px 10px !important;
text-transform: uppercase;
}
/* USING BOOTSTRAP 3.0.3 */ /* USING BOOTSTRAP 3.0.3 */
/*NAVBAR BRAND*/ /*NAVBAR BRAND*/
@ -127,8 +133,32 @@ transition: all 0.3s ease;
} }
section {
padding-top:110px;
padding-bottom:70px;
position: relative;
height: 100%;
}
.lead {
padding-bottom: 30px;
}
/*SECCIONES*/
#campana{
background-color: #333333;
color: white !important;
}
/*PROYECTOS*/ /*PROYECTOS*/
#proyectos {
background-color: #d4d4d4;
}
/*container general*/ /*container general*/
.box_proyectos{ .box_proyectos{
display: table; display: table;
@ -141,10 +171,9 @@ transition: all 0.3s ease;
position: relative; position: relative;
margin: 10px; margin: 10px;
float: left; float: left;
padding: 5px;
background-color: grey; background-color: grey;
height: 200px; height: 200px;
width: 200px; width: 200px;
} }
@ -176,66 +205,13 @@ filter: grayscale(0);
.img-center {margin:0 auto;} .img-center {margin:0 auto;}
/*fin proyectos*/
/*PATROCINADOR*/
.logos{
display: inline-block;
margin-left: 70px;
}
.patrocina{
background-color: white;
padding: 15px;
margin: 5px;
width: 100px;
display: inline-block;
}
section {
padding-top:110px;
padding-bottom:70px;
position: relative;
height: 100%;
overflow-y: scroll;
}
#campana{
background-color: #333333;
color: white !important;
}
#proyectos {
background-color: #d4d4d4;
}
#servicios { #servicios {
background-color: #333333; background-color: #333333;
color: white !important; color: white !important;
} }
#patrocinio {
background-color: grey;
color: white !important;
}
.v-center {
padding-top:10%;
font-size:30px;
}
.glyphicon-search, .glyphicon-user, .glyphicon-stats, .glyphicon-play, .glyphicon-forward, .glyphicon-fast-forward, .glyphicon-step-forward {
font-size: 50px !important;
}
.btn-servicios {
padding: 20px 60px;
}
.collapse.in {
margin-top: 20px;
}
/*precios*/ /*precios*/
.panel-black .panel-heading{ .panel-black .panel-heading{
@ -265,16 +241,75 @@ section {
.panel-black:hover .glyphicon-ok-sign{ .panel-black:hover .glyphicon-ok-sign{
color: green; color: green;
}
/*fin precios*/
/*PATROCINADOR*/
#patrocinio {
background-color: grey;
color: white !important;
}
.logos{
display: inline-block;
margin-left: 70px;
}
.patrocina{
background-color: white;
padding: 15px;
margin: 5px;
width: 100px;
display: inline-block;
}
/*VISITAS*/
#visitas{
padding-top: 50px;
padding-bottom: 50px;
}
/*Estadisticas*/
.nav > li > a {
color: red;
}
.nav-tabs > li > a:hover {
background-color: #333333;
}
.v-center {
padding-top:10%;
font-size:30px;
}
/*gl*/
.glyphicon-search, .glyphicon-user, .glyphicon-stats, .glyphicon-play, .glyphicon-forward, .glyphicon-fast-forward, .glyphicon-step-forward {
font-size: 50px !important;
}
.btn-servicios {
padding: 20px 60px;
}
.collapse.in {
margin-top: 20px;
}
/* FOOTER*/ /* FOOTER*/
#footer { #footer {
border-top: 5px solid #ff0000; border-top: 5px solid #ff0000;
background: grey none repeat scroll 0% 0%; background: grey none repeat scroll 0% 0%;
padding-top: 30px; padding-top: 30px;
margin-top: 60px;
clear: both; clear: both;
color: #AAA; color: #AAA;
display: block; display: block;
@ -303,12 +338,20 @@ section {
color: #DDD; color: #DDD;
} }
.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
margin-left: 5px;
border-bottom-left-radius: 3px !important;
border-top-left-radius: 3px !important;
}
#sub-floor { #sub-floor {
color: #AAA; color: #AAA;
background: #333333 none repeat scroll 0% 0%; background: black none repeat scroll 0% 0%;
padding: 10px 0px; padding: 15px 15px;
} }
/*RESPONSIVE*/ /*RESPONSIVE*/
/*ESCRITORIO*/ /*ESCRITORIO*/
@ -445,9 +488,6 @@ margin-top: 50px;
height: 80px !important; height: 80px !important;
} }
/*menú desplegable por delante del logo*/ /*menú desplegable por delante del logo*/
.navbar.shrink a { .navbar.shrink a {
@ -487,6 +527,10 @@ margin-top: 50px;
padding-top:0px !important; padding-top:0px !important;
} }
.embed-responsive-16by9 {
padding-bottom: 134.25%;
}
} }
/*fin móbiles*/ /*fin móbiles*/

Binary file not shown.

After

Width:  |  Height:  |  Size: 312 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 641 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 403 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 450 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 397 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB