Mar Ago 15, 2017 2:32 pm por 
nombre del personaje dato aqui dato aqui dato aqui dato aqui |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis varius justo, at elementum justo finibus id. Nunc vel augue vel enim imperdiet eleifend. Maecenas vitae ullamcorper quam. Vivamus id rhoncus purus, quis cursus nisl. Nulla vitae justo luctus leo viverra placerat.
Cras pulvinar tortor vel auctor accumsan. Proin enim nulla, lacinia ac justo at, consectetur vestibulum tortor. Suspendisse potenti.Aenean pretium quam lacus, ac aliquam est dictum in. Vivamus dolor velit, hendrerit et ligula quis, maximus dapibus eros.
Cras pulvinar tortor vel auctor accumsan. Proin enim nulla, lacinia ac justo at, consectetur vestibulum tortor. Suspendisse potenti.Aenean pretium quam lacus, ac aliquam est dictum in. Vivamus dolor velit, hendrerit et ligula quis, maximus dapibus eros.
Copiar pegar el code tantas veces como personajes busqueis
- Código:
<link href="https://fonts.googleapis.com/css?family=Tillana" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet"><div class="wrp1" style="background: url(http://placehold.it/400x208)"><table style="margin: auto; width: 380px; padding-top:10px; border-spacing:5px;"><tr><td><div class="photo1" style="background: url(http://placehold.it/150x150)"></div></td><td style="width:192px"><div class="nm1" style="font-size:20px;">nombre del personaje</div><div class="dat1">dato aqui</div><div class="dat1">dato aqui</div><div class="dat1">dato aqui</div><div class="dat1">dato aqui</div></td></tr></table><div class="co1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis varius justo, at elementum justo finibus id. Nunc vel augue vel enim imperdiet eleifend. Maecenas vitae ullamcorper quam. Vivamus id rhoncus purus, quis cursus nisl. Nulla vitae justo luctus leo viverra placerat. <br/><br/>Cras pulvinar tortor vel auctor accumsan. Proin enim nulla, lacinia ac justo at, consectetur vestibulum tortor. Suspendisse potenti.Aenean pretium quam lacus, ac aliquam est dictum in. Vivamus dolor velit, hendrerit et ligula quis, maximus dapibus eros. </div></div>
<div class="cr1"><a href="http://sourcecode.foroactivo.com/u3129">Apolo for SourceCode</a></div>
<style type="text/css">.wrp1{width:400px;height:200px;margin: auto;border-bottom: solid 8px #000000} .photo1{width:150px;height:150px;border: solid 4px #FFFFFF;box-shadow: 1px 1px 4px #000;transition: all 0.5s ease-in-out;} .nm1{font-family:tillana;color:#ffffff;text-shadow: 1px 1px 1px #000;transition: all 0.5s ease-in-out;margon-bottom:10px} .dat1{width:150px;padding:5px;text-transform:uppercase;font-family:calibri;background:#a96964;margin: 2px;color: #fff;text-align:center;font-size:11px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; box-shadow:1px 1px 4px #000} .co1{width: 350px;margin: auto;font-family:calibri;font-size:12px;text-align:justify;padding:5px;height: 150px;overflow: auto;color:#000;background:#fff;margin-top: -160px;opacity: 0;transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition-delay: 0.2s;-webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; line-height:130%} .wrp1:hover .co1{opacity:0.8} .wrp1:hover .photo1, .wrp1:hover .nm1, .wrp1:hover .dat1{opacity:0;} .cr1 a{font-family:calibri; text-transform:uppercase; text-decoration:none;} .cr1{text-align:center; width:400px; margin:auto; font-size:10px; margin-top:-5px}</style>
