Innovation

by lukerichison

HTML

<div class="card green" id="clothing">
    <header>
        <h3>Clothing</h3>
        <p>3</p>
    </header>
    <ul class="dogma">
        <li>Meld a card from your hand of a different color than any card on your board.</li>
        <li>Draw and score a <span>1</span> for each color on your board not present on any opponent's board.</li>
    </ul>
    <ul class="icons">
        <li class="icon"></li>
        <li class="crown"></li>
        <li class="leaf"></li>
        <li class="leaf"></li>
    </ul>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
body {
    background-color: #E6E6E6;
}
div.card {
    font-family: 'Source Sans Pro', sans-serif;
    background: url(http://lukerichisondesign.com/innovation/img/cardBG.png) center;
    width: 214px;
    height: 238px;
    border-radius: 10px;
    box-shadow: 0 4px 10px #aaa;
    position: relative;
    padding: 0 24px 0 100px;
    margin: 10% auto;
}
div.card header {padding: 16px 0 4px;}
div.card header h3 {
    color: white;
    text-align: center;
    margin: 0 48px 0 0;
    padding: 2px 0;
    text-transform: uppercase;
    position: relative;
}
div.card header p {
    position: absolute;
    top: 0;
    right: 24px;
}
div.card ul.dogma,
div.card ul.dogma li {
    font-size: 12px;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
div.card ul.dogma li {
    padding: 2px;
    border: 1px solid;
}
div.card ul.dogma li + li {
    margin-top: 4px;
}
div.card.green ul.dogma li span {
    display: inline-block;
    color: white;
    background-color: black;
    width: 1em;
    text-align: center;
}



div.card ul.icons {overflow: auto; position: absolute; z-index: 1; bottom: 0; left: 0; font-size: 0; width: 100%;}
div.card ul.icons,
div.card ul.icons li {
    margin:0; padding: 0; list-style-type: none;
}
div.card ul.icons li {
    position: relative;
    border: 2px solid white;
    outline: 2px solid;
    margin: 24px;
    height: 60px;
    width: 60px;
    display: inline-block;
}
div.card ul.icons li:first-child {
    display: block;
    margin-top: 2px;
}
div.card ul.icons:before,
div.card ul.icons li:before {
    content:"";
    display: block;
    position: absolute;
    z-index: -1;
}
div.card ul.icons:before,
div.card ul.icons li:nth-child(2):before {
    height: 16px;
    width: 56px;
    left: 0;
    top: 26px;
}
div.card ul.icons li:before {
    top: 50%; left: 50%; margin-left: -8px;
    height: 56px; width: 16px;
}
div.card ul.icons li:first-child:before {
   ...