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

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.

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

              
                <div class="body" hidden aria-hidden="true">
  <h1> &#49;&#48;&#48;&#37;&#32;&#97;&#99;&#99;&#101;&#115;&#115;&#105;&#98;&#108;&#101;
  </h1>
  
  <p>
    <a href="https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/" tabindex="-1" rel="noopener">&#82;&#101;&#97;&#100;&#32;&#116;&#104;&#101;&#32;&#97;&#114;&#116;&#105;&#99;&#108;&#101;</a>
  </p>

    <p>
    <!-- start slipsum code -->
&#87;&#101;&#108;&#108;&#44;&#32;&#116;&#104;&#101;&#32;&#119;&#97;&#121;&#32;&#116;&#104;&#101;&#121;&#32;&#109;&#97;&#107;&#101;&#32;&#115;&#104;&#111;&#119;&#115;&#32;&#105;&#115;&#44;&#32;&#116;&#104;&#101;&#121;&#32;&#109;&#97;&#107;&#101;&#32;&#111;&#110;&#101;&#32;&#115;&#104;&#111;&#119;&#46;&#32;&#84;&#104;&#97;&#116;&#32;&#115;&#104;&#111;&#119;&#39;&#115;&#32;&#99;&#97;&#108;&#108;&#101;&#100;&#32;&#97;&#32;&#112;&#105;&#108;&#111;&#116;&#46;&#32;&#84;&#104;&#101;&#110;&#32;&#116;&#104;&#101;&#121;&#32;&#115;&#104;&#111;&#119;&#32;&#116;&#104;&#97;&#116;&#32;&#115;&#104;&#111;&#119;&#32;&#116;&#111;&#32;&#116;&#104;&#101;&#32;&#112;&#101;&#111;&#112;&#108;&#101;&#32;&#119;&#104;&#111;&#32;&#109;&#97;&#107;&#101;&#32;&#115;&#104;&#111;&#119;&#115;&#44;&#32;&#97;&#110;&#100;&#32;&#111;&#110;&#32;&#116;&#104;&#101;&#32;&#115;&#116;&#114;&#101;&#110;&#103;&#116;&#104;&#32;&#111;&#102;&#32;&#116;&#104;&#97;&#116;&#32;&#111;&#110;&#101;&#32;&#115;&#104;&#111;&#119;&#32;&#116;&#104;&#101;&#121;&#32;&#100;&#101;&#99;&#105;&#100;&#101;&#32;&#105;&#102;&#32;&#116;&#104;&#101;&#121;&#39;&#114;&#101;&#32;&#103;&#111;&#105;&#110;&#103;&#32;&#116;&#111;&#32;&#109;&#97;&#107;&#101;&#32;&#109;&#111;&#114;&#101;&#32;&#115;&#104;&#111;&#119;&#115;&#46;&#32;&#83;&#111;&#109;&#101;&#32;&#112;&#105;&#108;&#111;&#116;&#115;&#32;&#103;&#101;&#116;&#32;&#112;&#105;&#99;&#107;&#101;&#100;&#32;&#97;&#110;&#100;&#32;&#98;&#101;&#99;&#111;&#109;&#101;&#32;&#116;&#101;&#108;&#101;&#118;&#105;&#115;&#105;&#111;&#110;&#32;&#112;&#114;&#111;&#103;&#114;&#97;&#109;&#115;&#46;&#32;&#83;&#111;&#109;&#101;&#32;&#100;&#111;&#110;&#39;&#116;&#44;&#32;&#98;&#101;&#99;&#111;&#109;&#101;&#32;&#110;&#111;&#116;&#104;&#105;&#110;&#103;&#46;&#32;&#83;&#104;&#101;&#32;&#115;&#116;&#97;&#114;&#114;&#101;&#100;&#32;&#105;&#110;&#32;&#111;&#110;&#101;&#32;&#111;&#102;&#32;&#116;&#104;&#101;&#32;&#111;&#110;&#101;&#115;&#32;&#116;&#104;&#97;&#116;&#32;&#98;&#101;&#99;&#97;&#109;&#101;&#32;&#110;&#111;&#116;&#104;&#105;&#110;&#103;&#46;
  <!-- end slipsum code -->
