cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

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.

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("https://websemantics.uk/audio/speccy.keypress");
var speccy1Sound = new WebAudioAPISound("https://websemantics.uk/audio/speccy1");
var speccy2Sound = new WebAudioAPISound("https://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
Loading ..................

Console