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>
@charset "UTF-8";

@import url(',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;
Browser support: