Testimonial

by AaronLayton

HTML

<div style="width:945px;margin-top:100px;margin:0 auto;">
    
    <div class="testimonial-widget clearfix">
        
        <div class="testimonial-widget__feature-image">
            <img src="http://beta.remarkable.net/wp-content/uploads/2014/03/dude.png" alt="Ben Brown" />
        </div>
        
        <div class="testimonial-widget__quote">
            <span class="testimonial-widget__quote-image"></span>
            Remarkable certainly live up to their name with a very agile and adaptable approach and first class support. Our sales have quadrupled in the first 12 months!
            <blockquote class="large">Sales quadrupled in 12 months!!</blockquote>
            
            <div class="testimonial-widget__author">
                <div class="testimonial-widget__author-name">
                    Ben Brown
                </div>
                <div class="testimonial-widget__author-position">
                    Development Director
                </div>
            </div>
        </div>
                
    </div>
    
</div>

CSS

.testimonial-widget {}

.testimonial-widget__feature-image {
    float:left;
    text-align:center;
    min-width:360px;
}
.testimonial-widget__feature-image img {
    max-width:100%;
}

.testimonial-widget__quote {
    position:relative;
}
.testimonial-widget__quote-image {
    background:url(http://beta.remarkable.net/wp-content/plugins/testimonial-module/img/quote-image.png) top left no-repeat;    
    
    width:115px;
    height:106px;
    
    position:absolute;
    top:-55px;
    left:-80px;
    z-index:-1;
}
.testimonial-widget__quote {
    margin-left:360px;
    margin-top:115px;
    
    color:#333;
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:20px;
    line-height:33px;
}

.testimonial-widget__author {
    font-size:16px;
    line-height:22px;
    margin-top:20px;
    text-transform:uppercase;
}
.testimonial-widget__author-name {}
.testimonial-widget__author-position {
    color:#777;
}






@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v7/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v7/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v7/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v7/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}