cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <div id="book" class="book">
  <div class="front-cover">
    <a href="#book">
      <h1>Doesn’t it make you just want to sneeze?</h1>
      <h2><em>by</em>Jonathan Munn</h2>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>

<div class="shelf"></div>

<div class="story">
  <p>Pete was leaning against the wall, watching the street go by. I pulled the bike to a halt, the front wheel pointing in his direction.</p>
  <p>“I think I’ve got a fairy stuck up my nose.”</p>
  <p>“S’not true!” came a voice from inside the nose in question.</p>
  <p>“Hey! Not bad that!” Pete said. “I didn’t see your lips move at all.”</p>
  <p>“It’s not a joke.”</p>
  <p>The itching was getting worse. I pulled out a paper tissue.</p>
  <p>“Stop that now!” came the voice again. “You know I don’t like it.”</p>
  <p>“S’not my fault. You make me want to sneeze!”</p>
  <p>And I did.</p>
  <p>I inspected the crumpled paper. Lots of yellow goo, but no fairy.</p>
  <p>Pete looked at me with mild disgust as I eyed the handkerchief more closely.</p>
  <p>“You know that’s pretty gross…” he said.</p>
  <p>“Got any other brilliant remarks?” I said.</p>
  <p>I held a finger up to my lips, and waved a hand to silence Pete’s reply.</p>
  <p>“Are you still there?” I called.</p>
  <p>“No thanks to you!” came the little voice.</p>
  <p>Pete looked at me sort of sideways.</p>
  <p>“Look, the first time was OK, but—”</p>
  <p>“It’s not a joke. I’ve really got something stuck up there. I was riding on me bike and I thought I’d swallowed an insect or something. And then it started insulting me”</p>
  <p>“You’re having me on, right?”</p>
  <p>“Pete! Look at me. If it’s a trick, how do I do it then?”</p>
  <p>Pete thought for a moment.</p>
  <p>“If it’s real… Aren’t they supposed to have a pot of gold or something? And they have to tell you where it is if you catch them?”</p>
  <p>“That’s leprechauns, idiot!” said the voice from my noise.</p>
  <p>“So what’s the difference? Just give us the gold and we’ll let you go…”</p>
  <p>“We—?” I started.</p>
  <p>He winked at me.</p>
  <p>“Oh, I’m happy to stick around,” came the voice. “It’s noggins here who wants to get rid of me…”</p>
  <p>Suddenly I felt a violent pain in my nose, my eyes watered.</p>
  <p>“Owwww!” I howled.</p>
  <p>“See what I mean?” the voice shouted over my moans.</p>
  <p>“Perhaps you can use it in exams…” Pete said, scratching his head. “You know, it could tell us all the answers.”</p>
  <p>“Idiot! If it yacks on like that in an exam, I’ll get thrown out. And probably locked up too.”</p>
  <p>“Can’t it whisper?”</p>
  <p>“Perhaps I don’t know the answers anyway?” said the voice. “Have you thought of that?”</p>
  <p>“Anyway, I don’t want it in exams. I just want it to go. Out of my nose.”</p>
  <p>“Can’t you just poke it out?”</p>
  <p>“With what?”</p>
  <p>“S’pose you’ve already tried your finger…”</p>
  <p>“Yes he has,” the voice said. “And it wasn’t pleasant I can tell you.”</p>
  <p>“You see what it’s like. He’s already making sarcastic remarks like that…”</p>
  <p>“What if we put something in your nose to catch it, then? I don’t know… A spider?”</p>
  <p>“No!” we both said at once.</p>
  <p>“Snap!” Pete said. “You both said the same thing at the same time, you’ve got to make a—” He hit his forehead with his palm. “That’s it! Three wishes! When you catch a fairy, you get three wishes. Hey you in there! Is that right?”</p>
  <p>“You could see things like that…” said the voice with resignation.</p> 
  <p>“I wish you’d get out of my nose, then!” I cried.</p>
  <p>In a flash the fairy was out of my nose and gone.</p>
  <p>And I’m still waiting for my two other wishes.</p>
  <a class="close" href="#">Finish Reading</a>
              @import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
