<link href='https://fonts.googleapis.com/css?family=Bitter:400,400italic,700' rel='stylesheet' type='text/css'>

<div class="container">
  <p class="subtitle"><span class="italic">noun.</span> a book into which notable extracts from other works are copied for personal use.</p>

<blockquote><p class ="large">Being disappointed is one thing and being discouraged is something else.
  <span class="name"> ― Tennessee Williams, The Glass Menagerie</span></blockquote>

<blockquote><p class ="large">"Do not spoil what you have by desiring what you have not; remember that what you now have was once among the things you only hoped for."
  <span class="name"> ― Epicurus</span></blockquote>
  <blockquote><p class ="large">“It must be a great disappointment to God if we are not dazzled at least ten times a day.” 
  <span class="name">― Mary Oliver, Blue Horses</span></blockquote>
body {
    background-color: #895DB2;

h1 {
  font-family: "Bitter";
  color: #FFA519;
  font-size: 3em;
  text-align: center;
  margin-bottom: .25em;

.subtitle {
  font-family: "Bitter";
  color: white;
  font-size: 1.5em;
  text-align: center;

.italic {
  font-style: italic;

.container {
    margin: auto;
    width: 60%;
    padding: 10px;

blockquote {
  margin: auto;
  opacity: .4;
  color: #1a1a1a;
	border-top: 6px #FFA519 solid;
	border-bottom: 2px #ccc solid;
	margin: 20px 0;
	background: #dcdcdc;
  box-shadow: .5em .5em #6DCC8E;
  font-family: "Bitter", serif;
  padding: 20px;
  text-align: center;
  line-spacing: 5em;
    quotes: "\201C""\201D""\2018""\2019";

blockquote:hover {
  margin: auto;
  opacity: 1;

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;

blockquote p {
  display: inline;

.name {
  font-weight: bold;
  font-size: .75em;
  display: block;

.large {
	font-size: 1.5em;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.