Tablón

index.html

<br><br><br><center><div class="ch-kns"><table cellspacing="0" cellpadding="0"><tr><td><div class="botonesch boton0">INFORMACIONES</div><div class="botonesch boton1">EVENTOS</div><div class="botonesch boton2">REGISTROS DE PJ</div><div class="botonesch boton3">ATENCIÓN AL USUARIO</div><div class="botonesch boton4">ADMINISTRACIÓN</div><div class="botonesch boton5">PREMIOS</div><div id="ch-data">Master's Chains fue creado por Sakura Namida, Izaya Orihara y Lelouch Lamperouge. La historia, ambientación, eventos, códigos y demás pertenece a administración, se prohíbe su uso total o parcial. Todo tema publicado pertenece a quien lo publicó salvo que se indique lo contrario, sean fichas, talleres, tutoriales, etc.<br><br>Master's Chains 2016.<br><br><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"><img alt="Licencia Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/80x15.png" /></a></div></td><td><div id="ch-info"><div id="caja0"><div class="ch-tit">Informaciones</div><div id="ch-l"><a href="http://www.m-chains.com/t11-normas-del-foro">Reglamento general</a></div><div id="ch-l"><a href="http://www.m-chains.com/t46-guia-al-usuario">Guía: Nuevo usuario</a></div><div id="ch-l"><a href="http://www.m-chains.com/t12-trama-principal">Trama Principal</a></div><div id="ch-l"><a href="http://www.m-chains.com/t985-tutorial-para-fichas-como-la-hago">¿Cómo hacer el expediente?</a></div><div id="ch-l"><a href="http://www.m-chains.com/t32-modelo-de-ficha-bbcode">Ficha Modelo BBCode</a></div><div id="ch-l"><a href="http://www.m-chains.com/t33-modelo-de-ficha-html">Ficha Modelo HTML</a></div><div id="ch-l"><a href="http://www.m-chains.com/t24-razas-permitidas">Razas permitidas</a></div><div id="ch-l"><a href="http://www.m-chains.com/t505-el-consejo-de-myr">Consejo Myr</a></div><div id="ch-l"><a href="http://www.m-chains.com/t13-los-mercados-y-las-mascotas">Mercados y Mascotas</a></div><div id="ch-l"><a href="http://www.m-chains.com/t145-guia-sobre-orientacion-rol-y-preferencia-sexual">Guía: Orientación, rol, posición.</a></div><div id="ch-l"><a href="http://www.m-chains.com/t40-como-comprar-una-mascota#47">Guía: ¿Cómo comprar una mascota?</a></div><div id="ch-l"><a href="http://www.m-chains.com/f8-afiliados">Afiliaciones</a></div><div id="ch-g"><marquee class="cl-m" direction="up" scrolldelay="300" onmouseover="this.stop()" onmouseout="this.start()">
<a href="#">~ Actualización #1</a><br><a href="#">~ Actualización #2</a><br><a href="#">~ Actualización #3</a><br><a href="#">~ Actualización #4</a><br><a href="#">~ Actualización #5</a><br><a href="#">~ Actualización #6</a><br><a href="#">~ Actualización #7</a><br></marquee></div><div id="ch-g" style="padding-top:10px;height:90px;">Medidas gráficas:<br><b>Avatar</b>:200px x 400px<br><b>Firma:</b>500px x 300px <br>Se acepta ecchi ligero.<br>Se prohíbe el contenido +18.</div>  
</div><div id="caja1"><div class="ch-tit">Eventos</div>
  <a href="#"><div class="ch-icon"></div></a><a href="#"><div class="ch-icon"></div></a><div id="ch-eve">Evento 1 [Abierto]</div><div id="ch-eve">Evento 2 [Pensándose]</div>
  
 </div><div id="caja2"><div class="ch-tit">Registros de personaje</div><a href="#"><img src="http://placehold.it/460x150"/></a><div id="ch-l"><a href="http://www.m-chains.com/t378-reserva-de-fisicos">Reserva de físicos</a></div><div id="ch-l"><a href="http://www.m-chains.com/t31-registro-fisicos">Físicos ocupados</a></div><div id="ch-l"><a href="http://www.m-chains.com/t27-registro-de-residencias">Registro de residencias</a></div><div id="ch-l"><a href="http://www.m-chains.com/t26-registro-de-comercios-menores">Registro de comercios</a></div><div id="ch-l"><a href="http://www.m-chains.com/t30-registro-de-razas">Registro de razas</a></div><div id="ch-l"><a href="http://www.m-chains.com/t29-catalogo-de-mascotas">Catálogo de mascotas</a></div><div id="ch-l"><a href="http://www.m-chains.com/t872-registro-de-celulares">Registro de celulares</a></div><div id="ch-l"><br></div>
  
  </div><div id="caja3"><div class="ch-tit">Atención al usuario</div><a href="#"><img src="http://placehold.it/460x100"/></a><div id="ch-l"><a href="">Cambios en la cuenta</a></div><div id="ch-l"><a href="">Reactivación de cuenta</a></div><div id="ch-l"><a href="">Supresión de cuenta</a></div><div id="ch-l"><a href="http://www.m-chains.com/t285-actualizaciones-del-foro">Actualizaciones del foro</a></div><div id="ch-l"><a href="">Cancelación de compra M. Legal</a></div><div id="ch-l"><a href="">Cancelación compra M. Ilegal</a></div><div id="ch-l"><a href="http://www.m-chains.com/t412-solicitud-para-agregar-poderes-debilidades">Solicitud: Agregar poderes</a></div><div id="ch-l"><a href="">Cancelación compra M. Ilegal</a></div>
  
 </div><div id="caja4"><div class="ch-tit">ADMINISTRACIÓN</div><div id="ch-j" style="background:#434DA6 !important;">Administradores</div><div id="ch-j" style="background:#434DA6 !important;">Moderadores</div><div id="ch-l"><a href="#">Bossy [WM]</a></div><div id="ch-l"><a href="http://www.m-chains.com/u164">Subaru Hayashi</a></div><div id="ch-l"><a href="http://www.m-chains.com/u4">Sakura Namida</a></div><div id="ch-l"><a href="http://www.m-chains.com/u299">Toneri</a></div><div id="ch-l"><a href="http://www.m-chains.com/u3">Lelouch Lamperouge</a></div><div id="ch-l"><a href="http://www.m-chains.com/u5">Shakir</a></div><div id="ch-l"><a href="#">Izaya Orihara</a></div><div id="ch-l"><a href="http://www.m-chains.com/u8">Tsubasa urokami</a></div><div id="ch-l"><a href="#">Narrador</a></div><div id="ch-l"><a href="http://www.m-chains.com/u6">Iker Kuyaku [CB]</a></div><div id="ch-j" style="background:#434DA6 !important;">Vendedores M. Legal</div><div id="ch-j" style="background:#434DA6 !important;">Vendedores M. Ilegal</div><div id="ch-l"><a href="#">Sakura Namida</a></div><div id="ch-l"><a href="#">Izaya Orihara</a></div><div id="ch-l"><a href="http://www.m-chains.com/u433">Touya Juunooru</a></div><div id="ch-l"><a href="http://www.m-chains.com/u40">Liu Yuán</a></div><div id="ch-l"><a href="http://www.m-chains.com/u78">Mizuki Kondo</a></div><div id="ch-l"><a href="http://www.m-chains.com/u337">William W. Wade.</a></div>
  
