Últimos temas
» [SKIN] Hello? how are you
por Unity Vie Ene 06, 2017 11:55 pm

» Pack 1 de html (personaje + firma)
por Rose Jue Ene 05, 2017 5:19 pm

» [FIRMA] Mikagura Suite
por Natty Mar Dic 27, 2016 9:57 am

» [SKIN] Attack No Titan
por Flowman Jue Dic 15, 2016 8:51 pm

» Owari no seraph's
por Cool Skelleton_95 Mar Nov 15, 2016 2:04 pm

» Simple flutter
por Amaranth Miér Oct 26, 2016 8:54 am

» Duda sobre sorteo de skin
por SS Jue Sep 15, 2016 8:22 pm

» [MOVIL] [ FA ] Haikyuu
por Sarisha Mar Ago 30, 2016 6:07 am

» Pedido grafico
por DangerStRichard Dom Ago 28, 2016 7:09 pm


[TABLÓN DE ANUNCIOS] Rinne - Glutamine

Ver el tema anterior Ver el tema siguiente Ir abajo

[TABLÓN DE ANUNCIOS] Rinne - Glutamine

Mensaje por Mikae el Jue Jul 02, 2015 11:43 pm


Reglamento

♥ No se acepta el divulgar los códigos en otras partes, me refiero a copiar y pegar el código y hacerlo pasar como tuyo.
♥ Para obtener el código debes postear con el Link directo + Captura, totalmente obligatorio.
♥ Queda prohibido totalmente remover o hacer mas pequeño el link del crédito.
♥ No se puede utilizar esta tablilla como base para crear otras.
Información

- El subtitulo de “Awards, Buscados, Tramas, Censos” No traen un div, si no es una modificación del strong, así que tengan cuidado con eso, si colocan un strong (en negrita) les saldrá automáticamente de color rojo y con es tamaño y estilo.
- Tienes pestañas de JS.
- Las imágenes tienen un hover sencillo.







#tablondeanuncios


Última edición por Mikae el Miér Jun 29, 2016 9:36 pm, editado 4 veces
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Re: [TABLÓN DE ANUNCIOS] Rinne - Glutamine

Mensaje por Mikae el Jue Feb 04, 2016 2:03 pm

CSS
Código:
/*Hover imagenes*/
#tabli:hover {
  opacity: 100;
  transition: .3s all ease-in-out;
  transition-delay: .3s;
  transition-duration: .3s;
}
#tabli {
  background-color: #9C0808;
  color: #FFF;
  font-family: arial;
  font-size: 9px;
  height: 80px;
  letter-spacing: 2px;
  line-height: 145%;
  opacity: 0;
  overflow: hidden;
  padding: 15px;
  text-align: justify;
  transition: .3s all ease-in-out;
  transition-delay: .3s;
  transition-duration: .3s;
  width: 70px;
}
/*CAJAS TABLON*/
.cnt2{
display:none;
    margin:20px;
}
.cnt1 strong, .cnt2 strong, .cnt3 strong, .contenido2 strong {color: #9C0808;
  font-family: terminal dosis light;
  font-size: 40px;  text-align: center;
  text-transform: uppercase;
  font-weight: 700;letter-spacing: -4px;}
#mika3 {
  background: #000;
  color: #fff;
  display: block;
  font-family: calibri;
  font-size: 10px;
  overflow: auto;
  text-align: justify;
  height: 100px;
  letter-spacing: 2px;
  margin: 20px;
  padding: 10px;
  width: 165px;
}#mika4 {
  background: #000;
  color: #fff;
  display: block;
  font-family: calibri;
  font-size: 10px;
  overflow: auto;
  text-align: justify;
  height: 150px;
  letter-spacing: 2px;
  margin: 20px;
  padding: 10px;
  width: 165px;
}
.cnt1 {margin:20px;
}
.cnt3{
display: none;margin:20px;
}#mikatitle {
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  background: #000;
  color: #9C0808;
  font-family: terminal dosis light;
  font-size: 40px;
  font-weight: 700;
  text-transform:uppercase;
  letter-spacing: -4px;
  margin-left: -270px;
  padding: 30px;
  position: absolute;
  text-align: center;
  top: 45%;
  transform: rotate(-90deg);
  width: 1000px;
}.contenido {
  background: #F2F2F2;
  color: #000;
  font-family: arial;
  font-size: 13px;
  height: 185px;
  margin-bottom: 2px;
  padding: 5px;overflow:hidden;
  text-align: justify;
  width: 480px;
}.contenido2 {
  background: #F2F2F2;
  color: #000;
  font-family: arial;
  font-size: 13px;
  height: 188px;
  padding: 5px;
  text-align: justify;
  width: 480px;
}
.tablonmika{
    background-color: #FDFDFD;
  border-radius: 0;
  border-top: #860000 solid 5px;
  width: 800px;position:relative;
  height:400px;
 
}.pestañas li{
display: inline-block;
margin-left: 10px;
}
.pestañas, .credito {
  display: block;background:#000;
}
.btn1, .btn2, .btn3 {
  background-color: #9C0808;
  color: #fff;border-radius: 50px;
  display: block;
  font-family: calibri;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
  width: 94px;
}
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Re: [TABLÓN DE ANUNCIOS] Rinne - Glutamine

