<div class="DOS" style="color: #666;"><div class="inDOS" style="background: url(https://i.imgur.com/HG4Dw9f.jpg?1);"><div class="imDOS"><b></b></div><img src="https://i.imgur.com/BlFzQt8.jpg?1" style="color: #3f275399;"></div><div class="ttDOS" style="color: #3f2753;">Título o Nombre</div><sub>Sugar plum sweet bear claw. Cake chupa chups dessert pie tootsie roll soufflé dessert.</sub><div class="ddDOS" style="background: #3f275399;"><b>XX Años</b></div><div class="ddDOS" style="background: #3f275399;"><b>Nacionalidad</b></div>
<div class="ddDOS" style="background: #3f275399;"><b>Ocupación</b></div><div class="ddDOS" style="background: #3f275399;"><b>Raza</b></div><div class="ssDOS" style="color: #3f2753;">Subtítulo Aquí</div><div class="xxDOS">Toffee sugar plum carrot cake halvah powder cotton candy pie caramels croissant. Ice cream sugar plum macaroon chocolate jelly pastry carrot cake halvah.

Danish chocolate cake jelly-o bonbon bear claw wafer gummi bears cheesecake.

Lemon drops dessert marshmallow muffin gummies sweet roll. Gingerbread tootsie roll lollipop pie chupa chups. Muffin brownie biscuit. Lemon drops chocolate bar bear claw cake cotton candy brownie caramels.</div>
</div><a class="miDOS" href="https://emmescodes.tumblr.com/">code by EMME</a>

<style>@font-face {font-family: 'Tahu'; src: url('https://cdn.rawgit.com/EmmesCodes/Tipografias/0eca2fc2/Tahu!.ttf');} .DOS {width: 300px; margin: auto; height: 480px; background: #FFF; text-align: center; overflow: hidden; box-shadow: 2px 2px 5px #0009;} .DOS, .DOS * {transition: 1s cubic-bezier(.68,-0.55,.27,1.55); box-sizing: border-box;} .inDOS {height: 380px; background-size: cover !important; background-position: center center !important; position: relative; overflow: hidden;} .DOS:hover .inDOS {height: 100px;} .imDOS {background: #FFF; height: 40px; position: absolute; mix-blend-mode: screen; width: 100%; left: 0; bottom: 0;} .DOS:hover .imDOS {height: 20px; transition-delay: 0s;} .imDOS::before, .imDOS::after {content: ""; background: #FFF; width: 78px; height: 25px; bottom: 100%; display: block; position: absolute; transition: .8s;} .imDOS:before {border-radius: 0 20px 0 0;} .imDOS:after {border-radius: 20px 0 0; right: 0;} .DOS:hover .imDOS::before, .DOS:hover .imDOS::after {width: 107px; height: 17px;} .imDOS b {display: block; background: #000; position: absolute; width: 170px; height: 85px; border-radius: 0 0 100px 100px; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 10;} .DOS:hover .imDOS b {width: 110px; height: 55px;} .DOS img {width: 120px; height: 120px; border-radius: 50%; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); box-shadow: 2px 2px 5px #0009, 0 0 0 10px;} .DOS:hover img {width: 60px; height: 60px;} .ttDOS {font: 30px Tahu; padding-top: 20px;} .DOS:hover .ttDOS {padding-top: 10px;} .DOS sub {font: 10px/10px arial; margin: -10px 30px 30px; display: block;} .inDOS, .inDOS *, .DOS .imDOS::before, .DOS .imDOS::after {transition-delay: 1.6s;} .DOS:hover .inDOS, .DOS:hover .inDOS *, .DOS:hover .imDOS::before, .DOS:hover .imDOS::after {transition-delay: 0s;} .ddDOS {font: 9px arial; text-transform: uppercase; display: inline-block; width: 100px; letter-spacing: 100px; vertical-align: top; white-space: nowrap; height: 12px; position: relative; color: #FFF; padding-top: 1px;} .ddDOS:nth-of-type(odd) {text-align: right; margin: 3px 150px 3px -150px;} .ddDOS:nth-of-type(even) {margin: 3px -150px 3px 150px;} .DOS:hover .ddDOS {letter-spacing: 1px; margin: 3px;} .ddDOS:nth-of-type(2n+1) b {position: absolute; right: -100px;} .DOS:hover .ddDOS:nth-of-type(2n+1) b {right: 50%; transform: translateX(50%);} .ddDOS, .ddDOS b {transition-delay: .8s;} .ssDOS {font: bold 12px arial; text-transform: uppercase; padding-top: 30px; letter-spacing: 1px; margin-top: 300px; transition-delay: 0s;} .DOS:hover .ssDOS {margin-top: 0px; transition-delay: 1.6s;} .xxDOS {margin: 0 40px; font: 11px/400px arial; text-align: justify; padding: 5px; overflow: auto; height: 165px; transition-delay: 0s;} .DOS:hover .xxDOS {line-height: 13px; transition-delay: 2.2s;} .miDOS {display: block; text-align: center; font: 10px/20px arial;} .miDOS:hover {letter-spacing: 5px;}.DOS div::-webkit-scrollbar {width: 3px !important;background: #DDD !important;}.DOS div::-webkit-scrollbar-thumb {background: #999 !important;}</style>