<div class="content-wrapper mobile-wrapper">
<blockquote>
<p>“It’s not enough to just sell to you today, I want to sell to you 20 years from now. When you take care of customers, they’ll be back.” </p>
<cite>- Charles Gray</cite>
</blockquote>
</div> <!--/ content-wrapper mobile-wrapper -->
$brand-yellow: #E5B539;
.content-wrapper{
width: 100%;
max-width: 1024px;
margin: 6em auto;
}
.mobile-wrapper{
@media only screen and (max-width: 865px) {
padding-left: 2%;
padding-right: 2%;
}
}
blockquote{
border: 3px solid $brand-yellow;
margin: 0 auto;
padding-right: 0;
padding-left: 20px;
max-width: 636px;
position: relative;
p{
font-family: Helvetica, Arial, Sans-Serif;
font-size: 26px;
font-weight: 700;
padding: 0 34px;
}
&:before{
content: '';
display: block;
position: absolute;
width: 96%;
top: -3px;
left: 0;
border: 3px solid white;
position: inherit;
}
&:after{
content: '';
display: block;
position: absolute;
width: 96%;
bottom: -3px;
left: 0;
border: 3px solid white;
position: inherit;
}
cite{
display: block;
text-align: right;
padding-right: 7%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.