API tools faq
paste
Advertisement
teruteru

Aquamarine -【 PAGE 3 by Anomaly ☽】

teruteru
Sep 12th, 2016
380
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.05 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <title>{title}</title>
  3.  
  4. <link rel="shortcut icon" href="FAVICON URL HERE"> <!-- if you dont want a custom favicon, just replace it with {Favicon} -->
  5.  
  6. <!--
  7.  
  8. page 3: aquamarine by anomaly xollyx
  9. base code by asschlinthemes
  10. dont remove the credit otherwise have fun!
  11.  
  12.  
  13.  
  14. -->
  15.  
  16.  
  17.  
  18. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  19.  
  20. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  21.  
  22. <script>
  23. $(function(){
  24. var $container = $('#container');
  25. $container.imagesLoaded(function(){
  26. $container.masonry({
  27. itemSelector: '#box',
  28. });
  29. });
  30. $container.infinitescroll({
  31. itemSelector : "#box",
  32. navSelector : "div.pagination",
  33. nextSelector : ".pagination a#next",
  34. loadingImg : "",
  35. loadingText : "<em></em>",
  36. bufferPx : 10000,
  37. extraScrollPx: 12000,
  38. },
  39. // trigger Masonry as a callback
  40. function( newElements ) {
  41. var $newElems = $( newElements ).css({ opacity: 0 });
  42. // ensure that images load before adding to masonry layout
  43. $newElems.imagesLoaded(function(){
  44. $newElems.animate({ opacity: 1 });
  45. $container.masonry( 'appended', $newElems, true );
  46. });
  47. }
  48. );
  49. });
  50. </script>
  51.  
  52. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  53. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  54.  
  55. <script>
  56. (function($){
  57. $(document).ready(function(){
  58. $("a[title]").style_my_tooltips({
  59. tip_follows_cursor:true,
  60. tip_delay_time:90,
  61. tip_fade_speed:600,
  62. attribute:"title"
  63. });
  64. });
  65. })(jQuery);
  66.  
  67. </script>
  68.  
  69.  
  70.  
  71. <style type="text/css">
  72.  
  73. ::-webkit-scrollbar-thumb:vertical {background-color:#eee;border-radius:10px;}
  74. ::-webkit-scrollbar-button:horizontal {display:none;}
  75. ::-webkit-scrollbar {background-color:#fff;width:5px;border-radius:5px;}
  76.  
  77.  
  78. body {
  79. background:#ccc;
  80. background-image:url('BACKGROUND URL HERE');
  81. color:#eee;
  82. font-family:consolas;
  83. font-size:11px;
  84. text-align:justify;
  85. margin:0;}
  86.  
  87. a {
  88. color:#000;
  89. text-decoration:none;
  90. -moz-transition-duration: 0.5s;
  91. -o-transition-duration: 0.5s;
  92. -webkit-transition-duration: 0.5s;
  93. transition-duration: 0.5s;}
  94.  
  95. a:hover {
  96. color:#eee;
  97. text-decoration:none;}
  98.  
  99. #cap {
  100. position:fixed;
  101. margin-left:150px;
  102. margin-top:250px;
  103. }
  104. #cap img {
  105. width:100px;
  106. height:100px;
  107. }
  108.  
  109. .cap {
  110. width:110px;
  111. background:#fff;
  112. padding:5px;
  113. border-radius:5px;
  114. margin-top:0px;
  115. margin-left:-10px;
  116. text-align:center;
  117. position:absolute;
  118. }
  119.  
  120. #link1{
  121. margin-left:165px;
  122. margin-top:355px;
  123. padding:5px;
  124. position:absolute;
  125. height:125px;
  126. background:#fff;
  127. border-radius:5px;}
  128.  
  129. #link2{
  130. margin-left:185px;
  131. margin-top:355px;
  132. padding:5px;
  133. position:absolute;
  134. height:110px;
  135. background:#fff;
  136. border-radius:5px;}
  137.  
  138. #link3{
  139. margin-left:205px;
  140. margin-top:355px;
  141. padding:5px;
  142. position:absolute;
  143. height:125px;
  144. background:#fff;
  145. border-radius:5px;}
  146.  
  147. #link4{
  148. margin-left:225px;
  149. margin-top:355px;
  150. padding:5px;
  151. position:absolute;
  152. height:110px;
  153. background:#fff;
  154. border-radius:5px;}
  155.  
  156. #link1:hover, #link2:hover, #link3:hover, #link4:hover {
  157. height:150px;
  158. background:#fff;
  159. -webkit-transition: 0.8s ease-out;
  160. -moz-transition: 0.8s ease-out;
  161. -ms-transition: 0.8s ease-out;
  162. -o-transition:0.8s ease-out;
  163. transition:0.8s ease-out;}
  164.  
  165. #nip{
  166. position:fixed;
  167. border-top: 10px solid transparent;
  168. border-bottom: 10px solid #fff;
  169. border-left:10px solid transparent;
  170. border-right:10px solid transparent;
  171. margin-top:-20px;
  172. margin-left:40px;
  173. z-index:2;
  174. }
  175.  
  176. #container{width:500px;
  177. margin:25px auto;
  178. margin-left:350px;
  179. position:fixed;
  180. border-radius:5px;
  181. padding:15px;
  182. }
  183.  
  184. #box {
  185. float:left;
  186. width:500px;
  187. height:500px;
  188. padding:20px;
  189. margin:10px;
  190. background:#fff;
  191. overflow-y:scroll;
  192. overflow-x:hidden;
  193. border-radius:5px;
  194. }
  195.  
  196. #box a{text-transform:none;display:block;margin:2px 0px;}
  197. #box a:hover {padding-left:10px;}
  198.  
  199. #links {
  200. position:fixed;
  201. width:510px;
  202. margin-top:574px;
  203. margin-left:375px;
  204. background:#fff;
  205. border-bottom-left-radius:5px;
  206. border-bottom-right-radius:5px;
  207. padding:15px;
  208. text-align:center;
  209. }
  210.  
  211. #links a:hover {
  212. letter-spacing:1px;
  213. }
  214.  
  215. /*LINKS TABLE BY PAINTHEMES.TUMBLR.COM*/
  216.  
  217. #below{width:300px;}
  218.  
  219. .title1, .title2, .title3{
  220. display:inline-block;
  221. height:10px;
  222. line-height:10px;
  223. font-size:18px;
  224. font-family:arial;
  225. font-weight:bold;
  226. font-style:italic;
  227. text-transform:uppercase;
  228. width:480px;
  229. text-align:center;
  230. padding:10px;
  231. margin-top:10px;
  232. color:#000;
  233. letter-spacing:4px;
  234. overflow:hidden;
  235. opacity:1;
  236. }
  237.  
  238. .table1, .table2, .table3{
  239. height:auto;
  240. display:none;
  241. opacity:1;
  242. background:#fff;
  243. font-family:consolas;
  244. text-transform:uppercase;
  245. letter-spacing:1px;
  246. font-size:11px;
  247. width:480px;
  248. padding:10px;
  249. }
  250.  
  251. .table1 a, .table2 a, .table3 a{
  252. padding:5px;
  253. margin:3px;
  254. -o-transition-transition: all 0.8s ease-out;
  255. -webkit-transition: all 0.8s ease-out;
  256. -moz-transition: all 0.8s ease-out;
  257. transition: all 0.8s ease-out;}
  258.  
  259.  
  260. .table1 a:hover, .table2 a:hover, .table3 a:hover{
  261. -o-transition-transition: all 0.8s ease-out;
  262. -webkit-transition: all 0.8s ease-out;
  263. -moz-transition: all 0.8s ease-out;
  264. transition: all 0.8s ease-out;
  265. }
  266.  
  267.  
  268. /*LINKS TABLE BY PAINTHEMES.TUMBLR.COM*/
  269.  
  270. #s-m-t-tooltip{
  271. max-width:300px;
  272. margin:15px;
  273. padding:2px 8px;
  274. border-radius:4px;
  275. background:#eee;
  276. color:#fff;
  277. z-index:999999;
  278. font-size:11px;
  279. text-transform:lowercase;}
  280.  
  281. </style>
  282.  
  283. <script src="jquery.js"></script>
  284. <script>
  285. $(document).ready(function(){
  286. $(".title1").click(function(){
  287. $(".table1").slideToggle("fast");});});
  288. $(document).ready(function(){
  289. $(".title2").click(function(){
  290. $(".table2").slideToggle("fast");});});
  291. $(document).ready(function(){
  292. $(".title3").click(function(){
  293. $(".table3").slideToggle("fast");});});
  294. </script>
  295.  
  296.  
  297. </head>
  298.  
  299. <body>
  300. <a href="/" title="home"><div id="link1"></div></a>
  301. <a href="/ask" title="ask"><div id="link2"></div></a>
  302. <a href="/submit" title="submit"><div id="link3"></div></a>
  303. <a href="ABOUT LINK HERE" title="about"><div id="link4"></div></a>
  304.  
  305. <div id="cap">
  306. <img src="ICON URL HERE">
  307. <div id="nip"></div>
  308. <div class="cap">description here</div>
  309. </div></div>
  310.  
  311. <div id="container">
  312.  
  313. <div id="box">
  314. <div id="below">
  315. <div class="title1">CATEGORY 1</div>
  316. <div class="table1">
  317.  
  318. <a href="/tagged/">tag title</a>
  319. <a href="/tagged/">tag title</a>
  320. <a href="/tagged/">tag title</a>
  321. <a href="/tagged/">tag title</a>
  322. <a href="/tagged/">tag title</a>
  323. <a href="/tagged/">tag title</a>
  324. <a href="/tagged/">tag title</a>
  325. <a href="/tagged/">tag title</a>
  326. <a href="/tagged/">tag title</a>
  327. <a href="/tagged/">tag title</a>
  328. <a href="/tagged/">tag title</a>
  329. <a href="/tagged/">tag title</a>
  330. <a href="/tagged/">tag title</a>
  331. <a href="/tagged/">tag title</a>
  332. <a href="/tagged/">tag title</a>
  333. <a href="/tagged/">tag title</a>
  334. <a href="/tagged/">tag title</a>
  335. <a href="/tagged/">tag title</a>
  336. <a href="/tagged/">tag title</a>
  337. <a href="/tagged/">tag title</a>
  338.  
  339. </div>
  340.  
  341. <div class="title2">CATEGORY 2</div>
  342. <div class="table2">
  343.  
  344. <a href="/tagged/">tag title</a>
  345. <a href="/tagged/">tag title</a>
  346. <a href="/tagged/">tag title</a>
  347. <a href="/tagged/">tag title</a>
  348. <a href="/tagged/">tag title</a>
  349. <a href="/tagged/">tag title</a>
  350. <a href="/tagged/">tag title</a>
  351. <a href="/tagged/">tag title</a>
  352. <a href="/tagged/">tag title</a>
  353. <a href="/tagged/">tag title</a>
  354. <a href="/tagged/">tag title</a>
  355. <a href="/tagged/">tag title</a>
  356. <a href="/tagged/">tag title</a>
  357. <a href="/tagged/">tag title</a>
  358. <a href="/tagged/">tag title</a>
  359. <a href="/tagged/">tag title</a>
  360. <a href="/tagged/">tag title</a>
  361. <a href="/tagged/">tag title</a>
  362. <a href="/tagged/">tag title</a>
  363. <a href="/tagged/">tag title</a>
  364.  
  365. </div>
  366.  
  367. <div class="title3">CATEGORY 3</div>
  368. <div class="table3">
  369.  
  370. <a href="/tagged/">tag title</a>
  371. <a href="/tagged/">tag title</a>
  372. <a href="/tagged/">tag title</a>
  373. <a href="/tagged/">tag title</a>
  374. <a href="/tagged/">tag title</a>
  375. <a href="/tagged/">tag title</a>
  376. <a href="/tagged/">tag title</a>
  377. <a href="/tagged/">tag title</a>
  378. <a href="/tagged/">tag title</a>
  379. <a href="/tagged/">tag title</a>
  380. <a href="/tagged/">tag title</a>
  381. <a href="/tagged/">tag title</a>
  382. <a href="/tagged/">tag title</a>
  383. <a href="/tagged/">tag title</a>
  384. <a href="/tagged/">tag title</a>
  385. <a href="/tagged/">tag title</a>
  386. <a href="/tagged/">tag title</a>
  387. <a href="/tagged/">tag title</a>
  388. <a href="/tagged/">tag title</a>
  389. <a href="/tagged/">tag title</a>
  390.  
  391. </div></div></div>
  392. </div>
  393.  
  394. <div id="links"><a href="">link 1</a> • <a href="">link 2</a> • <a href="">link 3</a> • <a href="">link 4</a> • <a href="">link 5</a></div>
  395.  
  396. <div style="position:fixed; left:800px; bottom:-50px; z-index:1;"><img src="RENDER URL" width="600px"></div> <!-- change "left", "bottom" and "width" to your own liking -->
  397.  
  398. <div style="position:fixed; left:8px; bottom:4px; z-index:1;"><a href="http://xollyx.tumblr.com/" title="theme"><img src="http://orig04.deviantart.net/151c/f/2015/334/6/e/tumblr_inline_mij52fv1gc1qz4rgp_by_kittystuff-d9il7w5.gif"></a></div>
  399.  
  400.  
  401.  
  402. </body>
  403.  
  404.  
  405. </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!