<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>
</div>
<!--
All quotes are taken from House Industries’ introduction of Velo:
http://houseindustries.cmail1.com/t/ViewEmail/y/68885BCE0F413AE5/B9C37F14E9781D9EA7F290B8E8FDC6A0
-->
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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.