Foundation 5 Authorbox

by Charles Butler

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic"></script>
<div class="author-box clearfix">
    <img class="author" src="http://surface.surgd.com/fiddle/profile-sm.jpg" alt="OptimaHost" />
    
<h4>About Alexandria DiCaprio</h4>

    <p>Alexandria has been writting for OptimaHost for 7 years now. She is an avid web developer and designer with a passion for css. She also is a co-founder for a startup company called AlDorf.</p>
    <hr/>
    <div class="clearfix"></div>
    <div class="author-location">Naples, Italy</div>
    <div class="right">
        <ul class="inline-list social">
            <li><a href="#"><div class="circle-icon small twitter"><i class="fa fa-twitter"></i></div></a>

            </li>
            <li><a href="#"><div class="circle-icon small facebook"><i class="fa fa-facebook"></i></div></a>

            </li>
            <li><a href="#"><div class="circle-icon small linkedin"><i class="fa fa-linkedin"></i></div></a>

            </li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600, 600italic);
 body {
    padding: 10px;
    font-family:"Open Sans", Arial, sans-serif;
    background: #EFEFEF;
    margin: 0 auto;
    overflow: hidden;
}
/* Panels */
 .author-box {
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: #efefef;
    border-bottom-color: #53BF6B;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    background: #FFF;
    color: #333333;
    box-shadow: 1px 1px 2px 0px rgb(208, 208, 208);
    border-color: rgb(228, 228, 228) rgb(190, 190, 189) rgb(190, 190, 189) rgb(228, 228, 228);
}
.author-box:before {
    content:"";
    position: absolute;
    left: 40px;
    top: -2px;
    background: #53BF6B;
    width: 80px;
    height: 3px;
    box-shadow: 1px 1px 2px 0px rgb(208, 208, 208);
    border-color: rgb(228, 228, 228) rgb(190, 190, 189) rgb(190, 190, 189) rgb(228, 228, 228);
}
.author-box:after {
    content:"";
    position: absolute;
    right: 0;
    bottom: -1px;
    background: #53BF6B;
    width: 100%;
    height: 1px;
}
.author-box h1, .author-box h2, .author-box h3, .author-box h4, .author-box h5, .author-box h6 {
    line-height: 1;
    margin-bottom: 0.625rem;
    color: #222;
}
.author-box h1.subheader, .author-box h2.subheader, .author-box h3.subheader, .author-box h4.subheader, .author-box h5.subheader, .author-box h6.subheader {
    line-height: 1.4;
}
.author-box p {
    font-size: 0.8rem;
}
img.author {
    float: left;
    margin: 5px 20px 15px 0px;
    border-radius: 1000px;
}
.author-box .author-location {
    position: relative;
    float: left;
    font-family:"Open Sans", Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 12px;
    text-transform: none;
    line-height: 1;
    font-style: none;
    color: #666;
    margin: 5px 0 0 10px;
}
.author-box .author-location:before {
    font-family:'FontAwesome';
    content:"\f041";
    color: #53BF6B;
    font-size: 14px;
   ...

JavaScript

$(document).foundation();