</div><div id="caja5"><div class="ch-tit">PREMIOS</div><div class="ch-pri" style="background:url('http://placehold.it/100x100')"><div id="ch-p-1">Nombre premio<br><a href="#">Nombre PJ</a></div></div><div class="ch-pri" style="background:url('http://placehold.it/100x100')"><div id="ch-p-1">Nombre premio<br><a href="#">Nombre PJ</a></div></div><div class="ch-pri" style="background:url('http://placehold.it/100x100')"><div id="ch-p-1">Nombre premio<br><a href="#">Nombre PJ</a></div></div><div class="ch-pri" style="background:url('http://placehold.it/100x100')"><div id="ch-p-1">Nombre premio<br><a href="#">Nombre PJ</a></div></div><div class="ch-pri" style="background:url('http://placehold.it/100x100')"><div id="ch-p-1">Nombre premio<br><a href="#">Nombre PJ</a></div></div><div class="ch-pri" style="background:url('http://placehold.it/100x100')"><div id="ch-p-1">Nombre premio<br><a href="#">Nombre PJ</a></div></div><div class="ch-pri" style="background:url('http://placehold.it/100x100')"><div id="ch-p-1">Nombre premio<br><a href="#">Nombre PJ</a></div></div><div class="ch-pri" style="background:url('http://placehold.it/100x100')"><div id="ch-p-1">Nombre premio<br><a href="#">Nombre PJ</a></div></div></div></div></td></tr></table></div></center>

script.js

$(document).ready(function() {
  
$('.boton0').click(function() {
    $('#caja0').fadeIn(700);
    $('#caja1, #caja2, #caja3, #caja4, #caja5').fadeOut(200);
  });
  
  $('.boton1').click(function() {
    $('#caja1').fadeIn(700);
    $('#caja0, #caja2, #caja3, #caja4, #caja5').fadeOut(200);
  });

  $('.boton2').click(function() {
    $('#caja2').fadeIn(700);
    $('#caja0, #caja1, #caja3, #caja4, #caja5').fadeOut(200);
  });

  $('.boton3').click(function() {
    $('#caja3').fadeIn(700);
    $('#caja0, #caja1, #caja2, #caja4, #caja5').fadeOut(200);
  });

  $('.boton4').click(function() {
    $('#caja4').fadeIn(700);
    $('#caja0, #caja1, #caja2, #caja3, #caja5').fadeOut(200);
  });
  
  $('.boton5').click(function() {
    $('#caja5').fadeIn(700);
    $('#caja0, #caja1, #caja2, #caja3, #caja4').fadeOut(200);
  });

})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

