Create a pure HTML/CSS Book with flipping pages-CodePudding

So I'm trying to create a virtual book in HTML5 and CSS3 completely without JS which actually works fine but I don't want it to just look like pieces of paper that you flip over but I want it to look like a real book (at least as real as possible). So I try to show the book cover spine and the normal spine of the book on all pages.

I already tried to make the first page darkblue and bigger which didn't bring the desired effect. I then tried to insert a darkblue border and color the background darkblue accordingly which works on the first (and last) two pages and is also formatted correctly but as soon as I flip the page further, the top border disappears (but the bottom border stays darkblue).

Further, when I try to change the back button from its value right 13px to left 13px, the button then no longer works in Chrome. I also tried to use a whole page as a label, so that as soon as you click on a page, it will flip, so without buttons but that didn't work either.

Also, the back button in Firefox does not work on the pages "Lorem ipsum 7" and "Lorem ipsum 8". As soon as you click it, it displays "Lorem ipsum 2" on the right side instead of flipping back properly. But everything works correctly up to the Lorem ipsum 6 page...

You see I have a few problems that need to be solved. Of course, I also searched the Internet to find help or a solution for a few days, but I could not find any functioning solution.

I hope someone can help me make it look and function more like a real book.

```

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-family: sans-serif;
background: lightblue;
}

input {
display: none;
}
img {
width: 100%;
margin-top:15px;
}
h1 {
font-size: 26px;
}
h2 {
margin-top: 65px;
font-size: 22px;
}
.book {
display: flex;
}
#cover {
width: 400px;
height: 550px;
}
.flip-book {
width: 400px;
height: 550px;
position: relative;
perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: center left;
transform-style: preserve-3d;
transition: 0.5s;
color: #000;
}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 1px #f0f0f0;
border-left-style: dashed;
background-color: #fff;
box-sizing: border-box;
padding: 0 13px;
}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
}
.next-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
.back-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
#p1 {
z-index: 5;
}
#p2 {
z-index: 4;
}
#p3 {
z-index: 3;
}
#p4 {
z-index: 2;
}
#p5 {
z-index: 1;
}
#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}
#c4:checked ~ .flip-book #p4 {
transform: rotateY(-180deg);
z-index: 4;
}
#c5:checked ~ .flip-book #p5 {
transform: rotateY(-180deg);
z-index: 5;
}
</style>
</head>
<body>

<div >
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3">
<input type="checkbox" id="c4">
<input type="checkbox" id="c5">

<div id="cover"></div>
<div >

<div  id="p1">
<div  style="border: 5px darkblue; border-top-style: solid;border-left-style: solid;border-bottom-style: solid;">

<h2>Lorem ipsum 1</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c1">Back</label>
</div>
<div  style="height: 560px; width: 405px; background:darkblue; color:white; border: 5px darkblue; border-top-style: solid;border-right-style: solid;border-bottom-style: solid;">
<img src="https://kibls.neocities.org/schachbrettwhite.jpg" alt="Chessboard white">
<h1>Poetry Collection</h1>
<h2>Lorem ipsum book</h2>
<h3>E-book number 1</h3>
<label  for="c1" style="color:white;border:1px solid white;">Open</label>
</div>
</div>

<div  id="p2">
<div >

<h2>Lorem ipsum 3</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c2">Back</label>
</div>
<div >

<h2>Lorem ipsum 2</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c2">Next</label>
</div>
</div>

<div  id="p3">
<div >

<h2>Lorem ipsum 5</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c3">Back</label>
</div>
<div >

<h2>Lorem ipsum 4</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c3">Next</label>
</div>
</div>

<div  id="p4">
<div >

<h2>Lorem ipsum 7</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c4">Back</label>
</div>

<div >

<h2>Lorem ipsum 6</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c4">Next</label>
</div>
</div>

<div  id="p5">
<div  style="color:white; background:darkblue; border: 5px solid darkblue; border-top-style: solid;border-right-style: solid;border-bottom-style: solid;">
End of the book
<label  for="c5" style="color:white;border:1px solid white;">Back</label>
</div>
<div  style="height: 560px; width: 405px; border: 5px darkblue; border-top-style: solid;border-right-style: solid;border-bottom-style: solid;">

<h2>Lorem ipsum 8</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c5">Next</label>
</div>
</div>

</div>
</div>
</body>
</html>

```