</p> 

  <ul>
    <li>&#67;&#83;&#83;&#32;&#111;&#110;&#108;&#121; </li>
    <li>&#74;&#83;&#32;&#111;&#110;&#108;&#121;&#32;</li>
    <li>&#83;&#99;&#114;&#101;&#101;&#110;&#32;&#114;&#101;&#97;&#100;&#101;&#114;&#32;&#117;&#115;&#101;&#114;&#115; </li>
    <li>&#75;&#101;&#121;&#98;&#111;&#97;&#114;&#100;&#32;&#117;&#115;&#101;&#114;&#115; </li>
    <li>&#72;&#105;&#103;&#104;&#32;&#99;&#111;&#110;&#116;&#114;&#97;&#115;&#116;&#32;&#109;&#111;&#100;&#101; </li>
    <li>&#77;&#111;&#117;&#115;&#101;&#32;&#117;&#115;&#101;&#114;&#115; </li>
    <li>&#82;&#101;&#97;&#100;&#97;&#98;&#105;&#108;&#105;&#116;&#121; </li>
    <li>&#82;&#101;&#97;&#100;&#101;&#114;&#32;&#109;&#111;&#100;&#101; </li>
    <li>&#83;&#111;&#117;&#114;&#99;&#101; </li>
  </ul>
  
  <form action="#form">
    <p>
      <label for="text">&#68;&#117;&#109;&#109;&#121;&#32;&#102;&#111;&#114;&#109;</label><br>
      <input type="text" id="text" tabindex="-1">
    </p>
    <button tabindex="-1">&#83;&#101;&#110;&#100;</button>
  </form>
  
  <p>
    <!-- start slipsum code -->
&#32;&#32;&#32;&#32;&#89;&#111;&#117;&#32;&#116;&#104;&#105;&#110;&#107;&#32;&#119;&#97;&#116;&#101;&#114;&#32;&#109;&#111;&#118;&#101;&#115;&#32;&#102;&#97;&#115;&#116;&#63;&#32;&#89;&#111;&#117;&#32;&#115;&#104;&#111;&#117;&#108;&#100;&#32;&#115;&#101;&#101;&#32;&#105;&#99;&#101;&#46;&#32;&#73;&#116;&#32;&#109;&#111;&#118;&#101;&#115;&#32;&#108;&#105;&#107;&#101;&#32;&#105;&#116;&#32;&#104;&#97;&#115;&#32;&#97;&#32;&#109;&#105;&#110;&#100;&#46;&#32;&#76;&#105;&#107;&#101;&#32;&#105;&#116;&#32;&#107;&#110;&#111;&#119;&#115;&#32;&#105;&#116;&#32;&#107;&#105;&#108;&#108;&#101;&#100;&#32;&#116;&#104;&#101;&#32;&#119;&#111;&#114;&#108;&#100;&#32;&#111;&#110;&#99;&#101;&#32;&#97;&#110;&#100;&#32;&#103;&#111;&#116;&#32;&#97;&#32;&#116;&#97;&#115;&#116;&#101;&#32;&#102;&#111;&#114;&#32;&#109;&#117;&#114;&#100;&#101;&#114;&#46;&#32;&#65;&#102;&#116;&#101;&#114;&#32;&#116;&#104;&#101;&#32;&#97;&#118;&#97;&#108;&#97;&#110;&#99;&#104;&#101;&#44;&#32;&#105;&#116;&#32;&#116;&#111;&#111;&#107;&#32;&#117;&#115;&#32;&#97;&#32;&#119;&#101;&#101;&#107;&#32;&#116;&#111;&#32;&#99;&#108;&#105;&#109;&#98;&#32;&#111;&#117;&#116;&#46;&#32;&#78;&#111;&#119;&#44;&#32;&#73;&#32;&#100;&#111;&#110;&#39;&#116;&#32;&#107;&#110;&#111;&#119;&#32;&#101;&#120;&#97;&#99;&#116;&#108;&#121;&#32;&#119;&#104;&#101;&#110;&#32;&#119;&#101;&#32;&#116;&#117;&#114;&#110;&#101;&#100;&#32;&#111;&#110;&#32;&#101;&#97;&#99;&#104;&#32;&#111;&#116;&#104;&#101;&#114;&#44;&#32;&#98;&#117;&#116;&#32;&#73;&#32;&#107;&#110;&#111;&#119;&#32;&#116;&#104;&#97;&#116;&#32;&#115;&#101;&#118;&#101;&#110;&#32;&#111;&#102;&#32;&#117;&#115;&#32;&#115;&#117;&#114;&#118;&#105;&#118;&#101;&#100;&#32;&#116;&#104;&#101;&#32;&#115;&#108;&#105;&#100;&#101;&#46;&#46;&#46;&#32;&#97;&#110;&#100;&#32;&#111;&#110;&#108;&#121;&#32;&#102;&#105;&#118;&#101;&#32;&#109;&#97;&#100;&#101;&#32;&#105;&#116;&#32;&#111;&#117;&#116;&#46;&#32;&#78;&#111;&#119;&#32;&#119;&#101;&#32;&#116;&#111;&#111;&#107;&#32;&#97;&#110;&#32;&#111;&#97;&#116;&#104;&#44;&#32;&#116;&#104;&#97;&#116;&#32;&#73;&#39;&#109;&#32;&#98;&#114;&#101;&#97;&#107;&#105;&#110;&#103;&#32;&#110;&#111;&#119;&#46;&#32;&#87;&#101;&#32;&#115;&#97;&#105;&#100;&#32;&#119;&#101;&#39;&#100;&#32;&#115;&#97;&#121;&#32;&#105;&#116;&#32;&#119;&#97;&#115;&#32;&#116;&#104;&#101;&#32;&#115;&#110;&#111;&#119;&#32;&#116;&#104;&#97;&#116;&#32;&#107;&#105;&#108;&#108;&#101;&#100;&#32;&#116;&#104;&#101;&#32;&#111;&#116;&#104;&#101;&#114;&#32;&#116;&#119;&#111;&#44;&#32;&#98;&#117;&#116;&#32;&#105;&#116;&#32;&#119;&#97;&#115;&#110;&#39;&#116;&#46;&#32;&#78;&#97;&#116;&#117;&#114;&#101;&#32;&#105;&#115;&#32;&#108;&#101;&#116;&#104;&#97;&#108;&#32;&#98;&#117;&#116;&#32;&#105;&#116;&#32;&#100;&#111;&#101;&#115;&#110;&#39;&#116;&#32;&#104;&#111;&#108;&#100;&#32;&#97;&#32;&#99;&#97;&#110;&#100;&#108;&#101;&#32;&#116;&#111;&#32;&#109;&#97;&#110;&#46;
    <!-- end slipsum code -->
  </p> 
  
    <p>
    <!-- start slipsum code -->