Mensaje por Mikae el Jue Feb 04, 2016 2:04 pm

HTML
Código:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day|Terminal+Dosis+Light&v1" />
<div align="center">
                                                                                                                           
        <div class="tablonmika">
                                                                                                 
                <table>
                                                                                                                           
                        <tbody>
                                                                                                                                 
                                <tr>
                                                                                                                                           
                                        <td>
                                                                                                                                                   
                                                <div style="background-image: url(http://placehold.it/300x400);width:300px; height: 395px;overflow:hidden;position:relative;">
                                                                                                                   
                                                        <div id="mika3">
                                                                                              Donec maximus imperdiet libero pellentesque sagittis. Aliquam erat volutpat. Suspendisse vel metus suscipit, sodales ante ac, bibendum tellus. Suspendisse ipsum diam, volutpat porta cursus sit amet, elementum sit amet ex. Etiam vitae mollis justo. Quisque ipsum arcu, pharetra et semper efficitur, lobortis vitae lorem. Proin sed eros et nisl feugiat eleifend. Sed eu dolor non orci venenatis auctor.                         
                                                        </div><br />                           
                                                        <div id="mika4">
                                                                                            <strong>Staff</strong> <br /><br />                       
                                                                <table>
                                                                                                                         
                                                                        <tbody>
                                                                                                                               
                                                                                <tr>
                                                                                                                                         
                                                                                        <td>
                                                                                                                        <img src="http://placehold.it/50x50" />                       
                                                                                        </td>
                                                                                                                                       
                                                                                        <td>
                                                                                                                        <img src="http://placehold.it/50x50" />                       
                                                                                        </td>
                                                                                                                                       
                                                                                        <td>
                                                                                                                        <img src="http://placehold.it/50x50" />                       
                                                                                        </td>
                                                                                                                                         
                                                                                </tr>
                                                                                                                               
                                                                                <tr>
                                                                                                                                         
                                                                                        <td>
                                                                                                                        <img src="http://placehold.it/50x50" />                       
                                                                                        </td>
                                                                                                                                       
                                                                                        <td>
                                                                                                                        <img src="http://placehold.it/50x50" />                       
                                                                                        </td>
                                                                                                                                       
                                                                                        <td>
                                                                                                                        <img src="http://placehold.it/50x50" />                       
                                                                                        </td>
                                                                                                                                         
                                                                                </tr>
                                                                                                                               
                                                                        </tbody>
                                                                                                                       
                                                                </table>
                                                                                                                 
                                                        </div>
                                                                                                                                                 
                                                        <div id="mikatitle">
                                                                                                                Welcome                                               
                                                        </div>
                                                                                                                                                 
                                                </div>
                                                                                                                                               
                                        </td>
                                                                                                                                         
                                        <td>
                                                                                                                                                                                 
                                                <div class="contenido">
                                                                                                                             
                                                        <div class="pestañas">
                                                                                                                                                                       
                                                                <ul>
                                                                                                                                                                               
                                                                        <li class="btn1">
                                                                                                                                    Pestaña 1                                                   
                                                                        </li>
                                                                                                                                                                               
                                                                        <li class="btn2">
                                                                                                                                    Pestaña 2                                                   
                                                                        </li>
                                                                                                                                                                               
                                                                        <li class="btn3">
                                                                                                                                    Pestaña 3                                                   
                                                                        </li>
                                                                                                                                                                               
                                                                </ul>
                                                                                                                                                                     
                                                        </div>
                                                                                                                                                             
                                                        <div class="cnt1">
                                                                                                        <strong>Buscados/Fugitivos</strong> <br />                 
                                                                <table>
                                                                                                                                                                             
                                                                        <tbody>
                                                                                                                 
                                                                                <tr>
                                                                                                                                                                                             
                                                                                        <td>
                                                                                                                                                                                                   
                                                                                                <div style="width: 100px; height: 100px; background-image:url(http://placehold.it/100x100);overflow: hidden;">
                                                                                                                                                                                                               
                                                                                                        <div id="tabli">
                                                                                                                                                                    Juanito busca rol                                                   
                                                                                                        </div>
                                                                                                                                                                                                               
                                                                                                </div>
                                                                                                                                                                                                       
                                                                                        </td>
                                                                                                                                                                                           
                                                                                        <td>
                                                                                                                                                                                                   
                                                                                                <div style="width: 100px; height: 100px; background-image:url(http://placehold.it/100x100);overflow: hidden;">
                                                                                                                                                                                                               
                                                                                                        <div id="tabli">
                                                                                                                                                                    Pancha busca familia.                                                   
                                                                                                        </div>
                                                                                                                                                                                                               
                                                                                                </div>
                                                                                                                                                                                                   
                                                                                        </td>
                                                                                                                                                                                           
                                                                                        <td>
                                                                                                                                                                                                   
                                                                                                <div style="width: 100px; height: 100px; background-image:url(http://placehold.it/100x100);overflow: hidden;">
                                                                                                                                                                                                               
                                                                                                        <div id="tabli">
                                                                                                                                                                    Vicente busca pareja en rol.                                                   
                                                                                                        </div>
                                                                                                                                                                                                               
                                                                                                </div>
                                                                                                                                                                                                   
                                                                                        </td>
                                                                                                                                                                                         
                                                                                        <td>
                                                                                                                                                                                                 
                                                                                                <div style="width: 100px; height: 100px; background-image:url(http://placehold.it/100x100);overflow: hidden;">
                                                                                                                                                                                                             
                                                                                                        <div id="tabli">
                                                                                                                                                                    Anita busca hermano.                                                   
                                                                                                        </div>
                                                                                                                                                                                                             
                                                                                                </div>
                                                                                                                                                                                                 
                                                                                        </td>
                                                                                                                                                                                             
                                                                                </tr>
                                                                                                                                                                                   
                                                                        </tbody>
                                                                                                         
                                                                </table>
                                                                                                                                       
                                                        </div>
                                                                                                                                                               
                                                        <div class="cnt2">
                                                                                <strong>Awards del foro</strong>                                    <br />           
                                                                <table>
                                                                                                                                                                           
                                                                        <tbody>
                                                                                                               
                                                                                <tr>
                                                                                                                                                                                           
                                                                                        <td>
                                                                                                                                                                                                 
                                                                                                <div style="width: 100px; height: 90px; background-image:url(http://placehold.it/100x90);overflow: hidden;">
                                                                                                                                                                                                             
                                                                                                        <div id="tabli">
                                                                                                                                                                    Nombre del ganador                                                   
                                                                                                        </div>
                                                                                                                                                                                                             
                                                                                                </div>
                                                                                                                     
                                                                                                <div style="background: #000; color: white;width: 100px;font: 11px calibri; tex-transform uppercase; text-transform: uppercase;text-align: center;">
                                                                                                                      PJ más caguaii             
                                                                                                </div>
                                                                                                                                                                                                     
                                                                                        </td>
                                                                                                                                                                                         
                                                                                        <td>
                                                                                                                                                                                                 
                                                                                                <div style="width: 100px; height: 90px; background-image:url(http://placehold.it/100x90);overflow: hidden;">
                                                                                                                                                                                                             
                                                                                                        <div id="tabli">
                                                                                                                                                                    Nombre del ganador                                                 
                                                                                                        </div>
                                                                                                                                                                                                             
                                                                                                </div>
                                                                                                                                                                                               
                                                                                                <div style="background: #000; color: white;width: 100px;font: 11px calibri; tex-transform uppercase; text-transform: uppercase;text-align: center;">
                                                                                                                      PJ más sensual             
                                                                                                </div>
                                                                                                                     
                                                                                        </td>
                                                                                                                                                                                         
                                                                                        <td>
                                                                                                                                                                                                 
                                                                                                <div style="width: 100px; height: 90px; background-image:url(http://placehold.it/100x90);overflow: hidden;">
                                                                                                                                                                                                             
                                                                                                        <div id="tabli">
                                                                                                                                                                    Nombre de Personaje                                                 
                                                                                                        </div>
                                                                                                                                                                                                             
                                                                                                </div>
                                                                                                                                                                                               
                                                                                                <div style="background: #000; color: white;width: 100px;font: 11px calibri; tex-transform uppercase; text-transform: uppercase;text-align: center;">
                                                                                                                      Mejor roler           
                                                                                                </div>
                                                                                                                     
                                                                                        </td>
                                                                                                                                                                                       
                                                                                        <td>
                                                                                                                                                                                               
                                                                                                <div style="width: 100px; height: 90px; background-image:url(http://placehold.it/100x90);overflow: hidden;">
                                                                                                                                                                                                           
                                                                                                        <div id="tabli">
                                                                                                                                                                  Nombre de Personaje                                                 
                                                                                                        </div>
                                                                                                                                                                                                           
                                                                                                </div>
                                                                                                                                                                                             
                                                                                                <div style="background: #000; color: white;width: 100px;font: 11px calibri; tex-transform uppercase; text-transform: uppercase;text-align: center;">
                                                                                                                      Mejor user             
                                                                                                </div>
                                                                                                                     
                                                                                        </td>
                                                                                                                                                                                           
                                                                                </tr>
                                                                                                                                                                                 
                                                                        </tbody>
                                                                                                       
                                                                </table>
                                                                                                     
                                                        </div>
                                                                                   
                                                        <div class="cnt3">
                                                                        <strong>Censo y Grupos</strong> <br />                                          Lo que quieras que vaya en el tercer contenido de la tercera pestaña                                                     
                                                        </div>
                                                                                     
                                                </div>
                                                                       
                                                <div class="contenido2">
                                                            <br />                                  <strong>TRAMAS GLOBALES</strong><br /> 
                                                        <div style="width:430px; height: 80px; padding: 20px; overflow:auto;">
                                                                  Donec maximus imperdiet libero pellentesque sagittis. Aliquam erat volutpat. Suspendisse vel metus suscipit, sodales ante ac, bibendum tellus. Suspendisse ipsum diam, volutpat porta cursus sit amet, elementum sit amet ex. Etiam vitae mollis justo. Quisque ipsum arcu, pharetra et semper efficitur, lobortis vitae lorem. Proin sed eros et nisl feugiat eleifend. Sed eu dolor non orci venenatis auctor.Donec maximus imperdiet libero pellentesque sagittis. Aliquam erat volutpat. Suspendisse vel metus suscipit, sodales ante ac, bibendum tellus. Suspendisse ipsum diam, volutpat porta cursus sit amet, elementum sit amet ex. Etiam vitae mollis justo. Quisque ipsum arcu, pharetra et semper efficitur, lobortis vitae lorem. Proin sed eros et nisl feugiat eleifend. Sed eu dolor non orci venenatis auctor.     
                                                        </div>
                                                                                                                            <br />
                                                        <div class="pestañas">
                                                                                                       
                                                                <div align="center">
                                                                                <a href="http://mikae.foroperu.org/" style="font: 10px calibri; text-transform: uppercase; letter-spacing: 2px; color: #fff;text-align: center;text-decoration: none;">mikae</a>  ©  <a href="http://savage-themes.tumblr.com/" style="font: 10px calibri; text-transform: uppercase; letter-spacing: 2px; color: #fff;text-align: center;text-decoration: none;">Savage Theme</a>       
                                                                </div>
                                                                                                 
                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                </div>
                                                                           
                                        </td>
                                                                   
                                </tr>
                                                                                                                                 
                        </tbody>
                                                                                                                         
                </table>
                                                                                                     
        </div>
                                                                                         
</div>
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Re: [TABLÓN DE ANUNCIOS] Rinne - Glutamine

Mensaje por Mikae el Jue Feb 04, 2016 2:05 pm

JS
Código:
$(document).ready(function(){
$('.btn1').click(function () {$('.cnt1').fadeIn(200);$('.cnt2, .cnt3').fadeOut(200)});
$('.btn2').click(function () {$('.cnt2').fadeIn(200);$('.cnt1, .cnt3').fadeOut(200)});
$('.btn3').click(function () {$('.cnt3').fadeIn(200);$('.cnt1, .cnt2').fadeOut(200)});
});
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Re: [TABLÓN DE ANUNCIOS] Rinne - Glutamine

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.