@import url(https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic);
@import url(https://fonts.googleapis.com/css?family=Lato:300);

$orange: #ee4e12;

html {
  min-height: 100%;
body { 
  background-color: #ececec;
  background-image: linear-gradient(transparent, hsla(0,0%,0%,.075)),
  height: 100%;
  padding: 3em 3em 3em 3.5em;
  transform: perspective(500px);
  transform-style: preserve-3d;
.book { 
  counter-reset: page;
  display: inline-block;
  padding-right: 3em;
  position: relative;
  transform: perspective(5000px);
  transform-style: preserve-3d;
  white-space: nowrap;
  vertical-align: top;
.book:after {
  background-color: $orange;
  bottom: 0;
  box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
              inset -1px 0 0 hsla(0,0%,100%,.1),
              inset 0 0 1em hsla(0,0%,0%,.1),
              inset .1em 0 0 hsla(0,0%,0%,.05),
              .1em 0 0 hsla(0,0%,100%,.15);
  content: '';
  left: -.5em;
  position: absolute;
  top: 0;
  width: .55em;
  z-index: 10;
@for $i from 1 through 8 {
  .book div:nth-child(#{$i}) {
    z-index: (10 - $i);
.front-cover {
  background-color: $orange;
  background-image: url('https://cl.ly/image/2e3z073t1Y3a/100-25-6-monochrome.png');
  box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
              inset 0 0 3em hsla(0,0%,0%,.15),
              0 0 .5em hsla(0,0%,0%,.25),
              0 .25em .25em hsla(0,0%,0%,.1);
  height: 27em;
  transform-origin: 0 0;
  transition: .5s;
  width: 17.5em;
.front-cover:before {
  content: '';
  pointer-events: none;
  position: absolute;
.front-cover:after {
  border: .25em double hsla(0,0%,100%,.1);
  bottom: 1.5em;
  left: 1.25em;
  right: 1.5em;
  top: 1.5em;
.front-cover:before {
  border: .25em double hsla(0,0%,0%,.1);
  bottom: 1.55em;
  left: 1.2em;
  right: 1.55em;
  top: 1.45em;
.front-cover a {
  display: block;
  padding: 1.5em 1.25em;
  text-decoration: none;
.book:hover .front-cover {
  transform: rotateY(-10deg);
.book .page:nth-child(2) {
  background-image: linear-gradient(90deg, hsla(0,0%,0%,.4) 75%, transparent);
  background-repeat: repeat-y;
  background-position: 90% 50%;
  background-size: 200% 100%; 
.book:hover .page:nth-child(2) {
  background-position: 100% 50%;
.book:target .page:nth-child(2) {
  background-position: 300% 50%;
.book:target .front-cover {
  transform: rotateY(0deg);
.front-cover h1,
.front-cover h2 {
  font-family: 'Open Sans', sans-serif;
  left: .075em;
  padding-left: .75em;
  padding-right: 1.25em; 
  text-shadow: 0 1px 1px hsla(0,0%,100%,.1);
.front-cover h1 {
  color: hsla(0,0%,0%,.75);
  font-family: 'Lato', 'Open Sans', sans-serif;
  font-size: 1.75em;
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 2.25em;
  padding-top: .8125em;
  text-align: center;
.front-cover h2 {
  color: hsla(0,0%,0%,.5);
  font-size: 1.25em;
  letter-spacing: -1px;
  text-align: center;
.front-cover h2 em {
  border-top: 1px solid hsla(0,0%,0%,.5);
  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.1);
  display: block;
  font-family: 'Gentium Book Basic', serif;
  margin: 0 2.25em;
  padding: 3.125em 0 .6em;
.page {
  backface-visibility: hidden;
  border-radius: .15em;
  bottom: 0;
  display: inline-block;
  left: 0;
  position: relative;
  right: 0;
  top: 0;
  white-space: normal;
  vertical-align: top;
.page {
  background-color: #fcfcfc;
  box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.15),
              inset 0 0 3em hsla(0,0%,0%,.05),
              0 0 .25em hsla(0,0%,0%,.05),
              0 .25em .25em hsla(0,0%,0%,.025);
  height: 17em;
  margin-left: -18.25em;
  padding: 5em 1.5em;
  transition: .4s;
  width: 15em;
  -adobe-flow-from: story;
  -webkit-flow-from: story;
.book:target .page {
  margin-left: 1.25em;
.page:after {
  bottom: 1.5em;
  border-top: 1px solid hsla(0,0%,0%,.075);
  color: hsla(0,0%,0%,.25);
  counter-increment: page;
  content: counter(page);
  display: block;
  left: 6em;
  font: italic .75em/1 'Gentium Book Basic', serif;
  right: 6em;
  padding-top: 1.5em;
  position: absolute;
  text-align: center;
.story { 
  //display: none;
  -adobe-flow-into: story;
  -webkit-flow-into: story;
.story p {
  color: #303030;
  font: .8175em/1.5 'Gentium Book Basic', serif;
  margin: 0;
  text-indent: .75em;
.book .story {
  display: block;
.close {
  color: hsla(0,0%,0%,.5);
  display: block;
  left: 1.5em;
  font-family: 'Gentium Book Basic', serif;
  font-style: italic;
  margin-top: 1.5em;
  padding: .75em 1.5em;
  position: absolute;
  right: 1.5em;
  text-align: center;
  text-decoration: none;
  transition: .25s;
.close:after {
  color: inherit;
  content: ' — ';
.close:focus {
  color: $orange;

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................