<section class="hero uk-position-relative">
  <div class="uk-background-cover uk-background-norepeat uk-position-cover uk-hidden@m" style="background-image: url(https://assets.codepen.io/162656/bg-hero-mobile.jpg)"></div>
  <div class="uk-background-cover uk-background-norepeat uk-cover uk-position-cover uk-visible@m uk-hidden@l" style="background-image: url(https://assets.codepen.io/162656/bg-hero-tablet.jpg)"></div>
  <div class="uk-background-cover uk-background-norepeat uk-cover uk-position-cover uk-visible@l" style="background-image: url(https://assets.codepen.io/162656/bg-hero-desk.jpg)"></div>
  <div class="uk-container uk-container-small">
    <div class="uk-background-muted uk-padding">
      <h1>Heading</h1>
      <p class="uk-h3">Vivamus finibus lectus arcu. Nulla at sapien sed nisl tincidunt dictum sed vitae sapien. Aenean egestas lectus sed enim consectetur finibus. In in nunc in ligula cursus luctus. Nulla facilisi.</p>
    </div>
  </div>
</section>
<section class="uk-padding-large">
  <div class="uk-container uk-container-small">
    <h2 class="uk-h1">Another Heading</h2>
    <p class="uk-h4"> Quisque semper ante turpis, sed mollis libero aliquet eu. Mauris eget consectetur neque. Nam id feugiat tellus. Sed tempus lorem porta nulla finibus, id dapibus ligula aliquet. Morbi in gravida nulla. Fusce pharetra dui ligula, eget condimentum urna venenatis vel.</p>
    <p class="uk-h4">Etiam varius sagittis arcu vitae vulputate. Praesent quis nibh sed dolor imperdiet porta. Pellentesque sed est in ante volutpat aliquam quis nec ligula. Donec lorem elit, lobortis at mi a, pellentesque mattis augue.</p>
    <p class="uk-h4">Aenean vulputate purus sit amet odio mattis tincidunt. Praesent ornare est nec lacus dapibus cursus. Vivamus finibus lectus arcu. Nulla at sapien sed nisl tincidunt dictum sed vitae sapien. Aenean egestas lectus sed enim consectetur finibus. In in nunc in ligula cursus luctus. Nulla facilisi.</p>
  </div>
</section>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

body {
  background: #efefef;
}

.uk-background-muted {
  background: rgba(248, 248, 248, 0.75);
  backdrop-filter: blur(10px);
}

.hero {
  padding: 20vh 0;
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  background: #fff;
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}