Geek Power Cards

Geek Power cards with HTML/CSS

by dbugger

HTML

<div class="bg">
    <div class="title">Gadget Man</div>
    <img src="http://www.my-funspace.com/wp-content/uploads/2010/10/UNSET.jpg" />
    <div class="attr brown">
        <strong>Special skill</strong>
        <span>whatever</span>
        <span class="points">8</span>
    </div>
    <div class="attr green">
        <strong>Style</strong>
        <span>whatever</span>
        <span class="points">8</span>
    </div>
    <div class="attr brown">
        <strong>Calculation</strong>
        <span>whatever</span>
        <span class="points">8</span>
    </div>
    <div class="attr green">
        <strong>Chances in the real world</strong>
        <span class="points">8</span>
    </div>
    <div class="attr red">
        <strong>Geek Power</strong>
        <span class="points">8</span>
    </div>
</div>

CSS

.bg{
    width: 500px;
    background-color: #eef;
    background-image: -moz-linear-gradient(transparent 95%, rgba(0, 0, 200, 0.1) 50%, rgba(0, 0, 200, 0.1)), -moz-linear-gradient(0deg, transparent 95%, rgba(0, 0, 200, 0.1) 50%, rgba(0, 0, 200, 0.1));
    background-size: 20px 20px;
    
    border-radius: 20px;
    padding: 20px;
}
.bg > *{
    border: 3px solid white;
    box-shadow: 0 0 10px black;
    margin-bottom: 10px;
    border-radius: 15px;
}
.title{
    background-color: hsl(17, 31%, 50%);
    padding: 5px;
    color: white;
    font-family: sans-serif;
    text-transform: uppercase;
    text-align: center;
}
img{
    width: 500px;
}
.brown{ background: hsl(17, 31%, 50%); }
.green{ background: #bada55 }
.red{ background: red; }
.attr{
    color: white;
    font-family: sans-serif;
    padding: 3px 10px;
    font-weight: bold;
}

.attr strong{
    text-transform: uppercase;
    font-weight: bold;
}
.attr span{
    font-weight: normal;
}
.attr .points{
    float: right;
}