cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

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.

            
              <h1 class=hide><a target="_blank" href="http://websemantics.uk/error/">404: Page not found</a></h1>
<p class=hide>If using a screen-reader you may wish to <a href="http://websemantics.uk/">return to homepage</a> before the loading noise of a Sinclair ZX Spectrum begins.</p>


<div id=box class=borderBox aria-hidden=true>

  <div class=content>

    <p class=copy>&copy; 1982 Sinclair Research Ltd</p>
    <p class=load1>LOAD <span class=cursor>L</span></p>
    <p class=load2>LOAD "<span class=cursor>L</span></p>
    <p class=load3>LOAD ""<span class=cursor>L</span></p>
    <p class=prog>Program: 404 Page</p>
    <p class=rtape>R Tape Loading Error (0:1)</p>

    <!-- http://patorjk.com/software/taag/#p=moreopts&f=Doh&t=404%0APage%20not%20found -->
    <div id=words class="flex words">

      <div class=word>
        <pre class=e1>$$\   $$\  $$$$$$\  $$\   $$\ </pre>
        <pre class=e2>$$ |  $$ |$$$ __$$\ $$ |  $$ |</pre>
        <pre class=e3>$$ |  $$ |$$$$\ $$ |$$ |  $$ |</pre>
        <pre class=e4>$$$$$$$$ |$$\$$\$$ |$$$$$$$$ |</pre>
        <pre class=e5>\_____$$ |$$ \$$$$ |\_____$$ |</pre>
        <pre class=e6>      $$ |$$ |\$$$ |      $$ |</pre>
        <pre class=e7>      $$ |\$$$$$$  /      $$ |</pre>
        <pre class=e8>      \__| \______/       \__|</pre>
      </div>

      <div class=word>
        <pre class=e1>$$$$$$$\                               </pre>
        <pre class=e2>$$  __$$\                              </pre>
        <pre class=e3>$$ |  $$ |$$$$$$\   $$$$$$\   $$$$$$\  </pre>
        <pre class=e4>$$$$$$$  |\____$$\ $$  __$$\ $$  __$$\ </pre>
        <pre class=e5>$$  ____/ $$$$$$$ |$$ /  $$ |$$$$$$$$ |</pre>
        <pre class=e6>$$ |     $$  __$$ |$$ |  $$ |$$   ____|</pre>
        <pre class=e7>$$ |     \$$$$$$$ |\$$$$$$$ |\$$$$$$$\ </pre>
        <pre class=e8>\__|      \_______| \____$$ | \_______|</pre>
        <pre class=e9>                   $$\   $$ |          </pre>
        <pre class=e10>                    \$$$$$$ |          </pre>
        <pre class=e11>                     \_____/           </pre>
      </div>

      <div class=word>
        <pre class=e1>                     $$\     </pre>
        <pre class=e2>                     $$ |    </pre>
        <pre class=e3>$$$$$$$\   $$$$$$\ $$$$$$\   </pre>
        <pre class=e4>$$  __$$\ $$  __$$\\_$$  _|  </pre>
        <pre class=e5>$$ |  $$ |$$ /  $$ | $$ |    </pre>
        <pre class=e6>$$ |  $$ |$$ |  $$ | $$ |$$\ </pre>
        <pre class=e7>$$ |  $$ |\$$$$$$  | \$$$$  |</pre>
        <pre class=e8>\__|  \__| \______/   \____/ </pre>
      </div>

      <div class=word>
        <pre class=e1> $$$$$$\                                     $$\ </pre>
        <pre class=e2>$$  __$$\                                    $$ |</pre>
        <pre class=e3>$$ /  \__|$$$$$$\  $$\   $$\ $$$$$$$\   $$$$$$$ |</pre>
        <pre class=e4>$$$$\    $$  __$$\ $$ |  $$ |$$  __$$\ $$  __$$ |</pre>
        <pre class=e5>$$  _|   $$ /  $$ |$$ |  $$ |$$ |  $$ |$$ /  $$ |</pre>
        <pre class=e6>$$ |     $$ |  $$ |$$ |  $$ |$$ |  $$ |$$ |  $$ |</pre>
        <pre class=e7>$$ |     \$$$$$$  |\$$$$$$  |$$ |  $$ |\$$$$$$$ |</pre>
        <pre class=e8>\__|      \______/  \______/ \__|  \__| \_______|</pre>
      </div>

    </div>

    <div id=popup class=popup>
      <div class=popup-content>
        <form id=search-form2 class=search-form action="http://websemantics.uk/search/" method=get>
          <fieldset class=search-fieldset>
            <legend class=hide>Site search</legend>

            <div class=flex>
              <p class=popup-p>Return to <a href="http://websemantics.uk/">Homepage</a> or </p>
              <label class="search-label hide" for=q>Search:</label>
              <div class=search-container>
                <input class=search-input id=q name=q  type=search required placeholder="site search">
                <button class=search-btn type=submit>
              <svg width=36 height=36 viewbox="0 0 38 38">
                <title>Search site</title>
                <circle r=8 cy=16 cx=16 stroke=#b7b7b7 stroke-width=3 fill=transparent />
                <line y2=30 x2=30 y1=23 x1=23 stroke=#b7b7b7 stroke-width=4 />
              </svg>
              <span>Search site</span>
            </button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>

  </div>
