```
<!doctype html>
<html lang="en-gb">
<head>
<title>Lorem ipsum title</title>
<model>
physique {
margin: 0;
padding: 0;
top: 100vh;
show: flex;
justify-content: middle;
align-items: middle;
text-align:middle;
font-family: sans-serif;
background: lightblue;
}
enter {
show: none;
}
img {
width: 100%;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
margin-bottom:23px;
}
.e-book {
show: flex;
}
#cowl {
width: 400px;
top: 550px;
}
.flip-book {
width: 400px;
top: 550px;
place: relative;
perspective: 1500px;
-moz-perspective: 1500px;
}
.flip {
top: 100%;
width: 100%;
place: absolute;
prime: 0;
left: 0;
transform-origin: left;
-moz-transform-origin: left;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
rework: rotateY(0deg);
transition: 0.5s;
shade: #000;
border-left: 1px dashed lightgrey;
}
.entrance {
place: absolute;
width: 100%;
top: 100%;
prime: 0;
left: 0;
background-color: #fff;
box-sizing: border-box;
padding: 25px 13px;
line-height: 20px;
box-shadow: 5px 5px 25px gray;
border-radius: 0 10px 10px 0;
}
.again {
place: absolute;
width: 100%;
top: 100%;
prime: 0;
left: 0;
z-index: 99;
rework: rotateY(180deg);
-moz-transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
box-sizing: border-box;
padding: 25px 25px;
line-height: 20px;
border-radius: 10px 0 0 10px;
}
.next-btn {
place: absolute;
top:100%;
width: 100%;
prime:0;
left:0;
cursor: pointer;
}
.back-btn {
place: absolute;
top:100%;
width: 100%;
prime:0;
left:0;
cursor: pointer;
}
#p1 { z-index: 7; }
#p2 { z-index: 6; }
#p3 { z-index: 5; }
#p4 { z-index: 4; }
#p5 { z-index: 3; }
#p6 { z-index: 2; }
#p7 { z-index: 1; }
#c1:checked ~ .flip-book #p1 { rework: rotateY(-180deg); z-index: 1; }
#c2:checked ~ .flip-book #p2 { rework: rotateY(-180deg); z-index: 2; }
#c3:checked ~ .flip-book #p3 { rework: rotateY(-180deg); z-index: 3; }
#c4:checked ~ .flip-book #p4 { rework: rotateY(-180deg); z-index: 4; }
#c5:checked ~ .flip-book #p5 { rework: rotateY(-180deg); z-index: 5; }
#c6:checked ~ .flip-book #p6 { rework: rotateY(-180deg); z-index: 6; }
#c7:checked ~ .flip-book #p7 { rework: rotateY(-180deg); z-index: 7; }
#c3:checked ~ .flip-book #p1 { show: none; }
#c4:checked ~ .flip-book #p2 { show: none; }
#c5:checked ~ .flip-book #p3 { show: none; }
#c6:checked ~ .flip-book #p4 { show: none; }
#c7:checked ~ .flip-book #p5 { show: none; }
</model>
</head>
<physique>
<div class="e-book">
<enter sort="checkbox" id="c1">
<enter sort="checkbox" id="c2">
<enter sort="checkbox" id="c3">
<enter sort="checkbox" id="c4">
<enter sort="checkbox" id="c5">
<enter sort="checkbox" id="c6">
<enter sort="checkbox" id="c7">
<div id="cowl"></div>
<div class="flip-book">
<div class="flip" id="p1">
<div class="again">
<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 class="back-btn" for="c1"></label>
</div>
<div class="entrance" model="top: 550px; width: 400px; background:darkblue; shade:white;">
<img src="https://kibls.neocities.org/schachbrettblack.jpg">
<h1>Lorem ipsum Assortment</h1>
<h2>Lorem ipsum e-book</h2>
<h3>E-book no 1</h3>
<label class="next-btn" for="c1"></label>
</div>
</div>
<div class="flip" id="p2">
<div class="again">
<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 class="back-btn" for="c2"></label>
</div>
<div class="entrance">
<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 class="next-btn" for="c2"></label>
</div>
</div>
<div class="flip" id="p3">
<div class="again">
<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 class="back-btn" for="c3"></label>
</div>
<div class="entrance">
<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 class="next-btn" for="c3"></label>
</div>
</div>
<div class="flip" id="p4">
<div class="again">
<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 class="back-btn" for="c4"></label>
</div>
<div class="entrance">
<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 class="next-btn" for="c4"></label>
</div>
</div>
<div class="flip" id="p5">
<div class="again">
<h2>Lorem ipsum 9</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 class="back-btn" for="c5"></label>
</div>
<div class="entrance">
<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 class="next-btn" for="c5"></label>
</div>
</div>
<div class="flip" id="p6">
<div class="again">
<h2>Lorem ipsum 11</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 class="back-btn" for="c6"></label>
</div>
<div class="entrance">
<h2>Lorem ipsum 10</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 class="next-btn" for="c6"></label>
</div>
</div>
<div class="flip" id="p7">
<div class="again" model="shade:white; background:darkblue; border: 5px strong darkblue; border-top-style: strong;border-right-style: strong;border-bottom-style: strong;">
Finish of the e-book
<label class="back-btn" for="c7"></label>
</div>
<div class="entrance" model="top: 550px; width: 400px;">
<h2>Lorem ipsum 12</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 class="next-btn" for="c7"></label>
</div>
</div>
</div>
</div>
</physique>
</html>
```
