API tools faq
paste
Advertisement
onediewreckshun

44 - navigation v - http://kimsjongin.tumblr.com

onediewreckshun
Aug 31st, 2013
689
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.  
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  6.  
  7. <title>{title}</title>
  8.  
  9. <!--
  10. 　　　　　　
  11. ┊ 　 ┊ ┊
  12. ┊ ┊ ┊ ┊ ┊ ┊ ┊
  13. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  14. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  15.  
  16. ᴛʜᴇᴍᴇ 44: ɴᴀᴠɪɢᴀᴛɪᴏɴ 5 ʙʏ ᴛʜᴇᴍᴇ ʙʏ ᴍᴇᴇᴍ (ᴋɪᴍsᴊᴏɴɢɪɴ.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ)
  17. ᴘʟᴇᴀsᴇ ᴅᴏɴ'ᴛ ʀᴇᴍᴏᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏʀ sᴛᴇᴀʟ! ^_^
  18.  
  19. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  20. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  21. ┊ ┊ ┊ ┊ ┊ ┊ ┊
  22. ┊ ┊ ┊
  23. -->
  24.  
  25. <link rel="shortcut icon" href="{favicon}">
  26.  
  27. <style type="text/css">
  28.  
  29. body {
  30. font-family:baskerville;
  31. font-size: 9px;
  32. letter-spacing: 1px;
  33. line-height:10px;
  34. padding: 0px;
  35. margin: 0px;
  36. }
  37.  
  38. /*tiny cursor; remove if you don't want a tiny cursor!*/
  39. body, a, a:hover{
  40. cursor: url('http://24.media.tumblr.com/tumblr_mdig6jktic1riysloo1_100.png'), progress;
  41. }
  42.  
  43. /*header styling*/
  44. #header {
  45. top:-250px;
  46. position:relative;
  47. height: 100px;
  48. z-index: 9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
  49. display:block;
  50. }
  51.  
  52. #headerimage {/*header pic; find "headerimage" and replace IMAGEURL the url of the image you want!*/
  53. background-size:cover;
  54. height: 250px;
  55. width: 485px;
  56. margin:0px auto;
  57. margin-top:250px;
  58. opacity: 1;
  59. -webkit-transition: all 0.5s ease-in-out;
  60. -moz-transition: all 0.5s ease-in-out;
  61. -o-transition: all 0.5s ease-in-out;
  62. }
  63.  
  64. #tit {/*page title*/
  65. text-align:center;
  66. height:auto;
  67. line-height: 90%;
  68. margin-top:9px;
  69. margin-bottom:15px;
  70. margin-left:-75px;
  71. width: 400px;
  72. font-size:20px;
  73. letter-spacing: 0px;
  74. font-family:georgia;
  75. font-style: italic;
  76. text-transform: lowercase;
  77. -webkit-transition: all .5s ease-in-out;
  78. -moz-transition: all .5s ease-in-out;
  79. -o-transition: all .5s ease-in-out;
  80. z-index: 9999999999999999999999;
  81. }
  82.  
  83. #header:hover #tit {
  84. margin-top:-20px;
  85. opacity:0;
  86. }
  87.  
  88. #header:hover a {
  89. opacity:1;
  90. }
  91.  
  92. .head {/*title/links box in header*/
  93. color:#fff;/*text color*/
  94. outline:2px solid #000;/*border; (looks like NUMBERpx solid #HEXCOLOR) */
  95. background:#000;/*background color*/
  96. outline-offset:2px;
  97. height:30px;
  98. opacity:.7;/*opacity; any number from 0 to 1*/
  99. z-index: 999999999999999999999;
  100. width: 250px;
  101. padding:10px 8px 15px 8px;
  102. margin:-155px auto 0px auto;
  103. text-align: center;
  104. overflow:hidden;
  105. }
  106.  
  107. .head a {/*the links that slide up after you hover the header*/
  108. opacity:0;
  109. color:#fff;/*links color*/
  110. display:inline;
  111. font-family:times;/*link font*/
  112. font-style: normal;
  113. font-size: 11px;
  114. text-align: center;
  115. padding:3px;
  116. letter-spacing:1px;
  117. }
  118.  
  119. .head a:hover {
  120. color:#000;/*links hover color*/
  121. font-style:italic;
  122. }
  123.  
  124. /*text selection*/
  125. ::-moz-selection {
  126. background: #999;/*background of text selection*/
  127. color: #fff;/*color of text*/
  128. }
  129.  
  130. ::selection {
  131. background: #999;/*background of text selection*/
  132. color: #fff;/*color of text*/
  133. }
  134.  
  135. a:link, a:active, a:visited{
  136. text-decoration: none;
  137. -webkit-transition: all 0.6s ease-out;
  138. -moz-transition: all 0.6s ease-out;
  139. transition: all 0.6s ease-out;
  140. }
  141.  
  142. a:hover {
  143. -webkit-transition: all 0.6s ease-out;
  144. -moz-transition: all 0.6s ease-out;
  145. transition: all 0.6s ease-out;
  146. }
  147.  
  148. /* box styling */
  149.  
  150. #box {/*an individual link box*/
  151. border:1px solid #ededed;/*border: NUMBERpx (width) solid (style) #HEXCOLOR (color);*/
  152. font-size:10px;
  153. display:block;
  154. z-index:0;
  155. overflow:hidden;
  156. margin:6px;
  157. padding: 7px 7px 5px 7px;
  158. text-transform:none;
  159. opacity: 1;
  160. width:138px;
  161. -moz-transition-duration:.5s;
  162. -webkit-transition-duration:.5s;
  163. -o-transition-duration:.5s;
  164. }
  165.  
  166. #boxtitle {/*box titles*/
  167. padding:6px 5px 5px 6px;
  168. width:144px;
  169. margin-left:-7px;
  170. margin-top:-7px;
  171. background:#555;
  172. color:#fff;
  173. margin-bottom:5px;
  174. font-size:15px;
  175. font-family:baskerville;
  176. font-style:italic;
  177. }
  178.  
  179. #box a {/*the links in the link boxes*/
  180. color:#555;/*color of the links*/
  181. display:block;
  182. text-decoration: none;
  183. }
  184.  
  185. #box a:before {
  186. /*if you don't want bullets, add a line that says display:none;*/
  187. margin-right:5px;
  188. content:'◦';
  189. font-size:7px;
  190. }
  191.  
  192. #box a:hover{
  193. color:#ddd;/*color of box links after hover*/
  194. }
  195.  
  196. /*dont touch*/
  197. #container {
  198. display:block;
  199. z-index:0;
  200. width: 500px;
  201. height: 100%;
  202. padding:4px;
  203. float:right;
  204. }
  205.  
  206. #if_you_remove_this_youre_fucked_and_also_reported {
  207. line-height:100%;
  208. position:fixed;
  209. font-size:10px;
  210. width:70px;
  211. height:20px;
  212. font-family:calibri;
  213. letter-spacing:1px;
  214. padding-bottom:4px;
  215. padding-right:4px;
  216. bottom:0;
  217. right:0;
  218. z-index:9999999999999999;
  219. }
  220.  
  221. #if_you_remove_this_youre_fucked_and_also_reported .ville a {
  222. color:#9a9a9a;
  223. }
  224.  
  225. #if_you_remove_this_youre_fucked_and_also_reported .dancy{
  226. color:#9a9a9a;
  227. opacity:1.0;
  228. padding:1px 3px 2px 3px;
  229. margin-top:00px;
  230. margin-left:29px;
  231. text-align:center;
  232. overflow:hidden;
  233. position: absolute;
  234. background:#fff;
  235. font-size:10px;
  236. text-transform:uppercase;
  237. z-index:100;
  238. -webkit-transition: opacity 0.5s linear;
  239. -webkit-transition: all 0.5s linear;
  240. -moz-transition: all 0.5s linear;
  241. transition: all 0.5s linear;
  242. border:1px solid #ece4e4;
  243. }
  244.  
  245. #if_you_remove_this_youre_fucked_and_also_reported .ville{
  246. color:#9a9a9a;
  247. background:#fff;
  248. margin-top:100px;
  249. margin-top:0px;
  250. padding:1px 4px 2px 5px;
  251. margin-left:29px;
  252. font-size:10px;
  253. text-align:left;
  254. text-transform:uppercase;
  255. opacity:0;
  256. overflow:hidden;
  257. position: absolute;
  258. -webkit-transition: opacity 0.5s linear;
  259. -webkit-transition: all 0.5s linear;
  260. -moz-transition: all 0.5s linear;
  261. transition: all 0.5s linear;
  262. z-index:1200;
  263. border:1px solid #ece4e4;
  264. }
  265.  
  266. #if_you_remove_this_youre_fucked_and_also_reported:hover .ville {
  267. opacity:1;
  268. margin-bottom:14px;
  269. transition: all 0.5s linear;
  270. -webkit-transition: opacity 0.5s linear;
  271. -webkit-transition: all 0.5s linear;
  272. -moz-transition: all 0.5s linear;
  273. }
  274.  
  275. </style>
  276.  
  277. <!--
  278. MASONRY SCRIPT
  279. IT KEEPS THE BOXES IN PLACE
  280. ////DO NOT REMOVE////
  281. -->
  282. <script type="text/javascript" src="http://static.tumblr.com/gyoju49/qkkmpw5z6/infscroll.js"></script>
  283. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  284. <script type="text/javascript">
  285. $(window).load(function () {
  286. var $content = $('#container');
  287. $content.masonry({itemSelector: '#box'}),
  288. $content.infinitescroll({
  289. navSelector : 'div#pagination',
  290. nextSelector : 'div#pagination a#nextPage',
  291. itemSelector : '#box',
  292. loading: {
  293. finishedMsg: '',
  294. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  295. },
  296. bufferPx : 600,
  297. debug : false,
  298. },
  299. // call masonry as a callback.
  300. function( newElements ) {
  301. var $newElems = $( newElements );
  302. $newElems.hide();
  303. // ensure that images load before adding to masonry layout
  304. $newElems.imagesLoaded(function(){
  305. $content.masonry( 'appended', $newElems, true,
  306. function(){$newElems.fadeIn(300);} );
  307. });
  308. });
  309. });
  310. </script>
  311.  
  312. </head>
  313.  
  314. <body>
  315.  
  316. <!--begin header-->
  317. <div id="header">
  318.  
  319. <!--header image!! replace IMAGEURL with the url of the image you want-->
  320. <div id="headerimage" style="background: url('http://IMAGEURL') bottom;"></div>
  321.  
  322. <!--box in header-->
  323. <div class="head">
  324.  
  325. <!--page title-->
  326. <div id="tit">
  327. {name}'s navigation
  328. </div>
  329.  
  330. <!--header links; add or remove as many as you'd like to-->
  331. <a href="http://LINKURL">back</a>
  332. <a href="http://LINKURL">ask</a>
  333. <a href="http://LINKURL">blogroll</a>
  334. <a href="http://www.tumblr.com/dashboard">dash</a>
  335.  
  336. </div><!--end box in header-->
  337.  
  338. </div><!--end header-->
  339.  
  340. <div style="margin-top:-95px;"><!--do not remove-->
  341.  
  342. <!--begin link boxes-->
  343. <div id="container" style="float:center;margin:0px auto;">
  344.  
  345. <!--
  346. IF YOU EVER WANT ANOTHER LINK BOX, JUST COPY AND PASTE THE FOLLOWING:
  347. <div id="box">
  348. <div id="boxtitle">box title</div>
  349. <a href="http://LINKURL">link title</a>
  350. <a href="http://LINKURL">link title</a>
  351. <a href="http://LINKURL">link title</a>
  352. <a href="http://LINKURL">link title</a>
  353. <a href="http://LINKURL">link title</a>
  354. </div>
  355. -->
  356.  
  357. <div id="box">
  358. <div id="boxtitle">box title</div>
  359. <a href="http://LINKURL">link title</a>
  360. <a href="http://LINKURL">link title</a>
  361. <a href="http://LINKURL">link title</a>
  362. <a href="http://LINKURL">link title</a>
  363. <a href="http://LINKURL">link title</a>
  364. </div>
  365.  
  366. <div id="box">
  367. <div id="boxtitle">box title</div>
  368. <a href="http://LINKURL">link title</a>
  369. <a href="http://LINKURL">link title</a>
  370. <a href="http://LINKURL">link title</a>
  371. <a href="http://LINKURL">link title</a>
  372. <a href="http://LINKURL">link title</a>
  373. </div>
  374.  
  375. <div id="box">
  376. <div id="boxtitle">box title</div>
  377. <a href="http://LINKURL">link title</a>
  378. <a href="http://LINKURL">link title</a>
  379. <a href="http://LINKURL">link title</a>
  380. <a href="http://LINKURL">link title</a>
  381. <a href="http://LINKURL">link title</a>
  382. </div>
  383.  
  384. <div id="box">
  385. <div id="boxtitle">box title</div>
  386. <a href="http://LINKURL">link title</a>
  387. <a href="http://LINKURL">link title</a>
  388. <a href="http://LINKURL">link title</a>
  389. <a href="http://LINKURL">link title</a>
  390. <a href="http://LINKURL">link title</a>
  391. </div>
  392.  
  393. <div id="box">
  394. <div id="boxtitle">box title</div>
  395. <a href="http://LINKURL">link title</a>
  396. <a href="http://LINKURL">link title</a>
  397. <a href="http://LINKURL">link title</a>
  398. <a href="http://LINKURL">link title</a>
  399. <a href="http://LINKURL">link title</a>
  400. </div>
  401.  
  402. <div id="box">
  403. <div id="boxtitle">box title</div>
  404. <a href="http://LINKURL">link title</a>
  405. <a href="http://LINKURL">link title</a>
  406. <a href="http://LINKURL">link title</a>
  407. <a href="http://LINKURL">link title</a>
  408. <a href="http://LINKURL">link title</a>
  409. </div>
  410.  
  411. </div><!--end container-->
  412. </div><!--end -95px-->
  413.  
  414. <div id="if_you_remove_this_youre_fucked_and_also_reported">
  415.  
  416. <div class="dancy">
  417. &#x1d1b;&#x29c;&#x1d07;&#x1d0d;&#x1d07;
  418. </div>
  419.  
  420. <div class="ville">
  421. <a href="http://kimsjongin.tumblr.com">&#x1d0d;&#x1d07;&#x1d07;&#x1d0d;</a>
  422. </div>
  423. </div>
  424.  
  425. </body>
  426. </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!