CodePudding user response：

So I was able to fix the border problem for you. You had some inconsistencies between your heights, some being 550px and some being 560px in the inline html same with the widths, some being 405 and some 400 I made them all 400. I also removed all of the inline html borders and simply added:

border-top: 5px solid darkblue;
border-right: 5px solid darkblue;
border-bottom: 5px solid darkblue;
border-left: 1px dashed #f0f0f0;

to your .flip in CSS (I also removed the border from .front)

Heres a working example:

EDIT: Removed:

border-top: 5px solid darkblue;
border-right: 5px solid darkblue;
border-bottom: 5px solid darkblue;

So that the pages don't have border on them.

EDIT 2: I found a work around with getting the back buttons working in Firefox. I added this code to your CSS:

#c3:checked ~ .flip-book #p1 {
display: none;
}
#c4:checked ~ .flip-book #p2 {
display: none;
}
#c5:checked ~ .flip-book #p3 {
display: none;
}

Essentially what it does is gets ride of the "non-visible" pages and there for theres no overlapping and transformed checkboxes that cause issues with firefox and chrome.

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-family: sans-serif;
background: lightblue;
}

input {
display: none;
}
img {
width: 100%;
margin-top:15px;
}
h1 {
font-size: 26px;
}
h2 {
margin-top: 65px;
font-size: 22px;
}
.book {
display: flex;
}
#cover {
width: 400px;
height: 550px;
}
.flip-book {
width: 400px;
height: 550px;
position: relative;
perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: center left;
transform-style: preserve-3d;
transition: 0.5s;
color: #000;
border-left: 1px dashed #f0f0f0;
}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
box-sizing: border-box;
padding: 0 13px;

}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
}
.next-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
.back-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
#p1 {
z-index: 5;
}
#p2 {
z-index: 4;
}
#p3 {
z-index: 3;
}
#p4 {
z-index: 2;
}
#p5 {
z-index: 1;
}
#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}
#c4:checked ~ .flip-book #p4 {
transform: rotateY(-180deg);
z-index: 4;
}
#c5:checked ~ .flip-book #p5 {
transform: rotateY(-180deg);
z-index: 5;
}

#c3:checked ~ .flip-book #p1 {
display: none;
}
#c4:checked ~ .flip-book #p2 {
display: none;
}
#c5:checked ~ .flip-book #p3 {
display: none;
}



</style>
</head>
<body>

<div >
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3">
<input type="checkbox" id="c4">
<input type="checkbox" id="c5">

<div id="cover"></div>
<div >

<div  id="p1">
<div  style="">

<h2>Lorem ipsum 1</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c1">Back</label>
</div>
<div  style="height: 550px; width: 400px; background:darkblue; color:white;">
<img src="https://kibls.neocities.org/schachbrettwhite.jpg" alt="Chessboard white">
<h1>Poetry Collection</h1>
<h2>Lorem ipsum book</h2>
<h3>E-book number 1</h3>
<label  for="c1" style="color:white;border:1px solid white;">Open</label>
</div>
</div>

<div  id="p2">
<div >

<h2>Lorem ipsum 3</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c2">Back</label>
</div>
<div >

<h2>Lorem ipsum 2</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c2">Next</label>
</div>
</div>

<div  id="p3">
<div >

<h2>Lorem ipsum 5</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c3">Back</label>
</div>
<div >

<h2>Lorem ipsum 4</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c3">Next</label>
</div>
</div>

<div  id="p4">
<div >

<h2>Lorem ipsum 7</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c4">Back</label>
</div>

<div >

<h2>Lorem ipsum 6</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c4">Next</label>
</div>
</div>

<div  id="p5">
<div  style="color:white; background:darkblue; ">
End of the book
<label  for="c5" style="color:white;border:1px solid white;">Back</label>
</div>
<div  style="height: 550px; width: 400px;">

<h2>Lorem ipsum 8</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c5">Next</label>
</div>
</div>

</div>
</div>
</body>
</html>

