<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;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.