API tools faq
paste
Advertisement
octomoosey

dark skies

octomoosey
May 31st, 2015 (edited)
19,508
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!-- octomoosey @ tumblr -->
  4.  
  5. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head><title>{Title}</title>
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  11. <script>
  12. $(document).ready(function(){
  13. var totWidth=0;
  14. var positions = new Array();
  15.  
  16. $('#slides .slide').each(function(i){
  17. positions[i]= totWidth;
  18. totWidth += $(this).width();
  19.  
  20. if(!$(this).width())
  21. {
  22. alert("");
  23. return false;
  24. }
  25. });
  26.  
  27. $('#slides').width(totWidth);
  28.  
  29. $('#menu ul li a').click(function(e){
  30. $('li.menuItem').removeClass('act').addClass('inact');
  31. $(this).parent().addClass('act');
  32. var pos = $(this).parent().prevAll('.menuItem').length;
  33. $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},800);
  34. e.preventDefault();
  35. });
  36.  
  37. $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
  38. });</script>
  39.  
  40. <style type='text/css'>
  41.  
  42. ::-webkit-scrollbar-thumb {
  43. height:auto;
  44. background-color:#529ecc;} /** change scrollbar color here **/
  45.  
  46. ::-webkit-scrollbar {
  47. height:9px;
  48. width:4px;
  49. background-color:transparent;}
  50.  
  51. iframe#tumblr_controls {
  52. right:3px !important;
  53. position: fixed !important;
  54. -webkit-transition: opacity 0.7s
  55. linear;opacity: 0.2;
  56. -webkit-transition: all 0.8s ease-out;
  57. -moz-transition: all 0.8s ease-out;
  58. transition: all 0.8s ease-out;}
  59.  
  60. iframe#tumblr_controls:hover{
  61. -webkit-transition: opacity 0.7s linear;
  62. opacity: 1;
  63. -webkit-transition: all 0.4s ease-out;
  64. -moz-transition: all 0.4s ease-out;
  65. transition: all 0.4s ease-out;}
  66.  
  67. body {
  68. background-color:#000; /* background color */
  69. background-image: url('//static.tumblr.com/83871df73f5288609f8f606af58fc0e0/86jccts/pAFnp67md/tumblr_static_3wi0ufdz3qasow0kc4scok4gk.jpg'); /** change background image url here **/
  70. background-position: top left;
  71. background-repeat: no-repeat;
  72. background-attachment: fixed;
  73. line-height:110%;
  74. color:#fff; /* text color */
  75. font-family:baskerville; /** font style **/
  76. font-size: 12px;} /** font size **/
  77.  
  78. a {
  79. text-decoration:none;
  80. outline:none;
  81. -moz-outline-style:none;
  82. color:#529ecc; /** change link color here **/
  83. -webkit-transition: all 0.7s ease;
  84. -moz-transition: all 0.7s ease;
  85. -o-transition: all 0.7s ease;}
  86.  
  87. a:hover {
  88. color:#eee; /** change link hover color here **/
  89. -webkit-transition: all 0.7s ease;
  90. -moz-transition: all 0.7s ease;
  91. -o-transition: all 0.7s ease;}
  92.  
  93. blockquote {
  94. padding:2px 7px;
  95. margin:3px 0 3px 8px;
  96. border-left:1px dashed #fff;
  97. background-color:transparent;}
  98.  
  99. blockquote img {
  100. max-width:100%;
  101. height:auto;}
  102.  
  103. b, strong {
  104. color:#529ecc;} /** change bold text color here **/
  105.  
  106. i, em {
  107. color:#529ecc;} /** change italic text color here **/
  108.  
  109.  
  110. h1 {
  111. text-align:right;
  112. font-size:18px;
  113. padding-bottom:10px;
  114. font-weight: bold;}
  115.  
  116. h2 {
  117. color:#529ecc; /** change heading 2 color here **/
  118. text-align:right;
  119. font-style:italic;
  120. font-size:16px;
  121. padding-bottom:10px;
  122. font-weight: bold;}
  123.  
  124. .wrap{
  125. position:absolute;
  126. margin-top: 100px;
  127. left: 50%;
  128. margin-left:-522px;
  129. width: 1000px;}
  130.  
  131. #credit {
  132. bottom:25px;
  133. right:25px;
  134. opacity:0.5;
  135. position:fixed;
  136. padding:5px;}
  137.  
  138. #slides{
  139. height:500px;
  140. width:540px;
  141. overflow:hidden;}
  142.  
  143. .slide{
  144. float:left;}
  145.  
  146. #sider {
  147. position:fixed;
  148. margin-left:815px;
  149. height:500px;
  150. width:200px;}
  151.  
  152. #menu{
  153. padding:0px;}
  154.  
  155. ul{
  156. height:35px;
  157. margin:0px;
  158. padding:0px;
  159. list-style:none !important;}
  160.  
  161. li{
  162. padding-top:8px;
  163. font-size:30px;
  164. line-height:33px;
  165. display:block}
  166.  
  167. li a {
  168. width:35px;
  169. overflow:hidden;
  170. display:block;
  171. text-decoration: none;
  172. white-space: nowrap;
  173. -webkit-transition: all 0.7s ease;
  174. -moz-transition: all 0.7s ease;
  175. -o-transition: all 0.7s ease;}
  176.  
  177. li a:hover {
  178. width:200px;
  179. -webkit-transition: all 0.7s ease;
  180. -moz-transition: all 0.7s ease;
  181. -o-transition: all 0.7s ease;}
  182.  
  183. .slide{
  184. float:left;
  185. width: 540px;
  186. text-align:justify;
  187. height: 500px;
  188. overflow-y:scroll;}
  189.  
  190. .slidetx {
  191. padding:20px}
  192.  
  193. #container{
  194. border-top:1px solid #fff; /** change top border color here **/
  195. border-bottom:1px solid #fff; /** change bottom border color here **/
  196. margin-left:250px;
  197. text-align:justify;
  198. width:540px;
  199. height: 500px;
  200. position:fixed;
  201. background-color: transparent;
  202. overflow:hidden;}
  203.  
  204. #nav {
  205. text-align:center;}
  206.  
  207. #nav a {
  208. display:block;
  209. font-size:9px;
  210. line-height:15px;
  211. text-align:center;
  212. margin-top:8px;
  213. padding:2px;
  214. letter-spacing:1px;
  215. border:1px solid #fff;/** change navigation page link border color **/
  216. color:#fff; /** change navigation page link text color here **/
  217. width:500px;
  218. -webkit-transition: all .8s ease-in-out;
  219. -moz-transition: all .8s ease-in-out;
  220. -ms-transition: all .8s ease-in-out;
  221. -o-transition: all .8s ease-in-out;
  222. transition: all .8s ease-in-out;}
  223.  
  224. #nav a:hover {
  225. border:1px solid #fff; /** change link hover border color here **/
  226. box-shadow:inset 504px 0 0 #fff; /** change link fill color here **/
  227. color:#000; /** change link text hover color here **/
  228. -webkit-transition: all .8s ease-in-out;
  229. -moz-transition: all .8s ease-in-out;
  230. -ms-transition: all .8s ease-in-out;
  231. -o-transition: all .8s ease-in-out;
  232. transition: all .8s ease-in-out;}
  233.  
  234. table {
  235. margin-top:-9px;
  236. width: 100%;
  237. margin-left:-2px;
  238. background-color: transparent;
  239. border-collapse: collapse;}
  240.  
  241. td {
  242. font-size: 11px;
  243. letter-spacing: 1px;
  244. height: 100px;
  245. overflow: auto;}
  246.  
  247. #rel img {
  248. margin:8px;
  249. border:5px solid #fff; /* relationships icon border color */
  250. width:80px;
  251. height:80px;
  252. padding:5px;
  253. -webkit-transition:all 0.3s ease-out;
  254. -moz-transition:all 0.3s ease-out;
  255. transition:all 0.3s ease-out;}
  256.  
  257. #rel:hover img {
  258. border:5px solid #529ecc; /* relationships icon border hover color */
  259. -webkit-transition:all 0.3s ease-out;
  260. -moz-transition:all 0.3s ease-out;
  261. transition:all 0.3s ease-out;}
  262.  
  263. #links{
  264. margin-left:595px; }
  265.  
  266. </style>
  267. </head>
  268.  
  269. <body>
  270. <div class="wrap">
  271. <div id="links"><a href="/">home</a> ♦
  272. <a href="/ask">ask</a> ♦
  273. <a href="/submit">submit</a> ♦
  274. <a href="/archive">archive</a> ♦
  275. <a href="//www.tumblr.com/dashboard">dash</a> </div>
  276. <div id="sider">
  277. <div id="menu">
  278.  
  279. <ul>
  280.  
  281.  
  282. <!-- if you add another 'page' be sure to add a link here -->
  283. <li class="menuItem"><a href="">01. about</a></li>
  284. <li class="menuItem"><a href="">02. info</a></li>
  285. <li class="menuItem"><a href="">03. navigation</a></li>
  286. <li class="menuItem"><a href="">04. relationships</a></li>
  287. <li class="menuItem"><a href="">05. verses</a></li>
  288.  
  289. </ul>
  290. </div>
  291. </div>
  292. <div id="container">
  293. <div id="slides">
  294.  
  295.  
  296. <!-- this is the start of the first slide -->
  297. <div class="slide"><div class="slidetx">
  298.  
  299. <h1>H i s t o r y</h1>
  300.  
  301. <b>You can add as much text as you like and any images - the box will add a scroll bar when needed!</b><p>
  302.  
  303. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>
  304.  
  305. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>
  306.  
  307. <img src="//31.media.tumblr.com/2603c3495b0ddd29fbe671dc025dae06/tumblr_inline_nc7gtzdnQL1si7bjl.gif">
  308.  
  309. <h1>T o d a y</h1>
  310.  
  311. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  312. </div></div>
  313.  
  314. <!-- end of the first slide - copy from start to end and paste below to add more pages -->
  315.  
  316.  
  317. <div class="slide"><div class="slidetx">
  318.  
  319. <h1>D i s c l a i m e r;</h1>
  320.  
  321. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  322.  
  323. <h1>G u i d e l i n e s || R u l e s;</h1>
  324.  
  325. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  326.  
  327. <h1>C r e d i t s;</h1>
  328.  
  329. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  330.  
  331.  
  332.  
  333. </div></div>
  334.  
  335. <div class="slide"><div class="slidetx">
  336. <h2>section title</h2>
  337. <div id="nav">
  338. <a href="">links go here</a>
  339. <a href="">more links</a>
  340. <a href="">even more...</a>
  341. </div>
  342.  
  343. <h2>another section</h2>
  344. <div id="nav">
  345. <a href="">you can even add them in sections</a>
  346. <a href="">more links</a>
  347. <a href="">even more...</a>
  348. <a href="">add as many links as you like</a>
  349. <a href="">to each section</a>
  350. </div>
  351.  
  352. <h2>and another</h2>
  353. <div id="nav">
  354. <a href="">another one</a>
  355. <a href="">more links</a>
  356. <a href="">even more...</a>
  357. </div>
  358.  
  359. </div></div>
  360.  
  361. <div class="slide"><div class="slidetx">
  362. <table>
  363.  
  364. <!-- character one starts here -->
  365.  
  366. <tr><td> <div id="rel">
  367.  
  368. <a href="/"><!-- add the character link here -->
  369.  
  370. <!-- add the url to the icon here -->
  371. <img src="//41.media.tumblr.com/2288e3b9f1673609d6c6eda1606d54de/tumblr_inline_np64h3Xz5S1rp2lgk_540.jpg" /></a></div></td>
  372.  
  373. <!-- add your description here -->
  374. <td><div style="height:100px; overflow:auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></td></tr>
  375.  
  376. <!-- character one ends here - copy from start to end and paste to add more characters -->
  377.  
  378. <tr><td> <div id="rel">
  379.  
  380. <a href="/">
  381.  
  382. <img src="//41.media.tumblr.com/6ad7b11365c6db7155acab6661a4a384/tumblr_inline_np64hmSUVz1rp2lgk_540.jpg" /></a></div></td>
  383.  
  384. <td><div style="height:100px; overflow:auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></td></tr>
  385.  
  386. <tr><td> <div id="rel">
  387.  
  388. <a href="/">
  389.  
  390. <img src="//40.media.tumblr.com/89889431a63e7f0b40a3c795b1428c9f/tumblr_inline_np64hxwfwj1rp2lgk_540.jpg" /></a></div></td>
  391.  
  392. <td><div style="height:100px; overflow:auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></td></tr>
  393.  
  394.  
  395.  
  396. </table>
  397.  
  398. </div>
  399.  
  400. </div>
  401.  
  402. <div class="slide"><div class="slidetx">
  403. <table>
  404.  
  405. <!-- verses page works the same as the character page! -->
  406.  
  407. <tr><td> <div id="rel">
  408.  
  409. <a href="/">
  410.  
  411. <img src="//41.media.tumblr.com/2288e3b9f1673609d6c6eda1606d54de/tumblr_inline_np64h3Xz5S1rp2lgk_540.jpg" /></a></div></td>
  412.  
  413.  
  414. <td><div style="height:100px; overflow:auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></td></tr>
  415.  
  416. <tr><td> <div id="rel">
  417.  
  418. <a href="/">
  419.  
  420. <img src="//41.media.tumblr.com/6ad7b11365c6db7155acab6661a4a384/tumblr_inline_np64hmSUVz1rp2lgk_540.jpg" /></a></div></td>
  421.  
  422. <td><div style="height:100px; overflow:auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></td></tr>
  423.  
  424. <tr><td> <div id="rel">
  425.  
  426. <a href="/">
  427.  
  428. <img src="//40.media.tumblr.com/89889431a63e7f0b40a3c795b1428c9f/tumblr_inline_np64hxwfwj1rp2lgk_540.jpg" /></a></div></td>
  429.  
  430. <td><div style="height:100px; overflow:auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></td></tr>
  431.  
  432. </table>
  433.  
  434. </div>
  435.  
  436. </div>
  437.  
  438. </div>
  439. </div>
  440. </div>
  441. <div id="credit"><a href="//octomoosey.tumblr.com/" title="theme by octomoosey"><img src="//31.media.tumblr.com/ce8b580be9fa9afaa442fdb216c9b293/tumblr_inline_nj1tziQKpe1ronkfd.png"></a></div><!-- do not remove -->
  442. </body>
  443. </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!