<!-- Hidden Content -->
<a id="Page1"></a>
<a id="Page2"></a>
<a id="Page3"></a>
<!-- 
End Hidden Content
Start NavBar
-->
<nav class="NavigationLayer" id="Navigation">
  <a href="#Page1" id="callOne">Page One</a>
  <a href="#Page2" id="callTwo">Page Two</a>
  <a href="#Page3" id="callThree">Page Three</a>
</nav>

<main class="WrapperContainer" id="siteContainer">
  <section class="Page1 BaseLayers" id="PageOne">
    <i>Page 1</i>
  </section>
  <section class="Page2 BaseLayers" id="PageTwo">
    <i>Page 2</i>
  </section>
  <section class="Page3 BaseLayers" id="PageThree">
    <i>Page 3</i>
  </section>
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* Styling of the Layers */
.WrapperContainer {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.Page1 {
  background-color: darkblue;
  color:#FFF;
  transition: left 0.5s cubic-bezier(.25,0.1,.25,1);
}
.Page2 {
  background-color: darkorange;
  left: 100%;
  transition: left 0.5s cubic-bezier(.25,0.1,.25,1);
}
.Page3 {
  background-color: darkgreen;
  left: 100%;
  transition: left 0.5s cubic-bezier(.25,0.1,.25,1);
}

/* General Styling */
.NavigationLayer {
  height: 5%;
  border-bottom: 2px solid azure;
}
nav {
  position: fixed;
  z-index: 4;
  width: 100%;
}

a[id="Page1"],
a[id="Page2"],
a[id="Page3"]{
  display: none;
}

/* Common Styles */
.BaseLayers {
  width: 100%;
  height: 100%;
  position: absolute;
  padding-top: 2.5%;
}

a[id="Page1"]:target ~ main > section#PageOne,
a[id="Page2"]:target ~ main > section#PageTwo,
a[id="Page3"]:target ~ main > section#PageThree{
  left: 0;
}
a{
  color: white;
}
a:hover{
  color: teal;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.