Skip to content

Instantly share code, notes, and snippets.

@psaia

psaia/vintage.html

Created December 26, 2015 02:35
Show Gist options
  • Save psaia/3f81018bfc6a6cd72d2a to your computer and use it in GitHub Desktop.
Save psaia/3f81018bfc6a6cd72d2a to your computer and use it in GitHub Desktop.
Download ZIP
Ace's site.
Raw
vintage.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html { margin: 0; padding: 0; }
.ace:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.ace { display: inline-block; }
* html .ace { height: 1%; }
.ace { display: block; }
img { max-width: 100%; width: auto; height: auto; display: block; margin: auto; }
.grid-sizer,
.grid-item { width: 33.33%; text-align: center; }
.grid-item { float: left; }
header { padding: 10px 0 10px 20px; text-align: left; }
header a { }
hr { background: #ccc; border: none; padding: 0; margin: 0; height: 4px; width: 100%; }
</style>
</head>
<body>
<header>
<a href="4u.html">back</a>
</header>
<div class='ace'>
<div class="grid-sizer"></div>
<div class="grid-item"><img src="vantage/001_1.jpg" /></div>
<div class="grid-item"><img src="vantage/002_2.jpg" /></div>
<div class="grid-item"><img src="vantage/003_3.jpg" /></div>
<div class="grid-item"><img src="vantage/004_4.jpg" /></div>
<div class="grid-item"><img src="vantage/005_5.jpg" /></div>
<div class="grid-item"><img src="vantage/006_6.jpg" /></div>
<div class="grid-item"><img src="vantage/007_7.jpg" /></div>
<div class="grid-item"><img src="vantage/009_9.jpg" /></div>
<div class="grid-item"><img src="vantage/010_10.jpg" /></div>
<div class="grid-item"><img src="vantage/011_11.jpg" /></div>
<div class="grid-item"><img src="vantage/012_12.jpg" /></div>
<div class="grid-item"><img src="vantage/013_13.jpg" /></div>
<div class="grid-item"><img src="vantage/026_26.jpg" /></div>
<div class="grid-item"><img src="vantage/030_30.jpg" /></div>
<div class="grid-item"><img src="vantage/014_14.jpg" /></div>
<div class="grid-item"><img src="vantage/015_15.jpg" /></div>
<div class="grid-item"><img src="vantage/016_16.jpg" /></div>
<div class="grid-item"><img src="vantage/017_17.jpg" /></div>
<div class="grid-item"><img src="vantage/020_20.jpg" /></div>
<div class="grid-item"><img src="vantage/021_21.jpg" /></div>
<div class="grid-item"><img src="vantage/024_24.jpg" /></div>
<div class="grid-item"><img src="vantage/025_25.jpg" /></div>
<div class="grid-item"><img src="vantage/023_23.jpg" /></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src='http://imagesloaded.desandro.com/imagesloaded.pkgd.js'></script>
<script>
$(function() {
var $grid = $('.ace').masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer'
});
$grid.imagesLoaded().progress( function() {
$grid.masonry();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment