Chocolate 2.0 (ficha)

<div class="MM101">

<div class="MM101-tt">Nombre Apellido</div>

<div class="MM101-in">
<div class="MM101-in">
<div class="MM101-img" style="background-image: url(https://i.pinimg.com/564x/6d/37/a2/6d37a2f21ec6062814975afa4212342b.jpg);"></div>

<div class="MM101-sub in">Información Básica</div>

<div class="MM101-dd">
<div><b>Edad:</b>Info Aquí</div>
<div><b>Nacionalidad:</b>Info Aquí</div>
<div><b>Ocupación:</b>Info Aquí</div>
<div><b>Grupo:</b>Info Aquí</div>
<div><b>Rango:</b>Info Aquí</div>
<div><b>PB:</b>Info Aquí</div>
</div>
</div>

<div class="MM101-txt">

<div class="MM101-sub">Personalidad</div>
<span>Pastry gummi bears pudding jujubes candy canes. Icing bear claw wafer fruitcake gummies caramels dragée chocolate bar. Pastry sesame snaps sweet chupa chups cake lollipop soufflé apple pie. Icing halvah apple pie halvah oat cake cupcake liquorice tiramisu biscuit.

Caramels cotton candy jelly lemon drops carrot cake. Croissant lemon drops dessert toffee ice cream. Lemon drops croissant jelly beans chocolate lollipop jelly pastry muffin gingerbread.</span>

<div class="MM101-sub">Historia</div>
<span>Candy cotton candy shortbread powder ice cream chocolate cake croissant. Danish chocolate cake ice cream icing bear claw apple pie wafer. Sweet roll gingerbread cake cupcake chupa chups danish.

Sweet wafer chupa chups marshmallow chocolate icing lollipop soufflé. Cookie biscuit cotton candy biscuit sweet roll shortbread. Gummi bears liquorice pudding caramels oat cake. Carrot cake cheesecake jelly-o jelly beans biscuit pie.</span>

<div class="MM101-sub">Extras</div>
<span>Cake chocolate cheesecake wafer jelly beans tiramisu cotton candy. Candy cotton candy bonbon pastry dessert. Marshmallow candy canes gingerbread cake gummies cake donut cheesecake.</span>

</div>

</div>
</div><a href="https://emmescodes.tumblr.com/" class="miMM">emme</a><style>.MM101, .MM101 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; transition: linear .5s; } .MM101 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM101 div::-webkit-scrollbar-thumb { background: #0006 !important; } .MM101 br { display: none; } .MM101 { width: 250px; margin: 11px auto; background: #494644; border: 10px solid transparent; outline: 1px solid; color: #ded4bf; box-shadow: 0 0 0 11px #494644; position: relative; over-bn flow: hidden; font: 12px Futura Bk BT; } .MM101-tt { background: #ded4bf; padding: 10px; text-align: center; color: #494644; font-weight: bold; position: relative; z-index: 10; letter-spacing: 1px; } .MM101-img { margin-top: 5px; background-position: center; background-size: cover; flex: 1; transition-de--lay: .5s !important; } .MM101-dd > div { margin-top: 5px; border: 1px dashed; padding: 5px 8px; display: flex; align-items: center; justify-content: space-between; } .MM101-sub { background: #ded4bf; padding: 10px; text-align: center; color: #494644; text-transform: uppercase; letter-spacing: 2px; margin-top: 5px; font-size: 10px; } .MM101-txt { height: 100%; overflow: auto; tran-sition: linear 1s; } .MM101-in { display: flex; flex-direction: column; min-height: 500px; max-height: 500px; } .MM101:hover .MM101-img { flex: 0; margin-top: 0; } .MM101:hover .MM101-txt { margin-top: -500px; } .MM101:hover .MM101-sub.in { margin-top: -32px; } .MM101:hover .MM101-dd > div { margin-top: -27px; } .MM101-txt > span { font-size: 14px; text-align: justify; display: block; hyphens: auto; margin: 5px; } .MM101-txt > span::first-letter { background: #ded4bf; float: left; padding: 5px; color: #494644; font-weight: bold; font-size: 18px; margin: 7px 5px 0 0; } .MM101-txt > span br { display: block; margin: 5px; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 2px; color: #444; } .miMM:hover { letter-spacing: 2px; } </style>