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

              
                p.instruction Click or use arrow keys to navigate

.all
  section.active
    article
      h1 Chapter 1
      p
        | I was a smart child, but for a pointless reason. The entire effort was to impress my Dad. He took notice of me only when I was in his way. Class president, good athelete, math wiz. Fuck it. He didn&apos;t give a shit about any of it.
      p
        | The story goes that he became very weak in his early 30s. He would ask the neighbors to help him carry bags of groceries into the house. Just before my 2
        sup nd
        |  birthday, he was diagnosed with 
        abbr(title='multiple sclerosis') MS
        | .
  section
    article
      p
        | He was some sort of card player savant and could hold 3 decks of cards in his memory. This was a fortuitous skill to have considering his lack of mobility. He taught a weekly bridge class and was revered by his students.
      p They all made sure to remind me of his greatness.
      p
        q You&apos;re a lucky boy to have a father like that.
      p
        q Please tell your father I love him. What a wonderful man.
      p
        | It didn&apos;t make sense to me. At home, he would ensure my mother and I suffered along with him. He berated her for various infractions. Once, the vegatables were too cold. He wiped them off the table with his still powerful arm and ordered her to make it again. Another time, when I was still a baby, my mother requested he stay home to take care of me. It was almost midnight. He screamed at her and rammed his shoulder into a bookcase, sending it crashing inches from my crib.
      p He was a stranger at home.
  section
    article
      p
        | 17 years into their marriage, my mother&mdash;with the help of a therapist&mdash;facilitated a divorce. He had been having an affair with one of his adoring bridge students for years and this woman agreed to care for him (a task which was considerable at that point).
      p
        | Soon after he left our home, I immediatley ceased caring about all forms of achievement. My teachers were baffled. It was a true 180 degree pivot.
      p
        | And then the anger came. It was like some classic horror film come to life. Just as he was supposedly vanquished, my father, like some crafty spector, transferred his darkness into my body. It felt like a sourness, a kind of permanent dissatisfaction. I was 10.
      p
        | My grades plummeted. I withdrew from all activities and developed a fear of other children. I began using food as a drug.
      p
        | Thousands of calories quenched the pain. I would creep downstairs after the house was asleep, avoiding the memorized creaks in the stairs. The refrigerator provided all I&apos;d need to escape for the night.
  section
    article
      p
        | With my dad gone and our time together reduced to perfunctory monthly meetings where he watched me eat a hamburger for an hour, I had a lot of time to think. Too much time. The kids at school began to pick on me because I had gotten heavy. The solution was not to run away, but instead to dismantle them using words.
      p
        | Nobody wants to be laughed at for how they talk. I would insult bullies in this way, using words they did not know, mocking their thin education. Very soon the bullying stopped. One girl prank called my house with some friends. I had her crying inside of 3 minutes.
      p
        | I became a cruel person, anxious and predatory. Words offered me protection like the maffia protecting a business for an impossibly steep price.
  section
    article
      p
        | As highschool approached, I stopped attending. It felt as if the entire population of students knew my daily hell routine and I could no longer face their inquisitive glances. They needed to know why I was not like them and I had no answers.
      img(src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fmedia.philly.com%2Fimages%2Fdixon-206036-f-wp-content-uploads-2017-10-802627_7de815d0e7d45ed-2-e1508275143432-1200x801.jpg&f=1", alt="high school")
      p
        | One teacher called me at home and tricked me into coming in to school. He claimed he just wanted to talk. 
        q About what?
        |  I responded. My mom drove me to a featureless building with a trimmed lawn and I walked into something of an intervention. Several of the school therapists were waiting with raised clipboards and the football coach, an enormous, asthmatic man named Joe Gro informed me I was going to the clinic for troubled teens.
      p An adventure!
|  
button Again

              
            
!

CSS

              
                html, body {
  margin: 0;
}

body {
  font-family: 'Asul';
  font-size: 22px;
  overflow: hidden; 
  width: 100%;
  height: 100%;
  display: inline-block;
  background: rgb(233,223,196);
  background: linear-gradient(left, rgba(233,223,196,1) 0%,rgba(233,223,196,1) 1%,rgba(237,227,200,1) 2%,rgba(237,227,200,1) 24%,rgba(235,221,195,1) 25%,rgba(233,223,196,1) 48%,rgba(235,221,195,1) 49%,rgba(230,216,189,1) 52%,rgba(230,216,189,1) 53%,rgba(233,219,192,1) 54%,rgba(230,216,189,1) 55%,rgba(230,216,189,1) 56%,rgba(233,219,192,1) 57%,rgba(230,216,189,1) 58%,rgba(230,216,189,1) 73%,rgba(233,219,192,1) 74%,rgba(233,219,192,1) 98%,rgba(235,221,195,1) 100%);

  background-size: 120px;
  background-repeat: repeat;
}

img {
  max-width: 100%;
}

mark {
  background-color: #FFFF00;
  border: 1px dashed #FFFF00;
}

.instruction {
  transform: rotate(90deg) translateX(-50%);
  transform-origin: left top 0;
  transform-origin: 0 0;
  position: absolute;
  left: 2.05em;
  text-align: center;
  letter-spacing: 1.5px;
  word-spacing: 1px;
  margin: 0;
  top: 50%;
  color: rgba(0, 0, 0, 0.7);
  background-color: rgba(255, 255, 255, 0.5);
  width: 200vw;
  padding: 1em;
  line-height: 0;
  display: inline-block;
}

button {
  border: none;
  background-color: rgba(80, 11, 6, 0.4);
  color: white;
  padding: 1.25em 2em;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.all {
  width: 21em;
  position: relative;
  top: 2em;
  margin: 0 auto;
  max-width: calc(100vw - 6em);
}

section article {
  overflow: auto;
  margin: 0;
  opacity: 0;
  transition: 1s opacity ease-in-out;
  position: relative;
  
  > *:not(img) {
    padding-right: 1.5em;
    padding-left: 2.5em;
  }
}

h1 {
  margin-top: 0;
}

section {
  cursor: pointer;
  user-select: none;
  position: absolute;
  top: 0; 
  height: 20em;
  max-height: calc(100vh - 10em);
  background-color: white;
  border: 1px solid black;
  padding: 3.5em 0 1.5em;
  overflow: auto; 
  transition: 1s transform ease-in-out, 1s opacity ease-in-out;
  background-color: #fafafa;
  
  &:before {
    display: block;
    font-size: 0.65em;
    min-width: 1em;
    text-align: center;
    position: absolute;
    top: 2em;
    right: 1.5em;
    background-color: rgba(80, 11, 6, 0.4);
    color: white;
    padding: 0.3em;    
  }
}

p {
  &:first-of-type {
    margin-top: 0;
  }
}
 
$zLayer: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1;
@for $i from 1 through 10 {
  $rand: random(8) - 5;
  
  section {       
    &:nth-child(#{abs($i)}) {
      z-index: nth($zLayer, $i);
      transform: rotate(#{$rand}deg);    
      
      &:before {
        content: '#{abs($i)}';
      }      
      
      &.leave {
        transform: rotate(#{$rand}deg) translateY(50em) scale3d(0.6, 0.6, 1);
        opacity: 0.3;
      }
    }
    
    &.active {
      transform: rotate(0);
      background-color: #fff;
      
      article {
        opacity: 1;
      }
    }
  }
}
              
            
!

JS

              
                var UTILS = (function() {
  var ret = {
    isNumber: function(n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    } 
  };
  
  return ret;
})();

var SLIDES_MODULE = (function() {
  var ret = {}, 
      sections = document.querySelectorAll("section"),
      KEYS = {
        RIGHT: 39,
        LEFT: 37
      };

  ret.init = function() {
    moduleListeners();
  };

  ret.getSlideIndex = function() {
    for (var i = 0; i < sections.length; i++) {      
      if (sections[i].classList.contains("active")) {
        return i;
        break;
      }
    }
  };

  ret.nextSlide = function() {
    var next_index = ret.getSlideIndex() + 1,
        active_slide = document.querySelector(".active"),
        len = sections.length;

    if (UTILS.isNumber(next_index) && next_index <= len) { 
      active_slide.classList.add("leave");
      active_slide.classList.remove("active");

      if (next_index < len) {
        sections[next_index].classList.add("active");
      }
    }
  };

  ret.previousSlide = function() {
    var previous_index = ret.getSlideIndex() - 1,
        active_slide = document.querySelector(".active");
    
    if (!active_slide) {
      previous_index = sections.length - 1; 
    }

    if (UTILS.isNumber(previous_index) && previous_index > -1) {
      sections[previous_index].classList.add("active");
      sections[previous_index].classList.remove("leave");
      
      if (active_slide) { 
        active_slide.classList.remove("active");
      }
    }
  };

  function moduleListeners() {
    Array.prototype.forEach.call(sections, sectionsHandler);
    document.querySelector("button").addEventListener("click", resetHandler);
    window.addEventListener("keydown", keyHandler, false);
  }

  function sectionsHandler(section) {
    section.addEventListener("click", ret.nextSlide);
  }

  function keyHandler(e) {
    if (e.keyCode === KEYS.RIGHT) {
      ret.nextSlide();
    } else if (e.keyCode === KEYS.LEFT) {
      ret.previousSlide();
    }
  }

  function resetHandler() {
    for (var i = sections.length - 1; i >= 0; i--) {
      (function(index) {
        sections[index].classList.remove("leave");
        sections[index].scrollTop = 0;
      })(i);
    }
    sections[0].classList.add("active");
  }

  return ret;
})();

SLIDES_MODULE.init();

              
            
!
999px

Console