Event box

by ajrdesign

HTML

<div class="event_container">
    <div class="event_date">
        <div class="month">
            <h3>October</h3>
        </div>
        <div class="day">
            <h2>14-16</h2>  
        </div>
        <div class="year">        
            <p>2012</p>  
        </div>            
    </div>
    <div class="event_description">
        <div class="copy">
        <h2>Real-Time Project Tracking</h2>
        <p>Chris Jervey and DPR present... That being said- I do not anticipate this page going live before IRC, so that copy wouldn’t actually be part of the first iteration of the events page. Also, I don’t have full descriptions of the webinars yet, so those aren’t ready to go live. So what I have done is put all approved copy in black, and all ‘ghost’ copy in red. The actual booth photo for this page can be found here: U:\jsterling\Photos\Events Page</p>
            <ul>
                <li>LOCATION: Web</li>
                <li>REG: Web</li>
            </ul>
        </div>
    </div>
</div>

CSS

body {
    font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    letter-spacing: 0.07em
}

.event_container {
margin-left:auto;
margin-right:auto;    
width: 80%;
}

.event_date {
    float:left;
    background-color:#d1d1d1;
    height:100%;
    width:25%;
    min-width:140px;
}

.event_date h3, .event_date h2, .event_date p {
    text-align:center;
    color:white;
    text-shadow: -1px -1px 0px #999;
}

.event_date .month {
    background-color:#b7b7b7;
    font-size:18px;
    padding: 6px 0;
}

.event_date .day {
    font-size:40px;
    padding: 12px 0;
    
}

.event_date .year {
    font-size:14px;
    background-color:#b7b7b7;
    padding: 4px 0;
    }

.event_description {
    float:left;
    height:100%;
    width:74%
    
}

.copy {
padding: 0 0 0 13px;
    width:90%;
}

.event_description h2 {
    font-size:24px;
    
}

.event_description p {
    font-size:14px;
    }

.event_description ul {
    padding: 10px 0 0 25px;
}