Hey, I found this cool little snippet here that makes a flipping-page book, without any javascript (yay):
SOURCE:https://stackoverflow.com/questions/73685602/create-a-pure-html-css-book-with-flipping-pages
Please copy and paste the code shown, at the link here, to check out a quick preview of it (its just an html editor)
<!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 class="book">
<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 class="bb"></div>
<div id="cover"></div>
<div class="flip-book">
<div class="flip" id="p1">
<div class="back" 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 class="back-btn" for="c1">Back</label>
</div>
<div class="front" 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 class="next-btn" for="c1" style="color:white;border:1px solid white;">Open</label>
</div>
</div>
<div class="flip" id="p2">
<div class="back">
<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">Back</label>
</div>
<div class="front">
<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">Next</label>
</div>
</div>
<div class="flip" id="p3">
<div class="back">
<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">Back</label>
</div>
<div class="front">
<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">Next</label>
</div>
</div>
<div class="flip" id="p4">
<div class="back">
<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">Back</label>
</div>
<div class="front">
<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">Next</label>
</div>
</div>
<div class="flip" id="p5">
<div class="back" style="color:white; background:darkblue; ">
End of the book
<label class="back-btn" for="c5" style="color:white;border:1px solid white;">Back</label>
</div>
<div class="front" 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 class="next-btn" for="c5">Next</label>
</div>
</div>
</div>
</div>
</body>
</html>
Isn’t that awesome? Its like a little binder. Nice. How do I make a jupyter template for this lol.
I could figure out how to make the pages longer or wider, on their own. I did that on the w3schools html editor.
I managed to create a small demo of something else I wanted, an overflow: scroll exporter, that seemed simple. Code blocks have a scrollbar.
I also found some code that used some javascript to make a toggle to hide and show blocks. cool.
When I try exporting this ‘binder’ demo I want, it’s out of alignment (too much on the left side) and the code from jupyterlab, it’s outside of my ‘binder’ pages. I tried playing around with the css parameters but I couldn’t get a code block inside binder pages. I want the overflow:scroll inside each page as well.