EDIT 3: So im assuming you still want the border in the background, just not the pages when turned right? So what I did was add a dummy div with class bb and set it's width and height to the same as the book and set it's z-index to -1 so its now in the background and give it a border only when internal page check boxes are checked, and romove it when the final cover is show.

This is what I added to the CSS (also added <div ></div> right under the checkboxes in the html)

.bb{
  position: absolute;
  z-index: -1;
  width: 800px;
  height: 550px;
 pointer-events: none;

}

#c1:checked ~ .bb {
border: 5px solid darkblue;
}
#c2:checked ~ .bb {
border: 5px solid darkblue;
}
#c3:checked ~ .bb {
border: 5px solid darkblue;
}
#c4:checked ~ .bb {
border: 5px solid darkblue;
}
#c5:checked ~ .bb {
border: none;
}

Here's a working example. I really do hope this is what you're looking for

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-family: sans-serif;
background: lightblue;
}

input {
display: none;
}
img {
width: 100%;
margin-top:15px;
}
h1 {
font-size: 26px;
}
h2 {
margin-top: 65px;
font-size: 22px;
}
.book {
display: flex;
}
#cover {
width: 400px;
height: 550px;
}
.flip-book {
width: 400px;
height: 550px;
position: relative;
perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: center left;
transform-style: preserve-3d;
transition: 0.5s;
color: #000;

}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
box-sizing: border-box;
padding: 0 13px;

}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
}
.next-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
.back-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
#p1 {
z-index: 5;
margin: 5px;
}
#p2 {
z-index: 4;
margin: 5px;
}
#p3 {
z-index: 3;
margin: 5px;
}
#p4 {
z-index: 2;
margin: 5px;
}
#p5 {
z-index: 1;
margin: 5px;
}
#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}
#c4:checked ~ .flip-book #p4 {
transform: rotateY(-180deg);
z-index: 4;
}
#c5:checked ~ .flip-book #p5 {
transform: rotateY(-180deg);
z-index: 5;
}

#c3:checked ~ .flip-book #p1 {
display: none;
}
#c4:checked ~ .flip-book #p2 {
display: none;
}
#c5:checked ~ .flip-book #p3 {
display: none;
}


.bb{
  position: absolute;
  z-index: -1;
  width: 800px;
  height: 550px;
 pointer-events: none;

}

#c1:checked ~ .bb {
border: 5px solid darkblue;
background-color: white;
}
#c2:checked ~ .bb {
border: 5px solid darkblue;
}
#c3:checked ~ .bb {
border: 5px solid darkblue;
}
#c4:checked ~ .bb {
border: 5px solid darkblue;
}
#c5:checked ~ .bb {
border: none;
background-color: transparent;
}






</style>
</head>
<body>

<div >
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3">
<input type="checkbox" id="c4">
<input type="checkbox" id="c5">

<div ></div>

<div id="cover"></div>
<div >

<div  id="p1">
<div  style="">

<h2>Lorem ipsum 1</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c1">Back</label>
</div>
<div  style="height: 550px; width: 400px; background:darkblue; color:white;">
<img src="https://kibls.neocities.org/schachbrettwhite.jpg" alt="Chessboard white">
<h1>Poetry Collection</h1>
<h2>Lorem ipsum book</h2>
<h3>E-book number 1</h3>
<label  for="c1" style="color:white;border:1px solid white;">Open</label>
</div>
</div>

<div  id="p2">
<div >

<h2>Lorem ipsum 3</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c2">Back</label>
</div>
<div >

<h2>Lorem ipsum 2</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c2">Next</label>
</div>
</div>

<div  id="p3">
<div >

<h2>Lorem ipsum 5</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c3">Back</label>
</div>
<div >

<h2>Lorem ipsum 4</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c3">Next</label>
</div>
</div>

<div  id="p4">
<div >

<h2>Lorem ipsum 7</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c4">Back</label>
</div>

<div >

<h2>Lorem ipsum 6</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c4">Next</label>
</div>
</div>

<div  id="p5">
<div  style="color:white; background:darkblue; ">
End of the book
<label  for="c5" style="color:white;border:1px solid white;">Back</label>
</div>
<div  style="height: 550px; width: 400px;">

<h2>Lorem ipsum 8</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label  for="c5">Next</label>
</div>
</div>

</div>
</div>
</body>
</html>