Skip to content

Instantly share code, notes, and snippets.

@maptastik

maptastik/index.html

Last active August 29, 2015 14:27
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 maptastik/ce4d7e430222ee0b3e80 to your computer and use it in GitHub Desktop.
Save maptastik/ce4d7e430222ee0b3e80 to your computer and use it in GitHub Desktop.
Download ZIP
500-502 E 3rd Street Before and After
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>500-502 E 3rd Street Collapse - Juxtaposition</title>
</head>
<body>
<!-- Begin JuxtaposeJS div -->
<div class="juxtapose" data-startingposition="50" data-showlabels="true" data-showcredits="true" data-animate="true">
<!-- Left image -->
<img src="https://lh3.googleusercontent.com/Qo4SULZu7y5Xp-XR4tmFin2rn7HUlHxnL87MskQEHQ=s800" data-label="May 2013" data-credit="Google">
<!-- Right image -->
<img src="https://lh3.googleusercontent.com/aNPYUA5Fb0tZ1IbxmVl_VUBbeGV-kEs6sdpfp4i8Sg=s800" data-label="August 9, 2015" data-credit="<a href='https://www.facebook.com/davidopva/posts/10153539793306449' target='_blank'>Dave O'Neill - Facebook"</a>>
</div>
<!-- JuxtaposeJS css -->
<link rel="stylesheet" href="//cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
<!-- Custom css -->
<!-- <link rel="stylesheet" href="style.css"> -->
<!-- JuxtaposeJS script -->
<script type="text/javascript" src="//cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.js"></script>
<style>
.juxtapose {
max-height: 535px;
max-width: 876px;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment