prédef

<div class="MM002"><div class="MM002-port"><div class="MM002-dat"><div><span><b>Nom du prédef</b><b>nº1017</b></span><b>Nom de code</b><div class="MM002-sello">Disponible</div></div></div></div><input type="radio" name="mm-02" id="mm002-01" checked><label for="mm002-01" class="MM002-uno">
<div class="MM002-in"><span>Expediente nº1017<b>Nom et prénom du prédef</b></span><div class="MM002-data"><div><div style="background-image: url(URL image du prédef);"></div></div><span>
<div><b>Âge :</b> ICI </div>
<div><b>Nationnalité :</b> ICI </div>
<div><b> Race :</b> ICI </div>
<div><b> Groupe :</b> ICI.</div>
<div><b>Rang :</b> ICI </div>
<div><b>Nom de code :</b> ICI </div>
</span></div><span><b>Son histoire</b></span><div class="MM002-txt">

Un résumer ou complète ici

</div></div>

</label><input type="radio" name="mm-02" id="mm002-02"><label for="mm002-02" class="MM002-dos"><div class="MM002-in"><span><b>Caractère et particularités physiques à noté</b></span><div class="MM002-txt">
un trait physique très important, à souligner ici



son caractère soit en résumer soit en listing

</div><span><b>Vos liens</b></span><div class="MM002-txt">

Lien avec ton personnage à décrire ici

</div>
</div></label></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="https://fonts.googleapis.com/css?family=Crete+Round|Rokkitt&display=swap" rel="stylesheet"><style>.MM002, .MM002 * { box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin; } .MM002-stats br, .MM002-data br, .MM002 > label > br, .MM002 input, .MM002 > br { display: none; } .MM002 { width: 450px; margin: auto; position: relative; font: 12px Rokkitt; color: #0009; border: 20px solid transparent; border-radius: 10px; perspective: 2900px; transform-style: preserve-3d; text-shadow: 1px 1px #FFF; } .MM002-port { position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; z-index: 30; transform-origin: left center; transition: 1s; transform-style: preserve-3d; transform: rotateY(-15deg); } .MM002, .MM002-port:before { background-color: #ecd99e; } .MM002-port::before { content: ""; width: 100%; position: absolute; height: 100%; border-radius: 10px; } .MM002:hover .MM002-port { transform: rotateY(-100deg); } .MM002-port:before, .MM002, .MM002 > label { background-image: url(https://i.postimg.cc/44St3fys/Papel.jpg); background-size: cover; background-blend-mode: multiply; box-shadow: 0 5px 10px -5px #000; } .MM002 > label { display: block; background-color: #CCC; border-radius: 5px; padding: 10px; box-shadow: 0 5px 10px -5px #000; color: #0009; margin: 0; } .MM002-uno { position: relative; z-index: 10; transform: rotate(-2deg); } .MM002-dos { position: absolute; top: 0; left: 5px; right: -5px; bottom: 0; } .MM002 input:checked + label { z-index: 11; background-color: #FFF; } .MM002-in { border: 2px solid; border-radius: 3px; box-shadow: 1px 1px #FFF, inset 1px 1px #FFF; } .MM002-in > span { display: block; border-bottom: 2px solid; padding: 10px; text-align: center; box-shadow: 0 1px #FFF; } .MM002-in > span b { font: 16px/16px Crete Round; display: block; text-transform: uppercase; } .MM002-data { display: flex; border-bottom: 2px solid; box-shadow: 0 1px #FFF; } .MM002-data > div { border-right: 2px solid; padding: 10px; width: 170px; box-shadow: 1px 0 #FFF; } .MM002-data > div > div { height: 100%; background-position: center; background-size: cover; box-shadow: 5px 5px 5px -5px #000; transform: rotate(2deg); border: 3px solid #FFF; border-radius: 3px; } .MM002-data > span { flex: 1; } .MM002-data > span > div { padding: 10px; text-align: right; } .MM002-data > span > div ~ div { border-top: 2px solid; box-shadow: inset 0 1px #FFF; } .MM002-data > span > div b { float: left; text-transform: uppercase; border-right: 2px solid; margin: -10px; padding: 10px; box-shadow: 1px 0 #FFF; } .MM002-txt { border: 30px solid transparent; text-align: justify; font-size: 14px; height: 250px; overflow: auto; padding-right: 5px; } .MM002-stats { display: flex; flex-wrap: wrap; } .MM002-stats > div { flex: 1; min-width: 50%; padding: 10px; border-bottom: 2px solid; box-shadow: 0 1px #FFF; text-transform: uppercase; letter-spacing: 1px; } .MM002-stats > div > span { position: relative; border: 1px solid; display: block; height: 20px; margin-top: 5px; mix-blend-mode: multiply; padding: 5px; } .MM002-stats > div > span b { position: absolute; bottom: calc(100% - 2px); background: #FFF; line-height: 5px; font-size: 10px; padding: 0 2px; } .MM002-stats > div > span i { display: block; height: 100%; background: #0009; } .MM002-dat > div > span > b ~ b, .MM002-stats > div:nth-of-type(even) { border-left: 2px solid; box-shadow: 0 1px #FFF, inset 1px 0 #FFF; } .MM002-dos .MM002-in { display: flex; flex-direction: column; height: 100%; } .MM002-dos .MM002-txt { flex: 1; } .MM002-dat { transform: translateZ(1px); padding-top: 90px; text-align: center; box-shadow: none; } .MM002-dat > div { border: 2px solid; display: inline-block; box-shadow: 1px 1px #FFFC, inset 1px 1px #FFFC; transform: rotate(1deg); } .MM002-dat > div > span { display: flex; border-bottom: 2px solid; box-shadow: 0 1px #FFFC; } .MM002-dat > div > span > b { font: 20px/18px Crete Round; padding: 10px; } .MM002-dat > div > b { text-transform: uppercase; padding: 5px; display: block; letter-spacing: 1px; } .MM002-sello { position: absolute; top: 100%; right: -30px; color: #c40000b3; font: bold 25px Crete Round; transform: rotate(-10deg); border: 3px dashed; padding: 10px; box-shadow: 1px 1px #FFF, inset 1px 1px #FFF; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: .5s; text-transform: uppercase; padding: 3px; } .miMM:hover { letter-spacing: 3px; } .MM002 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0006 !important; } .MM002 div::-webkit-scrollbar-thumb { background: #0003 !important; }</style>