Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

URL Redirect 001

By: hatterthemes on Jun 5th, 2012  |  syntax: None  |  size: 4.60 KB  |  hits: 64  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!-- URL Redirect 001 by Hatterthemes-->
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <!-- DEFAULT VARIABLES -->
  6.     <meta name="color:Background" content="#a4dcfd" />
  7.     <meta name="color:Background Hover" content="#bbfac8">
  8.     <meta name="color:Text" content="#040608">
  9.    
  10.     <meta name="text:Old Url" content="oldurl" />
  11.     <meta name="text:New Url" content="newurl" />
  12.    
  13.     <meta name="image:Picture 1" content="" />
  14.     <meta name="image:Picture 2" content="" />
  15.    
  16.     <style type="text/css">
  17.  
  18. body {
  19. color:#040404;
  20. background-image:url('http://s1180.photobucket.com/albums/x418/myfatherwillbehearingaboutthis/Gifs/background.png');
  21. background-attachment:fixed;
  22. }
  23.  
  24. a {
  25. text-decoration:none;
  26. color:{color:Text};
  27. }
  28.  
  29. #wrapper {
  30. display:block;
  31. background:#trans;
  32. width:600px;
  33. height:auto;
  34. margin:200px auto 50px auto;
  35. }
  36.  
  37. .box1 {
  38. display:block;
  39. width:90px;
  40. height:90px;
  41. -webkit-transform:rotate(45deg);
  42. -moz-transform:rotate(45deg);
  43. -o-transform:rotate(45deg);
  44. transform:rotate(45deg);
  45. border:10px solid {color:Background};
  46. overflow:hidden;
  47. }
  48. .box1 img {
  49. -webkit-transform:rotate(-45deg);
  50. -moz-transform:rotate(-45deg);
  51. -o-transform:rotate(-45deg);
  52. transform:rotate(-45deg);
  53. width:126px;
  54. height:126px;
  55. margin-top:-18px;
  56. margin-left:-18px;
  57. -webkit-transition: all 1s ease;
  58. -moz-transition: all 1s ease;
  59. -o-transition: all 1s ease;
  60. transition: all 1s ease;
  61. }
  62. .box2 img {
  63. width:126px;
  64. height:126px;
  65. margin-top:-18px;
  66. margin-left:-18px;
  67. -webkit-transform: rotateY(90deg);
  68. -moz-transform: rotateY(90deg);
  69. -o-transform: rotateY(90deg);
  70. transform: rotateY(90deg);
  71. -webkit-transition: all 1s ease-out;
  72. -moz-transition: all 1s ease-out;
  73. -o-transition: all 1s ease-out;
  74. transition: all 1s ease-out;
  75. opacity:0;
  76. }
  77. .box2 {
  78. display:block;
  79. width:90px;
  80. height:90px;
  81. border:10px solid {color:Background};
  82. -webkit-transform:rotate(45deg);
  83. -moz-transform:rotate(45deg);
  84. -o-transform:rotate(45deg);
  85. transform:rotate(45deg);
  86. overflow:hidden;
  87. margin-top:-110px;
  88. -webkit-transition: all 1s ease;
  89. -moz-transition: all 1s ease;
  90. -o-transition: all 1s ease;
  91. transition: all 1s ease;
  92. }
  93.  
  94. #wrapper:hover .box2 img{
  95. -webkit-transition: all 1s ease;
  96. -moz-transition: all 1s ease;
  97. -o-transition: all 1s ease;
  98. transition: all 1s ease;
  99. -webkit-transform: rotateY(0deg);
  100. -moz-transform: rotateY(0deg);
  101. -o-transform: rotateY(0deg);
  102. transform: rotateY(0deg);
  103. -webkit-transform:rotate(-45deg);
  104. -moz-transform:rotate(-45deg);
  105. -o-transform:rotate(-45deg);
  106. transform:rotate(-45deg);
  107. opacity:1;
  108. }
  109.  
  110. #wrapper:hover .box2 {
  111. -webkit-transition: all 1s ease;
  112. -moz-transition: all 1s ease;
  113. -o-transition: all 1s ease;
  114. transition: all 1s ease;
  115. border:10px solid {color:Background Hover};
  116. }
  117.  
  118. #wrapper:hover .urls {
  119. -webkit-transition: all 1s ease;
  120. -moz-transition: all 1s ease;
  121. -o-transition: all 1s ease;
  122. transition: all 1s ease;
  123. background: {color:Background Hover};
  124. }
  125.  
  126. .urls {
  127. display:block;
  128. background:{color:Background};
  129. width:500px;
  130. height:10px;
  131. border-bottom:3px dotted #ffffff;
  132. margin-left:70px;
  133. margin-top:-60px;
  134. position:absolute;
  135. -webkit-border-top-right-radius:10px;
  136. -moz-border-radius-topright:10px;
  137. -o-border-top-right-radius:10px;
  138. border-top-right-radius:10px;
  139. -webkit-border-bottom-right-radius:10px;
  140. -moz-border-radius-bottomright:10px;
  141. -o-border-bottom-right-radius:10px;
  142. border-bottom-right-radius:10px;
  143. -webkit-transition: all 1s ease;
  144. -moz-transition: all 1s ease;
  145. -o-transition: all 1s ease;
  146. transition: all 1s ease;
  147. z-index:-5;
  148. }
  149.  
  150. .text {
  151. display:block;
  152. width:auto;
  153. height:auto;
  154. font-family:palatino;
  155. padding-left:30px;
  156. font-style:italic;
  157. font-weight:bold;
  158. font-size:24px;
  159. text-align:left;
  160. margin-left:50px;
  161. margin-top:-20px;
  162. z-index:5;
  163. }
  164.  
  165. #wrapper:hover .text span{
  166. letter-spacing:2px;
  167. }
  168.  
  169. #theme {
  170. bottom:0!important;
  171. left:0!important;
  172. position:fixed;
  173. font-size:12px;
  174. font-style:italic;
  175. opacity:0.5;
  176. color:{color:Text};
  177. }
  178.    
  179. #theme:hover {
  180. opacity:1;
  181. -webkit-transition: all 1s ease;
  182. -moz-transition: all 1s ease;
  183. -o-transition: all 1s ease;
  184. transition: all 1s ease;
  185. }
  186. </style>
  187. </head>
  188.  
  189. <body>
  190. <a href="http://{text:New Url}.tumblr.com">
  191. <div id="wrapper">
  192. <div class="box1"><img src="{image:Picture 1}"></div>
  193. <div class="box2"><img src="{image:Picture 2}"></div>
  194. <div class="urls"><div class="text">{text:Old Url} → <span>{text:New Url}</span></div></div>
  195. </div></a>
  196. <div id="theme"><a href="http://hatterthemes.tumblr.com">theme ©</a></div>
  197. </body>
  198.  
  199.    
  200. </html>
create a new version of this paste RAW Paste Data