<div class="blend">
  <blockquote class="red">“Attack design doldrums with stylistic souplesse”</blockquote>
  <blockquote class="yellow">“Fashionable figures break away from the populist peloton”</blockquote>
  <blockquote class="green">“Comprehensive characters for culturally correct creations”</blockquote>

All quotes are taken from House Industries’ introduction of Velo:

html {
  background: #fff;

body {
  height: 100%;

html, body {
  padding: 0;
  margin: 0;
  font-family: "Nocturno Display Medium 4", Georgia;
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;

body {
    background: url(http://unsplash.it/1499/1000);
  background-size: 100%;
  background-size: cover;
  background-repeat: no-repeat;

.blend {
  mix-blend-mode: exclusion;
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 6vw;

.red {
  color: red;

.blue {
  color: blue;

.green {
  color: green;

blockquote {
  margin-bottom: 100px;
  line-height: 1.1;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.