Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource

Packages

Add Packages

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.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <input type="checkbox" id="menu-toggle"/>
<label for="menu-toggle"><i class="fas fa-times"></i>
  <i class="fas fa-bars"></i>
</label>
<div class="page-content-wrapper">
  <div class="page-content">
    <img src="https://jeffsum.com/images/jeff_1.jpg"/>
            <p>You really think you can fly that thing? Checkmate... Must go faster. Checkmate... Did he just throw my cat out of the window? This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Must go faster... go, go, go, go, go!</p><p>Hey, take a look at the earthlings. Goodbye! Remind me to thank John for a lovely weekend. Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Must go faster. You really think you can fly that thing? Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.</p><p>This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Did he just throw my cat out of the window? Did he just throw my cat out of the window? Eventually, you do plan to have dinosaurs on your dinosaur tour, right? So you two dig up, dig up dinosaurs?</p>
    <img src="https://jeffsum.com/images/jeff_2.jpg"/><p>Life finds a way. God help us, we're in the hands of engineers. Life finds a way. Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! You really think you can fly that thing? Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.</p><p>Just my luck, no ice. They're using our own satellites against us. And the clock is ticking. Life finds a way. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? You really think you can fly that thing? Forget the fat lady! You're obsessed with the fat lady! Drive us out of here!</p>
    <img src="https://jeffsum.com/images/jeff_3.jpg"/>
    <p>Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Life finds a way. Did he just throw my cat out of the window? I was part of something special. They're using our own satellites against us. And the clock is ticking.</p><p>God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Checkmate... Jaguar shark! So tell me - does it really exist? Did he just throw my cat out of the window? My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
    <p>Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. So you two dig up, dig up dinosaurs? Must go faster. I was part of something special. Must go faster... go, go, go, go, go! God help us, we're in the hands of engineers.</p>
    <p>They're using our own satellites against us. And the clock is ticking. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? God help us, we're in the hands of engineers. So you two dig up, dig up dinosaurs? Forget the fat lady! You're obsessed with the fat lady! Drive us out of here!</p>
    <p>Did he just throw my cat out of the window? Life finds a way. Checkmate... My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! I was part of something special. Checkmate... Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p><p>Jaguar shark! So tell me - does it really exist? God help us, we're in the hands of engineers. You know what? It is beets. I've crashed into a beet truck. You really think you can fly that thing? My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p><p>Hey, take a look at the earthlings. Goodbye! Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore!</p>
          </div>
</div>
<div class="menu">I'm a menu</div>
<a href="https://jeffsum.com/" target="_blank" class="jefflink">Get Yourself Some Jeff</a>

              
            
!

CSS

              
                html,body {
  min-height:100%;
  max-height:100%;
  margin:0;
  padding:0;
}

*,*:before,*:after {
  box-sizing:border-box;
}

body {
  background-image:linear-gradient(202deg, #61BFD9 16%, #0551B4 67%);
  font-family:"Helvetica Neue", "Arial", sans-serif;
  .menu {
    position:fixed;
    height:100vh;
    width:30vw;
    top:0;
    left:35vw;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transform:scale(0.6) translateY(30px);
    color:white;
    opacity:0;
  }
  .page-content-wrapper {
    position:fixed;
    z-index:2;
    transition:transform 0.5s ease-in-out;
    width:100%;
    height:100%;
    &:before,&:after {
      content:'';
      display:block;
      position:fixed;
      top:-10vh;
      height:120vh;
      width:60vw;
      background:white;
      z-index:0;
      transition:transform .5s ease-in-out,box-shadow 0.5s ease-in-out;
      box-shadow:0 0 0 black;
    }
    &:before {
      left:-10vw;
    }
    &:after {
      right:-10vw;
    }
    .page-content {
      position:relative;
      z-index:1;
      transition:opacity 0.25s ease-in-out;
      padding:20px 40px 80px 40px;
      width:100%;
      height:100%;
      overflow:auto;
      img {
        width:30vw;
        height:auto;
        margin-top:20px;
        margin-bottom:20px;
        border-radius:5px;
        box-shadow:0 10px 10px rgba(black,0.25);
        &:nth-of-type(odd){
          float:left;
          margin-right:20px;
        }
        &:nth-of-type(even){
          float:right;
          margin-left:20px;
        }
      }
    }
  }
  #menu-toggle, #menu-toggle + label {
    position:fixed;
    top:0;
    left:0;
    z-index:3;
    display:block;
    height:40px;
    width:40px;
  }
  #menu-toggle {
    opacity:0;
  }
  #menu-toggle + label {
    transition:transform 0.5s ease-in-out;
  }
  #menu-toggle + label .fas {
    font-weight:100;
    font-size:35px;
    position:absolute;
    display:flex;
    height:40px;
    width:40px;
    align-items:center;
    justify-content:center;
    top:0;
    left:0;
    transition:opacity 0.5s ease-in-out;
    
    &.fa-times {
      opacity:0;
    }
  }
  .jefflink {
    position:fixed;
    z-index:5;
    bottom:10px;
    left:50%;
    padding:20px;
    background-image:linear-gradient(202deg, #61BFD9 16%, #0551B4 67%);
    border-radius:10px;
    width:220px;
    text-align:center;
    margin-left:-110px;
    text-decoration:none;
    color:white;
    text-shadow:0 2px 2px #0551B4;
    transition:transform 0.5s ease-in-out;
    &:hover {
      background-image:linear-gradient(202deg, darken(#61BFD9,10) 16%, darken(#0551B4,10) 67%);
       text-shadow:0 2px 2px darken(#0551B4,10);
    }
  }
  #menu-toggle:checked {
    + label {
      transform:rotate(180deg);
      .fas {
        &.fa-times {
          opacity:1;
        }
        &.fa-bars {
          opacity:0;
        }
      }
    }
    ~ .page-content-wrapper {
      pointer-events:none;
      transform:scale(1.5);
      &:before,&:after {
        box-shadow:0 0 10px black;
      }
      &:before {
        transform:translateX(-15vw);
      }
      &:after {
        transform:translateX(15vw);
      }
      .page-content {
        opacity:0;
      }
    }
    ~ .menu {
      transform:scale(1) translateY(0px);
      opacity:1;
    }
    ~ .jefflink {
      transform:translateY(200px)
    }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console