<main>
  <div class="bg">
    <div class="text">
      
      <h1 class="content">Yes He Did</h1>
  
      <div class="flat content">
        <p>That we can tuck in our children at night and know that they are fed and clothed and safe from harm. It is that fundamental belief, it is that fundamental belief, I am my brother's keeper, I am my sister's keeper that makes this country work ...</p>
      </div>
    </div>
  </div>
</main>

.bg {
  filter: sepia(30%);
}

h1 {
  background-color: hsl(0, 0%, 100%);
  mix-blend-mode: screen;
}

// for fun visual styling
// ----------------------

@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans+Condensed:700');


.bg {
  background-image: url("//s3-us-west-2.amazonaws.com/s.cdpn.io/150150/barack-obama-5_copy.jpg");
  background-position: 0% 20%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  
  display: flex;
  flex-direction: column;
}

h1 {
 box-sizing: border-box;
 font-family: 'Open Sans Condensed', sans-serif;
 font-size: calc(5rem + 9.25vw);
 font-weight: 700;
 letter-spacing: -0.25rem;
 line-height: .9;
 margin: 0;
 text-align: right;
 text-transform: uppercase;
}
  
.content { 
  box-sizing: border-box;
  padding: 0 1rem 1rem;
  width: 40vw;
  
  @media (min-width: 40em) {
    padding-left: 2rem;
    padding-right: 2rem;
    width: 26vw;  
  }
}

.text {
  height: 100vh;
  width: auto;
}

.flat {
  background-color: white;
  color: hsl(300, 15%, 30%);
  
  p {
    margin: auto 0;
    padding: 0;
  }
}

main {
    font-family: "Merriweather", Arial Black, sans-serif;
  font-size: calc(.8rem + .15vw); 
  min-height: 100vh;
  height: 100%;
  line-height: 1.5;
}
View Compiled
Run Pen

External CSS

  1. https://codepen.io/stacy/pen/xRprJO.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.