Untitled

<!DOCTYPE html>
<head>
    <meta charset='UTF-8'>
    <title>{TITLE}</title>
	<link rel='stylesheet' href='css/style.css'>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />

<link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>

	<script src='js/slidetounlock.js'></script>


<meta name="text:New URL" content="http://gurkansen.com/"/>
<meta name="text:New Username" content="NEW USERNAME"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Hover" content="#7FFF00"/>

<meta name="if:Show Navigation" content="1"/>

<center><br><br><br><br><br>
<ha><b>TASINDIM!</b></ha><br><br><br>
</center>

<style type="text/css">

a:link, a:active, a:visited{
color: {color:Link};
text-decoration: none;
-webkit-transition: 0.3s ease-in;
}

a:hover {
color: {color:Hover};
-webkit-transition: 0.3s ease-in;
}


iframe#tumblr_controls{
top: 0px !important;
margin: 0 0 0 0;
right: 0px !important;
position: fixed !important;
opacity: 0;
}

ha{
font: 50pt 'Righteous', cursive; !important;
font-weight:normal;
line-height:20px;
margin:0px;
color: rgba(0,0,0,0.6);

text-shadow:1px 1px 2px rgba(255,255,255,0.1);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;}


h5{
font: 20pt 'Righteous', cursive; !important;
font-weight:normal;
line-height:20px;
margin:0px;
color: rgba(0,0,0,0.6);

text-shadow:1px 1px 2px rgba(255,255,255,0.1);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;}


</style>
</head><body>

	<div id="page-wrap">

		<div id="well">

			<h2><strong id="slider"></strong><span>slide to unlock</span></h2>

		</div>

	</div>

<style type="text/css">

   /*
     CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body {
	font: 15px Georgia, serif;
	background-image:url(http://static.tumblr.com/b8yqvki/2qGmal7sx/pattern9.jpg);
	background-repeat: repeat;
	background-attachment: fixed;
    min-height: 350px;


}
#page-wrap { width: 720px; margin: 0 auto; padding-top: 50px; }

#well {
   padding: 14px 20px 20px 20px;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   border-radius: 30px;

   background: -moz-linear-gradient(top, #010101, #181818);
   background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));

   border: 2px solid #454545;
   overflow: hidden;

   -webkit-user-select: none;
}

h2 {
  background: -moz-linear-gradient(left, #4d4d4d, 0.4, #4d4d4d, 0.5, white, 0.6, #4d4d4d, #4d4d4d);
  background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));

  -moz-background-clip: text;
  -webkit-background-clip: text;

  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;

  -webkit-animation: slidetounlock 5s infinite;

  font-size: 80px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;

  padding: 0;
  width: 200%;

  -webkit-text-size-adjust: none;
}
#slider { cursor:pointer;
    background: url("http://static.tumblr.com/b8yqvki/VLHmclr68/arrow.png") no-repeat;
	width: 146px;
	height: 98px;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

@-webkit-keyframes slidetounlock {
	0% {
		background-position: -720px 0;
	}
	100%{
		background-position: 720px 0;
	}
}

.fontcolor{
 font-size: 50px;
 color:#ffffff;
}
</style>

<script type="text/javascript">

$(function() {

    $("#slider").draggable({
		axis: 'x',
		containment: 'parent',
		drag: function(event, ui) {
			if (ui.position.left > 550) {
				window.location = "{text:New URL}";
			} else {
			    // Apparently Safari isn't allowing partial opacity on text with background clip? Not sure.
				// $("h2 span").css("opacity", 100 - (ui.position.left / 5))
			}
		},
		stop: function(event, ui) {
			if (ui.position.left < 550) {
				$(this).animate({
					left: 0
				})
			}
		}
	});


});

</script>


</body></html>