<link href='https://fonts.googleapis.com/css?family=Josefin+Sans|Abril+Fatface' rel='stylesheet' type='text/css'>

  <blockquote>
    <p>
      Minimalists always act so superior, like “Oh, we’re not hoarding.” That’s bullshit, they’re just hoarding space.</p>
    <footer>
      <cite><a href="https://www.brucelawson.co.uk/2013/on-citing-quotations-again/">Douglas Coupland</a></cite>
    </footer>
    <div></div>
  </blockquote>

body {
  background: #003F5B;
}

blockquote {
  width: 640px;
  height: 800px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 100px;
}

div {
  background: #000;
  width: 500px;
  height: 700px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -660px;
}

blockquote p {
  font: 4em 'Abril Fatface', cursive;
  padding: 20px;
  color: #FFF;
}

cite a {
  font: normal 1.2em 'Josefin Sans', sans-serif;
  text-decoration: none;
  color: #000;
  padding: 10px;
  border-top: solid 5px #FFF;
  color: #FFF;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js