docs : add 404 page

14 years ago · 831fead2de
1 changed files with 131 additions and 0 deletions
--- a/404.html
+++ b/404.html
@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Page not found &middot; Isotope</title>
+  
+  <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />
+  
+  <style>
+    .page {
+      font-size: 10px;
+      width: 8em;
+      height: 10em;
+      color: white;
+      border: 0.5em solid;
+      margin: 10px;
+      float: left;
+      position: relative;
+    }
+    
+    .page div {
+      position: absolute;
+      top: -0.5em;
+      right: -0.5em;
+    }
+    
+    .page .fold {
+      width: 2.5em;
+      height: 2.5em;
+      border-left: 0.5em solid;
+      border-bottom: 0.5em solid;
+    }
+    
+    .page .corner-a {
+      border-top: 3em solid;
+      border-left: 3em solid transparent;
+    }
+    
+    .page .corner-b {
+      border-top: 2.3em solid #1F1E1D;
+      border-left: 2.3em solid transparent;
+    }
+    
+    .page p {
+      position: absolute;
+      width: 100%;
+      top: 0.75em;
+      font-size: 6em;
+      text-align: center;
+    }
+    
+    .page.bad {
+      font-size: 30px;
+      width: 280px;
+      height: 340px;
+      color: red;
+      z-index: 100;
+    }
+    
+    .page.bad p {
+      top: 0.8em;
+      font-size: 7em;
+    }
+    
+    .page.bad:hover  p {
+      color: white;
+    }
+    
+    #container {
+      border: none;
+      padding: 0;
+    }
+    
+    h2 {
+      font-weight: 300;
+    }
+  </style>
+  
+  <!-- scripts at bottom of page -->
+
+</head>
+<body>
+
+  <h1>Page not found</h1>
+  
+  <h2><a href="/">&larr; Back to Isotope index</a></h2>
+
+  <div id="container">
+    <div class="page bad" data-order="0">
+      <div class="fold"></div>
+      <div class="corner-a"></div>
+      <div class="corner-b"></div>
+      <p>&#x2715;</p>
+    </div>
+    <div class="page good">
+      <div class="fold"></div>
+      <div class="corner-a"></div>
+      <div class="corner-b"></div>
+      <p>&#x2713;</p>
+    </div>
+  </div>
+  
+
+  <script src="/js/jquery-1.4.4.min.js"></script>
+  <script src="/jquery.isotope.js"></script>
+  <script>
+    $(function(){
+      var $container = $('#container')
+          $goodPage = $('.page.good'),
+          pages = $([]);
+          
+      for ( var i=0; i < 30; i++) {
+        pages.push( $goodPage.clone()[0] )
+      }
+      
+      $container.append( $(pages) ).isotope({
+        masonry: {
+          columnWidth: 110,
+        }
+      });
+      
+      $('.page.bad').mouseenter(function(){
+        $container.isotope( 'shuffle' );
+      });
+      
+    });
+  </script>
+
+
+</body>
+</html>g