<head>
  <link href='https://fonts.googleapis.com/css?family=Ultra|Stint+Ultra+Expanded|Muli:300' rel='stylesheet' type='text/css'>
</head>

<body>
  <div id="page-wrapper">
    <div id="page1" class="page row">
      <div class="col-md-4 left">
        <h1>Page</h1><h2>One</h2>
      </div>
      <div class="col-md-8 right">
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
        <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
      </div>
      <div class="pagenav row">
        <div class="btn" onclick="nextpage(1);">Next</div>
      </div>
    </div>
    <div id="page2" class="page" style="display:none;">
      <div class="col-md-4 left">
        <h1>Page</h1><h2>Two</h2>
      </div>
      <div class="col-md-8 right">
        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
        <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
      </div>
      <div class="pagenav">
        <div class="btn" onclick="prevpage(2)">Previous</div>
        &nbsp;&nbsp;&nbsp;
        <div class="btn" onclick="nextpage(2)">Next</div>
      </div>
    </div>
    <div id="page3" class="page" style="display:none;">
      <div class="col-md-4 left">
        <h1>Page</h1><h2>Three</h2>
      </div>
      <div class="col-md-8 right">
        <p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
        <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p>
        <p>But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.</p>
      </div>
      <div class="pagenav">
        <div class="btn" onclick="prevpage(3)">Previous</div>
      </div>
    </div>
  </div>
</body>
body {
  font-family: 'Muli';
  font-size:18px;
  background-color:#fafafa;
}

#page-wrapper {
  padding:7%;
}

h1 {
  font-family: Stint Ultra Expanded;
  font-size: 50px;
  line-height:0px;
}

h2 {
  font-family: Ultra;
  font-size: 80px;
  line-height:60px;
}

.page{
  min-width:200px;
  margin:0 auto;
  border:1px solid;
  padding:4%;
}

.left {
  text-align:right;
  vertical-align:top;
}

.right {
  border-left:1px solid black;
}

.pagenav {
  text-align:center;
}

.btn {
  display:inline-block;
  border:1px solid black;
  padding:10px;
  width: 110px;
  font-size:20px;
  margin-top:30px;
}

.btn:hover {
  cursor:pointer;
  font-weight:bold;
}

#page1 {
  background-color:#CEDCB4;
}
#page1 .btn {
  background-color:#A7B983;
}
#page1 .btn:hover {
  background-color:#ECF3DE;
}

#page2 {
  background-color:#7E8D98;
}
#page2 .btn {
  background-color:#5D7282;
}
#page2 .btn:hover {
  background-color:#A9B1B8;
}

#page3 {
  background-color:#95829D;
}
#page3 .btn {
  background-color:#7A6086;
}
#page3 .btn:hover {
  background-color:#B8ACBC;
}
function nextpage(pagenum) {
  $("#page"+pagenum).slideUp("slow");
  var nextpagenum = pagenum+1;
	$("#page"+nextpagenum).slideDown("slow");
}

function prevpage(pagenum) {
  $("#page"+pagenum).slideUp("slow");
  var prevpagenum = pagenum-1;
	$("#page"+prevpagenum).slideDown("slow");
}
Rerun