Advertisement
csloani

PAGE 06 | JAUNT

Apr 7th, 2015
2,460
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.51 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13. <!--
  14.  
  15.  
  16. page jaunt 06
  17. iliyon @ tumblr
  18.  
  19.  
  20. -->
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32. <title>{Title}</title><link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'><link href='http://static.tumblr.com/wb7siqo/jjdnjg8n6/cssnormalizer.css' rel='stylesheet' type='text/css'><link rel="shortcut icon" href="{Favicon}">
  33. <meta name="image:Bg" content="" />
  34. <meta name="color:Text" content="#ffffff" />
  35. <meta name="color:Overlay" content="#111111" />
  36. <meta name="select:Overlay Opacity" content="70" title="70%" />
  37. <meta name="select:Overlay Opacity" content="0" title="None" />
  38. <meta name="select:Overlay Opacity" content="10" title="10%" />
  39. <meta name="select:Overlay Opacity" content="20" title="20%" />
  40. <meta name="select:Overlay Opacity" content="30" title="30%" />
  41. <meta name="select:Overlay Opacity" content="40" title="40%" />
  42. <meta name="select:Overlay Opacity" content="50" title="50%" />
  43. <meta name="select:Overlay Opacity" content="60" title="60%" />
  44. <meta name="select:Overlay Opacity" content="80" title="80%" />
  45. <meta name="select:Overlay Opacity" content="90" title="90%" />
  46. <meta name="text:URL" content="" />
  47. <meta name="text:Name" content="" />
  48. <meta name="text:Background Position" content="center center" />
  49. <meta name="if:Stretch Background" content="1" />
  50. <meta name="if:Tile Background" content="0" />
  51. <meta name="if:Auto Redirect" content="1" />
  52. <style type="text/css">
  53. @import url(http://weloveiconfonts.com/api/?family=entypo);
  54. [class*="entypo-"]:before {font-family: 'entypo', sans-serif;}
  55. body{font-family:Montserrat;color:{color:Text};font-size:16px;}
  56. iframe#tumblr_controls{display:none!important;}
  57. a{text-decoration:none;color:{color:Text};}
  58. .bg{background-image:url('{image:Bg}');background-position:{text:Background Position};{block:ifStretchBackground}background-size:cover;{/block:ifStretchBackground}{block:ifNotTileBackground}background-repeat:no-repeat;{/block:ifNotTileBackground}position:fixed;top:0;width:100%;height:100%;z-index:0;}
  59. .overlay{background:rgba({RGBcolor:Overlay},.{select:Overlay Opacity});position:fixed;top:0;width:100%;height:100%;z-index:1;}
  60. .content{position:fixed;top:0;width:100%;height:100%;z-index:2;}
  61. .content > section{height:100%;width:100%;display:table;vertical-align:middle;}
  62. .content > section > article{height:100%;width:100%;display:table-cell;vertical-align:middle;}
  63. .content .c{width:400px;margin:auto;font-size:75%;letter-spacing:3px;}
  64. .c a{display:block;padding:20px 15px;text-transform:uppercase;background:rgba({RGBcolor:Overlay},.5);position:relative;border:3px {color:Text} solid;overflow:hidden;}
  65. .c a:after{display:block;width:43px;height:46px;border-left:3px {color:Text} solid;position:absolute;top:0;right:0;content:'';}
  66. .c a:hover{background:rgba({RGBcolor:Overlay},.85);}.c div{position:absolute;width:100%;opacity:1;top:15px;left:20px;}
  67. .n{-webkit-transition:.7s;transition:.7s;}
  68. .c:hover .n{left:50%;opacity:0;-webkit-transition:.7s;transition:.7s;}
  69. .c .m{top:40px;}
  70. .c:hover .m{top:15px;-webkit-transition:0.5s ease-out;transition:0.5s ease-out;-webkit-transition-delay:0.4s;transition-delay:0.4s;-webkit-animation:no 1.2s ease-out;animation:no 1.2s ease-out;-webkit-animation-delay:0.9s;animation-delay:.9s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
  71. @-webkit-keyframes no{0{top:40px;}50%{top:15px;}60%{top:15px;}100%{top:-40px;}}
  72. @keyframes no{0{top:40px;}50%{top:15px;}60%{top:15px;}100%{top:-40px;}}
  73. .c .q{top:40px;opacity:1;}
  74. .c:hover .q{-webkit-animation:nah {block:ifNotAutoRedirect}.3{/block:ifNotAutoRedirect}{block:ifAutoRedirect}1{/block:ifAutoRedirect}s ease-out;animation:nah {block:ifNotAutoRedirect}.3{/block:ifNotAutoRedirect}{block:ifAutoRedirect}1{/block:ifAutoRedirect}s ease-out;-webkit-animation-delay:1.5s;animation-delay:1.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
  75. @-webkit-keyframes nah{{block:ifNotAutoRedirect}from{top:40px;}to{top:15px;}{/block:ifNotAutoRedirect}{block:ifAutoRedirect}from{top:40px;}50%{top:15px; opacity:1;}80%{top:15px; opacity:1;}to{top:15px; opacity:0;}{/block:ifAutoRedirect}}
  76. @keyframes nah{{block:ifNotAutoRedirect}from{top:40px;}to{top:15px;}{/block:ifNotAutoRedirect}{block:ifAutoRedirect}from{top:40px;}50%{top:15px; opacity:1;}80%{top:15px; opacity:1;}to{top:15px; opacity:0;}{/block:ifAutoRedirect}}{block:ifAutoRedirect}
  77. .c .r{top:40px;}
  78. .c:hover .r{top:15px;-webkit-transition:0.4s ease-out;transition:.4s ease-out;-webkit-transition-delay:3s;transition-delay:3s;}
  79. {/block:ifAutoRedirect}
  80. p.go{position:absolute;font-size:18px;right:10px;top:12px;width:14px!important;margin:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:.5s;transition:.5s;}
  81. .c:hover p.go{-webkit-animation:nay .4s ease-out;animation:nay .4s ease-out;-webkit-animation-delay:{block:ifNotAutoRedirect}2.3{/block:ifNotAutoRedirect}{block:ifAutoRedirect}3.2{/block:ifAutoRedirect}s;animation-delay:{block:ifNotAutoRedirect}2.3{/block:ifNotAutoRedirect}{block:ifAutoRedirect}3.2{/block:ifAutoRedirect}s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
  82. @-webkit-keyframes nay{from{-webkit-transform:scale(0);transform:scale(0);}60%{-webkit-transform:scale(1.6);transform:scale(1.6);}70%{-webkit-transform:scale(1.6);transform:scale(1.6);}to{-webkit-transform:scale(1);transform:scale(1);}}
  83. @keyframes nay{from{transform:scale(0);}60%{transform:scale(1.6);}70%{transform:scale(1.6);}to{transform:scale(1);}}
  84. {block:ifAutoRedirect}
  85. .annotation{bottom:15px;z-index:9;position:fixed;width:100%;font-size:70%;text-align:center;display:none;}
  86. {/block:ifAutoRedirect}
  87. .cr{font-size:15px;background:rgba(10,10,10,.5);border-radius:3px;padding:8px;
  88. line-height:10px;z-index:999;position:fixed;bottom:25px;right:25px;display:block;}</style></head><body>
  89. <a class="cr" href="http://iliyon.tumblr.com" target="blank">&copy;</a>
  90. {block:ifAutoRedirect}
  91. <section class="annotation">You will be redirected in <span id="st">7</span>s.</section>
  92. {/block:ifAutoRedirect}
  93. <section class="bg"></section>
  94. <section class="overlay"></section>
  95. <section class="content">
  96. <section>
  97. <article>
  98. <article class="c">
  99. <a href="#">
  100. <div class="n">{Name}</div>
  101. <div class="m">is now on</div>
  102. <div class="q">{text:Name}</div>
  103. {block:ifAutoRedirect}
  104. <div class="r">redirecting...</div>
  105. {/block:ifAutoRedirect}
  106. <p class="go">
  107. <span class="entypo-right-open-mini"></span>
  108. </p>
  109. </a>
  110. </article>
  111. </article>
  112. </section>
  113. </section>
  114. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  115. <script type="text/javascript">$(document).ready(function(){$('.c a').click(function(){location.replace('{text:URL}' + location.pathname);return false;});});</script>
  116. {block:ifAutoRedirect}<script type="text/javascript">$(document).ready(function(){$('.c a').hover(function(){$('.annotation').fadeIn();var co = 7;var sec;var ant = document.getElementById("st");sec = setInterval(function(){co--;if(co < 0){location.replace('{text:URL}' + location.pathname);} else{ant.innerHTML = co;}}, 1000);$(this).unbind('mouseenter mouseleave');});});</script>
  117. {/block:ifAutoRedirect}
  118. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement