HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<main>
<h1>Booklet</h1>
<h2>1. ltr version</h2>
<div class="bookmat">
<p class="preface">Not all cultures place the same high value on writing as we do today.<br>In his dialogue with Phaedrus, Socrates criticizes the invention of writing and emphasizes the importance of the spoken word:</p>
<div class="book">
<div class="front cover bookpage">
<p class="booktitle">Platon’s Works III<br> <br>Chapter 8<br>Socrates, in Dialogue with Phaedrus</p>
</div>
<div class="back cover bookpage"></div>
<div class="front bookpage"><p class=pagetext>Sokrates:<br> <br>So I have heard that at Naucrates in Egypt there was one of the ancient gods, to whom also the bird called Ibis was sacred, but he himself, the god, was called Theuth. He is said to have invented number and calculation, furthermore, the art of geometry and astronomy, and also the game at draugts and dice, and likewise the letters.<br>At that time Thamus was king of all Egypt, ruled in the large city of the upper country, which the Hellenes call the Egyptian Thebe, however the god himself was called Ammon.</p></div>
<div class="back bookpage"><p class=pagetext>To him Theuth is said to have gone, to show him his arts, and to ask that they be communicated to the other Egyptians. The former asked of what use each of them arts would be, and depending on what Theuth said about it, he either blamed or praised. Thamus is said to have replied many things to Theuth for and against about each art, which would be too extensive to be mentioned here. But when they came to the letters, Theuth said:<br><q>This art, O king, will make the Egyptians wiser and richer in memory, for it has been invented as a means for the understanding and the memory.</p></div>
<div class="front bookpage"><p class=pagetext>But the other replied:</p><p>O ingenious Theuth, one knows how to bring to life what belongs to the arts; another to judge how much harm or advantage they might bring to those who make use of them. Thus thou, too, as the father of the letters, hast said out of love for them, the opposite of what they will actually bring. For this invention will rather instil forgetfulness in the souls of the learners out of neglect of the memory, because, relying on these letters, they will remember rather from the outside by means of signs foreign to the matter, but not within them and directly.</p></div>
<div class="back bookpage"><p class=pagetext>Not, therefore, for the memory, but only for recollection, thou hast invented a means; and of wisdom thou teach thy apprentices only the appearance, not the thing itself.</p><p>For having heard many things without instruction, they will also believe themselves to be knowing, though they are yet ignorant for the most part and difficult to be treated, after they have become conceited instead of wise.</p></div>
<div class="front bookpage"><p>[...]<br> </p><p class=pagetext>For writing, Phaedrus, has this bad thing, and in this it is actually quite similar to painting; for this also puts down its excerpts as living, but if one asks them something, then they are quite reverently still. The same is true of the writings. You might think that they speak as if they understood something, but if you ask them eagerly about what they say, they always contain only one and the same thing.</p></div>
<div class="back bookpage"><p class=pagetext>But once it is written, every speech roams among those who understand it, and among those to whom it does not belong, and it does not understand to whom it shall speak, and to whom it shall not. And if she is offended or undeservedly insulted, she always needs her father’s help; for she alone is not able to help or protect herself.</p></div>
<div class="front lastpage bookpage"><footer><a target="_blank" href="https://en.wikipedia.org/wiki/Phaedrus_(dialogue)">Platon’s Works III, Chapter 8: Socrates, in Dialogue with Phaedrus</a></footer></div>
</div>
</div>
<h2>2. rtl version</h2>
<div class="bookmat rtl">
<p class="preface">The relationship between the writing systems can also be seen in the sorting of the characters. Initially created after a mnemonic or purely by chance, almost all of today’s abjads and alphabets have retained the order of the Phoenician characters (it was not until the Indian abugidas that a sensible new sorting was found). New letters were either added to the end or inserted.<br><br>The sorting of letters by place of articulation found with the Indian Brāhmī was retained in all Indian abugidas.</p>
<div class="book">
<div class="front cover bookpage">
<p class="booktitle">ספר יצירה<br> <br>Sefer Yetzirah<br>The Alphabet of Rabbi Akiva</p>
</div>
<div class="back cover bookpage"></div>
<div class="front bookpage"><p class=pagetext>In the Sefer Yetzirah (<b>ספר יצירה</b>), the Book of Formation, the twenty-two letters and the ten numbers become the basic building blocks of creation. The written word stands as the blueprint of the world at the beginning of creation. According to this, the origin of the letters themselves cannot be determined; they have always been there. And so it seems to be with the order of the letters.</p></div>
<div class="back bookpage"><p class=pagetext>A well-known midrash (an interpretive legend) raises the question of why Alef was not chosen to be the first letter of the Torah. In the narrative, all the letters engraved on the crown of the Creator appear before the Lord in reverse order and give good reasons one after another why they should be the first one.</p></div>
<div class="front bookpage"><p class=pagetext>One after another is turned away, except for Beth, who appears last, and who was finally accepted to be the first.<br>All had come – except the letter Alef. When the Lord asks why this is so, Alef declares, <q>I am but a soundless letter, and therefore have nothing to say.</q> But the Lord rewarded the humility of Alef and declared it the leader of all the letters.</p></div>
<div class="back bookpage"><p class=pagetext>In this Midrash the sequence of the letters is only confirmed, for they have already previously been engraved in the same order <q>in the crown of the Creator</q>. It is also worth noting that the Lord accepted the request of the last letter that came to him, Beth, before he made Alef the leader of the letters; but the Torah, and thus the blueprint of the world, begins with the letter Beth.</p></div>
<div class="front lastpage bookpage"><footer><a target="_blank" href="https://en.wikipedia.org/wiki/Alphabet_of_Rabbi_Akiva">source: אותיות דרבי עקיבא, Otiot de Rabbi Akiva</a></footer></div>
</div>
</div>
</main>
* {
box-sizing: border-box;
margin: 0; padding: 0;
}
html {
font: clamp(0.9rem, 1.5vw, 0.98rem)/1.44 Georgia,serif;
background-color: hsl(25, 100%, 92%);
color: hsl(25,50%,5%);
}
body {
width: min(90rem, 100%);
margin: 0 auto;
padding: 1em 0.8em;
overflow-x: hidden;
}
/* ************************** BOOK MOBILE DISPLAY ********************* */
.bookmat {
box-sizing: content-box;
position: relative;
}
.preface {
margin: 2em 0.3rem;
font: 0.9em/1.44 Georgia,serif;
}
.book {
position: relative;
font: 0.8em/1.2 Georgia,serif;
background-color: hsl(20,50%,95%);
box-shadow: 0 0.5em 20px rgba(0, 0, 0, 0.3);
}
.book::before {
content: '‹';
position: absolute;
padding: 0 0.4em 0.13em;
top: -0.07em; right:-0.2em;
font-size: 12em;
line-height: 1;
color: hsla(20,50%,35%,0.2);
transform: rotate(0deg);
transition: transform 0.5s;
}
.bookpage {
pointer-events: none;
color: hsl(20,50%,15%);
background-color: hsl(20,50%,95%);
padding: 0.4em; margin-bottom: -2em;
line-height: 0;
opacity:0;
transition: line-height 0.5s 0.6s, opacity 1s, margin-bottom 0.5s 0.6s;
}
.front.cover {
margin-bottom:0;
line-height:1.2;
opacity:1;
}
.bookpage p, .bookpage footer {
padding: 0.3em 2em;
hyphens: auto;
text-align: justify;
}
.bookpage p {
pointer-events: none;
}
.bookpage .booktitle {
font-size: 2em;
text-align: left;
}
.pagetext::first-letter {
font-size: 2em;
}
.unrolled.book::before {
transform: rotate(-90deg);
}
.unrolled.book>.bookpage {
line-height:1.2;
margin-bottom:0;
opacity:1;
transition: line-height 1s, opacity 0.5s 0.6s, margin-bottom 1s;
}
/* ************************** BOOK MOBILE RTL ********************* */
.rtl .bookpage .booktitle {
text-align: right;
}
.rtl .book::before {
left: -0.2em; right:auto;
transform: rotate(180deg);
}
.rtl .unrolled.book::before {
transform: rotate(270deg);
}
@media (min-width:700px) {
/* ************************** BOOK DESKTOP DISPLAY ********************* */
.bookmat {
display: flex;
align-items: center;
min-height: 30rem;
}
.preface {
width: 38%;
margin: 0 5%;
pointer-events: none;
}
.book {
counter-reset: pagecounter;
position: absolute;
pointer-events: none;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
width: 36rem;
height: 24rem;
perspective: 75rem;
transform: rotate(20deg) scale(0.5);
transition: transform 1s 3s;
background-color: transparent;
box-shadow: none;
}
.opened.book {
transform: rotate(0);
transition: transform 3s;
}
.book::before {
content:none;
}
.bookpage {
counter-increment: pagecounter;
position: absolute;
top: 0.5em; bottom:0.5em;
margin: 0; padding:0;
width: 50%;
line-height: 1.2;
opacity:1;
backface-visibility: hidden;
cursor: pointer;
user-select: none;
box-shadow: inset 3px 0px 20px rgba(0, 0, 0, 0.1);
transform-style: preserve-3d;
transition: transform 3s;
}
.back {
transform-origin: 100% 0;
transform: rotateY(180deg);
left: 0;
}
.front {
transform-origin: 0 0;
transform: rotateY(0deg);
right: 0;
}
.back.flipped {
transform: rotateY(0deg);
}
.front.flipped {
transform: rotateY(-180deg);
}
.clickable {
pointer-events:all;
}
.cover, .lastpage {
top: 0; bottom: 0;
width:calc(50% + 0.5em);
border-color: hsl(20,50%,25%);
border-style: solid;
}
.front.cover {
pointer-events: all;
right: -0.5em;
border: none;
margin-left: -0.1em;
padding: 0.5em 0.25em;
color: hsl(20,10%,80%);
background-color: hsl(20,50%,25%);
box-shadow: inset 3em 0 hsl(0,0%,0%);
border-radius: 0 5px 5px 0;
}
.back.cover {
left:-0.5em;
border-width: 0.5em 0 0.5em 0.5em;
border-radius: 5px 0 0 5px;
}
.lastpage {
right:-0.5em;
border-width: 0.5em 0.5em 0.5em 0;
border-radius: 0 5px 5px 0;
}
.bookpage .booktitle {
padding: 3em 0 0 1.5em;
}
.bookpage footer {
position: absolute;
bottom: 0;
margin: 4em 2em;
font-size: 0.9em;
}
.bookpage:nth-child(n+3)::before {
content: counter(pagecounter);
display: block;
padding: 1em 2em;
}
.bookpage:nth-child(odd)::before {
text-align:right;
}
/* ************************** BOOK DESKTOP RTL ********************* */
.bookmat.rtl {
flex-direction: row-reverse;
}
.rtl .preface {
text-align: right;
}
.rtl .book {
transform: rotate(-20deg) scale(0.5);
}
.rtl .opened.book {
transform: rotate(0);
}
.rtl .back {
transform-origin: 0 0;
transform: rotateY(-180deg);
left: auto; right: 0;
}
.rtl .front {
transform-origin: 100% 0;
transform: rotateY(0deg);
left: 0;
}
.rtl .back.flipped {
transform: rotateY(0deg);
}
.rtl .front.flipped {
transform: rotateY(180deg);
}
.rtl .front.cover {
margin-right: -0.1em;
border-radius: 5px 0 0 5px;
box-shadow: inset -3em 0 hsl(0,0%,0%);
}
.rtl .lastpage {
left:-0.5em;
border-width: 0.5em 0 0.5em 0.5em;
border-radius: 5px 0 0 5px;
}
.rtl .back.cover {
left: auto; right:-0.5em;
border-width: 0.5em 0.5em 0.5em 0;
border-radius: 0 5px 5px 0;
}
.rtl .bookpage:nth-child(even)::before {
text-align:right;
}
.rtl .bookpage:nth-child(odd)::before {
text-align:left;
}
.rtl .bookpage .booktitle {
padding: 3em 1.5em 0 0;
}
let books = document.querySelectorAll('.book');
for (let book of books) {
let pages = book.getElementsByClassName('bookpage');
let size = pages.length;
for (let i = 0, page; page = pages[i]; ++i) {
if (i % 2 === 0) page.style.zIndex = (size - i);
}
book.onclick = function(e) {
if (e.target == e.currentTarget) { // unroll book in mobile mode
e.target.classList.toggle('unrolled');
} else {
e.currentTarget.classList.remove('unrolled');
let pagearray = [...e.target.parentElement.children];
let pagenum = pagearray.indexOf(e.target);
e.target.classList.remove('clickable');
if (pagenum & 1) { // odd pages (flip back)
e.target.classList.remove('flipped');
e.target.previousElementSibling.classList.remove('flipped');
e.target.nextElementSibling.classList.remove('clickable');
if (pagenum > 1) {
e.target.previousElementSibling.classList.add('clickable');
e.target.previousElementSibling.previousElementSibling.classList.add('clickable');
} else {
e.target.parentElement.classList.remove('opened');
}
} else if (pagenum === (pagearray.length-1)) { // last page (close book)
for (let i = pagenum; i >= 0; --i) {
pagearray[i].classList.remove('flipped');
}
e.target.parentElement.classList.remove('opened');
} else { // even pages (flip forward)
if (pagenum === 0) { // first page (open book)
e.target.parentElement.classList.add('opened');
} else {
e.target.previousElementSibling.classList.remove('clickable');
}
e.target.classList.add('flipped');
e.target.nextElementSibling.classList.add('flipped');
e.target.nextElementSibling.classList.add('clickable');
e.target.nextElementSibling.nextElementSibling.classList.add('clickable');
}
}
e.stopPropagation();
}
}
Also see: Tab Triggers