From 8920a09a1a81966f99e5da70152f7338f2f5be16 Mon Sep 17 00:00:00 2001 From: kleper Date: Sun, 5 Mar 2017 09:44:40 -0500 Subject: [PATCH] Cambios CSS navbar responsive proyectos responsive --- landingpage_a.html | 1291 +++++++++++++++---------- temas/landingpage/css/landingpage.css | 183 +++- 2 files changed, 921 insertions(+), 553 deletions(-) diff --git a/landingpage_a.html b/landingpage_a.html index 1fbc822..aeac528 100644 --- a/landingpage_a.html +++ b/landingpage_a.html @@ -1,534 +1,807 @@ - + + + - - landingpage - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + Tupale Te invitamos a usar nuestra plataforma, puedes crear tus campañas y causas, recuerda que Toda causa se gana + Tupale.co + + + + + + + + + + + + + + + - - - - - -
-
-
-

Plataforma local que nos conecta al movimiento global de datos abiertos

-
-
-
-
-

Activismo

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. -

-
+ +
+
+ + +

+
+
+
+

Plataforma local que nos conecta al movimiento global de datos abiertos

-
-
-

Memoria

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.

-
-
-
-
-

Procesos

Fortalecer la Participación Ciudadana efectiva y fomentar la acción colectiva, consolidando así procesos de mayor impacto, más representativos y vinculantes.

-
-
-
-

-
-
- - - -
-
-

Proyectos

-

Conoce los proyectos que usan Túpale para la implementación de sus herramientas, selecciona para conocer más

-
-
-
-
- - - +
+
+
+

Activismo

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. +

+
- -
- - - +
+
+

Memoria

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.

+
- -
- - - +
+
+

Procesos

Fortalecer la Participación Ciudadana efectiva y fomentar la acción colectiva, consolidando así procesos de mayor impacto, más representativos y vinculantes.

+
- -
- - - -
- -
+ +
+ + +
+
+ +
    + +
    • +
    • +
  • +
    Login
    +
    • + +
+ +
+
+ +
+ +
+

Tupale

+

Te invitamos a usar nuestra plataforma, puedes crear tus campañas y causas, recuerda que Toda causa se gana +

-
- ... +
+ Quiero crear una campaña
-
- +
+
+
+ + +
+
+ + + +
+
+

Proyectos

+

Conoce los proyectos que usan Tupale.co para la implementación de sus herramientas, selecciona para conocer más

+
+
+
+
+
+ +
Red de Huertas del Quindío
+ Red de Huertas del Quindío + + +
+
+ +
+
+ +
Avanto
+ Avanto + + +
+
+ +
+
+ +
ChamiTrip
+ ChamiTrip + + +
+
+ +
+
+ +
Festival del Compartir
+ Festival del Compartir + + +
+
+ +
+
+ +
PionerasDev-Primera Nave(Beta)
+ PionerasDev-Primera Nave(Beta) + + +
+
+ +
+
+ +
Helios
+ Helios + + +
+
+
+
+ +
#ConversacionesEnPaz
+ #ConversacionesEnPaz + + +
+
+ +
+
+ +
TBT
+ TBT + + +
+
+ +
+
+ +
Paso Colombia
+ Paso Colombia + + +
+
+ +
+
+ +
Red de Museos
+ Red de Museos + + +
+
+ +
+
+ +
Dataweek
+ Dataweek + + +
+
+ +
+
+ +
Amor animal
+ Amor animal + + +
+
+
+
+ +
Fundación Vivirenlafinca.org
+ Fundación Vivirenlafinca.org + + +
+
+ +
+
+ +
Buscando Dragones
+ Buscando Dragones + + +
+
+ +
+
+ +
Huecopolis.com
+ Huecopolis.com + + +
+
+ +
+
+ +
Circo Surca
+ Circo Surca + + +
+
+ +
+
+ +
Oncomedic ltda
+ Oncomedic ltda + + +
+
+ +
+
+ +
El Espejo
+ El Espejo + + +
+
+
+
+ +
Firmesconlareserva
+ Firmesconlareserva + + +
+
+ +
+
+ +
Unidad de Mapeo Humanitario Colombia
+ Unidad de Mapeo Humanitario Colombia + + +
+
+ +
+
+ +
Imaginarios de Paz
+ Imaginarios de Paz + + +
+
+ +
+
+ +
Ecoavistador
+ Ecoavistador + + +
+
+ +
+
+ +
Nuestrared.org
+ Nuestrared.org + + +
+
+ +
+
+ +
ReDHumus
+ ReDHumus + + +
+
+ +
+
+ +
Red de Huerteros Medellín
+ Red de Huerteros Medellín + + +
+
+ +
+
+ +
#BrigadaDigital
+ #BrigadaDigital + + +
+
+ +
+
+ +
Comunidad de práctica ConVerGentes
+ Comunidad de práctica ConVerGentes + + +
+
+ +
+
+ +
Tupale (Archivo)
+ Tupale (Archivo) + + +
+
+ +
+
+ +
Tupale
+ Tupale + + +
+
-
-
+ + + + + +
+ - - - -
-
-

