Abbey Dash

List of runners for the blog post

by will

HTML

<link rel="stylesheet" href="http://engageinteractive.co.uk/assets/engage/css/site.css">
<div class="content_wrapper">
    
    <div class="post">
        
        <h1>Engage do running&hellip; Sometimes.</h1>
        
        <p>Yes, you read that correctly. On occasion, some of us internet geeks like to put our trainers on and run vast distances for fun. Or perhaps just so that we can eat even more cake than usual.</p>

        <p>But today I’m talking more specifically about the <a href="http://www.ageuk.org.uk/get-involved/events-and-challenges/leeds-abbey-dash/">Abbey Dash</a> - an annual event held in Leeds city center, now in it’s 29th year - where 1000s of runners take to the streets and run 10k to raise money for Age UK.</p>

        <p>Last November, Myself, Dave, Alex, Tom and Jamie (although we didn’t know Jamie at the time) all lined up on a crisp but sunny Saturday morning to run from Wellington street in Leeds city centre to Kirkstall Abbey and back. The event attracts some of the best runners in the UK as it is well known to be a great opportunity to claim a new personal best as the route is mostly flat, on road and therefore fast.</p>

        <p>This year, the runners amongst us have coaxed a few more from the office into signing up; as a result there is a grand total of 8 Engagers frantically attempting to get in shape. We’ve all registered on the Age UK site so if you feel like donating to a good cause take a look at the links below and sponsor our efforts.</p>
        
        <div class="runners">
            
            <div class="sponsor_us">
                
                <a href="http://www.justgiving.com/engageinteractive" class="button">Click here to sponsor us!</a>
                
            </div>
            
            <h2>This years brave runners</h2>
            
            <div class="runners_left">
                
                <div class="runner dave">
                    <h3>Dave</h3>
                    <span...

SCSS

.runners {
    width: 670px;
    
    .sponsor_us {
        margin: 40px 0;
        clear: both;
        text-align: center;
    }
    
    .button {
        padding: 10px 20px;
        font-size: 20px;
        font-weight: bold;
    }
}

.runners_left,
.runners_right {
    float: left;
    width: 320px;
}

.runners_left {
    margin-right: 30px;
}

.runner {
    position: relative;
    width: 195px;
    margin: 30px 0;
    padding: 20px 20px 20px 105px;
    border-radius: 4px;
    box-shadow: 0 3px #ddd;
    background: #FFF;
    
    &.new:before {
        content: "NEW";
        display: block;
        position: absolute;
        top: 92px; left: 38px;
        z-index: 10;
        width: 40px;
        height: 40px;
        border: solid 3px #FFF;
        border-radius: 50%;
        background: #d71501;
        text-align: center;
        line-height: 40px;
        color: #FFF;
        font-size: 13px;
        font-weight: bold;
            text-shadow: 0 1px darken(#d71501, 15%);
        -webkit-transform: rotate(-14deg);
    }
    
    span {
        display: block;
        position: absolute;
        top: 20px; left: -15px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-shadow: 0 1px 6px rgba(#000, .15);
    }
    
    ul {
        padding-bottom: 10px;
        margin: 0 0 10px;
        border-bottom: dotted 1px #ddd;
    }
    
    li {
        text-align: right;
        
        strong {
            float: left;
        }
    }
    
    p {
        margin-bottom: 0;
        
        strong {
            display: block;
        }
    }
}

.will span {
    background: url(http://engageinteractive.co.uk/assets/global/php/image.php?src=/assets/engage/cms/raw/f5c9d3807774adf111f87d3eacba4093.jpg&w=100&h=100&zc=3&q=96);
}

.dave span {
    background: url(http://engageinteractive.co.uk/assets/global/php/image.php?src=/assets/engage/cms/raw/7d5c8b84b2dda4471a963763dd9772d8.jpg&w=100&h=100&zc=3&q=96);
}

.jamie span {
   ...