<div id="fullpage">
  <div class="section">
    <div class="container">
      <a href="https://www.facebook.com/profilepicframes/?selected_overlay_id=809750319205329" target="_blank"><strong>Go purple</strong> on October 18!
      </a>
    </div>
  </div>
</div>
@import url("https://fonts.googleapis.com/css?family=Krub:400,700");

:root {
  --main-white-color: white;
  --main-black-color: black;
}

* {
  padding: 0;
  margin: 0;
  color: var(--main-white-color);
}

body {
  font: 28px/1.5 "Krub", sans-serif;
}

.section:last-child {
  background: #7b2987 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/spirit.jpg) no-repeat fixed center / cover;
  background-blend-mode: luminosity;
}

.section .container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section a {
  font-size: 2.5rem;
}

.section a:hover {
  text-decoration: none;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.