[Tablilla] ¡Con botoncitos! - 1#

In this example below you will see how to do a [Tablilla] ¡Con botoncitos! - 1# with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Zhye, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Zhye ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>[Tablilla] ¡Con botoncitos! - 1#</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <center>
  <table>
    <tr>
      <td>
        <div id="buttons">
          <a href="#" id="1" class="mybutton myred">HOME</a>
          <p />
          <a href="#" id="2" class="mybutton myblue">ABOUT LUCCI</a>
          <p />
          <a href="#" id="3" class="mybutton mygreen">OPEN/CLOSED</a>
          <p />
        </div>
      </Td>
      <td>
        <div id="pages">
          <div id="1" class="mydivshow numberone"></div>
          <div id="2" class="mydivhide numbertwo">
            <h1>ロブ・ルッチ ─ LUCCI</h1><span><i>¡Gracias por pasarte por aquí! Así puedo excusarme sin necesidad de estar todo el rato twitteándolo por boba que soy.</i>
            <p>
<b>•••</b> A veces se me olvida responder algún rol. <b>Si véis que no contesto en un tiempo, avisadme</b> por MD, mención... cómo prefiráis, gracias y de antemano disculpas.
              <p>
<b>•••</b> Nunca he roleado fight-rol. Empecé a hacerlo cuando entré en SSOP. Si cometo godmode, me gustaría que me lo dijiérais para poder mejorar en vez de cortar el rol de raíz.
                <p>
<b>•••</b> Roleo por TL, MD, menciones, de casi todo tipo. Me gustan las ideas y las tramas, ¿hacemos algo? (=ↀωↀ=)ノ✧♡ <strike>←Esungato.</strike>

<center>
                    <p>
                    
<img src="https://i.imgur.com/nm1SSvA.gif" />

<div style="margin-top:-8px;color:#EC7D7D;text-decoration: overline;font-family:oswald;font-size:22px;text-transform:uppercase;">
<b>Sobre el gatito</b>
    
</div>
</center>

                  <p>
<b>•••</b> Siempre intentaré rolearlo lo más fiel a su personalidad. Pero a veces se me va la bola, sobretodo en la TL.
                    <p>
<b>•••</b> <b>Nadie</b> sabe que estuvo en el CP9 salvo la banda de Mugiwara, a menos que ellos lo hayan soltado por ahí... Tampoco se sabe que está en el CP0.
                      <p>
<b>•••</b> Supongo que después de dos años <i>Lucci habrá mejorado sus habilidades y quizás desarrollado otras.</i> Agradecería que se tuviera en cuenta. > v< 
<p>
<b>•••</b> No es necesario que sigas leyendo abajo, ahí están los roles que he tenido con Lucci.

<center>
                            <p>
<img src="https://i.imgur.com/jTFpCBi.png" /></span></div>
          <div id="3" class="mydivhide numberthree"><h1>WANNA GET FUCKED UP?</h1><span>...</span></div>
        </div>
      </td>
    </tr>
</center>

<link href='https://fonts.googleapis.com/css?family=Oswald|Fjalla+One|Passion+One|Anton' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Zhye/tablilla-andxa1con-botoncitos-1-xZJboz */
body {
  background: -webkit-linear-gradient(-90deg, rgba(255, 240, 206, 0.1) 0, #ECAF7D 100%), url("https://i.imgur.com/vdG9F6u.jpg");
  background: -moz-linear-gradient(180deg, rgba(255, 240, 206, 0.1) 0, #ECAF7D 100%), url("https://i.imgur.com/vdG9F6u.jpg");
  background: linear-gradient(180deg, rgba(255, 240, 206, 0.1) 0, #ECAF7D 100%), url("https://i.imgur.com/vdG9F6u.jpg");
  background-repeat: repeat;
  background-position: 0%;
  -webkit-background-origin: padding-box, border-box;
  background-origin: padding-box, border-box;
  -webkit-background-clip: border-box, border-box;
  background-clip: border-box, border-box;
  -webkit-background-size: auto auto, auto auto;
  background-size: auto auto, auto auto;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #5CB49E;
  border: 4px solid #FFF0CE;
}

::-webkit-scrollbar-thumb {
  background: #EC7D7D;
  border: 2px solid #FFF0CE;
}

.myred {
  box-shadow: 0px 3px 0px #C12828;
  text-shadow: 0px -2px 0px #C12828, -1px -1px 0px #C12828;
  background: #EC7D7D;
}

.myblue {
  box-shadow: 0px 3px 0px #4D8FBD;
  text-shadow: 0px -2px 0px #4D8FBD, -1px -1px 0px #4D8FBD;
  background: #7DBEEC;
}

.mygreen {
  box-shadow: 0px 3px 0px #3A8E79;
  text-shadow: 0px -2px 0px #3A8E79, -1px -1px 0px #3A8E79;
  background: #5CB49E;
}

#buttons a {
  text-decoration: none;
}

.mybutton {
  letter-spacing: 2px;
  font-family: anton;
  color: white;
  font-size: 18px;
  margin-bottom: -7px;
  text-align: center;
  width: 160px;
  padding: 13px 10px;
  display: block;
  position: relative;
  top: -200px;
  left: -30px;
}

#pages {
  position: relative;
  top: 29px;
  padding: 2px;
  outline: 20px #ECAF7D solid;
  width: 500px;
  height: 600px;
}

.numberone {
  width: 500px;
  height: 600px;
  background: url(https://i.imgur.com/8Hs56lX.gif);
}

.numbertwo, .numberthree {
  position: relative;
  width: 500px;
  height: 600px;
  background: transparent;
  top: -24px;
}

.numbertwo h1, .numberthree h1 {
  color: #F1E7DC;
  text-shadow: 2px 1px 1px #C12828;
  text-transform: uppercase;
  font-family: Oswald;
  font-size: 36px;
  text-align: center;
  background: #EC7D7D;
  padding: 20px 20px;
}

.numbertwo span, .numberthree span {
  font-family: Roboto Condensed;
  font-size: 14.5px;
  text-align: justify;
  position: relative;
  padding: 20px;
  background: #F7F5F5;
  width: 460px;
  height: 458px;
  display: block;
  overflow: auto;
  top: -22px;
}

/*Downloaded from https://www.codeseek.co/Zhye/tablilla-andxa1con-botoncitos-1-xZJboz */
$("#buttons a").click(function() {
  var id = $(this).attr("id");
  $("#pages div").css("display", "none");
  $("#pages div#" + id + "").css("display", "block");
});
$("#pages div:not(#1)").css("display", "none");

Comments