1
0
Fork 0

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'>
<div class='container navegacion'>
<div class='navbar-header'>
@ -344,18 +344,18 @@
<div class='row'>
<div class='col-sm-4'>
<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>
</div>
</div>
<div class='col-sm-4 text-center'>
<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 class='col-sm-4 text-center'>
<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><!--/row-->
@ -382,7 +382,7 @@
<section class='container-fluid' id='proyectos'>
<div class='col-sm-8 col-sm-offset-2 text-center'>
<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 class='container principal'>
<div class='container box_proyectos'>
@ -390,7 +390,7 @@
<div class='div_proyecto'>
<a href='e82' data-toggle='modal' data-target='#myModal'>
<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>
</div>
@ -709,6 +709,8 @@
</div>
</section>
<!-- FIN Proyectos -->
<!-- SERVICIOS -->
<section class='container-fluid' id='servicios'>
<div class="col-sm-8 col-sm-offset-2 text-center">
<h1>Servicios</h1>
@ -722,279 +724,498 @@
<img src="http://www.consumer.es/imgs/2016/12/comprar-online-seguridad-consejos.jpg" alt="...">
<div class="caption">
<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>
<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>
</div>
<a href="https://raw.tupale.co/" class="btn btn-danger pull-right" role="button">En tupale</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="temas/landingpage/images/pad_servicios.jpg" alt="servicio_pad">
<div class="caption">
<h3>PAD</h3>
<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>
<p>
<a href="http://etherpad.org/" class="btn btn-default" role="button">Fuente</a>
<a href="https://pad.tupale.co/" class="btn btn-danger pull-right" role="button">En Tupale</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="temas/landingpage/images/pad_servicios.jpg" alt="servicio_pad">
<div class="caption">
<h3>PAD</h3>
<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>
<p>
<a href="http://etherpad.org/" class="btn btn-default" role="button">Fuente</a>
<a href="https://pad.tupale.co/" class="btn btn-danger pull-right" role="button">En Tupale</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://www.consumer.es/imgs/2016/06/compraenredessociales-sophia-portada1-750.png" alt="...">
<div class="caption">
<h3>CALC</h3>
<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>
<p>
<a href="https://ethercalc.net/" class="btn btn-default" role="button">Fuente</a>
<a href="https://calc.tupale.co/" class="btn btn-danger pull-right" role="button">En Tupale</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://www.consumer.es/imgs/2016/06/compraenredessociales-sophia-portada1-750.png" alt="...">
<div class="caption">
<h3>CALC</h3>
<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>
<p>
<a href="https://ethercalc.net/" class="btn btn-default" role="button">Fuente</a>
<a href="https://calc.tupale.co/" class="btn btn-danger pull-right" role="button">En Tupale</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="temas/landingpage/images/piwik_servicios.jpg" alt="servicio_piwik">
<div class="caption">
<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>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="temas/landingpage/images/piwik_servicios.jpg" alt="servicio_piwik">
<div class="caption">
<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://piwik.org/" class="btn btn-danger pull-right" role="button">En Tupale</a></p>
</div>
<a href="https://piwik.org/" class="btn btn-danger pull-right" role="button">En Tupale</a>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Fin sección servicios -->
<!-- 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>
</section>
<!-- Fin sección servicios -->
<!-- Carrusel APIS Open Data -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://cldup.com/VvvJCGnUXw.png" alt="portal_open_data">
<div class="carousel-caption">
<h3>Portal de Open Data</h3>
<p>Multiples opciones de manejo de datos con estandares mundiales de Open Data</p>
</div>
</div>
<div class="item">
<img src="https://cldup.com/cwy7fakMG3.png" alt="apis_json">
<div class="carousel-caption">
<h3>APIS JSON</h3>
<p>api json y api json simple para integraciones y programación</p>
</div>
</div>
<div class="item">
<img src="https://cldup.com/e2fps1PMMd.png" alt="apis_json">
<div class="carousel-caption">
<h3>Visualizaciones</h3>
<p>Mapas y visualizaciónes básicas</p>
</div>
</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 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 -->
<!-- item -->
<div class="col-md-3">
<div class="panel panel-black">
<div class="panel-heading">
<h3 class="text-center">TALLER BÁSICO</h3>
<p class="text-center">VALOR PARA 6 PERSONAS</p>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:30px"><strong>$240 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> Creación de modelo de datos
</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> Creación de aplicacioes
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Creación y modificación de campos
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Guia básica de plantillas
</li>
</ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">CONTÁCTANOS</a> </div>
</div>
</div>
<!-- /item -->
<!-- item -->
<div class="col-md-3">
<div class="panel panel-black">
<div class="panel-heading">
<h3 class="text-center">TALLER MEDIO</h3>
<p class="text-center">VALOR PARA 6 PERSONAS</p>
</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 -->
<!-- item -->
<div class="col-md-3">
<div class="panel panel-black">
<div class="panel-heading">
<h3 class="text-center">TALLER AVANZADO</h3>
<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>
<!-- /item -->
</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 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 -->
<!-- item -->
<div class="col-md-3">
<div class="panel panel-black">
<div class="panel-heading">
<h3 class="text-center">TALLER BÁSICO</h3>
<p class="text-center">VALOR PARA 6 PERSONAS</p>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:30px"><strong>$240 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> Creación de modelo de datos
</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> Creación de aplicacioes
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Creación y modificación de campos
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"></span> Guia básica de plantillas
</li>
</ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-danger" href="#">CONTÁCTANOS</a> </div>
</div>
</div>
<!-- /item -->
<!-- item -->
<div class="col-md-3">
<div class="panel panel-black">
<div class="panel-heading">
<h3 class="text-center">TALLER MEDIO</h3>
<p class="text-center">VALOR PARA 6 PERSONAS</p>
</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 -->
<!-- item -->
<div class="col-md-3">
<div class="panel panel-black">
<div class="panel-heading">
<h3 class="text-center">TALLER AVANZADO</h3>
<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>
<!-- /item -->
</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>
</section>
<!--EQUIPO -->
<section class="container-fluid" id="equipo">
<div class="col-sm-8 col-sm-offset-2">
<div class="text-center">
<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>
</section>
<!--EQUIPO -->
<section class="container-fluid" id="equipo">
<div class="col-sm-8 col-sm-offset-2">
<div class="text-center">
<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 class="row text-center">
<div class="col-lg-4 ">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>La Manada</h2>
<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>
</div>
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-4">
<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>
</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 class='modal fade ' id='muestraInfo' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog modal-lg' >
<div class='modal-content'>
<div class='modal-header' >
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'><i class='fa fa-times-circle'></i></button>
<h4 class='modal-title' id='myModalLabel_info'><div id='titulo_modal'></div></h4>
</div>
<div class='modal-body'>
<div id='muestra_form'>
</div>
</div>
<div class='modal-footer' id='pie_modal'>
</div>
</div>
</section>
<!-- ESTADISTICAS -->
<section class="container-fluid" id="visitas">
<div class="col-sm-8 col-sm-offset-2">
<div class="text-center">
<h1>Estadísticas de visita Tupale</h1>
</div>
</div>
<div class="container col-lg-8 col-md-offset-2 text-center">
<ul class="nav nav-tabs">
<li class="active"><a href="#real-time" data-toggle="tab" aria-expanded="true">Tiempo Real</a></li>
<li ><a href="#semanas" data-toggle="tab" aria-expanded="true">Ultimas semanas</a></li>
<li ><a href="#dias" data-toggle="tab" aria-expanded="true">Ultimos días</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<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>
<!-- Modal -->
<!-- Footer -->
<script type="text/javascript">
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
//// wysiwyg
var edit = function() {
$('.wysiwyg').summernote({height: 250, codemirror: { theme: 'default' },dialogsInBody: true});
};
var save = function() {
var makrup = $('.wysiwyg').summernote('code');
$('.wysiwyg').summernote('destroy');
};
$(document).ready(function() {
$('.wysiwyg_auto').summernote({dialogsInBody: true});
});
</script>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//stats.tupale.co/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
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);
})();
</script>
<noscript><p><img src="//stats.tupale.co/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
</body>
</html>
</div>
</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">
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
//// wysiwyg
var edit = function() {
$('.wysiwyg').summernote({height: 250, codemirror: { theme: 'default' },dialogsInBody: true});
};
var save = function() {
var makrup = $('.wysiwyg').summernote('code');
$('.wysiwyg').summernote('destroy');
};
$(document).ready(function() {
$('.wysiwyg_auto').summernote({dialogsInBody: true});
});
</script>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//stats.tupale.co/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
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);
})();
</script>
<noscript><p><img src="//stats.tupale.co/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
</body>
</html>

