HSC 2011 - Event Block

The html/css layout for the event blocks of the 2011 templates.

by Travis

HTML

<div class="Event">
    <div class="EventDate">
        <div class="EventMonth">April</div>
        <div class="EventDay">11</div>
    </div>
    <div class="EventText">This is a small event description</div>
</div>

CSS

/* Style 1 
.Event {width:201px; border-top:1px dashed #000; border-bottom:1px dashed #000; overflow:hidden;}
.EventDate {width:40px; padding:5px; border-right:1px solid #000; float:left;}
.EventMonth {font-size:14px; text-transform:uppercase; text-align:center;}
.EventDay {font-size:18px; text-align:center;}
.EventText {width:140px; padding:5px; font-size:12px; float:left;}
*/

/* Style 2 */
.Event {width:200px;}
.EventDate {width:200px; text-transform:uppercase; display:block;}
.EventMonth {color:#666; display:inline;}
.EventDay {display:inline;}
.EventText {}