</div>

<svg class="tv tv-top" viewBox="0 0 1366 768" xmlns="http://www.w3.org/2000/svg"><path fill="#1a1a1a" d="M1366 731.6h-7c2.8-66-3-289.7-3-347.6 0-89.7-10-289-10-289 0-52.5-22.5-75-75-75 0 0-398.6-10-588-10C493.6 10 95 20 95 20c-52.5 0-75 22.5-75 75 0 0-10 199.3-10 289 0 58-6.8 281.5-4 347.6l-6 10V0h1366v731.6z"/></svg>
<svg class="tv tv-bottom" fill="#1a1a1a" viewBox="0 0 1366 768" xmlns="http://www.w3.org/2000/svg"><path d="M1366 44.5V768H0V44.5h7.2c-3 66 2.8 281 2.8 339.5 0 89.7 10 289 10 289 0 52.5 22.5 75 75 75 0 0 399.2 10 588 10 189.4 0 588-10 588-10 52.5 0 75-22.5 75-75 0 0 10-199.3 10-289 0-58.4 5.8-273.4 2.8-339.5h7.2z"/></svg>
            
          
!
            
              html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:after,
*:before {
  -moz-box-sizing: inherit;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

@font-face {
  font-family: 'spectrum';
  /* http://damieng.com/blog/2011/02/20/typography-in-8-bits-system-fonts */
  /* http://fontstruct.com/fontstructions/show/118432 */
  src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff');
  font-weight: normal;
  font-style: normal;
}
body {
  width: 100vw;
  height: 100vH;
  overflow: hidden;
}
.borderBox {
  position: absolute;
  background-size: 10px 10px;
  height: 100%;
  padding: 7% 10%;
  width: 100%;
  overflow: hidden
}

.content {
  position: relative;
  height: 100%;
  box-shadow: -2px 1px 4px #e7e7e7;
  background: linear-gradient(to right, #dfdfdf, #dfdfdf 50%, #dedede 50%, #dedede);
  background-size: 40px 100%;
  -webkit-animation: content 5s 3 linear;
  animation: content 5s 3 linear;
}

.bootup .content {
  background-color: #000;
  background: linear-gradient(to right, #151515, #000 50%, #0E0E0E 50%, #090909);
  background-size: 20% 100%;
  -webkit-animation: bootup .5s 1 linear;
  animation: bootup .5s 1 linear;
}

p {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: .5rem 0
}

.prog {
  bottom: auto;
  left: 4px
}

pre {
  display: block;
  margin: 0
}

.text_copy .copy,
.text_load1 .load1,
.text_load2 .load2,
.text_load3 .load3,
.text_rtape .rtape,
.text_prog .prog {
  display: block
}

.init_load {
  background-color: cyan;
  -webkit-animation: init_load 3s 1 linear;
  animation: init_load 3s 1 linear;
}

.start_load {
  background: -webkit-linear-gradient(top, cyan, cyan 50%, #c00 50%, #c00);
  background: linear-gradient(to bottom, cyan, cyan 50%, #c00 50%, #c00);
  background-size: 100% 40px;
  -webkit-animation: start_load 1s 2 linear;
  animation: start_load 1s 2 linear;
}

.start_blip {
  background: -webkit-linear-gradient(top, cyan, cyan 10px, #c00 15px, #c00 25px);
  background: linear-gradient(to bottom, cyan, cyan 10px, #c00 15px, #c00 25px);
  background-size: 100% 26px;
  -webkit-animation: start_blip .5s 2 ease;
  animation: start_blip .5s 2 ease;
}

.loading {
  background: -webkit-linear-gradient(top, yellow, yellow 5px, blue 9px, blue 14px, yellow 16px);
  background: linear-gradient(to bottom, yellow, yellow 5px, blue 9px, blue 14px, yellow 16px);
  background-size: 100% 12px;
  -webkit-animation: start_blip 1s infinite ease;
  animation: start_blip 1s infinite ease;
}

.cursor {
  -webkit-animation: cursor 1s infinite linear;
  animation: cursor 1s infinite linear;
}

@keyframes bootup {
  00% {
    background-position: 0 0
  }
  99% {
    background-position: 2% 0
  }
  100% {
    background-position: 0 0
  }
}

@-webkit-keyframes bootup {
  00% {
    background-position: 0 0
  }
  99% {
    background-position: 2% 0
  }
  100% {
    background-position: 0 0
  }
}

@keyframes content {
  00% {
    background-position: 0 0
  }
  99% {
    background-position: 5% 0
  }
  100% {
    background-position: 0 0
  }
}

@-webkit-keyframes content {
  00% {
    background-position: 0 0
  }
  99% {
    background-position: 5% 0
  }
  100% {
    background-position: 0 0
  }
}

@-webkit-keyframes cursor {
  00% {
    background: #000;
    color: #fff
  }
  49% {
    background: #000;
    color: #fff
  }
  50% {
    background: #ddd;
    color: #000
  }
  100% {
    background: #ddd;
    color: #000
  }
}

@keyframes cursor {
  00% {
    background: #000;
    color: #fff
  }
  49% {
    background: #000;
    color: #fff
  }
  50% {
    background: #ddd;
    color: #000
  }
  100% {
    background: #ddd;
    color: #000
  }
}

@-webkit-keyframes init_load {
  00% {
    background: #c00
  }
  39% {
    background: #c00
  }
  40% {
    background: cyan
  }
  79% {
    background: cyan
  }
  80% {
    background: #c00
  }
  89% {
    background: #c00
  }
  90% {
    background: cyan
  }
  100% {
    background: cyan
  }
}

@keyframes init_load {
  00% {
    background: #c00
  }
  39% {
    background: #c00
  }
  40% {
    background: cyan
  }
  79% {
    background: cyan
  }
  80% {
    background: #c00
  }
  89% {
    background: #c00
  }
  90% {
    background: cyan
  }
  100% {
    background: cyan
  }
}

@-webkit-keyframes start_load {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: 0 80px
  }
}

@keyframes start_load {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: 0 80px
  }
}

@-webkit-keyframes start_blip {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: 0 80px
  }
}

@keyframes start_blip {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: 0 80px
  }
}

.tv {
  position: absolute;
  width: calc(100% + 10px);
  z-index: 2
}

.tv-top {
  top:-5px;
  left:-5px;
}

.tv-bottom {
  bottom: -5px;
  left:-5px;
}

.tv-left {
  height: 100%
}

.tv-right {
  right: 0;
  height: 100%
}


/* Flex used for responsive layout */

.content {
  display: flex;
  justify-content: center;
  align-content: space-around
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: calc(100% - 24px);
  padding: 32px 0px;
  align-content: center;
  XXXbox-shadow: 1px 0 2px rgba(0, 0, 0, .035)
}


/* 404 Line at a time animation */

pre {
  visibility: hidden
}

.e1ON .e1,
.e2ON .e2,
.e3ON .e3,
.e4ON .e4,
.e5ON .e5,
.e6ON .e6,
.e7ON .e7,
.e8ON .e8,
.e9ON .e9,
.e10ON .e10,
.e11ON .e11,
.e12ON .e12 {
  visibility: visible
}

.show404 pre {
  visibility: visible
}

.hide {
  position: absolute;
  left: -500rem;
  top: -500rem
}

.popup {
  display: none;
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.popup.ON {
  display: block;
}

.popup-content {
  margin: 0 auto;
  max-width: 38rem;
}

.popup-h {
  position: absolute;
  left: -200rem;
  font-weight: normal;
}

.popup-p {
  flex: 1 1 0;
  position: relative;
  display: inline-block;
}

.popup-p a,
.popup-p a:visited {
  color: #236ECE
}

.popup-p a:hover,
.popup-p a:focus {
  color: #014cac
}

.search-fieldset {
  border: 0 solid;
  padding: 0;
  margin: 0;
}

.search-fieldset .flex {
  padding: 0;
}

.search-input {
  color: #3B2D4A;
  flex: 1 1 0;
  padding: .62rem 1rem;
  width: 100%;
  font-size: 1rem;
}

.search-btn {
  padding: 0;
  display: block;
  border: 0 solid;
  background-color: #3B2D4A;
  cursor: pointer;
}

.search-btn svg {
  width: 2.3rem;
  height: 100%;
}

.search-btn svg path {
  stroke: #ddd;
}

.search-btn:hover path,
.search-btn:focus path {
  stroke: #fff;
}

.search-btn span {
  position: absolute;
  left: -200rem;
}


/* 320x480 */

.borderBox {
  padding: 8vh 10%;
}

.content {
  box-shadow: -2px 1px 4px #e7e7e7, 1px 0 2px rgba(0, 0, 0, .035)
}

.words {
  padding: 0;
  text-align: center;
  height: calc(100% - 60px);
}

.popup-content {
  max-width: 30rem;
  text-align: center;
}

.search-container {
  width: 100%;
  padding: 0;
  position: relative;
  display: block;
  border: 1px solid #3B2D4A;
}

.search-input {
  background-color: transparent;
  border: 0 solid;
}

.search-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}


/*  */

html {
  font-size: 11px;
}

@media (min-width:340px) {
  html {
    font-size: 12px;
  }
}

@media (min-width:400px) {
  html {
    font-size: 13px;
  }
}

@media (min-width:650px) {
  html {
    font-size: 15px;
  }
}

@media (min-width:800px) {
  html {
    font-size: 16px;
  }
}

body {
  margin: 0;
  background: #ddd;
  color: #333;
}

body,
.search-input {
  font-family: spectrum, Courier, monospace;
  font-weight: bold;
  text-shadow: -4px 0 2px #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
}

pre {
  font-size: calc(1vmin * 2.2)
}

.word {
  margin: .5rem
}

.flex {
  align-content: center;
}

@media (orientation: landscape) {
  .flex {
    align-content: flex-start;
  }
}
            
          
!
            
              try {
  window.AudioContext = window.AudioContext || window.webkitAudioContext, window.audioContext = new window.AudioContext
} catch (a) {
  console.log("No Web Audio API support")
}
var WebAudioAPISoundManager = function(a) {
  this.context = a;
  this.bufferList = {};
  this.playingSounds = {}
};
WebAudioAPISoundManager.prototype = {
  addSound: function(a) {
    var b = new XMLHttpRequest;
    b.open("GET", a, !0);
    b.responseType = "arraybuffer";
    var c = this;
    b.onload = function() {
      c.context.decodeAudioData(b.response, function(b) {
        b ? c.bufferList[a] = b : alert("error decoding file data: " + a)
      })
    };
    b.onerror = function() {
      console.log("BufferLoader: XHR error")
    };
    b.send()
  },
  stopSoundWithUrl: function(a) {
    if (this.playingSounds.hasOwnProperty(a))
      for (var b in this.playingSounds[a]) this.playingSounds[a].hasOwnProperty(b) && this.playingSounds[a][b].stop()
  }
};
var WebAudioAPISound = function(a) {
  this.url = a + ".mp3";
  window.webAudioAPISoundManager = window.webAudioAPISoundManager || new WebAudioAPISoundManager(window.audioContext);
  this.manager = window.webAudioAPISoundManager;
  this.manager.addSound(this.url)
};
WebAudioAPISound.prototype = {
  play: function(a) {
    var b = this.manager.bufferList[this.url];
    this.settings = {
      loop: !1,
      volume: .5
    };
    for (var c in a) a.hasOwnProperty(c) && (this.settings[c] = a[c]);
    "undefined" !== typeof b && (a = this.makeSource(b), a.loop = this.settings.loop, a.start(0), this.manager.playingSounds.hasOwnProperty(this.url) || (this.manager.playingSounds[this.url] = []), this.manager.playingSounds[this.url].push(a))
  },
  stop: function() {
    this.manager.stopSoundWithUrl(this.url)
  },
  makeSource: function(a) {
    var b = this.manager.context.createBufferSource(),
      c = this.manager.context.createGain();
    c.gain.value = this.settings.volume;
    b.buffer = a;
    b.connect(c);
    c.connect(this.manager.context.destination);
    return b
  }
};

var typingSound = new WebAudioAPISound("http://websemantics.uk/audio/speccy.keypress");
var speccy1Sound = new WebAudioAPISound("http://websemantics.uk/audio/speccy1");
var speccy2Sound = new WebAudioAPISound("http://websemantics.uk/audio/speccy2");

var box = document.getElementById("box"),
  delay = 1;

function boxClass(cls, delay, add) {
  if (add) {
    setTimeout(function() {
      box.classList.add(cls);
    }, delay);
  } else {
    setTimeout(function() {
      box.classList.remove(cls);
    }, delay);
  }
}

function animateWords() {
  var delay = 0,
    i = 12;
  while (i--) {
    boxClass('e' + (12 - i) + 'ON', delay, true);
    delay += 200;
  }
}

boxClass('bootup', delay, true);
delay += 500;
boxClass('bootup', delay);
boxClass('text_copy', delay, true);
delay += 1500;
boxClass('text_copy', delay);
boxClass('text_load1', delay, true);
setTimeout(function() {
  typingSound.play({
    // keep it quiet
    volume: 0.1
  });
}, delay);
delay += 1250;
boxClass('text_load1', delay - 10);
boxClass('text_load2', delay, true);
setTimeout(function() {
  typingSound.play({
    volume: 0.1
  });
}, delay);
delay += 750;
boxClass('text_load2', delay - 10);
boxClass('text_load3', delay, true);
setTimeout(function() {
  typingSound.play({
    volume: 0.1
  });
}, delay);
delay += 750;
setTimeout(function() {
  typingSound.play({
    volume: 0.1
  });
}, delay - 100);
boxClass('text_load3', delay - 10);
boxClass('init_load', delay, true);
delay += 2920;

setTimeout(function() {
  speccy1Sound.play({
    loop: false,
    volume: 0.1
  });
}, delay);

delay += 80;
boxClass('start_load', delay, true);
delay += 1000;
boxClass('start_load', delay - 10);
boxClass('start_blip', delay, true);
delay += 300;
boxClass('start_blip', delay - 10);
boxClass('text_prog', delay, true);

setTimeout(function() {
  document.body.addEventListener('click', ETgoHome, false);
}, delay);

delay += 1200;
boxClass('start_load', delay, true);
delay += 150;

setTimeout(function() {
  speccy2Sound.play({
    loop: false,
    volume: 0.1
  });
}, delay);

delay += 350;
boxClass('init_load', delay - 20);
boxClass('start_load', delay - 10);
boxClass('loading', delay, true);

setTimeout(animateWords, delay);
boxClass('text_prog', delay);

delay += 2150;
boxClass('loading', delay - 20);
boxClass('text_rtape', delay, true);
            
          
!
999px
Close

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.

Go PRO

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

Console