r00thouse
/
r00thouse-mesh-splash


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
							<!doctype html>
<html lang="es">
<head>
  <title>#r00tHouse Mesh - Bienvenido</title>
  <style type="text/css">
  body {
	  padding: 0;
	  margin: 0;
	  background-color: #d2d2f2;
	  font-family: sans-serif;
  }
  .row,.col,
  .row:after,.col:after,
  .row:before,.col:before{
	  -webkit-box-sizing:border-box;
          -moz-box-sizing:border-box;
          box-sizing:border-box}
  /* clearfix */
  .row{*zoom:1}
  .row:before,
  .row:after{
	  display:table;
	  content:"";
	  line-height:0}
  .row:after{clear:both}
  .row{
	  padding:0;
	  margin:0;}
  /* should probably put *zoom:1; here but for clarity it's separated*/
  ul.row,
  li.col{ list-style-type:none }
  .col{float:left}
  .col,
  .fill{width:100%}

  /* grid mq */
  @media (min-width:30em){
	  .col:not(.fill){width:50%}
	  .col.third:nth-child(3),
	  .col.fifth:nth-child(5),
	  .col.fourth+div:nth-child(3).fill,
	  .col.fifth+div:nth-child(3).fill{width:100%}
	  .col+.fill{width:50%}
  }
  @media (min-width:50em){
	  .col.half{width:50%}
	  .col.half+.fill{width:50%}
	  .col.third,
	  .col.third:nth-child(3){width:33.333%}
	  .col.third+.fill{width:66.666%}
	  .col.fourth{width:25%}
	  .col.fourth+.fill{width:75%}
	  .col.fourth+div:nth-child(3).fill{width:50%;}
	  .col.fifth,
	  .col.fifth:nth-child(5){width:20%}
	  .col.fifth+.fill{width:80%}
	  .col.fifth+div:nth-child(3).fill{width:60%;}
	  .col.fifth+div:nth-child(4).fill{width:40%;}
  }
  /* ie8 overrides - I'd suggest using conditionals with either ".ie-8 class or loading in a separate legacy stylesheet with conditionals */
  @media (min-width:30em){
	  .row>.col{width:50%}
	  .row>.fill.col{width:100%}
	  .row>.half.col+.fill,
	  .row>.third.col+.fill,
	  .row>.fourth.col+.fill,
	  .row>.fifth.col+.fill,
	  .row>.fifth.col+div+div+.fill{width:50%}
	  .row>.fourth.col+div+.fill,
	  .row>.fifth.col+div+.fill,
	  .row>.third.col+div+div,
	  .row>.fifth.col+div+div+div+div{width:100%}
  }
  @media (min-width:50em){
	  .row>.third.col,
	  .row>.third.col+div+div{width:33.333%}
	  .row>.third.col+.fill{width:66.666%}
	  .row>.fourth.col{width:25%}
	  .row>.fourth.col+.fill{width:75%}
	  .row>.fourth.col+div+.fill{width:50%}
	  .row>.fifth.col+.fill{width:80%}
	  .row>.fifth.col,
	  .row>.fifth.col+div+div+div+div{width:20%}
	  .row>.fifth.col+div+.fill{width:60%}
	  .row>.fifth.col+div+div+.fill{width:40%}
  }
  .header {
	  color: #31d319;
	  font-family: monospace;
  }
  body {
	  color: #444454;
	  margin-top: 20px;
  }
  .wrapper {
	  margin-left: 60px; 
	  margin-right:60px;
  }
  a:link  {
	  color: #e34411;
  }
  a:hover  {
	  background-color:  #eef;
  }
  a:visited{
	  color: #a224a7;
	  background-color: #eee;
  }
  .logo {
	  width: 200px;
	  height: 270px;
  }
  .footnote{
	  margin-top: 33px;
	  font-family: serif;
	  font-size: 12px;
	  text-align: center;
  }
  .browse_button{
	  margin: 7px;
	  font-size: 18px;
	  color: #5AE649;
	  font-weight: bold;
	  text-align: center;
	  background-image: url("$imagesdir/browse_btn.png");
	  /*background-repeat: repeat-x;*/
	  background-size: cover;
  }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="row">
    <div class="col third">
      <center>
        <img src="$imagesdir/logo.jpg" class="logo" />
      </center>
      <a href="$authtarget" ><div class="browse_button">Navegar por la red</div></a>
    </div>
    <div class="col fill" style="background-color: #c1c1ed" >
      <center class="header">
      <h1>
        #r00thouse-mesh
      </h1></center>
      <div class="row"> 
              Esta es una red de <strong>libre acceso</strong> gestionada por el
              <!-- Poner la pagina o la wiki del r00thouse en un server de la mesh -->
              <a href="https://hacklab.org.bo">#r00thouse</a> y la comunidad local.
              <br>
      	      El objetivo es descentralizar las comunicaciones y dar <strong>libertad</strong> de
      	      uso.
      </div>
      <div class="row">
        <div class="col half" style="padding: 10px">
      	  <h3>Servicios </h3>
      	  <ul>
		  <li> <a href="">Wikipedia castellano</a> </li>
		  <li> <a href="">Chat </a> </li>
		  <li> <a href="">Servidor DNS</a> </li>
		  <li> <a href="">Intercambio de contenidos</a> </li>
          </li>
          </ul>
	  <h3> Principios de la red </h3>
	  <ul>
		  <li>Eres libre de utilizar la red para cualquier proposito en tanto no perjudiques el funcionamiento de la propia red ni a la libertad de los demas usuarios.</li>
		  <li>Eres libre de saber como es la red, de que se compone y como funciona.</li>
		  <li>Eres libre de emplear la red para cualquier tipo de comunicacion y difundir su funcionamiento. </li>
		  <li>Incorporandote a la red, ayudas a extender estas libertades en las mismas condiciones.  </li>
	  </ul>

          <div class="footnote">
          	Toda la red se ha construido usando herramientas de <strong>software libre</strong>
           </div>
        </div>
        <div class="col half" style="padding: 10px">
         
          <h3> Como funciona!</h3>
          
	  Revisa <a href="https://wiki.hcaklab.org.bo">nuestra wiki</a>.

	  <h3> Como Unirme</h3>
	  <p>Si no eres parte todavia <a href="UNETE">revisa esto</a></p>
          <h3> Como Brindar servicios </h3>
          <p>Como dar tus propios <a href="SERVICIOS">servicios</a></p>
	  <h3> Como aportar </h3>
          <p>Tus <a href="APORTES">aportes</a> son Bienvenidos :)</p>
        </div>
      </div>
    </div>
  </div>
</div>
</html>