<header class="hero">
  <div class="center-content">
    <h1>An Article Title</h1>
    <h3>A longer subtitle but still important</h3>
    <a href="#" class="button">Some Action Here</a>
  </div>
</header>

.hero
  background-image: url('https://unsplash.it/1500?random')
  background-size: cover
  background-position: center
  width: 100wh
  height: 100vh
  display: flex

.center-content
  width: 400px
  display: flex
  flex-direction: column
  align-items: center
  margin: auto
  
  & h1, h3
    color: white
    line-height: 1
  
  & h1
    text-transform: uppercase
    font-size: 3em
    margin-bottom: 0
    text-align: center
    
  & h3
    margin-bottom: 40px
    font-size: 1.5em
    font-weight: normal

.button
  text-transform: uppercase
  color: white
  padding: 20px
  border: 1px solid white
  text-decoration: none  
  
  &:hover
    background-color: rgba(255, 255, 255, 0.1)
    border-color: rgba(255, 255, 255, 0.7)
    color: white