Wild Clove

por **Kuroki** Miér Jun 03, 2015 11:35 pm

HTML

Código:: <table> <tr> <td><div id="cajagrande"><div id="cajita1"><div style="width: 180px;height: 140px;overflow: auto;">Vestibulum ornare adipiscing aliquet. Integer enim purus, molestie vel ultrices eget, blandit eget urna. Pellentesque egestas tincidunt vulputate. Pellentesque mauris nisi, feugiat pellentesque eros et, auctor consectetur neque. Morbi venenatis massa non erat gravida, a ullamcorper metus volutpat. Nunc justo erat, fringilla ac lorem sit amet, rhoncus pharetra ligula. Vivamus cursus mi sit amet mauris sollicitudin, et sagittis nisi aliquam. Sed et vestibulum velit, et luctus turpis. Nunc sollicitudin nunc ipsum, id interdum massa dictum a. Aenean fringilla velit magna, vel rutrum nisi sagittis non. Integer eget sapien vitae velit gravida blandit. Sed a pretium purus. Phasellus scelerisque aliquet imperdiet. Maecenas varius tellus sit amet molestie consequat. Etiam leo sem, varius ac ipsum eu, vulputate semper justo. </div><div class="namecaja" style="padding-top: 16px;">Historia</div></div> </div></td> <td><div id="cajagrande2"><div id="cajita2"><div style="width: 230px;height: 150px;overflow: hidden;"><table><tr><td><div id="staff"><div class="staff1" style="background-image: url(http://placehold.it/150x60)"><div class="staff2"><p>Admin<br><a href="">MP</a></p></div></div></div></td><td><div class="CajaEncima" style="background-image: url(http://placehold.it/80x60)"><div class="CajaDebajo"><br>Mod<br><a href="">MP</a></div></div></td></tr><tr><td><div id="staff"><div class="staff1" style="background:url(http://placehold.it/150x60);"><div class="staff2"><p>Admin<br><a href="">MP</a></p></div></div></div></td><td><div class="CajaEncima" style="background-image: url(http://placehold.it/80x60)"><div class="CajaDebajo"><br>Mod<br><a href="">MP</a></div></div></td></tr> </table></div> <div class="namecaja">Staff</div></div> </div></td><td><div id="cajagrande"><div id="cajita1"><div style="width: 180px;height: 150px;overflow: auto;"><div id="linksexy"><a href="link" class="" target="_blank" rel="nofollow">Link 1</a></div><br><div id="linksexy"><a href="link" class="" target="_blank" rel="nofollow">Link 2</a></div><br><div id="linksexy"><a href="link" class="" target="_blank" rel="nofollow">Link 3</a></div><br><div id="linksexy"><a href="link" class="" target="_blank" rel="nofollow">Link 4</a></div></div><div class="namecaja">Enlaces</div></div></div></td></tr></table><center><a href="http://matryoshka.foroac.com/" style="font: 10px calibri; text-transform: uppercase; letter-spacing: 2px; width: 200px; color: #000;padding: 5px;background: #CFD0AF;">Eniozu © Matryoshka</a></center> <link href="http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day|Terminal+Dosis+Light&v1" rel="stylesheet" type="text/css">

CSS

Código:: .staff1{ width:150px; height:60px; position:absolute; background-position:center; overflow:hidden; transition:ease-in-out 0.6s; }#staff{ width:100px; height:60px; position:relative; } .staff1:hover{ width:230px; margin: auto; transition:ease-in-out 0.5s; z-index:0; } .staff2 {background:#7F6473; margin-left: 150px; width: 70px; height: 70px; padding: 5px;} .staff2 p {text-align: center; font: 12px terminal dosis light; text-transform: uppercase; letter-spacing: 1px;color: #fff; } .staff2 a {background: #000; height:15px;display: block; width: 64px; text-aling: center; padding: 1px; color: #fff; font-size: 10px; text-decoration: none;} .staff3 { width: 80px; height: 60px; margin-left: 48px;opacity:0; } .staff3:hover { background:#ddd;transition:ease-in-out 0.5s; opacity:1; }.CajaDebajo:hover { opacity: 1; } .CajaDebajo { transition: all 0.4s ease-out 0s; width: 80px; height: 60px; opacity: 0;background: #E1E0C1;text-align:center;font: 12px terminal dosis light; text-transform: uppercase;} .CajaEncima { width: 80px; height: 60px; margin-left: 48px; } .CajaDebajo a {background: #000; height:15px;display: block; width: 64px; text-aling: center; padding: 1px; color: #fff; font-size: 10px;margin-left: 5px; text-decoration: none; } #cajagrande {background: #95A49B; padding: 5px; border: 10px solid #E1E0C1; width: 200px; height: 250px;} #cajita1 {background: #CFD0AF; padding: 5px; border-top: 10px solid #7F6473; border-bottom: 10px solid #7F6473; width: 180px; height: 200px;margin-left: 5px;margin-top: 5px;outline: 2px dotted #E1E0C1;font: 11px/14px trebuchet ms; text-align: justify; color: #5F7267;} .namecaja {color: #7F6473;font-family: terminal dosis light; font-size:35px; text-transform:uppercase; text-align: center; text-shadow: 2px 2px 2px #5B5955;} #cajagrande2 {background: #95A49B; padding: 5px; border: 10px solid #E1E0C1; width: 250px; height: 250px;} #cajita2 {background: #CFD0AF; padding: 5px; border-top: 10px solid #7F6473; border-bottom: 10px solid #7F6473; width: 230px; height: 200px;margin-left: 5px;margin-top: 5px;outline: 2px dotted #E1E0C1;font: 11px/14px trebuchet ms; text-align: justify; color: #5F7267;} #linksexy:hover { transform: rotateY(400deg); border-radius: 10px; background: #7F6473; } #linksexy { background-color: #E1E0C1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; text-align: center; padding: 4px; transition: all 4s ease 0s; width: 170px; }

» Leer Más ALYSSWonderful Girl	» Leer Más KANONWonderful Boy
» Leer Más SIR MÖRDERISHWonderful User	»SSSSs BLEHWonderful Scene