Un Botón (ficha + crono)

<div class="YEJ"><img src="https://i.pinimg.com/564x/d9/78/cb/d978cb4bbaac8387e8c9d8a92e01cc41.jpg" class="imYEJ"><div class="unYEJ"><div class="ttYEJ">Nombre Apellido</div><div class="ssYEJ">Datos Básicos</div><div class="ddYEJ"><b>Edad Aquí.</b>
<b>Nacionalidad Aquí.</b>
<b>Ocupación Aquí.</b>
<b>Raza Aquí.</b>
<b>Género Aquí.</b>
<b>PB Aquí.</b></div><div class="ssYEJ">Extra</div><div class="xxYEJ">Chupa chups gingerbread sweet roll croissant brownie lemon drops. Donut pudding pudding gummi bears sesame snaps marshmallow. Chocolate bar pudding candy fruitcake danish bonbon chocolate muffin.

Cheesecake croissant carrot cake halvah. Ice cream marzipan tiramisu cookie jelly beans gingerbread oat cake tiramisu oat cake. Oat cake biscuit liquorice marshmallow jelly-o fruitcake cookie carrot cake tart. Croissant dragée marshmallow.

Halvah gummi bears toffee chocolate cake tootsie roll pie. Bonbon pie cheesecake chocolate. Marshmallow lollipop chocolate bar candy soufflé.</div>
</div><div class="unYEJ"><div class="ttYEJ">Cronología</div><div class="ssYEJ">Temas Activos</div><div class="llYEJ"><a href="URL">Primer Enlace</a>
<a href="URL">Segundo Enlace</a>
<a href="URL">Tercer Enlace</a>
<a href="URL">Cuarto Enlace</a>
<a href="URL">Quinto Enlace</a>
<a href="URL">Sexto Enlace</a>
<a href="URL">Séptimo Enlace</a>
</div><div class="ssYEJ">Temas Concluidos</div><div class="llYEJ"><a href="URL">Primer Enlace</a>
<a href="URL">Segundo Enlace</a>
<a href="URL">Tercer Enlace</a>
<a href="URL">Cuarto Enlace</a>
<a href="URL">Quinto Enlace</a>
</div>
</div></div><a href="https://emmescodes.tumblr.com/" class="miYEJ">code by emme</a>

<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:300" rel="stylesheet"><style>.YEJ, .YEJ * {box-sizing: border-box;} .YEJ {width: 540px; border: 5px solid transparent; box-shadow: 0 0 0 2px #FFF; position: relative; margin: 2px auto; text-align: center; color: #929292;} .unYEJ {width: calc(50% - 5px); display: inline-block; vertical-align: top; padding: 20px; height: 400px;} .unYEJ:nth-of-type(odd) {background: radial-gradient(circle at calc(100% + 5px), #FFF0 0, #FFF0 92px, #FFF 93px); margin-right: 10px;} .unYEJ:nth-of-type(even) {background: radial-gradient(circle at -5px, #FFF0 0, #FFF0 92px, #FFF 93px);} .imYEJ {position: absolute; width: 170px; height: 170px; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%); border-radius: 50%;} .ttYEJ {font: bold 12px/15px Merriweather Sans; padding-top: 10px; color: #7f93a7;} .ssYEJ {text-align: left; margin: 20px 5px 10px; font: bold 10px arial; text-transform: uppercase;} .ddYEJ {text-align: left; padding: 0px 15px; height: 155px; overflow: auto;} .ddYEJ b {font: 10px/22px arial; padding: 4px 3px 0; border-bottom: 1px dotted;} .xxYEJ {text-align: justify; font: 10px arial; height: 90px; overflow: auto; margin: 5px 0 0 15px;} .unYEJ:nth-of-type(even) .ssYEJ {text-align: right;} .llYEJ {margin: 0 15px; text-align: right; height: 122px; overflow: auto;} .llYEJ a {font: 10px/20px arial; color: #7f93a7 !important; border-bottom: 1px dotted transparent; transition: .5s;} .llYEJ a:hover {border-bottom: 1px dotted #7f93a7; letter-spacing: 1px;} .miYEJ {display: block; text-align: center; font: 10px arial; color: #999 !important; transition: .5s;} .miYEJ:hover {letter-spacing: 5px;}.YEJ div::-webkit-scrollbar {width: 3px !important;background: #eee !important;}.YEJ div::-webkit-scrollbar-thumb {background: #aaa !important;}</style>