History Cards

by spectre

HTML

<div id="menu" class="card"></div>
<div id="main">
    <div class="stack">
    <div class="card">
        <div class="tag">Alex Westphal</div>    
    </div>
    <div class="card">
        <div class="tag">Mike Smith</div>    
    </div>
    <div class="card">
        <div class="tag">Peter Westphal</div>    
    </div>
    <div class="card">
        <div class="tag">Chris Vercoe</div>    
    </div>
</div>
<div class="content card">
    <div class="tag">Bridget Smith</div>
</div>    
</div>

CSS

body {
    background-color: black;
    padding: 50px;
}

div#menu {
    width: 100%;
    height: 50px;
}
div#main {
    position: relative;    
}

div.card {
    background-color: #eee;
    border: 1px solid #aaa;
    border-radius: 5px;    
}

div.stack {
    position: relative;
    margin-top: 100px;
    width: 25%;   
}

div.stack > div.card {
    position: relative;
    margin-top: -75px;
    height: 100px;

    border: 1px solid #036;
    border-top-left-radius: 0px;    
}

div.tag {
    position: absolute;
    width: 150px;top: -20px;
    
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    
    background-color: #036;
    
    text-align: center;
    color: #fff;
}

div.content {
    position: absolute;
    top: 0px;
    left: 25%; width: 70%;
    margin-left: 5%;
    height: 400px;
    
    border: 1px solid #036;
    border-top-left-radius: 0px;
}