Leeteuk Expedientes

<div class="leeteuk">
<input type="radio" name="leeteuk" id="l1" checked></input>
<input type="radio" name="leeteuk" id="l2"></input>
<input type="radio" name="leeteuk" id="l3"></input>
<div class="l1">
<div class="l11">
<i class="fas fa-brain"></i>
<span>Nombre del personaje.</span>
</div>
<div class="l22">
<label for="l1"><i class="fas fa-book-open"></i></label>
<label for="l2"><i class="fas fa-heart"></i></label>
<label for="l3"><i class="fas fa-question"></i></label>
</div>
</div>
<div class="l2" style="background:url(https://placehold.it/400x250);"></div>
<div class="l0 l01">
<div class="l3">
<div class="l4" style="background:url(https://placehold.it/100)"></div>
<h>título</h>
<div class="l5">Historia del personaje.</div>
<div class="l6">
<span>Dato</span>
<span>Dato</span>
<span>Dato</span>
</div>
</div>
</div>
<div class="l0 l02">
<div class="l3">
<div class="l4" style="background:url(https://placehold.it/100)"></div>
<h>título</h>
<div class="l5">Personalidad y físico.</div>
<div class="l6">
<span>Dato</span>
<span>Dato</span>
<span>Dato</span>
</div>
</div>
</div>
<div class="l0 l03">
<div class="l3">
<div class="l4" style="background:url(https://placehold.it/100)"></div>
<h>título</h>
<div class="l5">Otros datos.</div>
<div class="l6">
<span>Dato</span>
<span>Dato</span>
<span>Dato</span>
</div>
</div>
</div>
</div>
<a href="https://necromancercoding.tumblr.com/" class="ncredit">NC</a>

<style>.leeteuk { --background: #fafafa; --border-1: #eee; --border-2: #ddd; --accent-1: #f19c7b; --accent-2: #d37d5c; --accent-txt: #fff; --txt: #444; }</style><link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i,900,900i&display=swap" rel="stylesheet"/><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"/><link href="https://dl.dropbox.com/s/ducawsw0wpya74d/leeteuk.css" rel="stylesheet"/>