<a href="#main-content" class="skip-link">Skip navigation</a>
<nav>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</nav>
<main id="main-content">I'm the main content</main>
<footer>
  <a href="#">Privacy</a>
</footer>
html {
  font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
}
.skip-link {
  background: #da0060;
  color: #fff;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translate(-50%, -200%);
  transition: transform 0.3s;
}
.skip-link:focus {
  transform: translate(-50%, 0);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.