Clay (ficha)

<div class="ME5" style="background: #666; color: #FFF;">

<div class="imME5" style="background-image: url(https://via.placeholder.com/100);"></div>
<div class="imME5" style="background-image: url(https://via.placeholder.com/100);"></div>
<div class="imME5" style="background-image: url(https://via.placeholder.com/100);"></div>

<div class="ttME5">Nombre Apellido</div>

<div class="ddME5">
<span><b>Edad:</b>Info Aquí</span>
<span><b>Ocupación:</b>Info Aquí</span>
<span><b>Nacionalidad:</b>Info Aquí</span>
<span><b>PB:</b>Info Aquí</span>
</div>

<div class="botME5"><input type="radio" name="ME5" id="ME51" checked><label for="ME51">Data</label><input type="radio" name="ME5" id="ME52"><label for="ME52">Resumen</label><div><span>Título Aquí</span>
<div>Gummies carrot cake candy jelly-o pastry. Donut jelly-o gummies jelly-o cupcake. Jelly-o chupa chups pastry pudding tiramisu tart gummies. Chocolate bar tiramisu toffee wafer cake bonbon ice cream fruitcake candy canes.

Liquorice biscuit icing. Jelly sugar plum oat cake. Gummi bears tart toffee tootsie roll.

Danish tart jelly beans dragée topping. Cookie cookie danish danish danish topping ice cream sweet roll. Marzipan dessert chupa chups chupa chups gummi bears brownie halvah sweet roll.>

Pudding soufflé croissant chocolate bar lemon drops ice cream icing toffee. Jelly candy canes danish brownie pudding donut chupa chups pudding sugar plum. Candy chocolate bar jelly apple pie sweet roll marzipan. Chupa chups sweet roll sweet cake soufflé caramels croissant wafer.

Brownie dragée fruitcake apple pie. Ice cream croissant candy canes. Toffee gummi bears bear claw toffee chocolate cake gingerbread chocolate bar marshmallow.</div></div><input type="radio" name="ME5" id="ME53"><label for="ME53">Extras</label><div><span>Título Aquí</span>
<div>Gummies carrot cake candy jelly-o pastry. Donut jelly-o gummies jelly-o cupcake. Jelly-o chupa chups pastry pudding tiramisu tart gummies. Chocolate bar tiramisu toffee wafer cake bonbon ice cream fruitcake candy canes.

Liquorice biscuit icing. Jelly sugar plum oat cake. Gummi bears tart toffee tootsie roll.

Danish tart jelly beans dragée topping. Cookie cookie danish danish danish topping ice cream sweet roll. Marzipan dessert chupa chups chupa chups gummi bears brownie halvah sweet roll.

Pudding soufflé croissant chocolate bar lemon drops ice cream icing toffee. Jelly candy canes danish brownie pudding donut chupa chups pudding sugar plum. Candy chocolate bar jelly apple pie sweet roll marzipan. Chupa chups sweet roll sweet cake soufflé caramels croissant wafer.

Brownie dragée fruitcake apple pie. Ice cream croissant candy canes. Toffee gummi bears bear claw toffee chocolate cake gingerbread chocolate bar marshmallow.</div></div></div></div><a class="miME5" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>

<link href="https://fonts.googleapis.com/css?family=Hepta+Slab|Raleway&display=swap" rel="stylesheet"><style> .ME5, .ME5 * {box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin; transition: .3s;} .ME5 {width: 400px; margin: auto; border: 40px solid transparent; text-align: center; font: 12px Raleway; letter-spacing: -5px; position: relative; overflow: hidden;} .imME5 {width: 100px; height: 100px; display: inline-block; background-position: center; background-size: cover;} .imME5 ~ .imME5, .botME5 > label ~ label {margin-left: 10px;} .ttME5, .botME5 > div > span {font: 14px Hepta Slab; letter-spacing: 2px; padding: 30px 0;} .ddME5 {letter-spacing: 1px; font-size: 10px;} .ddME5 > span {display: block; text-align: left; padding-left: calc(50% + 50px); position: relative; margin-bottom: 10px;} .ddME5 > span > b {position: absolute; text-align: right; left: 0; width: calc(50% - 50px);} .ddME5 > span > b::after {content: ""; width: 90px; border-bottom: 1px dotted; position: absolute; bottom: 3px; left: calc(100% + 4px);} .botME5 {margin-top: 35px;} .botME5 > input {display: none;} .botME5 > label {box-shadow: inset 0 0 0 200px; -webkit-text-fill-color: #777; display: inline-block; width: 100px; letter-spacing: 1px; text-transform: uppercase; font-size: 10px; padding: 5px 0 4px; opacity: .7; font-weight: bold; cursor: pointer; margin: 0; color: inherit !important;} .botME5 > input:checked + label, .botME5 > label:hover {opacity: 1; letter-spacing: 3px;} .botME5 > div {box-shadow: inset 0 0 0 200px; -webkit-text-fill-color: #777;} .botME5 > div {box-shadow: inset 0 0 0 200px; -webkit-text-fill-color: #777; position: absolute; top: 0px; bottom: 30px; width: 100%; padding: 10px; letter-spacing: normal;} .botME5 > div:nth-of-type(odd) {left: 100%;} .botME5 > div:nth-of-type(even) {right: 100%;} .botME5 > input:checked + label + div:nth-of-type(odd) {left: 0%;} .botME5 > input:checked + label + div:nth-of-type(even) {right: 0%;} .botME5 > div > span {display: inline-block; padding: 20px 5px 0; border-bottom: 1px dotted #777;} .botME5 > div > div {margin: 20px; text-align: justify; overflow: auto; height: calc(100% - 80px); padding-right: 5px; hyphens: auto;} .ME5 > br, .ddME5 > br {display: none;} .miME5 {display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: .5s;} .miME5:hover {letter-spacing: 10px;} .ME5 div::-webkit-scrollbar {width: 5px !important; height: 5px !important; background: #0006 !important;} .ME5 div::-webkit-scrollbar-thumb {background: #0003 !important;}</style>