<h1>What people are saying about us</h1>
<div class="wrapper">
  <div class="masonry js-masonry"  data-masonry-options='{ "columnWidth": 320 }'>
    <div class="item">
      <h2 class="author">J. Doe</h2>
      <span class="mark"><i class="fa fa-quote-left"></i></span>
      <div class="quote">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
    </div>
    <div class="item">
      <h2 class="author">Dr. B. Clever</h2>
      <span class="mark"><i class="fa fa-quote-left"></i></span>
      <div class="quote">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        <p><strong>Lorem ipsum dolor sit amet</strong>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
    </div>
    <div class="item">
      <h2 class="author">B. A. Ware</h2>
      <span class="mark"><i class="fa fa-quote-left"></i></span>
      <div class="quote">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        <p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</strong> Aenean massa.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
      </div>
    </div>
    <div class="item">
      <h2 class="author">C. Senor</h2>
      <span class="mark"><i class="fa fa-quote-left"></i></span>
      <div class="quote">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        <p><strong>Lorem ipsum dolor sit amet</strong>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
    </div>
    <div class="item">
      <h2 class="author">P. Brain</h2>
      <span class="mark"><i class="fa fa-quote-left"></i></span>
      <div class="quote">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        <p><strong>Lorem ipsum dolor sit amet</strong>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
    </div>
    <div class="item">
      <h2 class="author">I. Lasch</h2>
      <span class="mark"><i class="fa fa-quote-left"></i></span>
      <div class="quote">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        <p><strong>Lorem ipsum dolor sit amet</strong>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
    </div>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900);

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
          font-family: 'Titillium Web', sans-serif;
          font-weight: 300;
}

h1 {text-align: center; text-transform: uppercase;}
body { font-family: sans-serif; }
strong { font-weight: 700; }

.wrapper {
  padding-left: 20px;
}

.masonry {
  max-width: 960px;
  margin: 0 auto;
}

.masonry .item {
  width:  300px;
  float: left;
  background: f9f1e5;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}

.author {
    text-align: center;
    text-transform: uppercase;
    background: #ABB45A;
    color: #fff;
    margin-top: 0;
    padding: 1rem 0;
    border-bottom: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.5);
}

.mark {
  position: absolute;
  color: #EF6724;
  font-size: 2rem;
  left: 1rem;
  margin: 0;
  padding: 0;
  line-height: 1.25em;
}

.quote {
  padding-right: 1rem;
  padding-left: 4rem;
  font-style: italic;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://masonry.desandro.com/masonry.pkgd.js