&#32;&#32;&#32;&#32;&#89;&#111;&#117;&#32;&#116;&#104;&#105;&#110;&#107;&#32;&#119;&#97;&#116;&#101;&#114;&#32;&#109;&#111;&#118;&#101;&#115;&#32;&#102;&#97;&#115;&#116;&#63;&#32;&#89;&#111;&#117;&#32;&#115;&#104;&#111;&#117;&#108;&#100;&#32;&#115;&#101;&#101;&#32;&#105;&#99;&#101;&#46;&#32;&#73;&#116;&#32;&#109;&#111;&#118;&#101;&#115;&#32;&#108;&#105;&#107;&#101;&#32;&#105;&#116;&#32;&#104;&#97;&#115;&#32;&#97;&#32;&#109;&#105;&#110;&#100;&#46;&#32;&#76;&#105;&#107;&#101;&#32;&#105;&#116;&#32;&#107;&#110;&#111;&#119;&#115;&#32;&#105;&#116;&#32;&#107;&#105;&#108;&#108;&#101;&#100;&#32;&#116;&#104;&#101;&#32;&#119;&#111;&#114;&#108;&#100;&#32;&#111;&#110;&#99;&#101;&#32;&#97;&#110;&#100;&#32;&#103;&#111;&#116;&#32;&#97;&#32;&#116;&#97;&#115;&#116;&#101;&#32;&#102;&#111;&#114;&#32;&#109;&#117;&#114;&#100;&#101;&#114;&#46;&#32;&#65;&#102;&#116;&#101;&#114;&#32;&#116;&#104;&#101;&#32;&#97;&#118;&#97;&#108;&#97;&#110;&#99;&#104;&#101;&#44;&#32;&#105;&#116;&#32;&#116;&#111;&#111;&#107;&#32;&#117;&#115;&#32;&#97;&#32;&#119;&#101;&#101;&#107;&#32;&#116;&#111;&#32;&#99;&#108;&#105;&#109;&#98;&#32;&#111;&#117;&#116;&#46;&#32;&#78;&#111;&#119;&#44;&#32;&#73;&#32;&#100;&#111;&#110;&#39;&#116;&#32;&#107;&#110;&#111;&#119;&#32;&#101;&#120;&#97;&#99;&#116;&#108;&#121;&#32;&#119;&#104;&#101;&#110;&#32;&#119;&#101;&#32;&#116;&#117;&#114;&#110;&#101;&#100;&#32;&#111;&#110;&#32;&#101;&#97;&#99;&#104;&#32;&#111;&#116;&#104;&#101;&#114;&#44;&#32;&#98;&#117;&#116;&#32;&#73;&#32;&#107;&#110;&#111;&#119;&#32;&#116;&#104;&#97;&#116;&#32;&#115;&#101;&#118;&#101;&#110;&#32;&#111;&#102;&#32;&#117;&#115;&#32;&#115;&#117;&#114;&#118;&#105;&#118;&#101;&#100;&#32;&#116;&#104;&#101;&#32;&#115;&#108;&#105;&#100;&#101;&#46;&#46;&#46;&#32;&#97;&#110;&#100;&#32;&#111;&#110;&#108;&#121;&#32;&#102;&#105;&#118;&#101;&#32;&#109;&#97;&#100;&#101;&#32;&#105;&#116;&#32;&#111;&#117;&#116;&#46;&#32;&#78;&#111;&#119;&#32;&#119;&#101;&#32;&#116;&#111;&#111;&#107;&#32;&#97;&#110;&#32;&#111;&#97;&#116;&#104;&#44;&#32;&#116;&#104;&#97;&#116;&#32;&#73;&#39;&#109;&#32;&#98;&#114;&#101;&#97;&#107;&#105;&#110;&#103;&#32;&#110;&#111;&#119;&#46;&#32;&#87;&#101;&#32;&#115;&#97;&#105;&#100;&#32;&#119;&#101;&#39;&#100;&#32;&#115;&#97;&#121;&#32;&#105;&#116;&#32;&#119;&#97;&#115;&#32;&#116;&#104;&#101;&#32;&#115;&#110;&#111;&#119;&#32;&#116;&#104;&#97;&#116;&#32;&#107;&#105;&#108;&#108;&#101;&#100;&#32;&#116;&#104;&#101;&#32;&#111;&#116;&#104;&#101;&#114;&#32;&#116;&#119;&#111;&#44;&#32;&#98;&#117;&#116;&#32;&#105;&#116;&#32;&#119;&#97;&#115;&#110;&#39;&#116;&#46;&#32;&#78;&#97;&#116;&#117;&#114;&#101;&#32;&#105;&#115;&#32;&#108;&#101;&#116;&#104;&#97;&#108;&#32;&#98;&#117;&#116;&#32;&#105;&#116;&#32;&#100;&#111;&#101;&#115;&#110;&#39;&#116;&#32;&#104;&#111;&#108;&#100;&#32;&#97;&#32;&#99;&#97;&#110;&#100;&#108;&#101;&#32;&#116;&#111;&#32;&#109;&#97;&#110;&#46;
    <!-- end slipsum code -->
  </p> 
  
    <p>
    <!-- start slipsum code -->
