Modelo de Busqueda

por **God** Lun Feb 20, 2017 9:00 pm

Nombre del pj

Dato

Raza:

Dato

Edad

Dato

Estado

Diponible

PB

Dato

INFORMACIÓN

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.

Historia

Phasellus ornare rhoncus sagittis. Duis varius a odio non fermentum. Vivamus purus odio, cursus quis consequat in, hendrerit vitae libero. Ut vitae urna vulputate, tincidunt ipsum quis, volutpat libero. Integer vel lectus erat. Sed a sollicitudin dui, in pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin eget eleifend nisi. Nunc eget sem ut odio tincidunt suscipit. Proin lacinia faucibus elit. Nulla tortor dui, tincidunt at interdum commodo, fringilla consequat orci. Nulla mauris felis, convallis sit amet tincidunt ac, iaculis sed risus.

♕ I Z U U 一 M I

Código:: <style>.driveyr {width:400px;height:350px;background:#fff;padding:10px;margin: 0 auto;overflow:hidden;} #IMyr img {width:200px;height:350px;} .datsyr{width:200px;height:350px;background:transparent;position:relative;margin-left:205px;margin-top:-367px;font-family:calibri;font-size:11px;color:#000;text-align:center;} #hI {width:200px;font-family:Advent Pro;font-size:20px;color:#474747;letter-spacing:2px; text-transform: uppercase;} .HE {transform:rotate(270deg);-ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg);-o-transform:rotate(270deg); font-family:calibri;font-size:13px;text-transform:uppercase;letter-spacing:10px;margin-top:50px;margin-left:-200px;color:#fff;} #foty{width:180px;height:310px;background:#000;padding:20px;position:relative;margin-top:-405px;margin-left:390px;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;-webkit-transition-duration: .5s;} .texttl {width:180px;height:310px;background:transparent;overflow:auto;font-family:calibri;font-size:11px;color:#fff;letter-spacing:0px; line-height:10px;position:relative;margin-top:-70px;padding:5px;} .driveyr:hover #foty {-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;-webkit-transition-duration: .5s;margin-left:0px;} #rulersy {width:150px;height:230px;background:#fff;position:relative;margin-left:230px;margin-top:0px;font-family:calibri;font-size:11px;color:#000;border-top:5px solid #000;border-bottom:5px solid #000;padding:10px; overflow:auto;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;-webkit-transition-duration: .5s;} .driveyr:hover #rulersy {margin-top:-350px;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;-webkit-transition-duration: .5s;} .HE2 {font-family:calibri;font-size:13px;text-transform:uppercase;letter-spacing:10px;text-align:center;}</style> <link href='https://fonts.googleapis.com/css?family=Advent+Pro:200' rel='stylesheet' type='text/css'> <div class="driveyr"><div id="IMyr"><img src="http://i.imgur.com/RGozbeX.png"/></div><br><br> <div class="datsyr"><div id="hI">Nombre del pj</div>Dato<br> <div id="hI">Raza:</div>Dato<br> <div id="hI">Edad</div>Dato<br> <div id="hI">Estado</div>Diponible<br> <div id="hI">PB</div>Dato</div> <div id="foty"><div class="HE">INFORMACIÓN</div><div class="texttl"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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> <div id="rulersy"><div class="HE2">Historia</div>Phasellus ornare rhoncus sagittis. Duis varius a odio non fermentum. Vivamus purus odio, cursus quis consequat in, hendrerit vitae libero. Ut vitae urna vulputate, tincidunt ipsum quis, volutpat libero. Integer vel lectus erat. Sed a sollicitudin dui, in pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin eget eleifend nisi. Nunc eget sem ut odio tincidunt suscipit. Proin lacinia faucibus elit. Nulla tortor dui, tincidunt at interdum commodo, fringilla consequat orci. Nulla mauris felis, convallis sit amet tincidunt ac, iaculis sed risus.</div> </div><div style="text-align:center;font-family:Calibri;font-size:10px;width:35px;margin:auto;"><a href="http://izuu-mi.tumblr.com/">♕ I Z U U 一 M I</a></div>