Fablelane community front page

by ffMathy

HTML

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

<body>
    
    <ul id="menu">
           
        <li>
            <a href="#">Education</a>
        </li>
        
        <div class="separator"></div>
        
        <li>
            <a href="#">Sign in</a>
        </li>
        
        <li>
            <a href="#">Create profile</a>
        </li>
    
    </ul>
    
    <div id="content">
        
        <div id="featured" class="long region">
            
            <div class="title">
                 Jump right into redefined reading
            </div>
            
            <div class="blocks">
            
                <div class="block">
                    <div class="rating">
                        4057
                    </div>
                    <div class="title">
                        The witch in the woods
                    </div>
                    <div class="difficulty">
                        Easy
                    </div>
                    <div class="readTime">
                        6h 15m
                    </div>
                    <div class="conditionIndex">
                        4.7
                    </div>
                </div>
                
                <div class="block">
                    <div class="rating">
                        305
                    </div>
                    <div class="title">
                        The red room
                    </div>
                    <div class="difficulty">
                        Hard
                    </div>
                    <div class="readTime">
                        1h 30m
                    </div>
                    <div class="conditionIndex">
                        8.2
                    </div>
                </div>
                
                <div class="block">
                    <div class="rating">
                        122
...

CSS

* {
    margin: 0;
    padding: 0;
}

.clear {
    clear: both;
}

#content {
    margin-left: auto;
    margin-top: 100px;
    margin-right: auto;
    width: 1200px;
}

#menu {
    list-style: none;
    height: 80px;
    width: 100%;
}

#menu .separator {
    width: 1px;
    height: 100%;
    float: right;
    background-color: #00b4ff;
    margin-right: 50px;
    margin-left: -15px;
}

#menu li {
    float: right;
    margin-top: 30px;
    margin-right: 55px;
    margin-left: -10px;
}

#menu li a {
    font-family: 'Cuprum';
    text-decoration: none;
    font-size: 24px;
    color: #00b4ff;
}

.region.long {
    float: none;
    width: 100%;
}

.region.short {
    width: 575px;
}

.region:first-child > .title {
    font-family: 'Cuprum';
    font-size: 48px;
    color: #16ef00;
    font-weight: 100;
    padding-bottom: 10px;
    border-bottom: 1px solid #b7fab0;
    margin-bottom: 30px;
}

.region > .title {
    font-family: 'Cuprum';
    font-size: 36px;
    color: #00c0ff;
    font-weight: 100;
    padding-bottom: 10px;
    border-bottom: 1px solid #b0ebff;
    margin-bottom: 30px;
    margin-top: 70px;
}

.region .blocks {
    margin: -10px -10px -10px -10px;
}

.region .blocks > .block {
    float: left;
    padding: 20px 20px 20px 20px;
    background-color: #fefefe;
    border: 1px solid #dedede;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.08);
    margin: 10px 10px 10px 10px;
    width: 243px;
}

.region .blocks > .block > .rating {
    font-size: 48px;
    color: #4e4e4e;
    font-family: 'Cuprum';
    padding-left: 50px;
    background-image: url('http://www.dummyimage.com/44x42/000/fff');
    background-repeat: no-repeat;
    line-height: 47px;
}

.region .blocks > .block > .title {
    font-size: 24px;
    color: #00c0ff;
    font-family: 'Cuprum';
    margin-top: 10px;
}

.region .blocks > .block > .conditionIndex {
    margin-right: 0px;
}

.region .blocks > .block > .difficulty, .region .blocks > .block > .readTime, .region .blocks > .block >...