<script>document.documentElement.className="js";</script><section class="error-page" data-author="Taufik Nurrohman" id="error-page"><h1 aria-hidden="true" class="screen-reader-text">ERROR 404 - NOT FOUND</h1><a class="credit" href="https://taufik-nurrohman.com">Taufik Nurrohman</a><div class="error-404"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i class="nf"></i><i></i><i class="blank"></i><i class="blank nf"></i><i class="blank"></i><i></i><i class="nf"></i><i class="nf"></i><i class="blank"></i><i></i><i class="nf"></i><i class="nf"></i><i class="blank nf"></i><i class="blank"></i><i class="blank"></i><i class="nf"></i><i class="nf"></i><i class="nf"></i><i class="blank"></i><i></i><i class="nf"></i><i class="nf"></i><i class="blank"></i><i class="blank"></i><i class="blank nf"></i><i></i><i></i><i class="nf"></i><i class="blank"></i><i class="blank nf"></i><i class="blank"></i><i class="blank"></i><i class="nf"></i><i></i><i class="nf"></i><i class="nf"></i><i class="nf"></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i class="nf"></i><i class="nf"></i><i></i><i class="nf"></i><i></i><i class="nf"></i><i></i><i></i><i class="blank nf"></i><i></i><i></i><i class="nf"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="nf"></i><i></i><i></i><i class="blank"></i><i class="nf"></i><i></i><i></i><i class="nf"></i><i></i><i class="nf"></i><i></i><i></i><i class="nf"></i><i class="blank"></i><i class="blank nf"></i><i class="blank nf"></i><i class="blank"></i><i class="nf"></i><i></i><i class="nf"></i><i class="blank"></i><i></i><i class="nf"></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i class="nf"></i><i></i><i class="nf"></i><i class="nf"></i><i></i><i class="nf"></i><i></i><i></i><i class="blank nf"></i><i></i><i></i><i class="nf"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="nf"></i><i class="nf"></i><i class="nf"></i><i class="blank"></i><i class="nf"></i><i></i><i></i><i class="nf"></i><i></i><i class="nf"></i><i></i><i></i><i class="nf"></i><i class="blank"></i><i class="blank nf"></i><i class="blank"></i><i class="nf"></i><i class="nf"></i><i></i><i class="nf"></i><i class="blank"></i><i></i><i class="nf"></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i class="nf"></i><i></i><i></i><i class="nf"></i><i></i><i class="nf"></i><i></i><i class="blank"></i><i class="blank nf"></i><i></i><i></i><i class="nf"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="nf"></i><i></i><i></i><i class="blank"></i><i class="nf"></i><i></i><i></i><i class="nf"></i><i></i><i class="nf"></i><i></i><i></i><i class="blank nf"></i><i class="blank"></i><i class="blank nf"></i><i class="blank"></i><i></i><i class="nf"></i><i></i><i class="nf"></i><i></i><i></i><i class="nf"></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i class="nf"></i><i></i><i class="blank"></i><i class="blank nf"></i><i></i><i></i><i class="nf"></i><i class="nf"></i><i class="blank"></i><i></i><i></i><i class="nf"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="nf"></i><i></i><i></i><i class="blank"></i><i></i><i class="nf"></i><i class="nf"></i><i class="blank"></i><i class="blank"></i><i></i><i class="nf"></i><i class="nf"></i><i></i><i class="blank"></i><i class="blank nf"></i><i class="blank"></i><i></i><i class="nf"></i><i></i><i class="nf"></i><i class="nf"></i><i class="nf"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i class="blank"></i><i></i><i></i><i></i><i class="blank"></i></div></section>
/*
CUSTOM ERROR 404 PAGE LAYOUT BY TAUFIK NURROHMAN
11 OCTOBER 2012 - LIFE IS BE U TO FULL
https://latitudu.blogspot.com/blablablah
*/

body {
  background: 0 0;
  height: auto;
  font: normal normal 11px/16px Tahoma, Verdana, Arial, Sans-Serif;
  color: #666;
  text-shadow: 0 1px 0 #000;
}

.page-loader {
  display: none;
}

.error-page {
  background-color: #0f0f0f;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  -webkit-box-shadow: inset 0 2px 5px #000, inset 0 2px 10px #000;
  -moz-box-shadow: inset 0 2px 5px #000, inset 0 2px 10px #000;
  box-shadow: inset 0 2px 5px #000, inset 0 2px 10px #000;
}

.error-404 {
  width: 800px;
  height: 110px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -55px auto auto -400px;
  overflow: hidden;
}

.error-404 i {
  display: block;
  float: left;
  width: 9px;
  height: 9px;
  margin: 0 1px 1px 0;
  background-color: #FDD307;
}

.js .error-404 i {
  opacity: 0;
}

.error-404 .blank {
  background: 0 0;
}

.error-404 .blank.nf-text {
  background-color: #fff !important;
}

.screen-reader-text {
  font: normal normal 0/0 a;
  text-shadow: none;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

a.credit,
a.credit:active,
a.credit:hover {
  color: #2c2c2c;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  display: block;
  position: absolute;
  bottom: 8px;
  right: 12px;
}

a.credit:hover {
  color: #555;
}

a.credit:active {
  color: #999;
}

@media (max-width:800px) {
  .error-404 {
    width: 400px;
    height: 55px;
    margin: -28px auto auto -200px;
  }
  .error-404 i {
    width: 4px;
    height: 4px;
  }
}

@media (max-width:400px) {
  .error-404 {
    width: 240px;
    height: 33px;
    margin: -17px auto auto -120px;
  }
  .error-404 i {
    width: 2px;
    height: 2px;
  }
}
! function(a) {
  var b = a(window),
    c = a(".error-404 i"),
    d = c.not(".blank"),
    e = d.length,
    f = null,
    g = 0;
  d.attr("data-delay", function() {
    return Math.floor(Math.random() * e);
  }), b.on("load", function() {
    d.each(function() {
      var b = a(this),
        d = parseInt(b.data("delay"), 10);
      f = setTimeout(function() {
        g++, b.stop().animate({
          opacity: 1
        }, 600), g === e && (clearTimeout(f), setTimeout(function() {
          c.each(function(b) {
            "blank nf" === this.className && this.setAttribute("data-delay", b);
            var c = a(this),
              d = parseInt(c.data("delay"), 10);
            setTimeout(function() {
              c.hasClass("nf") ? c.addClass("nf-text").stop().animate({
                opacity: 1
              }, 800) : c.stop().animate({
                opacity: .02
              }, 800);
            }, 30 * d);
          });
        }, 3e3));
      }, 50 * d);
    });
  });
}(jQuery);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js