<section class="hero">
  <header id="header">
    <a id="logo" href="#">logo</a>
    <nav>
      <a id="menu-icon">&#8801;</a>
    </nav>
  </header>
  <header class="hero-header">
    <h1 class="hero-title">The title of this hero module</h1>
  </header>
  <footer class="hero-footer">
    <a class="button button-primary" href="#">button one</a>
    <a class="button" href="#">button two</a>
  </footer>
</section>
<article>
  <h2>Some additional content</h2>
  <p>The rest of the page content continues below the hero. You can use the hero at the top of your page, e.g. the home page. A hero is great to display a high quality picture together with tasty title.</p>
  <p>Ad donec tincidunt torquent ultricies convallis sodales faucibus magna, fringilla lorem blandit sollicitudin donec faucibus curae orci molestie, et proin curae aliquet venenatis ligula amet vivamus orci varius arcu.</p>
  <p>Laoreet fusce condimentum venenatis quisque imperdiet ornare cras faucibus convallis, pharetra habitasse elementum ut bibendum per sociosqu phasellus etiam, velit faucibus integer torquent leo elementum maecenas netus.</p>
</article>

// general

body {
  font-family: 'PT Sans Caption',"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  font-size: 3vh;
}

// header

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#logo {
  text-decoration: none;
  color: white;
  font-size: 5vh;
  font-weight: bold;
}
  
#menu-icon {
  font-family: Geneva, sans-serif;
  font-size: 6vh;
}
  
// hero

.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding: 1em;
  box-sizing: border-box;
  color: white;
  background: url(https://images.unsplash.com/photo-1500417148159-68083bd7333a) center center no-repeat;
  background-size: cover;
}

.hero-title {
  max-width: 16em;
  margin: 0;
  font-size: 12vh;
  font-weight: bold;
  line-height: .9;
}
  
  @media only screen and (min-width: 32em) { .hero-title { font-size: 16vh; } } 

.hero-footer {
  display: flex;
  margin-bottom: 1em;
}

.button {
  padding: .5em .67em;
  color: white;
  text-decoration: none;
  border: .1em solid white;

}
  
  .button-primary {
    color: black;
    background-color: white;
  }
  
// article

article {
  max-width: 36em;
  margin: 0 auto;
  padding: 1em;
}