Welcome to slytherin

<div id="slytherin"><div class="snake1"><center><div class="snakephoto" style="background: url('IMAGEN PEQUEÑA1');"></div><div class="snakephoto" style="background: url('IMAGENPEQUEÑA2');"></div><div class="snakephoto" style="background: url('IMAGENPEQUEÑA3');"></div><div class="snakename">NOMBRE PJ</div><div class="snakephrase">"FRASE"</div></center></div>
<div class="snake3"><div class="inside1" style="background:url('AQUÍ IMAGEN GRANDE');"><div class="inside3"><span>DATO</span><span>DATO</span> <span>DATO</span> <span>DATO</span> <span>DATO</span><span>DATO</span></div></div> <div class="inside2"><div class="titlesnake"><span class="th th-cobra"></span> PERSONALIDAD</div><div class="textsnake">TEXTO
</div><div class="titlesnake"><span class="th th-cobra"></span> HISTORIA</div><div class="textsnake">TEXTO</div></div></div></div>
<div class="credits"><a href="https://therocketgirl-codes.tumblr.com/">Lilith <span class="th th-planet-1"></span></a></div>



<link href="https://fonts.googleapis.com/css?family=Montserrat|Oswald|Satisfy" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<style>#slytherin{width: 500px; height: 450px; overflow: hidden; transition: 1s;} .snake1{width: 500px; height: 450px; background: #1D452B;}.snakephrase{height: 100px; width: 200px; color: #EEEEEE; font-size: 14px; letter-spacing: 1px; font-family: Satisfy; text-transform: lowercase; text-align: justify; padding: 5px; margin-top: 30px;} .snakephoto{height: 100px; width: 100px; border: #EEEEEE solid 5px; display: inline-block; margin: 20px; overflow: hidden; margin-top: 100px;} .snakename{font-size: 20px; letter-spacing: 10px; text-transform: uppercase; color: #1D452B; margin: 10px; font-family: Oswald; padding: 5px; background: #EEEEEE} .snake3{width: 500px; height: 450px; position: relative; background: #EEEEEE; transition: 1s; top:0; overflow: hidden;} #slytherin:hover .snake3{top: -468px; transition: 1s} .inside1{display: inline-block; width: 150px; height: 500px; vertical-align: top;} .inside1 span{background: rgb(29, 69, 43,0.7); color: #fff; font-size: 10px; text-transform: uppercase; padding: 5px; display: block; width: 100px; margin-bottom: 1px; text-align: center; font-family: Oswald; letter-spacing: 1px;} .inside3{margin-top: 260px; margin-left: 15px;} .inside2{width: 340px; height: 440px;display: inline-block; font-size: 11px; text-align: justify; background: #EEEEEE;} .textsnake{border: 8px solid #DFDFDF; padding: 3px; background: #DFDFDF; overflow: auto; height: 170px; font-family: Montserrat} .titlesnake{padding: 6px; width: 328px; text-align: left; font-size: 13px; font-family: Oswald; background: #1D452B; color: #EEEEEE; letter-spacing: 2px;} .textsnake::-webkit-scrollbar {width: 3px; height: 2px;} .textsnake::-webkit-scrollbar-button:start:decrement, . .textsnake::-webkit-scrollbar-button:end:increment{height: 10px;display: none;} .textsnake::-webkit-scrollbar-track-piece{background: #ccc;} .textsnake::-webkit-scrollbar-thumb:vertical{height: 30px; background:#1D452B;} .textsnake::-webkit-scrollbar-thumb:horizontal{height: 20px;background: #1D452B;} .credits{font-size: 10px; text-align: right; width: 500px; text-transform: lowercase; letter-spacing: 3px;} .credits a{color: #B24058;}</style>