Calendar Lists with Google Fonts

by Reusablecode

HTML

<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>

<div class="holder">
    <div class="topbar blue">
        <h1>November</h1>
    </div>
    <div class="inbar">
        <ul>
            <li><span>1</span> <p>Lorem ipsum dolor</p></li>
            <li><span>2</span> <p> At vero eos et</p></li>
            <li><span>3</span> <p> At vero eos et accusam</p></li>
            <li><span>4</span> <p>Lorem ipsum dolor sit amet</p></li>
        </ul>
        <div style="clear:both"></div>
    </div>
</div>    
<div class="holder">
    <div class="topbar orange">
        <h1>November</h1>
    </div>
    <div class="inbar">
        <ul>
            <li><span>1</span> <p>Lorem ipsum dolor</p></li>
            <li><span>2</span> <p> At vero eos et</p></li>
            <li><span>3</span> <p> At vero eos et accusam</p></li>
            <li><span>4</span> <p>Lorem ipsum dolor sit amet</p></li>
        </ul>
        <div style="clear:both"></div>
    </div>
</div>
    
<div class="holder">
    <div class="topbar green">
        <h1>November</h1>
    </div>
    <div class="inbar">
        <ul>
            <li><span>1</span> <p>Lorem ipsum dolor</p></li>
            <li><span>2</span> <p> At vero eos et</p></li>
            <li><span>3</span> <p> At vero eos et accusam</p></li>
            <li><span>4</span> <p>Lorem ipsum dolor sit amet</p></li>
        </ul>
        <div style="clear:both"></div>
    </div>
</div>
    
<div class="holder">
    <div class="topbar red">
        <h1>November</h1>
    </div>
    <div class="inbar">
        <ul>
            <li><span>1</span> <p>Lorem ipsum dolor</p></li>
            <li><span>2</span> <p> At vero eos et</p></li>
            <li><span>3</span> <p> At vero eos et accusam</p></li>
            <li><span>4</span> <p>Lorem ipsum dolor sit amet</p></li>
        </ul>
        <div style="clear:both"></div>
    </div>
</div>

CSS

body {
background:...