UitJeHoofd Module box

by PhilQ

HTML

<div class="module-box">
    <div class="module-icon">
        <img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAB3RJTUUH3gEXFh4A2KRxdAAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAAHkSURBVHjarZZLKERRGMddLCRTEhYk8kgSFl4lWVCSYikLjZqipCmZlCQLSZGllI2NsrCQJI+NrKQ8CoWSaCjCwnNBuP6n/qPT6c6491ynft253/fd7zf33DvnjBFlc5im2YRDAygGheAR7INtMG0YxovdXuEE6WDJjDyCoNGNJAs8sNkTGAA1IBHkAy/YkYRDOpJYsMUGGyAtTF0MCIBP8CW+iFNRFyVXIImxaDAILsAb2AW1zA2z/hJ4nIgWeKFPinktno+4iwrOwB5j7U5E17woR5rKc8YmQC4oBDNglTW9zE86Ec2DFem8g002lbp4cMrP1azZdvhK/DZLBTds0meRH+PRw5pnHYl4AdalZ+KLUFvAmhM1F23DNQLqpfNIb1QJj4c6IvUOqmyIjnREfhC0KSoPJ7I1MOfZym8nwaKmjrlXkKIrqlFEeUo+DpwxF9CVVIJ7RZSp1EwxLlaGGF3RkSI5UPL9jL+DUi0JG90q61qzlGuT4i3aEjbr5Lon7qxNimfywYvhdyX54wusUTLnpskiWAZGmHxoyu5AshvRFRtVWOQ80gLb6nZaJkP7jkVunLkNVxI2C+0r4n9AD8jgJic2vG/Gi1yLKBs1rccH6P4XiSTziW1abGTgGMyCMp1eP+mu8TUA3BF8AAAAAElFTkSuQmCC" />
    </div>
    <div class="module-title">
        Theorie lezen
    </div>
    <div style="display:none;" class="module-check">
        <img style="display:none;" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAB3RJTUUH3gEXFjotbJPMpwAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAAIDSURBVHjarZbBSwJBFMbd1dRKPZRdLDx5kIi6lHjoWngqwqC7BAb1J2SBEXTuGoQHIQIP0rljEBj2D1SHDhURdpFArdy+h7M2bTu7o+uDH7POvvm+fW9213W5JELTtAw4BQluLsHmMjIaMiYp0NZ+45KhB51L2ekoJsJuDBHgB+PgAkzY6LyBFVADDfCsKMq3XQVlzXmULStCgg/DB3A77DhVM4qqmvqEakiIDcDExTRi/ETXCNUMY8gOwESPLNP807I0eBzA3hiDNNO6SQg0HIhts2fqRnCetENkpIKXPk3OuK4sCHJIW1VxZ7SRV+pjD17BDvd7SZBXIg/9Zqj2YbQFgRqrZgbDviCvqpfsB3eCsh/AMjgyzBe5lnlA1aK9pO2nxLxF0iIneMD1fIyb35XYy7wHuXGL9kyDKzpAm3Ja5z14jeN3ZjKLISfR5jglR8G94Eq+wIbZStayW4lqSDuqL4pY7NMnWDcx2pMwIc2IcWHRYgGZrXG5c6AlYdS9afiXatiix7SX51i4CWjfSGBIYm/CvIAeIzaLSPhEQpyP/5q40qTW+YtuSrTELppMKym8BJwMgEMHJrQ2YNRVBGZBDE8g2GOr6mASz1ndeEI1y2aJBW6qxUTMhFvc74KZiWWgKjdYBfPAC6ZAhWtRhc15WQ7lDuIzoPPxAo4Zvl7W/gDp/VAewK1/IgAAAABJRU5ErkJggg==" />
        <img alt=""...

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);

* {
    font-family: 'PT Sans', sans-serif;
}

.module-box {
    float: left;
    width: 484px;
    background-color: #d0ced2;
    border: 2px solid #462d5a;
}

.module-icon {
    float: left;
    width: 26px;
    height: 26px;
    padding: 5px;
    background-color: #462d5a;
}

.module-title {
    float: left;
    width: 388px;
    width: 426px;
    font-size: 20px;
    height: 26px;
    padding: 5px 10px;
    font-weight: bold;
    color: #ffffff;
    border-left: 2px solid #ffffff;
    background-color: #919861;
}

.module-check {
    float: left;
    width: 26px;
    height: 26px;
    padding: 5px;
    border-left: 2px solid #ffffff;
    background-color: #462d5a;
}

.module-desc {
    float: left;
    width: 464px;
    min-height: 72px;
    padding: 10px;
    color: #70678e;
    border-top: 2px solid #462d5a;
}

.module-desc.completed {
    background-image:...