Block with Quote

Block/widget/card with quote

Below you can find an example of responsive content block with quote. You can use it together with any HTML/CSS Framework, like Twitter Bootstrap, Zurb Foundation, Skeleton and others.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="qt-block">
<div class="block-content">
<blockquote class="quote">
<p>One machine can do the work of fifty ordinary men. No machine can do the work of one extraordinary man.</p>
<cite>—Elbert Hubbard</cite>
</blockquote>
</div>
</div>
</div>
HTML
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Layout */

body {
font-family: 'Montserrat', sans-serif;
background: #f1f1f1;
}

.container {
padding: 0 20px;
max-width: 350px;
margin: 30px auto 0;
}

/* Block Styles */

.qt-block {
border: 1px solid #ddd;
background: #fff;
margin-bottom: 30px;
}

.qt-block .block-content {
padding: 15px 30px 0;
font-size: 15px;
color: #999;
line-height: 23px;
position: relative;
}

.qt-block .quote {
padding-top: 50px;
}

.qt-block .quote:before {
content: '\201C';
font-family: Georgia, serif;
color: #9a9a9a;
font-size: 80px;
line-height: 30px;
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 45px;
}

.qt-block .quote p {
text-align: center;
font-family: georgia;
font-style: italic;
letter-spacing: 0.5px;
margin-bottom: 25px;
font-size: 18px;
line-height: 26px
}

.qt-block .quote cite {
text-align: center;
display: block;
font-weight: bold;
font-style: normal;
border-top: 1px solid #ddd;
color: #333;
margin: 0 -30px;
padding: 10px 0;
}
CSS
Attachments:
Browser support:
           
9+