404 ERROR Template

404 ERROR Template.markdown

404 ERROR Template

Forked from Anton Domonkos's Pen 404 ERROR Template.

A Pen by Kai Smith on CodePen.

License.

index.html

 <span><i class="fa fa-chain-broken fa-5"></span></i><h2> <span> 4</span><span>0</span><span>4</span></h2>
  <h1>What have you done? Just look at it. Shame...</h1>
  <span><button id="abutton" value="abc">< save class="this site" ></button></span>
  <a href="#" target="_blank">link</a>

script.js

/* ------------------------------------------------------------
 * Only works nice in fullscreen :I
 * Test it out, just open the link in the corner in a new tab!
 > ------------------------------------------------------------
 */

/* == Thumbtack == */
var Thumbtack = function() {
  function e() {
    for (var e = "<div id='Thumbnail'>404 ERROR!!!</div>", n = "<style>@import url(http://fonts.googleapis.com/css?family=Oswald);#Thumbnail {  position: absolute;  top: 0; left: 0;  width: 100vw; height: 100vh;  background: #C33232;  text-align: center;  line-height: 100vh;  font-family: 'Oswald';  color: #eee;  font-size: 10vw;  text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);  z-index: 9999;}</style>", t = window.location != window.parent.location ? document.referrer : document.location, o = ["/pen/", "/details/", "/full/", "/debug/", "/live/", "/collab/", "/professor/", "/pres/", "/embed/", "/fullembedgrid/"], r = !0, a = 0; a < o.length; a++) - 1 !== t.indexOf(o[a]) && (r = !1);
    r && (document.body.insertAdjacentHTML("afterbegin", e), document.head.insertAdjacentHTML("afterbegin", n))
  }
  return e()
}();
/* == End Thumbtack == */

$(document).ready(function() {
  $('body').width(window.innerWidth).height(window.innerHeight);
  $('#abutton').on('click', albert);

  function albert() {
    $('h1').html('<span>Oh</span> <span>gosh</span><span>,</span> <span>it</span> <span>crashed!</span><span>"!"+!</span>');
    $('span, button').attr('style', 'cursor:move !important;')
    $('body').jGravity({
      target: 'span',
      ignoreClass: 'dontMove',
      weight: 25,
      depth: 100,
      drag: true
    });
    $('#abutton').off('click', albert);
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="http://www.tinybigideas.com/assets/demo/jquery-gravity/jGravity-min.js"></script>

style.css

*:focus {outline:none;}
body {
  background: #C33232;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  margin: 30px;
  overflow:hidden;
}

.fa-5, h2 {
    font-size: 12em;
    font-weight: 600;
    display:inline-block;
    margin: 0;
}

.content {

}

#abutton {
  width: 500px;
  height: 60px;
  font-size: 2em;
  background: white;
  border: 0;
  margin-top: 10px;
  cursor:pointer;
  transition: all .2s;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
}

#abutton:hover {
  transform: scale(.989);
  -moz-transform: scale(.989);
  -webkit-transform: scale(.989);
  background: #f4f4f4;
}

a {
  position:fixed;
  bottom: 10px;
  right:10px;
  color: #ddd;
}

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />