mirror of https://github.com/metafizzy/isotope
Filter & sort magical layouts
http://isotope.metafizzy.co
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
2.4 KiB
131 lines
2.4 KiB
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<title>Page not found · 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="/">← 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>✕</p> |
|
</div> |
|
<div class="page good"> |
|
<div class="fold"></div> |
|
<div class="corner-a"></div> |
|
<div class="corner-b"></div> |
|
<p>✓</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> |