&#32;&#32;&#32;&#32;&#89;&#111;&#117;&#32;&#116;&#104;&#105;&#110;&#107;&#32;&#119;&#97;&#116;&#101;&#114;&#32;&#109;&#111;&#118;&#101;&#115;&#32;&#102;&#97;&#115;&#116;&#63;&#32;&#89;&#111;&#117;&#32;&#115;&#104;&#111;&#117;&#108;&#100;&#32;&#115;&#101;&#101;&#32;&#105;&#99;&#101;&#46;&#32;&#73;&#116;&#32;&#109;&#111;&#118;&#101;&#115;&#32;&#108;&#105;&#107;&#101;&#32;&#105;&#116;&#32;&#104;&#97;&#115;&#32;&#97;&#32;&#109;&#105;&#110;&#100;&#46;&#32;&#76;&#105;&#107;&#101;&#32;&#105;&#116;&#32;&#107;&#110;&#111;&#119;&#115;&#32;&#105;&#116;&#32;&#107;&#105;&#108;&#108;&#101;&#100;&#32;&#116;&#104;&#101;&#32;&#119;&#111;&#114;&#108;&#100;&#32;&#111;&#110;&#99;&#101;&#32;&#97;&#110;&#100;&#32;&#103;&#111;&#116;&#32;&#97;&#32;&#116;&#97;&#115;&#116;&#101;&#32;&#102;&#111;&#114;&#32;&#109;&#117;&#114;&#100;&#101;&#114;&#46;&#32;&#65;&#102;&#116;&#101;&#114;&#32;&#116;&#104;&#101;&#32;&#97;&#118;&#97;&#108;&#97;&#110;&#99;&#104;&#101;&#44;&#32;&#105;&#116;&#32;&#116;&#111;&#111;&#107;&#32;&#117;&#115;&#32;&#97;&#32;&#119;&#101;&#101;&#107;&#32;&#116;&#111;&#32;&#99;&#108;&#105;&#109;&#98;&#32;&#111;&#117;&#116;&#46;&#32;&#78;&#111;&#119;&#44;&#32;&#73;&#32;&#100;&#111;&#110;&#39;&#116;&#32;&#107;&#110;&#111;&#119;&#32;&#101;&#120;&#97;&#99;&#116;&#108;&#121;&#32;&#119;&#104;&#101;&#110;&#32;&#119;&#101;&#32;&#116;&#117;&#114;&#110;&#101;&#100;&#32;&#111;&#110;&#32;&#101;&#97;&#99;&#104;&#32;&#111;&#116;&#104;&#101;&#114;&#44;&#32;&#98;&#117;&#116;&#32;&#73;&#32;&#107;&#110;&#111;&#119;&#32;&#116;&#104;&#97;&#116;&#32;&#115;&#101;&#118;&#101;&#110;&#32;&#111;&#102;&#32;&#117;&#115;&#32;&#115;&#117;&#114;&#118;&#105;&#118;&#101;&#100;&#32;&#116;&#104;&#101;&#32;&#115;&#108;&#105;&#100;&#101;&#46;&#46;&#46;&#32;&#97;&#110;&#100;&#32;&#111;&#110;&#108;&#121;&#32;&#102;&#105;&#118;&#101;&#32;&#109;&#97;&#100;&#101;&#32;&#105;&#116;&#32;&#111;&#117;&#116;&#46;&#32;&#78;&#111;&#119;&#32;&#119;&#101;&#32;&#116;&#111;&#111;&#107;&#32;&#97;&#110;&#32;&#111;&#97;&#116;&#104;&#44;&#32;&#116;&#104;&#97;&#116;&#32;&#73;&#39;&#109;&#32;&#98;&#114;&#101;&#97;&#107;&#105;&#110;&#103;&#32;&#110;&#111;&#119;&#46;&#32;&#87;&#101;&#32;&#115;&#97;&#105;&#100;&#32;&#119;&#101;&#39;&#100;&#32;&#115;&#97;&#121;&#32;&#105;&#116;&#32;&#119;&#97;&#115;&#32;&#116;&#104;&#101;&#32;&#115;&#110;&#111;&#119;&#32;&#116;&#104;&#97;&#116;&#32;&#107;&#105;&#108;&#108;&#101;&#100;&#32;&#116;&#104;&#101;&#32;&#111;&#116;&#104;&#101;&#114;&#32;&#116;&#119;&#111;&#44;&#32;&#98;&#117;&#116;&#32;&#105;&#116;&#32;&#119;&#97;&#115;&#110;&#39;&#116;&#46;&#32;&#78;&#97;&#116;&#117;&#114;&#101;&#32;&#105;&#115;&#32;&#108;&#101;&#116;&#104;&#97;&#108;&#32;&#98;&#117;&#116;&#32;&#105;&#116;&#32;&#100;&#111;&#101;&#115;&#110;&#39;&#116;&#32;&#104;&#111;&#108;&#100;&#32;&#97;&#32;&#99;&#97;&#110;&#100;&#108;&#101;&#32;&#116;&#111;&#32;&#109;&#97;&#110;&#46;
    <!-- end slipsum code -->
  </p> 
</div>
              
            
!

CSS

              
                *,*:hover {
  cursor: none;
}

body {
  pointer-events: none;
  filter: opacity(0.03);
  font-size: 1px;
}

@media screen and (-ms-high-contrast: active) {
  * {
    color: window !important;
  }
}

*:focus {
  outline: 0 !important;
}

.loaded {
  display: block;
}

              
            
!

JS

              
                document.querySelector('.body').classList.add('loaded');

document.addEventListener('keydown', function(e) {
  e.preventDefault();
})


function removeA11y() {
  if ("pointerEvents" in document.body.style) {
    console.log('pointer-events supported')
    return;
  }

  document.addEventListener('click', function(e) {
    e.preventDefault();
  })
}

removeA11y();
              
            
!
999px

Console