Servicios

-

Herramientas y servicios que complementan el fujo de proyectos que además puedes integrar a los procesos actuales de tu grupo de trabajo

-
-
-
-
- -
- Es una aplicación web desarrollada por http://rawgraphs.io/ permite hacer visualizaciones de datos rapidas, podemos utilzar la API simple de Tupale para experimentar con esta herramienta. -
-
-
- -
- Herramienta de escritura colaborativa, permite que varias personas escriban en tiempo real. Basado en la tecnologia de http://etherpad.org/ - PAD -
-
-
- -
- Herramienta que permite crear hojas de calculo en linea, varias personas puede editar en tiempo real. Basado en el tecnologia de https://ethercalc.net/ - estadisticas -
-
-
- -
- Es la herramienta que utilizamos para recoger datos de acceso, consulta y uso de Tupale.co y los diferentes proyectos alojados en Tupale, se puede consultar de manera publica https://stats.tupale.co Basado en la tecnologia de https://piwik.org/ -
-
-
-
-
- - - - - -
-
-

Precios

-

Tupale es una herramienta de código abierto puede ser descargada e implementada, el cobro cubre servicios de administración, hosting, reinversión en desarrollo, capacitación en uso y manejo

-
-
-
- -
-
-
- -

Instancia de Tupale

-
-
-

$250 USD/ Anuales

-
-
    -
  • Aplicaciones ilimitadas
    • -
  • Usuarios ilimitados
    • -
  • Personalización visual (branding) y plantillas gráficas
    • -
  • Redirección o integración con dominio o subdominio a Tupale.co.
    • -
-
- Contacto -
+
- - -
-
-
-

Patrocinadores

-

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

-
- -
- - - -
- -
- - - -
- -
- - - -
- -
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
-
- - + + + -
-
-
-

Equipo

-

De una creación personal se han vinculado de manera orgánica diferentes personas al crecimiento del entorno de herramientas que facilitan el desarrollo de tupale y la vinculación con equipos, instituciones y causas

-
-
-
-
-
-
- -
-
-
    -
  • La Manada: 5 perros Canquis, Lara, Alphita, Amed,Akrus
    • -
  • El Tigre: Creador de MILF base del funcionamiento de túpale
    • -
  • La Tigra: Apoyo moral incondicional, administradora y facilitadora de procesos
    • -
  • Kleper: Sisadmin del demonio
    • -
  • Pionerita: Metiendo la mano con lo que ha aprendido de programación
    • -
