propuesta de landingpage para tupale
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

534 lines
31KB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>landingpage</title>
  8. <!-- CSS -->
  9. <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
  10. <!-- jQuery Content Delivery Network -->
  11. <script src="http://code.jquery.com/jquery.js"></script>
  12. <!-- Java Script cdn -->
  13. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  14. <link rel="stylesheet" type="text/css" href="styles.css">
  15. </head>
  16. <body data-spy="scroll" data-target=".navbar" data-offset="50">
  17. <!-- Static navbar -->
  18. <nav class="navbar navbar-default navbar-fixed-top">
  19. <div class="container navegacion">
  20. <div class="navbar-header">
  21. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  22. <span class="sr-only">Toggle navigation</span>
  23. <span class="icon-bar"></span>
  24. <span class="icon-bar"></span>
  25. <span class="icon-bar"></span>
  26. </button>
  27. <a class="navbar-brand" href="#">
  28. <img src="assets/tupale.png">
  29. </a>
  30. </div>
  31. <div id="navbar" class="navbar-collapse collapse">
  32. <ul class="nav navbar-nav">
  33. <li class="active"><a href="#home"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
  34. <li><a href="#proyectos">Proyectos</a></li>
  35. <li><a href="#servicios">Servicios</a></li>
  36. <li><a href="#precios">Precios</a></li>
  37. <li><a href="#patrocinio">Patrocinio</a></li>
  38. </ul>
  39. <ul class="nav navbar-nav navbar-right">
  40. <li><a href="#equipo">Equipo</a></li>
  41. <li><a href="#documentacion">Documentación</a></li>
  42. <li><a href="#blog">Blog</a></li>
  43. <li class="dropdown">
  44. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ingresar<b class="caret"></b></a>
  45. <ul class="dropdown-menu">
  46. <li><a href="#">Desadministrador</a></li>
  47. <li><a href="#">Editor</a></li>
  48. <li><a href="#">Activista</a></li>
  49. <li class="divider"></li>
  50. <li><a href="#">Registrarse</a></li>
  51. </ul>
  52. </li>
  53. </ul>
  54. </div><!--/.nav-collapse -->
  55. </div>
  56. </nav>
  57. <!-- Intro -->
  58. <section class="container-fluid" id="home">
  59. <div class="container">
  60. <div class="col-sm-8 col-sm-offset-2 text-center">
  61. <h2>Plataforma local que nos conecta al movimiento global de datos abiertos</h2>
  62. </div>
  63. <div class="row">
  64. <div class="col-sm-4">
  65. <div class="row">
  66. <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.
  67. </p><span class="glyphicon glyphicon-search " aria-hidden="true"></span></div>
  68. </div>
  69. </div>
  70. <div class="col-sm-4 text-center">
  71. <div class="row">
  72. <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>
  73. </div>
  74. </div>
  75. <div class="col-sm-4 text-center">
  76. <div class="row">
  77. <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>
  78. </div>
  79. </div>
  80. </div><!--/row-->
  81. <div class="row"><br></div>
  82. </div><!--/container-->
  83. </section>
  84. <!-- Fin Intro -->
  85. <!-- PROYECTOS -->
  86. <section class="container-fluid" id="proyectos">
  87. <div class="col-sm-8 col-sm-offset-2 text-center">
  88. <h1>Proyectos</h1>
  89. <p class="lead">Conoce los proyectos que usan Túpale para la implementación de sus herramientas, selecciona para conocer más</p>
  90. </div>
  91. <div class="container-fluid">
  92. <div class="col-sm-10 col-sm-offset-1">
  93. <div class="proyecto">
  94. <a href="#" data-toggle="modal" data-target="#myModal">
  95. <img src="assets/pasocolombia.png" width="150" class="img-responsive img-rounded center-block" alt="">
  96. </a>
  97. </div>
  98. <!-- Thumbnail link para el logo de red de huerteros -->
  99. <div class="proyecto">
  100. <a href="#" data-toggle="modal" data-target="#myModal">
  101. <img src="assets/red_huerteros.png" width="150" class="img-responsive img-rounded center-block" alt="">
  102. </a>
  103. </div>
  104. <!-- Thumbnail link para el logo avanto -->
  105. <div class="proyecto">
  106. <a href="#" data-toggle="modal" data-target="#myModal">
  107. <img src="assets/avanto.png" width="150" class="img-responsive img-rounded center-block" alt="">
  108. </a>
  109. </div>
  110. <!-- Thumbnail link para el logo brigada -->
  111. <div class="proyecto">
  112. <a href="#" data-toggle="modal" data-target="#myModal">
  113. <img src="assets/brigada_digital.png" width="150" class="img-responsive img-rounded center-block" alt="">
  114. </a>
  115. </div>
  116. <!-- Modal para contenido de paso colombia-->
  117. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  118. <div class="modal-dialog" role="document">
  119. <div class="modal-content">
  120. <div class="modal-header">
  121. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  122. <h4 class="modal-title" id="myModalLabel">Paso Colombia</h4>
  123. </div>
  124. <div class="modal-body">
  125. ...
  126. </div>
  127. <div class="modal-footer">
  128. <button type="button" class="btn btn-primary">Ir al Sitio</button>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </section>
  137. <!-- FIN Proyectos -->
  138. <!--SERVICIOS-->
  139. <section class="container-fluid" id="servicios">
  140. <div class="col-sm-8 col-sm-offset-2 text-center">
  141. <h1>Servicios</h1>
  142. <p class="lead">Herramientas y servicios que complementan el fujo de proyectos que además puedes integrar a los procesos actuales de tu grupo de trabajo</p>
  143. </div>
  144. <div class="container">
  145. <div class="row col-sm-8 col-sm-offset-2 text-left ">
  146. <div class="col-sm-3">
  147. <button type="button" class="btn btn-danger btn-servicios " data-toggle="collapse" data-target="#raw">RAW</button>
  148. <div id="raw" class="collapse">
  149. 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.
  150. </div>
  151. </div>
  152. <div class="col-sm-3">
  153. <button type="button" class="btn btn-danger btn-servicios" data-toggle="collapse" data-target="#pad">PAD</button>
  154. <div id="pad" class="collapse">
  155. Herramienta de escritura colaborativa, permite que varias personas escriban en tiempo real. Basado en la tecnologia de http://etherpad.org/
  156. PAD
  157. </div>
  158. </div>
  159. <div class="col-sm-3">
  160. <button type="button" class="btn btn-danger btn-servicios" data-toggle="collapse" data-target="#calc">CALC</button>
  161. <div id="calc" class="collapse">
  162. Herramienta que permite crear hojas de calculo en linea, varias personas puede editar en tiempo real. Basado en el tecnologia de https://ethercalc.net/
  163. estadisticas
  164. </div>
  165. </div>
  166. <div class="col-sm-3">
  167. <button type="button" class="btn btn-danger btn-servicios" data-toggle="collapse" data-target="#piwik">PIWIK</button>
  168. <div id="piwik" class="collapse">
  169. 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/
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. </section >
  175. <!--FIN Servicios -->
  176. <!-- Carrusel APIS Open Data -->
  177. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  178. <!-- Indicators -->
  179. <ol class="carousel-indicators">
  180. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  181. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  182. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  183. </ol>
  184. <!-- Wrapper for slides -->
  185. <div class="carousel-inner" role="listbox">
  186. <div class="item active">
  187. <img src="https://cldup.com/VvvJCGnUXw.png" alt="portal_open_data">
  188. <div class="carousel-caption">
  189. <h3>Portal de Open Data</h3>
  190. <p>Multiples opciones de manejo de datos con estandares mundiales de Open Data</p>
  191. </div>
  192. </div>
  193. <div class="item">
  194. <img src="https://cldup.com/cwy7fakMG3.png" alt="apis_json">
  195. <div class="carousel-caption">
  196. <h3>APIS JSON</h3>
  197. <p>api json y api json simple para integraciones y programación</p>
  198. </div>
  199. </div>
  200. <div class="item">
  201. <img src="https://cldup.com/e2fps1PMMd.png" alt="apis_json">
  202. <div class="carousel-caption">
  203. <h3>Visualizaciones</h3>
  204. <p>Mapas y visualizaciónes básicas</p>
  205. </div>
  206. </div>
  207. </div>
  208. <!-- Controls -->
  209. <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  210. <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
  211. <span class="sr-only">Previous</span>
  212. </a>
  213. <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  214. <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  215. <span class="sr-only">Next</span>
  216. </a>
  217. </div>
  218. <!-- FIN Carrusel -->
  219. <!--PRECIOS -->
  220. <section class="container" id="precios">
  221. <div class="col-sm-12 text-center">
  222. <h1>Precios</h1>
  223. <p class="lead">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</p>
  224. </div>
  225. <div class="container">
  226. <div class="row">
  227. <!-- item -->
  228. <div class="col-md-3 text-center">
  229. <div class="panel panel-danger panel-pricing">
  230. <div class="panel-heading">
  231. <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
  232. <h3>Instancia de Tupale</h3>
  233. </div>
  234. <div class="panel-body text-center">
  235. <h2>$250 USD/ Anuales</h2>
  236. </div>
  237. <ul class="list-group text-left">
  238. <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span>Aplicaciones ilimitadas</li>
  239. <li class="list-group-item"><i class="glyphicon glyphicon-ok "></i> Usuarios ilimitados</li>
  240. <li class="list-group-item"><i class="glyphicon glyphicon-ok "></i> Personalización visual (branding) y plantillas gráficas </li>
  241. <li class="list-group-item"><i class="glyphicon glyphicon-ok "></i> Redirección o integración con dominio o subdominio a Tupale.co. </li>
  242. </ul>
  243. <div class="panel-footer">
  244. <a class="btn btn-lg btn-block btn-danger" href="#">Contacto</a>
  245. </div>
  246. </div>
  247. </div>
  248. <!-- /item -->
  249. <!-- item -->
  250. <div class="col-md-3 text-center">
  251. <div class="panel panel-warning panel-pricing">
  252. <div class="panel-heading">
  253. <i class="glyphicon glyphicon-step-forward"></i>
  254. <h3>Taller Básico</h3>
  255. </div>
  256. <div class="panel-body text-center">
  257. <h2>$240 USD </h2>
  258. </div>
  259. <ul class="list-group text-left">
  260. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Introducción a creación de modelo de datos con Tupale</li>
  261. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación de usuarios</li>
  262. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación de aplicaciones</li>
  263. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación y modificación de campos</li>
  264. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Guia básica de plantillas</li>
  265. </ul>
  266. <div class="panel-footer">
  267. <a class="btn btn-lg btn-block btn-warning" href="#">Contactar</a>
  268. </div>
  269. </div>
  270. </div>
  271. <!-- /item -->
  272. <!-- item -->
  273. <div class="col-md-3 text-center">
  274. <div class="panel panel-info panel-pricing">
  275. <div class="panel-heading">
  276. <i class="glyphicon glyphicon-forward"></i>
  277. <h3>Taller Medio</h3>
  278. </div>
  279. <div class="panel-body text-center">
  280. <h2>$480 USD</h2>
  281. </div>
  282. <ul class="list-group text-left">
  283. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación de modelo de datos con Tupale</li>
  284. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación de usuarios</li>
  285. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación de aplicaciones</li>
  286. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación y modificación de campos</li>
  287. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Uso de Campos especiales</li>
  288. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación de mapas</li>
  289. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Guia avanzada de platillas</li>
  290. </ul>
  291. <div class="panel-footer">
  292. <a class="btn btn-lg btn-block btn-info" href="#">Contactar</a>
  293. </div>
  294. </div>
  295. </div>
  296. <!-- /item -->
  297. <!-- item -->
  298. <div class="col-md-3 text-center">
  299. <div class="panel panel-success panel-pricing">
  300. <div class="panel-heading">
  301. <i class="glyphicon glyphicon-fast-forward"></i>
  302. <h3>Taller Avanzado</h3>
  303. </div>
  304. <div class="panel-body text-center">
  305. <h2>$960 USD</h2>
  306. </div>
  307. <ul class="list-group text-left">
  308. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación de modelo de datos con Tupale</li>
  309. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación de usuarios</li>
  310. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación de aplicaciones</li>
  311. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación y modificación de campos</li>
  312. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Utilización de campos especiales</li>
  313. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Creación de mapas</li>
  314. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Uso básico de las API para visualizaciones y analisis de datos.</li>
  315. <li class="list-group-item"><i class="glyphicon glyphicon-ok"></i> Exportación de datos.</li>
  316. </ul>
  317. <div class="panel-footer">
  318. <a class="btn btn-lg btn-block btn-success" href="#">Contactar</a>
  319. </div>
  320. </div>
  321. </div>
  322. <!-- /item -->
  323. </div>
  324. </div>
  325. </section>
  326. <!-- FIN Precios -->
  327. <!--PATROCINADORES -->
  328. <section class="container-fluid" id="patrocinio">
  329. <div class="col-sm-8 col-sm-offset-2 ">
  330. <div class="text-center">
  331. <h1>Patrocinadores</h1>
  332. <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>
  333. </div>
  334. <!-- Thumbnail link para el logo de pasocolombia -->
  335. <div class="patrocina">
  336. <a href="#" data-toggle="modal" data-target="#myModal">
  337. <img src="assets/pasocolombia.png" class="img-responsive img-rounded center-block" alt="">
  338. </a>
  339. </div>
  340. <!-- Thumbnail link para el logo de red de huerteros -->
  341. <div class=" patrocina">
  342. <a href="#" data-toggle="modal" data-target="#myModal">
  343. <img src="assets/red_huerteros.png" class="img-responsive img-rounded center-block" alt="">
  344. </a>
  345. </div>
  346. <!-- Thumbnail link para el logo avanto -->
  347. <div class=" patrocina">
  348. <a href="#" data-toggle="modal" data-target="#myModal">
  349. <img src="assets/avanto.png" class="img-responsive img-rounded center-block" alt="">
  350. </a>
  351. </div>
  352. <!-- Thumbnail link para el logo brigada -->
  353. <div class=" patrocina">
  354. <a href="#" data-toggle="modal" data-target="#myModal">
  355. <img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
  356. </a>
  357. </div>
  358. <div class=" patrocina">
  359. <a href="#" data-toggle="modal" data-target="#myModal">
  360. <img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
  361. </a>
  362. </div>
  363. <div class=" patrocina">
  364. <a href="#" data-toggle="modal" data-target="#myModal">
  365. <img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
  366. </a>
  367. </div>
  368. <div class=" patrocina">
  369. <a href="#" data-toggle="modal" data-target="#myModal">
  370. <img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
  371. </a>
  372. </div>
  373. <div class="patrocina">
  374. <a href="#" data-toggle="modal" data-target="#myModal">
  375. <img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
  376. </a>
  377. </div>
  378. <div class="patrocina">
  379. <a href="#" data-toggle="modal" data-target="#myModal">
  380. <img src="assets/brigada_digital.png" class="img-responsive img-rounded center-block" alt="">
  381. </a>
  382. </div>
  383. </div>
  384. </section>
  385. <!-- FIN patrocinadores -->
  386. <!--EQUIPO -->
  387. <section class="container-fluid" id="equipo">
  388. <div class="col-sm-8 col-sm-offset-2">
  389. <div class="text-center">
  390. <h1>Equipo</h1>
  391. <p class="lead">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</p>
  392. </div>
  393. <div class="container">
  394. <div class="row">
  395. <div class="col-md-4 " id="main">
  396. <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  397. <div class="panel panel-warning">
  398. <div class="panel-heading" role="tab" id="nosotros">
  399. <h4 class="panel-title">
  400. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
  401. Nosotros
  402. </a>
  403. </h4>
  404. </div>
  405. <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="Nosotros">
  406. <div class="panel-body">
  407. <ul>
  408. <li>La Manada: 5 perros Canquis, Lara, Alphita, Amed,Akrus </li>
  409. <li>El Tigre: Creador de MILF base del funcionamiento de túpale</li>
  410. <li>La Tigra: Apoyo moral incondicional, administradora y facilitadora de procesos </li>
  411. <li>Kleper: Sisadmin del demonio</li>
  412. <li>Pionerita: Metiendo la mano con lo que ha aprendido de programación </li>
  413. </ul>
  414. </div>
  415. </div>
  416. </div>
  417. </div>
  418. </div>
  419. <div class="col-md-4 " id="main">
  420. <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  421. <div class="panel panel-warning">
  422. <div class="panel-heading equipo" role="tab" id="participado">
  423. <h4 class="panel-title">
  424. <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  425. Han Participado
  426. </a>
  427. </h4>
  428. </div>
  429. <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="participado">
  430. <div class="panel-body">
  431. 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...
  432. </div>
  433. </div>
  434. </div>
  435. </div>
  436. </div>
  437. </div>
  438. </div>
  439. </section>
  440. <!-- FIN equipo -->
  441. <!--FOOTER -->
  442. <footer id="footer" class="clearfix">
  443. <div id="footer-widgets">
  444. <div class="container">
  445. <div id="footer-wrapper">
  446. <div class="row">
  447. <div class="col-sm-6 col-md-2">
  448. <div id="meta-3" class="widget widgetFooter widget_meta">
  449. <h4 class="widgettitle">Más informacion</h4>
  450. <ul>
  451. <li><a href="#"><i class="fa fa-home fa-fw"></i>Datos Abiertos</a></li>
  452. <li><a href="privacypolicy.php"><i class="fa fa-link"></i>Manifiesto</a></li>
  453. <li><a href="#"><i class="fa fa-envelope fa-fw"></i>Recomendado</a></li>
  454. </ul>
  455. </div> </div> <!-- end widget1 -->
  456. <div class="col-sm-6 col-md-2">
  457. <div id="recent-posts-3" class="widget widgetFooter widget_recent_entries">
  458. <h4 class="widgettitle">Buscanos en redes</h4>
  459. <ul>
  460. <li>
  461. <a href="https://www.facebook.com/tupaleco" target="_blank"><i class="fa fa-facebook"></i> Facebook</a>
  462. </li>
  463. <li>
  464. <a href="https://twitter.com/tupaleco" target="_blank"><i class="fa fa-twitter"></i> Twitter</a>
  465. </li>
  466. <li>
  467. <a href="telegram" target="_blank"><i class="fa fa-youtube"></i> Telegram</a>
  468. </li>
  469. </ul>
  470. </div> </div> <!-- end widget1 -->
  471. <div class="col-sm-6 col-md-4">
  472. <div id="meta-4" class="widget widgetFooter widget_meta">
  473. <h4 class="widgettitle">Contáctanos</h4>
  474. <div class="form-group">
  475. <div class="input-group">
  476. <span class="input-group-addon">E-mail :</span>
  477. <input class="form-control" placeholder="Correo de contacto" type="text">
  478. </div>
  479. </div>
  480. <div class="form-group">
  481. <div class="input-group">
  482. <span class="input-group-addon">Mensaje</span>
  483. <input class="form-control" placeholder="que quieres o necesitas" type="text">
  484. <span class="input-group-btn">
  485. <button class="btn btn-primary" type="button">Contactanos!</button>
  486. </span>
  487. </div>
  488. </div>
  489. </div>
  490. </div> <!-- end widget1 -->
  491. <div class="col-sm-6 col-md-4">
  492. <div id="search-3" class="widget widgetFooter widget_search"><h4 class="widgettitle">Busca en el sitio:</h4>
  493. <div class="form-group">
  494. <label class="control-label">Escribe que quieres buscar en Tupale</label>
  495. <div class="input-group">
  496. <span class="input-group-addon">¿Que buscas?</span>
  497. <input class="form-control" placeholder="palabra clave" type="text">
  498. <span class="input-group-btn">
  499. <button class="btn btn-primary" type="button">Buscar</button>
  500. </span>
  501. </div>
  502. </div>
  503. </div> </div> <!-- end widget1 -->
  504. </div> <!-- end .row -->
  505. </div> <!-- end #footer-wrapper -->
  506. </div> <!-- end .container -->
  507. </div> <!-- end #footer-widgets -->
  508. <div id="sub-floor">
  509. <div class="container">
  510. <div class="row">
  511. <div class="col-md-4 copyright">
  512. </div>
  513. <div class="col-md-4 col-md-offset-4 attribution">
  514. Desarrollado por <a target="_blank" href="#">Equipo Tupale</a> .
  515. </div>
  516. </div> <!-- end .row -->
  517. </div>
  518. </div>
  519. </footer>
  520. <!-- Bootstrap core JavaScript
  521. ================================================== -->
  522. <!-- Placed at the end of the document so the pages load faster -->
  523. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  524. <script src="../../dist/js/bootstrap.min.js"></script>
  525. <script src="../../assets/js/docs.min.js"></script>
  526. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  527. <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  528. <script src="scripts.js"></script>
  529. </body>
  530. </html>