View File

@ -34,34 +34,40 @@ p{
margin: 0 0 10px;
}
.btn {
margin-right: 0px;
}
.btn-danger{
font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline-block;
font-weight: normal;
text-align: center;
font-size: 13px;
line-height: 1.846;
.container-principal{
padding-left: 0px;
padding-right: 0px;
}
.btn-default{
.btn {
margin-right: 0px;
font-family:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline-block;
font-weight: normal;
text-align: center;
font-size: 13px;
line-height: 1.846;
}
padding: 5px 10px !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
background: #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 */
/*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 {
background-color: #d4d4d4;
}
/*container general*/
.box_proyectos{
display: table;
@ -141,10 +171,9 @@ transition: all 0.3s ease;
position: relative;
margin: 10px;
float: left;
padding: 5px;
background-color: grey;
height: 200px;
width: 200px;
width: 200px;
}
@ -176,66 +205,13 @@ filter: grayscale(0);
.img-center {margin:0 auto;}
/*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;
}
/*fin proyectos*/
#servicios {
background-color: #333333;
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*/
.panel-black .panel-heading{
@ -265,16 +241,75 @@ section {
.panel-black:hover .glyphicon-ok-sign{
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 {
border-top: 5px solid #ff0000;
background: grey none repeat scroll 0% 0%;
padding-top: 30px;
margin-top: 60px;
clear: both;
color: #AAA;
display: block;
@ -303,12 +338,20 @@ section {
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 {
color: #AAA;
background: #333333 none repeat scroll 0% 0%;
padding: 10px 0px;
background: black none repeat scroll 0% 0%;
padding: 15px 15px;
}
/*RESPONSIVE*/
/*ESCRITORIO*/
@ -445,9 +488,6 @@ margin-top: 50px;
height: 80px !important;
}
/*menú desplegable por delante del logo*/
.navbar.shrink a {
@ -487,6 +527,10 @@ margin-top: 50px;
padding-top:0px !important;
}
.embed-responsive-16by9 {
padding-bottom: 134.25%;
}
}
/*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