<div class="profile"></div>
<article>
  <header>
    <h1>
      <div class="headline-1">
        Ansel
      </div>
      <div class="headline-2">
        Adams
      </div>
    </h1>
    <p class="subheading">
      The Role of the Artist in the Environmental Movement
    </p>
  </header>
  <hr />
  <section>
    <p>
      Praesent orci ligula, lacinia eu viverra at, semper id purus. Nulla vel condimentum orci. Donec rutrum sed nulla a sollicitudin. Curabitur nec nisi libero. Proin justo lorem, dignissim sit amet tortor id, sagittis lobortis tellus. Aenean imperdiet ipsum nisl. Maecenas egestas eros ut tincidunt pretium. Ut velit nunc, sagittis sed cursus et, vestibulum et nunc. Phasellus dignissim metus vitae lacinia condimentum. Integer consequat id ex non pellentesque. Mauris sit amet sagittis dolor, mollis egestas metus. Vestibulum ac varius tortor, eu pretium urna. Integer eu fermentum tellus. Aliquam vel auctor quam, eu fermentum metus. Nunc ornare placerat facilisis.
    </p>
    <img alt="" src="https://assets.codepen.io/406785/aa1.jpg?format=auto" />
    <p>
      Donec pellentesque nunc sit amet urna dignissim pretium. Aliquam eu mi ut mi dictum consequat nec mollis purus. Curabitur commodo mauris erat, sed sodales ligula rutrum in. Suspendisse auctor purus ac quam dapibus euismod. Nullam scelerisque orci vitae erat convallis, dictum varius nisl rhoncus. Pellentesque gravida enim ut libero semper pharetra. Etiam tristique cursus metus euismod bibendum. Donec consequat massa et consequat ornare. Integer fringilla tempus dignissim.
    </p>
    <blockquote>You don't take a photograph, you make it.</blockquote>
    <p>
      Suspendisse ullamcorper pretium risus, vel consequat quam feugiat vitae. Etiam ipsum magna, venenatis eget tempor eget, molestie a velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ut risus et magna sollicitudin semper at ut dolor. Nulla facilisi. Cras molestie tellus nibh, id ultrices turpis volutpat in. Morbi laoreet interdum velit ac consequat. Nunc ac nisi quam. Donec volutpat eleifend enim, eu ornare sem pharetra sed. Vestibulum euismod ut neque vitae porta. Donec lectus nisl, iaculis et aliquam dignissim, viverra sit amet enim. Nullam tempus maximus convallis. Suspendisse nec pulvinar sapien, eget vestibulum elit.
    </p>
    <p>
      Sed felis odio, commodo nec venenatis congue, euismod in neque. Proin ut efficitur mauris. Phasellus dolor sem, consequat eleifend vestibulum sed, scelerisque vel tellus. Quisque id ex eget tellus ultricies ornare. Cras nec convallis neque. Integer imperdiet, nulla sit amet mollis condimentum, ipsum sem placerat massa, ac placerat nulla sapien sed sem. Maecenas risus dui, porttitor nec imperdiet iaculis, hendrerit sit amet urna. Aliquam elit orci, tempus vitae leo ac, consectetur vulputate arcu. Ut sollicitudin felis id ipsum gravida finibus. Curabitur eu luctus mauris, nec tempor orci. Vivamus egestas massa eget laoreet congue. Phasellus nec nisl quis justo tincidunt convallis et quis leo.
    </p>
    <img alt="Tank" src="https://assets.codepen.io/406785/aa2.jpg?format=auto" />
    <p>
      Etiam non felis velit. Curabitur in suscipit ipsum, non convallis enim. Maecenas malesuada dapibus magna, eget gravida purus molestie a. Nulla ut quam semper lorem feugiat ultricies quis et velit. Aliquam elit orci, tempus vitae leo ac, consectetur vulputate arcu. Vivamus feugiat ante urna, ac lobortis nisi cursus in.
    </p>
    <p>
      Pellentesque enim mauris, gravida eget placerat lacinia, iaculis id diam. Nunc semper libero eget nunc facilisis lobortis.
    </p>  
  </section>
</article>

html {
  font: 400 1em/1.33 "Times New Roman";
  background-color: #191919;
}

body {
  padding-bottom: 3em;
}

.profile {
  background: url("https://assets.codepen.io/406785/Ansel_Adams_and_camera.jpg?format=auto") center 30%;
  box-shadow: inset 0 0 5em 1em #000;
  height: 50vh;
  background-size: cover;
}

.profile {
  width: 50%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: auto;
}

hr {
  overflow: visible;
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}

hr:after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: #cccccc;
}

article {
  color: #ccc;
}

article {
  margin-left: 50%;
  position: relative;
  max-width: 66em;
}

header {
  text-align: center;
  padding: 0 2em;
}

h1 {
  text-transform: uppercase;
  font-weight: 400;

  .headline-1,
  .headline-2 {
    line-height: 1;
  }

  .headline-1 {
    font-size: 10.5vw;
  }

  .headline-2 {
    font-size: 8vw;
  }
}

.subheading {
  color: #ccc;
  font-size: 1.5625em;
  max-width: 25em;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 1.5em;
}

section {
  column-width: 14em;
  column-gap: 1.33em;
  padding: 0 3em;
    
  p:first-of-type:first-letter {
  float: left;
  font-size: 7em;
  line-height: 1;
  margin-top: -0.2em;
  margin-bottom: -0.2em;
  margin-right: 0.1em;
  }
}

img {
  max-width: 100%;
  margin-bottom: 1.33em;
  vertical-align: middle;
}

blockquote {
  border-left: 0.5em solid #ccc;
  font-size: 2em;
  padding: 0.5em;
  line-height: 1.5;
  margin-left: 0;
  margin-right: 0;
  position: absolute;
  right: 100%;
  top: 70vh;
  width: 9em;
  background: #191919;

  &::before,
  &::after {
    color: #ccc;
    font-size: 1.25em;
    line-height: 0;
  }

  &::before {
    content: open-quote;
  }

  &::after {
    content: close-quote;
  }
}