Alistair Baúl

<div class="alistair">
<input type="radio" id="zero" name="alistair" checked></input>
<input type="radio" id="one" name="alistair"></input>
<input type="radio" id="two" name="alistair"></input>
<div class="links">
<label for="zero"><i class="fas fa-quote-left"></i></label>
<label for="one"><i class="fas fa-heart"></i></label>
<label for="two"><i class="fas fa-clock"></i></label>
</div>
<div class="imagen" style="background-image:url(https://placehold.it/200x300);">
<div class="imagenshow">
titulo de imagen
</div>
</div>
<div class="zero">
<h>nombre <strong>apellido</strong></h>
cita, todo lo larga que quieras.</div>
<div class="one">
<div class="onne">
<div class="rel amor" style="background-image:url(https://placehold.it/80);"><div class="info">Nombre Apellido</div></div>
<div class="rel amistad" style="background-image:url(https://placehold.it/80);"><div class="info">Nombre Apellido</div></div>
<div class="rel enemistad" style="background-image:url(https://placehold.it/80);"><div class="info">Nombre Apellido</div></div>
<div class="rel familia" style="background-image:url(https://placehold.it/80);"><div class="info">Nombre Apellido</div></div>
<div class="rel amistad" style="background-image:url(https://placehold.it/80);"><div class="info">Nombre Apellido</div></div>
<div class="rel familia" style="background-image:url(https://placehold.it/80);"><div class="info">Nombre Apellido</div></div>
</div>
</div>
<div class="two">
<a href="">Nombre del tema
<span>Con quién y dónde</span></a>
<a href="">Nombre del tema
<span>Con quién y dónde</span></a>
<a href="">Nombre del tema
<span>Con quién y dónde</span></a>
<a href="">Nombre del tema
<span>Con quién y dónde</span></a>
<a href="">Nombre del tema
<span>Con quién y dónde</span></a>
<a href="">Nombre del tema
<span>Con quién y dónde</span></a>
</div>
</div>
<a href="https://necromancercoding.tumblr.com/" class="ncredit">NC</a>

<style>.alistair{ --color-fondo: #fafafa; --color-bordes: #eee; --color-borde-oscuro: #ddd; --color-links: #aaa; --color-acento: #a34e4e; }</style>
<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://fonts.googleapis.com/css?family=Playfair+Display:700,700i,900,900i&display=swap&subset=latin-ext" rel="stylesheet"><link href="https://dl.dropbox.com/s/0a3vfyhb2lp81hb/alistair.css" rel="stylesheet">