API tools faq
paste
Advertisement
silvercybermen

Theme Rules Page 01: Garden

silvercybermen
Jan 22nd, 2015
5,726
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3.  
  4. <!---
  5.  
  6.  
  7.  
  8. THEME RULES PAGE 01: GARDEN BY LUNECERISE AKA ROMULVS
  9.  
  10.  
  11. -if you're using this, you're probably a theme maker
  12. so you know the rules heheh
  13. -but just in case
  14. -keep credit intact, don't steal any code
  15. -the usual yanno
  16. -cool
  17. -i wrote some customization rules and stuff in the css
  18. for you but you prob don't even need them lol
  19. -good luck w your theme making c:
  20.  
  21.  
  22.  
  23. --->
  24.  
  25.  
  26. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  27. <head>
  28.  
  29. <title>rules!!</title>
  30. <link rel="shortcut icon" href="{Favicon}">
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  32.  
  33. <link href='http://fonts.googleapis.com/css?family=Raleway:400,200,300' rel='stylesheet' type='text/css'>
  34. <link href="http://fonts.googleapis.com/css?family=Roboto:400,100,300" rel="stylesheet" type="text/css">
  35. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  36.  
  37. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  38. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  39. <script>
  40. (function($){
  41. $(document).ready(function(){
  42. $("[title]").style_my_tooltips({
  43. tip_follows_cursor:true,
  44. tip_delay_time:1,
  45. tip_fade_speed:100,
  46. attribute:"title"
  47. });
  48. });
  49. })(jQuery);
  50. </script>
  51.  
  52. <style type="text/css">
  53.  
  54. ::-webkit-scrollbar {background-color:#fff; height:4px; width:4px;}
  55. ::-webkit-scrollbar-thumb:vertical {background-color:#AFFFE7; width:1px; border-right:3px solid transparent;}
  56. ::-webkit-scrollbar-thumb:horizontal {background-color:#AFFFE7; height:4px!important;}
  57.  
  58. *, body, a, a:hover {cursor: url(http://www.totallylayouts.com/cursors/random/tiny_cursor.png), auto;}
  59.  
  60. #s-m-t-tooltip {
  61. max-width:300px;
  62. padding:3px 5px;
  63. margin:10px;
  64. background-color:#fff;
  65. font-family:calibri;
  66. font-size:8px;
  67. letter-spacing:1px;
  68. text-transform:uppercase;
  69. border-radius:1px;
  70. color:#aaa;
  71. z-index:10000000000000000;
  72. box-shadow:2px 2px 0.2em #bbb;
  73. transition-duration:0.5s;
  74. -moz-transition-duration:0.5s;
  75. -webkit-transition-duration:0.5s;
  76. -o-transition-duration:0.5s;
  77. }
  78.  
  79. ::selection {background-color:#afffe7;color:white;text-shadow:none;}
  80.  
  81. ::-moz-selection {background-color:#afffe7;color:white;text-shadow:none;}
  82.  
  83. ::-o-selection {background-color:#afffe7;color:white;text-shadow:none;}
  84.  
  85. body {
  86. background:#fff url('http://static.tumblr.com/vmteopo/Hxhnilrm0/hot_air_balloons_2.jpg') no-repeat fixed center;
  87. /*lmao you know how to change the bg img but just in case, paste the img url in place of the one already there*/
  88. background-size:cover;
  89. font-family:'Roboto', sans-serif;
  90. line-height:110%;
  91. }
  92.  
  93. .containment {
  94. width:350px;
  95. height:340px;
  96. padding:30px;
  97. background-color:#fff;
  98. color:#b3b3b3;
  99. text-align:center;
  100. font-size:10px;
  101. margin:0 auto;
  102. margin-top:-410px;
  103. z-index:1;
  104. overflow-x:hidden;
  105. overflow-y:scroll;
  106. }
  107.  
  108. #before { /*the thing that's behind the rules*/
  109. padding:40px;
  110. width:350px;
  111. height:340px;
  112. z-index:-1;
  113. margin:0 auto;
  114. background:-webkit-linear-gradient(45deg, rgba(175, 255, 231,1), rgba(189, 209, 252,1));
  115. background-image:url(https://40.media.tumblr.com/ee18bdd3907ae36e2a68235deb6ec028/tumblr_myzx1j8pFf1qjoo5yo1_1280.jpg);/*if you dont want the gradient of the bg image just delete that line of code*/
  116. background-position:center;
  117. background-size:cover;
  118. }
  119.  
  120. #title {
  121. font-family:'Raleway', sans-serif;
  122. font-size:25px;
  123. text-align:center;
  124. margin:10px auto;
  125. margin-top:50px;
  126. width:430px;
  127. color:#fff;
  128. -webkit-text-fill-color: transparent;
  129. background: -webkit-linear-gradient(45deg, rgb(175, 255, 231), rgb(189, 209, 252));/*customize title's gradient colours w rgba code*/
  130. background: -o-linear-gradient(45deg, rgb(175, 255, 231), rgb(189, 209, 252));
  131. -webkit-background-clip: text;
  132. -webkit-background-clip: text;
  133. transition:0.5s ease-in-out;
  134. -webkit-transition:0.5s ease-in-out;
  135. -moz-transition:0.5s ease-in-out;
  136. -ms-transition:0.5s ease-in-out;
  137. -o-transition:0.5s ease-in-out;
  138. }
  139.  
  140. #title:before {
  141. color: #fff;
  142. content:"rules";
  143. position:absolute;
  144. text-shadow: 0 0 1px rgba(198, 165, 255,0);/*customize hover color w rgba*/
  145. -webkit-transform: scale(1.1) translateX(0px) translateY(-20px);
  146. -moz-transform: scale(1.1) translateX(0px) translateY(-20px);
  147. transform: scale(1.1) translateX(0px) translateY(-20px);
  148. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  149. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  150. transition: transform 0.3s, opacity 0.3s;
  151. pointer-events: none;
  152. transition:0.3s ease-in-out;
  153. -webkit-transition:0.3s ease-in-out;
  154. -moz-transition:0.3s ease-in-out;
  155. -ms-transition:0.3s ease-in-out;
  156. -o-transition:0.3s ease-in-out;
  157. }
  158.  
  159. #title:hover:before,
  160. #title:focus:before {
  161. text-shadow:0 0 1px rgba(198, 165, 255,1);/*make same rgba color as before*/
  162. -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  163. -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  164. transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  165. opacity: 1;
  166. }
  167.  
  168. h1 {
  169. font-size:14px;
  170. color:#aaa;
  171. font-family:'Roboto', sans-serif;
  172. font-weight:300;
  173. }
  174.  
  175. a {
  176. color:#777;
  177. text-decoration:none;
  178. transition:0.5s ease-in-out;
  179. -webkit-transition:0.5s ease-in-out;
  180. -moz-transition:0.5s ease-in-out;
  181. -ms-transition:0.5s ease-in-out;
  182. -o-transition:0.5s ease-in-out;
  183. }
  184.  
  185. a:hover {text-decoration:underline;}
  186.  
  187. blockquote {
  188. padding-left:8px;
  189. border-left:1px solid #eee;
  190. }
  191.  
  192. li {list-style:circle;}
  193.  
  194. #back {
  195. position:fixed;
  196. top:0;
  197. left:0;
  198. padding:5px 8px;
  199. font-size:10px;
  200. background-color:#fff;
  201. border-right:1px solid #eee;
  202. border-bottom:1px solid #eee;
  203. }
  204.  
  205. #back a, #back a:hover {text-decoration:none;}
  206. #back a:hover {color:#BDD1FC;}
  207.  
  208. #credit, #credit a {
  209. position:fixed;
  210. bottom:8px;
  211. left:8px;
  212. padding:2px 5px;
  213. font-family:helvetica;
  214. text-transform:uppercase;
  215. color:#BDD1FC;
  216. border:1px solid #BDD1FC;
  217. font-size:8px;
  218. text-decoration:none;
  219. -moz-transition-duration:0.3s;
  220. -webkit-transition-duration:0.3s;
  221. -o-transition-duration:0.3s;
  222. -ms-transition-duration:0.3s;
  223. }
  224.  
  225. #credit {border:none;}
  226.  
  227. #credit:hover, #credit a:hover {
  228. font-family:helvetica;
  229. text-decoration:none;
  230. -moz-transition-duration:0.4s;
  231. -webkit-transition-duration:0.4s;
  232. -o-transition-duration:0.4s;
  233. -ms-transition-duration:0.4s;
  234. }
  235.  
  236. </style></head>
  237. <body>
  238. <div id="back"><a href="/" title="go back">←</a></div>
  239. <div id="back" style="top:29px; padding:6px 8px"><a href="/letters" title="ask"><i class="fa fa-envelope-o"></i></a></div>
  240. <div id="title" data-hover="rules">rules</div>
  241. <div id="before"></div>
  242.  
  243.  
  244. <div class="containment">
  245. <!--- yo rules --->
  246. <h1>whaaatttt</h1>
  247. <p>over the garden wall<br>
  248. <a href="/">oh father,</a> oh oh my father
  249. </p>
  250. <li>will i be</li>
  251. <li>forever blue?</li>
  252. <h1>and so it begins</h1>
  253. <p>Lorem ipsum dolor sit amet, illum graeci accusam est te, ne mea scaevola platonem. Dolore antiopam at duo. Soleat nullam in pro, purto veniam no pri. Putent impetus postulant cu pro, qui accusata persecuti mediocritatem an. Id atqui volutpat eos, eos summo fuisset volutpat in.
  254. </p>
  255. <h1>floods</h1>
  256. <blockquote>now you're gone</blockquote>
  257. <h1>choices, choices</h1>
  258. <p><a href="/">artemis</a> & <a href="/">apollo</a></p>
  259. </div>
  260.  
  261.  
  262. <!--- aye --->
  263. <div id="credit"><a href="http://lunecerise.co.vu" title="lunecerise">LC</a></div>
  264. </body>
  265. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!