index.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4. <title>#r00tHouse Mesh - Bienvenido</title>
  5. <style type="text/css">
  6. body {
  7. padding: 0;
  8. margin: 0;
  9. background-color: #000;
  10. font-family: sans-serif;
  11. }
  12. .row,.col,
  13. .row:after,.col:after,
  14. .row:before,.col:before{
  15. -webkit-box-sizing:border-box;
  16. -moz-box-sizing:border-box;
  17. box-sizing:border-box}
  18. /* clearfix */
  19. .row{*zoom:1}
  20. .row:before,
  21. .row:after{
  22. display:table;
  23. content:"";
  24. line-height:0}
  25. .row:after{clear:both}
  26. .row{
  27. padding:0;
  28. margin:0;}
  29. /* should probably put *zoom:1; here but for clarity it's separated*/
  30. ul.row,
  31. li.col{ list-style-type:none }
  32. .col{float:left}
  33. .col,
  34. .fill{width:100%}
  35. /* grid mq */
  36. @media (min-width:30em){
  37. .col:not(.fill){width:50%}
  38. .col.third:nth-child(3),
  39. .col.fifth:nth-child(5),
  40. .col.fourth+div:nth-child(3).fill,
  41. .col.fifth+div:nth-child(3).fill{width:100%}
  42. .col+.fill{width:50%}
  43. }
  44. @media (min-width:50em){
  45. .col.half{width:50%}
  46. .col.half+.fill{width:50%}
  47. .col.third,
  48. .col.third:nth-child(3){width:33.333%}
  49. .col.third+.fill{width:66.666%}
  50. .col.fourth{width:25%}
  51. .col.fourth+.fill{width:75%}
  52. .col.fourth+div:nth-child(3).fill{width:50%;}
  53. .col.fifth,
  54. .col.fifth:nth-child(5){width:20%}
  55. .col.fifth+.fill{width:80%}
  56. .col.fifth+div:nth-child(3).fill{width:60%;}
  57. .col.fifth+div:nth-child(4).fill{width:40%;}
  58. }
  59. /* ie8 overrides - I'd suggest using conditionals with either ".ie-8 class or loading in a separate legacy stylesheet with conditionals */
  60. @media (min-width:30em){
  61. .row>.col{width:50%}
  62. .row>.fill.col{width:100%}
  63. .row>.half.col+.fill,
  64. .row>.third.col+.fill,
  65. .row>.fourth.col+.fill,
  66. .row>.fifth.col+.fill,
  67. .row>.fifth.col+div+div+.fill{width:50%}
  68. .row>.fourth.col+div+.fill,
  69. .row>.fifth.col+div+.fill,
  70. .row>.third.col+div+div,
  71. .row>.fifth.col+div+div+div+div{width:100%}
  72. }
  73. @media (min-width:50em){
  74. .row>.third.col,
  75. .row>.third.col+div+div{width:33.333%}
  76. .row>.third.col+.fill{width:66.666%}
  77. .row>.fourth.col{width:25%}
  78. .row>.fourth.col+.fill{width:75%}
  79. .row>.fourth.col+div+.fill{width:50%}
  80. .row>.fifth.col+.fill{width:80%}
  81. .row>.fifth.col,
  82. .row>.fifth.col+div+div+div+div{width:20%}
  83. .row>.fifth.col+div+.fill{width:60%}
  84. .row>.fifth.col+div+div+.fill{width:40%}
  85. }
  86. .header {
  87. color: #31d329;
  88. font-family: monospace;
  89. }
  90. body {
  91. color: #fff;
  92. margin-top: 20px;
  93. }
  94. .wrapper {
  95. margin-left: 60px;
  96. margin-right:60px;
  97. }
  98. .logo {
  99. width: 200px;
  100. height: 270px;
  101. }
  102. .footnote{
  103. margin-top: 33px;
  104. font-family: serif;
  105. font-size: 12px;
  106. text-align: center;
  107. }
  108. .browse_button{
  109. margin: 7px;
  110. font-family: monospace;
  111. text-align: center;
  112. color: #31d329; /* Momentaneo para ver como va con el boton para navegar del portal cautivo*/
  113. background-image: url("browse_btn.png");
  114. background-repeat: repeat-x;
  115. }
  116. </style>
  117. </head>
  118. <body>
  119. <div class="wrapper">
  120. <div class="row">
  121. <div class="col third">
  122. <center>
  123. <img src="logo.jpg" class="logo" />
  124. </center>
  125. <div class="browse_button">Navegar por la red</div>
  126. </div>
  127. <div class="col fill" style="background-color: #111" >
  128. <center class="header"><h1>
  129. Bienvenido a #r00tHouse-mesh
  130. </h1></center>
  131. <div class="row">
  132. <div class="col half" style="padding: 10px">
  133. Esta es una red de <strong>libre acceso</strong> gestionada por el
  134. <!-- Poner la pagina o la wiki del r00thouse en un server de la mesh -->
  135. <a href="hacklab.org.bo">r00thouse</a> y la comunidad local.
  136. <br>
  137. El objetivo es descentralizar las comunicaciones y dar <strong>libertad</strong> de
  138. acceso a las comunicaciones locales.
  139. <h3>Servicios Actuales</h3>
  140. <ul>
  141. <li> <a href="10.0.13.37">Wikipedia castellano</a>
  142. - <a href="es.wikipedia.uta"> es.wikipedia.uta </a>
  143. </li>
  144. <li>
  145. <a href=ftp:10.0.0.10>Descarga de archivos</a>
  146. </li>
  147. </ul>
  148. <div class="footnote">
  149. Toda la red se ha construido usando herramientas de <strong>software libre</strong>
  150. </div>
  151. </div>
  152. <div class="col half" style="padding: 10px">
  153. <h3> Como aportar </h3>
  154. <h3> Como Brindar servicios </h3>
  155. <h3> Servicios en desarrollo </h3>
  156. <ul>
  157. <li>Chat</li>
  158. <li>Intercambio de contenidos con D-LAN</li>
  159. <li>Servidor GIT</li>
  160. <li>VoIP (llamadas gratis)</li>
  161. <li>etherpad</li>
  162. </ul>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. </div>
  168. </html>