Post Box

by Charles Butler

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="post-box">
    <div class="post-reply-box">14 <span class="status">replies</span>

    </div> <span class="post-title"><h4><a href="#!">A Guide To Server-Side Analytics and Monitoring</a></h4></span>

    <div class="post-meta"> <span class="post-author"><p>Post by: William Longo</p></span>  <span class="post-date"><p>2 days ago</p></span>

    </div>
    <div class="post-entry">
        <p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997) and, as of December 2012, is a candidate recommendation of the World Wide Web Consortium (W3C).</p>
<a class="button tag">Hosting</a>  <a class="button tag">cPanel</a>  <a class="button tag">Analytics</a>  <a class="button tag">PHP</a> 
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:regular, italic, bold, bolditalic);
 body {
    padding:20px;
}
.post-box {
    float: left;
    width: 100%;
    height: auto;
    padding: 0;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    margin-bottom: 40px;
}
.post-box .post-meta {
    width: 95%;
}
.post-box .post-author {
    position: relative;
    display: inline-block;
    padding: 0;
}
.post-box .post-author p {
    font-family:'Droid Serif', Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    color: #000;
    font-size: 0.7rem;
    line-height: 1.5;
    margin:0;
}
.post-box .post-date {
    position: relative;
    display: inline-block;
    padding: 0;
}
.post-box .post-date p {
    font-family:'Droid Serif', Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    color: #000;
    font-size: 0.7rem;
    line-height: 1.5;
    margin:0;
}
.post-box .post-title {
    position: relative;
    display: block;
    padding: 0;
    margin:0;
}
.post-box .post-title h4 {
    font-size: 22px;
    font-family:'Droid Serif', Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    font-style: italic;
    text-transform: none;
    color: #000;
    line-height: 1.3;
    margin:0;
}
.post-box .post-title a {
    font-size: 22px;
    font-family:'Droid Serif', Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    font-style: italic;
    text-transform: none;
    text-decoration: none;
    color: #000;
    line-height: 1.3;
    margin:0;
}
.post-box .post-entry {
    color: #555;
    padding: 0 7px;
    margin-left: 90px;
    border-bottom: 1px solid #9FC100;
}
.post-box .post-entry p {
    color: #555;
    margin-bottom: 5px;
}
button, .button {
 ...