Hermione Thread Tracker

<div class="hermione">
<input id="h1" type="radio" name="hermione" checked></input>
<input id="h2" type="radio" name="hermione"></input>
<input id="h3" type="radio" name="hermione"></input>
<input id="h4" type="radio" name="hermione"></input>
<div class="hbody">
<div class="h1">
<div class="himg" style="background:url(http://placehold.it/240x340);"></div>
<div class="htext">
<h>N</h>
<p>A quote goes here.</p>
</div>
</div>
<div class="h2">
<h><i class="sf sf-check-o"></i></h>
<div class="henv">
<h1>2018</h1>
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<h1>2019</h1>
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
</div>
</div>
<div class="h3">
<h><i class="sf sf-clock-3-o"></i></h>
<div class="henv">
<h1>2018</h1>
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<h1>2019</h1>
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
</div>
</div>
<div class="h4">
<h><i class="sf sf-lock-o"></i></h>
<div class="henv">
<h1>2018</h1>
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<h1>2019</h1>
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
<a href="">Nombre del tema</a> / 00-00 / Con quién.
</div>
</div>
</div>
<div class="hheader">
<h>Name of Character</h>
<div class="hlinks">
<label for="h1"><i class="sf sf-home-o"></i></label>
<label for="h2"><i class="sf sf-check-o"></i></label>
<label for="h3"><i class="sf sf-clock-3-o"></i></label>
<label for="h4"><i class="sf sf-lock-o"></i></label>
</div>
</div>
</div>
<a href="http://necromancercoding.tumblr.com/" class="ncredit">NC</a>
<style>.hermione {--bckg-1: #fafafa;--bckg-2: #f4f4f4;--border-1: #f4f4f4;--border-2: #cfcfcf;--accent-1: #91a6ae;--accent-2: #67777e;--shadow: #fff;--txt: #666;}</style><link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"/><link href="https://dl.dropbox.com/s/pxanj21qaxbsdf4/Signerica.css" rel="stylesheet"/><link href="https://fonts.googleapis.com/css?family=Montserrat:900&display=swap" rel="stylesheet"/><link href="https://dl.dropbox.com/s/7zorsku56rzfyu2/hermione.css" rel="stylesheet"/>