Skip to content

Instantly share code, notes, and snippets.

@psd

psd/index.html

Created January 5, 2012 16:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save psd/1566097 to your computer and use it in GitHub Desktop.
Save psd/1566097 to your computer and use it in GitHub Desktop.
Download ZIP
Getting Older
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
__
/\ \
_____ ____ \_\ \
/\ '__`\ /',__\ /'_` \
\ \ \L\ \/\__, `\/\ \L\ \
\ \ ,__/\/\____/\ \___,_\
\ \ \/ \/___/ \/__,_ /
\ \_\
\/_/
http://github.com/psd/HardBoiled-hCards
-->
<title>Getting Older</title>
<style>
.page {
width: 250mm;
margin: 1em auto;
}
.photo {
float: left;
margin: 1em;
z-index: 1;
}
.photo img {
height: 65mm;
}
.photo:hover {
z-index: 100;
-webkit-transform: rotate(0deg) scale(1.25);
-moz-transform: rotate(0deg) scale(1.25);
transform: rotate(0deg) scale(1.25);
}
.right {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
.left {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
</style>
</head>
<body>
<div class="page">
<div class="photo">
<a href="http://www.flickr.com/photos/psd/1411761/" title="Paul - Redhead by psd, on Flickr"><img src="http://farm1.staticflickr.com/2/1411761_5bec15c8e9_m.jpg" alt="Paul - Redhead"></a>
</div>
<div class="photo left">
<a href="http://www.flickr.com/photos/psd/6545625/" title="YoungMe by psd, on Flickr"><img src="http://farm1.staticflickr.com/5/6545625_291c4cf61d_m.jpg" alt="YoungMe"></a>
</div>
<div class="photo">
<a href="http://www.flickr.com/photos/psd/1411759/" title="Paul - Gorky by psd, on Flickr"><img src="http://farm1.staticflickr.com/2/1411759_2c0bc82f39_m.jpg" alt="Paul - Gorky"></a>
</div>
<div class="photo">
<a href="http://www.flickr.com/photos/psd/6542701/" title="Paul Aged 21 by psd, on Flickr"><img src="http://farm1.staticflickr.com/8/6542701_e1465987f8_m.jpg" alt="Paul Aged 21"></a>
</div>
<div class="photo">
<a href="http://www.flickr.com/photos/psd/169819376/" title="Girking by psd, on Flickr"><img src="http://farm1.staticflickr.com/58/169819376_d352add6a3_m.jpg" alt="Girking"></a>
</div>
<div class="photo right">
<a href="http://www.flickr.com/photos/psd/6641845577/" title="psd balding by psd, on Flickr"><img src="http://farm8.staticflickr.com/7153/6641845577_0c3bbc3e3f_m.jpg" alt="psd balding"></a>
</div>
<div class="photo">
<a href="http://www.flickr.com/photos/psd/7059817/" title="me by psd, on Flickr"><img src="http://farm1.staticflickr.com/4/7059817_39a5a7bc8e_m.jpg" alt="me"></a>
</div>
<div class="photo left">
<a href="http://www.flickr.com/photos/psd/2445577035/" title="NowMe by psd, on Flickr"><img src="http://farm3.staticflickr.com/2213/2445577035_f06455be86_m.jpg" alt="NowMe"></a>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment