<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
This Pen doesn't use any external CSS resources.