Crimson (ficha)

<div class="l3v"> <div class="ins31"><div class="ic3nlov"> <img src="https://via.placeholder.com/90" class="r3und"></div><div class="l3d3"><div class="arr3b3"><div class="sh3w">NOMBRE</div> <div class="w3lf">APELLIDO</div></div><div class="ab3j2">FRASE DEL PERSONAJE.</div></div></div><div class="ins321"><div class="datainf3"><div>GRUPO</div><div>EDAD</div><div>SEXO</div><div>NACIONALIDAD</div><div>ORIENTACIÓN SEXUAL</div> <div>OCUPACIÓN</div><div>PB</div> <div class="triang3"></div></div><div class="dataright"><div class="person"><div class="t3tle">PERSONALIDAD</div><div class="ins3text">TEXTO</div></div><div class="person"><div class="t3tle">HISTORIA</div><div class="ins3text">TEXTO</div></div></div></div></div>
<div class="credits"><a href="https://therocketgirl-codes.tumblr.com/"><span class="th th-moon"></span>Lilith</a></div>

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<style>.l3v{height: 580px; width: 490px; background: #1E1E1E; padding: 5px;} .ic3nlov{ width: 150px;height: 150px; -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: #CE002E; outline: 1px solid #ccc; outline-offset: 5px solid; display: inline-block;} .r3und{height: 90px; width: 90px; margin: 0 auto; border-radius: 50%; position: relative; top: 30px; left: 30px;} .ins31{width: 480px; padding: 5px; height:155px; overflow: hidden;} .l3d3{width: 310px; height: 130px; text-align: center; display: inline-block; color: #fff; font-family: Roboto; vertical-align: top; font-size: 40px; padding: 10px;} .sh3w{margin-top: 10px;} .w3lf{margin-top: 5px; font-weight: 700; letter-spacing: 5px; color: #CE002E} .arr3b3{width: 300px; height: 70px; overflow: hidden;} .ab3j2{width: 300px; background: #292929; height: 60px; font-size: 11px; padding: 5px; font-weight: 300;} .ins321{width: 480px; padding: 5px; height: 390px;} .datainf3{display: inline-block; height: 380px; padding: 5px; width: 140px; vertical-align: top; overflow: hidden;} .datainf3 div{background: #292929; margin-bottom: 5px; min-height: 10px; min-width: 130px; padding: 10px; text-align: center; font: 9px Roboto; color: #fff; font-weight: 300px;} .dataright{display: inline-block; height: 380px; padding: 5px;  width: 320px} .person{margin-bottom: 5px; height: 170px; padding: 5px; oveflow: hidden; width: 310px; background: #292929} .t3tle{width: 300px; min-height: 10px; padding: 5px; font: 14px Roboto; text-transform: uppercase; background: #CE002E; color: #292929; font-weight: 700; text-align: center; }.ins3text{width: 300px; height: 130px; overflow: auto; color: #fff; font-size: 11px; text-align: justify; padding: 5px;} .ins3text::first-letter{ font-size: 20px; float: left; padding: 30px; color: #fff; font-family: Roboto; font-weight: 700;} .ins3text::-webkit-scrollbar {width: 4px; height: 2px;} .ins3text::-webkit-scrollbar-button:start:decrement, .ins3text::-webkit-scrollbar-button:end:increment{height: 10px;display: none;}.ins3text::-webkit-scrollbar-track-piece{background: #1E1E1E;}.ins3text::-webkit-scrollbar-thumb:vertical{height: 30px; background: #CE002E;}.ins3text:-webkit-scrollbar-thumb:horizontal{height: 20px;background:#CE002E}.credits{font-size: 10px; text-align: right; width: 500px; text-transform: lowercase; letter-spacing: 3px;} .credits a{color: #B24058;} .triang3{-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background:#292929; width: 90px; height: 90px; min-width: 90px!important; margin: 0 auto!important;} </style>