-
-
-
-
-
-
-
-
- -
-
- Un montón de personas que de una u otra forma han contribuido para que Tupale sea adoptado dentro de los procesos en instituciones y grupos de trabajo... -
-
-
-
-
-
-
-
- - - - - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/temas/landingpage/css/landingpage.css b/temas/landingpage/css/landingpage.css index 9d56f67..7daab8e 100644 --- a/temas/landingpage/css/landingpage.css +++ b/temas/landingpage/css/landingpage.css @@ -2,15 +2,28 @@ html,body { height:100%; background-size: cover; - padding-top:5em; + padding-top:8%; } /* USING BOOTSTRAP 3.0.3 */ -.navbar-toggle { - margin: 13px 15px 13px 0; +/*NAVBAR BRAND*/ +.navbar-brand { + transform: translateX(-50%); + left: 50%; + position: absolute; +} + +/*logo barra navegacion*/ +.navbar-brand img{ +width: 250px; +height: 250px; +margin-top: 80px; +transition: all 0.4s ease; } +/* textos menú*/ + a { font-size: 18px; padding-bottom: 40px !important; @@ -18,14 +31,15 @@ a { transition: all 0.4s ease; } + .navbar.shrink { min-height: 35px; } .navbar.shrink a { - font-size: 15px; - padding-bottom: 15px !important; + font-size: 18px; + padding-bottom: 18px !important; padding-top: 20px !important; } @@ -33,6 +47,7 @@ a { width: 70px; height: 70px; transition: all 0.4s ease; + margin: 0px; } .navbar.shrink .navbar-toggle { @@ -40,43 +55,56 @@ a { padding: 7px 8px; } - -.navbar-brand { - transform: translateX(-50%); - left: 50%; - position: absolute; -} - -.navbar-brand img{ -width: 250px; -height: 250px; +.navbar-toggle { + margin: 13px 15px 13px 0; + padding: 4px 5px; } -.logos{ - display: inline-block; - margin-left: 70px; + + +/*PROYECTOS*/ +.principal{ } + +/*container proyectos*/ +.box_proyectos{ + display: table; + +} + +/*container proyecto*/ .div_proyecto{ - margin: 10px; - display: inline-block; + display: table-cell; + position: relative; + margin: 10px; + float: left; padding: 5px; - background-color: grey; + background-color: grey; + height: 200px; + width: 200px; } -.proyecto{ - - padding: 5px; +/*container titulo*/ +.proyecto_titulo{ + position: absolute; + top:100px; + color:#fff; + background-color:#000; + padding:2px ; + opacity:0.5; + font-weight:bold; width:190px; z-index:20; word-wrap: break-word; } + .img-gris{ - -webkit-filter: grayscale(100%) blur(3px) ; - height: 200px; - width: 200px; - z-index:10; - transition:filter 0.2s; - -webkit-transition:-webkit-filter 1s; + -webkit-filter: grayscale(100%) blur(3px) ; + height: 200px; + width: 200px; + z-index:10; + transition:filter 0.2s; + -webkit-transition:-webkit-filter 1s; } .img-gris:hover{ filter: grayscale(0); @@ -84,20 +112,16 @@ filter: grayscale(0); -webkit-filter: grayscale(0); } +.img-center {margin:0 auto;} -.proyecto_titulo{ -position: absolute; - top:100px; - color:#fff; - background-color:#000; - padding:2px ; - opacity:0.5; - font-weight:bold; width:190px; z-index:20; word-wrap: break-word; + +/*PATROCINADOR*/ +.logos{ + display: inline-block; + margin-left: 70px; } -.img-center {margin:0 auto;} - .patrocina{ background-color: white; padding: 15px; @@ -106,11 +130,82 @@ position: absolute; display: inline-block; } +/*RESPONSIVE*/ -@media (min-width: 992px){ -/* .col-md-3 { - width: 22%; -}*/ + + +@media (max-width: 1199px){ + body { + background-color: yellow; + } + .navbar-brand { + margin-top: 0px; + } + + .navbar.shrink img { + margin-top: 0px; + width: 80px; + height: 80px; + transition: all 0.3s ease; + } + + .navbar-brand img { + width: 200px; + height: 200px; + margin-top: 80px; + transition: all 0.4s ease; +} +} + +@media (max-width: 990px){ + body { + background-color: green !important; + } + + .navbar-nav{ + float:right; + transition: all 0.4s ease; + border-bottom: 1px solid #333333; + } + + .navbar-brand { + margin-top:0px; + left: 25%; + } + + .navbar-brand img{ + width: 230px; + height: 230px; + margin-top: 0px; + transition: all 0.4s ease; + } + + .navbar.shrink a { + font-size: 20px; + padding-bottom: 18px !important; + padding-top: 20px !important; + } + +} + +@media (max-width: 768px){ + body { + background-color: red !important; + } +.navbar-brand { + transform: translateX(-50%); + left: 50%; + position: absolute; +} + +/*logo barra navegacion*/ +.navbar-brand img{ +width: 250px; +height: 250px; +margin-top: 80px; +transition: all 0.4s ease; + +} }