AdamGerthel/hemnet_ad.html

## hemnet_ad.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
	<style>
	/* http://meyerweb.com/eric/tools/css/reset/
	   v2.0 | 20110126
	   License: none (public domain)
	*/
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	  margin: 0;
	  padding: 0;
	  border: 0;
	  font-size: 100%;
	  font: inherit;
	  vertical-align: baseline; }

	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	  display: block; }

	body {
	  line-height: 1; }

	ol, ul {
	  list-style: none; }

	blockquote, q {
	  quotes: none; }

	blockquote:before, blockquote:after,
	q:before, q:after {
	  content: '';
	  content: none; }

	table {
	  border-collapse: collapse;
	  border-spacing: 0; }

	#slider {
	  width: 100%;
	  height: 100%;
	  max-width: 640px;
	  max-height: 960px;
	  overflow: hidden;
	  position: relative; }
	  #slider img {
	    width: 100%;
	    height: auto; }

	#first {
	  z-index: 0;
	  position: relative; }

	#message {
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  z-index: 1;
	  width: 100%; }
	  #message:not(.show-add) {
	    opacity: 0; }
	  #message.show-add {
	    -webkit-animation: slide-in-right 0.3s 0s ease-in-out 1 normal;
	    -moz-animation: slide-in-right 0.3s 0s ease-in-out 1 normal;
	    -o-animation: slide-in-right 0.3s 0s ease-in-out 1 normal;
	    animation: slide-in-right 0.3s 0s ease-in-out 1 normal;
	    -webkit-animation-fill-mode: forwards;
	    animation-fill-mode: forwards; }
	  #message.show-remove {
	    -webkit-animation: slide-in-right 0.3s 0s ease-in-out 1 reverse;
	    -moz-animation: slide-in-right 0.3s 0s ease-in-out 1 reverse;
	    -o-animation: slide-in-right 0.3s 0s ease-in-out 1 reverse;
	    animation: slide-in-right 0.3s 0s ease-in-out 1 reverse;
	    -webkit-animation-fill-mode: forwards;
	    animation-fill-mode: forwards; }
	  #message.show {
	    opacity: 1; }

	@-webkit-keyframes slide-in-right {
	  0% {
	    -webkit-transform: translateX(100%); }
	  100% {
	    -webkit-transform: translateX(0%); } }
	@-moz-keyframes slide-in-right {
	  0% {
	    -moz-transform: translateX(100%); }
	  100% {
	    -moz-transform: translateX(0%); } }
	@keyframes slide-in-right {
	  0% {
	    transform: translateX(100%); }
	  100% {
	    transform: translateX(0%); } }

	</style>
	<title>Banner 25 - Olsson &amp; Gerthel</title>
</head>
<body>
	<div class="banner">
		<ul id="slider">
			<li><img src="z1.jpg"/></li>
			<li id="message"><a href="http://www.olssongerthel.se/?utm_source=Hemnet&utm_medium=Banner%20320x480&utm_campaign=Ghost%2025%20år"><img src="z2.png"/></a></li>
		</ul>
	</div>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script>
	<script type="text/javascript">
		var message = document.getElementById('message');
		var mc = new Hammer(message);
		var show = function() {
			// Remove the event listener so that the user can swipe past the ad.
			mc.destroy();
			// Animate the overlay slide
			message.className = 'show-add';
			setTimeout(function() {
				message.className = 'show';
			}, 300);
		}
		// Add event listener to show the overlay message on swipe
		mc.on("swipeleft", show);
	</script>
</body>
</html>

## z1.jpg

      
    Raw
  

              z1.jpg
            
          
## z2.png

      
    Raw
  

              z2.png
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
	<style>
	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 \| 20110126
	License: none (public domain)
	*/
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }

	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block; }

	body {
	line-height: 1; }

	ol, ul {
	list-style: none; }

	blockquote, q {
	quotes: none; }

	blockquote:before, blockquote:after,
	q:before, q:after {
	content: '';
	content: none; }

	table {
	border-collapse: collapse;
	border-spacing: 0; }

	#slider {
	width: 100%;
	height: 100%;
	max-width: 640px;
	max-height: 960px;
	overflow: hidden;
	position: relative; }
	#slider img {
	width: 100%;
	height: auto; }

	#first {
	z-index: 0;
	position: relative; }

	#message {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%; }
	#message:not(.show-add) {
	opacity: 0; }
	#message.show-add {
	-webkit-animation: slide-in-right 0.3s 0s ease-in-out 1 normal;
	-moz-animation: slide-in-right 0.3s 0s ease-in-out 1 normal;
	-o-animation: slide-in-right 0.3s 0s ease-in-out 1 normal;
	animation: slide-in-right 0.3s 0s ease-in-out 1 normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards; }
	#message.show-remove {
	-webkit-animation: slide-in-right 0.3s 0s ease-in-out 1 reverse;
	-moz-animation: slide-in-right 0.3s 0s ease-in-out 1 reverse;
	-o-animation: slide-in-right 0.3s 0s ease-in-out 1 reverse;
	animation: slide-in-right 0.3s 0s ease-in-out 1 reverse;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards; }
	#message.show {
	opacity: 1; }

	@-webkit-keyframes slide-in-right {
	0% {
	-webkit-transform: translateX(100%); }
	100% {
	-webkit-transform: translateX(0%); } }
	@-moz-keyframes slide-in-right {
	0% {
	-moz-transform: translateX(100%); }
	100% {
	-moz-transform: translateX(0%); } }
	@keyframes slide-in-right {
	0% {
	transform: translateX(100%); }
	100% {
	transform: translateX(0%); } }

	</style>
	<title>Banner 25 - Olsson & Gerthel</title>
	</head>
	<body>
	<div class="banner">
	<ul id="slider">
	<li><img src="z1.jpg"/></li>
	<li id="message"><a href="http://www.olssongerthel.se/?utm_source=Hemnet&utm_medium=Banner%20320x480&utm_campaign=Ghost%2025%20år"><img src="z2.png"/></a></li>
	</ul>
	</div>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script>
	<script type="text/javascript">
	var message = document.getElementById('message');
	var mc = new Hammer(message);
	var show = function() {
	// Remove the event listener so that the user can swipe past the ad.
	mc.destroy();
	// Animate the overlay slide
	message.className = 'show-add';
	setTimeout(function() {
	message.className = 'show';
	}, 300);
	}
	// Add event listener to show the overlay message on swipe
	mc.on("swipeleft", show);
	</script>
	</body>
	</html>