/*Contenedor general*/
.ch-kns {
  overflow: hidden;
  padding: 0px;
  width: 690px;
  height: 295px;
  border-style: solid;
  border-color: #2C3370;
  border-width: 30px 10px;
  background: #efefef;
}
/*Clase marquee*/
.cl-m{height:90px;overflow:hidden;margin:5px;}
/*Se ocultan las cajas con la info :v*/
#caja1,#caja2,#caja3,#caja4,#caja5 {
  display: none;
}
/*Propiedades de los botones*/
.botonesch {
  cursor: pointer;
  border-color: #2C3370;
  border-width: 1px 0px;
  border-style: solid;
  color: #000;
  width: 190px;
  background: #efefef;
  display: block;
  top: 0px;
  font-size: 11px;
  letter-spacing: 3px;
  padding: 2px 0px 2px 10px;
}
.botonesch:hover {
  background: #7E82A5;
  color: #fff;
  padding-left: 5px;
  padding-right: 5px;
}
/*Como son las cajas*/
#caja0,#caja1,#caja2,#caja3,#caja4,#caja5 {
  position: relative;
  width: 460px;
  height: 275px;
  background: #efefef;
  text-align: center;
  color: #000;
  font-family: serif;
  margin-top: -5px;
  line-height: 13px;
  font-size: 12px;
  padding: 10px;
}
/*Contiene los créditos*/
#ch-data {
  text-align: justify;
  overflow: hidden;
  color: #000;
  font-family: consolas;
  line-height: 11px;
  font-size: 10px;
  padding: 5px;
  margin-top: 0px;
}
/*Caja que contiene la informacion de pestañas*/
#ch-info {
  margin-top: px;
  border: 5px solid #7E82A5;
  width: 480px;
  padding: 0px;
  height: 285px;
  overflow: hidden;
}
/*Imagen eventos*/
.ch-icon {
  margin: 0px 5px;
  width: 220px;
  height: 180px;
  background: url('http://placehold.it/220x180');
  display: inline-block;
}
/*Data eventos*/
#ch-eve{ display: inline-block; margin: 0px 5px;text-align:justify;padding-top:5px;width:200px;height:20px;padding-left:20px;color:#efefef;background:#4B5875;}
/*Imagen premios*/
.ch-pri { 
  border-style:solid;
  border-color:#4B5875;
  border-width:2px;
  margin:1px 4px;
  padding-top:70px;
  text-align: center;
  overflow: hidden;
  width: 100px;
  height: 30px;
  display: inline-block;
  transition: ease-in-out 1s;
-webkit-transition: ease-in-out 1s;
-ms-transition: ease-in-out 1s;
-moz-transition: ease-in-out 1s;
} 
.ch-pri:hover{padding-top:0px;height:100px;
  transition: ease-in-out 1s;
  -webkit-transition: ease-in-out 1s;
  -moz-transition: ease-in-out 1s;}
/*Data premios*/
#ch-p-1 {line-height:20px;padding-top:10px;padding-top:5px; 
  background: #4B5875;
  color: #efefef;
  text-align: center;
  font-family: consolas;
  font-size: 12px;
  height: 40px;
  position: relative;
} 
#ch-p-1 a{color:#1C2E56; /*color link que solo afecta esta zona porque si, por las plumas de prima*/}
/*Cambio de color al pasar en caja*/
.ch-pri:hover #ch-p-1{background:#efefef;color:#4B5875;margin-top:-25px;}
/*Título de las cajas*/
.ch-tit {
  text-transform: uppercase;
  margin-top: 15px;
  text-align: center;
  color: #000426;
  border-bottom: 10px solid #2C3370;
  font-size: 30px;
  line-height: 25px;
  font-family: serif;
  margin-bottom: 5px;
}
#ch-l,#ch-j,#ch-g {
  display: inline-block;
  width: 206px;
  text-align:justify;
  background: #A9ADCF;
  color: #fff;
  letter-spacing: 1px;
  padding-left: 20px;
  margin: 2px;
}
/*l = link bajo, j link mediano, g la caja*/
#ch-l:hover,#ch-j:hover, #ch-g:hover {
  background: #434DA6;
}
#ch-g:hover {letter-spacing:1px !important;}
#ch-j {
  height: 20px;
  padding-top: 5px;
}
#ch-g {
  height: 100px;
  overflow: hidden;
}
/*a = link dentro del contenedor*/
#ch-g a,#ch-j a,#ch-l a {color: #1B1C5C;} 
#ch-l:hover a, #ch-g:hover a{color:#fff;}


/* http://placehold.it/460x150

TIEMPOS :vv
transition: ease-in-out Xs;
-webkit-transition: ease-in-out Xs;
-ms-transition: ease-in-out Xs;
-moz-transition: ease-in-out Xs;

ESCALAS
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);

-webkit-transform: scale(0.4);
-ms-transform: scale(0.4);
-o-transform: scale(0.4);
transform: scale(0.4);

RETRASO
transition-delay:Xs;



div::-webkit-scrollbar {height: 10px; width: 5px; background: #000000; } 
div::-webkit-scrollbar-thumb { background: #570000; } 
div::-webkit-scrollbar-track { background:#000000; } 
div::-webkit-scrollbar-button { background:#000000;}*/

tablon.markdown

Tablón

A Pen by Chandler Lehner on CodePen.

License.