<header>:

<header>
  <a class="logo" href="#"></a>
</header>

<article>
  <header>
    <h1>Beagles</h1>
    <time>08.12.2014</time>
  </header>
  <p>
    <em></em>
  </p>
</article>

.logo {
  background: left / cover
    url("/shared-assets/images/examples/puppy-header.jpg");
  display: flex;
  height: 120px;
  align-items: center;
  justify-content: center;
  font:
    bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script",
    fantasy;
  color: #ff0083;
  text-shadow: black 2px 2px 0.2rem;
}

header > h1 {
  margin-bottom: 0;
}

header > time {
  font: italic 0.7rem sans-serif;
}

<header>
  <h1></h1>
  <img src="mdn-logo-sm.png" alt="MDN " />
</header>

<article>
  <header>
    <h2></h2>
    <p>
      <time datetime="2017-10-04">2017  10  4 </time> Jane Smith 
    </p>
  </header>
  <p>
    
  </p>
  <p><a href="https://example.com/the-planet-earth/"></a></p>
</article>