API tools faq
paste
Advertisement
onediewreckshun

38 - navigation 3 - http://kimsjongin.tumblr.com

onediewreckshun
Jul 16th, 2013
870
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.56 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <title>{title}</title>
  5. <meta name="description" content="" />
  6. <link rel="shortcut icon" href="{favicon}" /><script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script> <script type="text/javascript" src="http://static.tumblr.com/gyoju49/uF2mjkhe3/layoutcomponent.txt"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/bkd4m5b/Citm42m8i/smoothscroll.js"></script>
  7. <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>
  8.  
  9. <style type="text/css">
  10.  
  11. body {
  12. font-family:calibri;
  13. font-size:10px;}
  14.  
  15. a {
  16. text-decoration:none;
  17. color:#d5d5d5;}
  18.  
  19. #border {
  20. position:fixed;
  21. top:40px;
  22. width:1500px;
  23. height:1px;
  24. background: #999;
  25. z-index:0;}
  26.  
  27. #firstbox {
  28. color:#999;
  29. position:fixed;
  30. top:10px;
  31. right:10px;
  32. -webkit-transition: all 0.3s ease-in-out;
  33. -moz-transition: all 0.3s ease-in-out;
  34. -o-transition: all 0.3s ease-in-out;
  35. -ms-transition: all 0.3s ease-in-out;
  36. transition: all 0.3s ease-in-out;
  37. }
  38.  
  39.  
  40. #tit {display:block;
  41. padding:0px 20px 0px 20px;
  42. z-index:99999999999999999;
  43. background:#fff;
  44. text-align:right;
  45. color:#999;
  46. margin-top:-20px;
  47. margin-left:-112px;
  48. text-transform:lowercase;
  49. letter-spacing:-1px;
  50. font-style:italic;
  51. font-family:baskerville;
  52. font-size:80px;}
  53.  
  54. .linkage {text-align:left;position:fixed;left:10px;top:23px;}
  55.  
  56. .linkage a {
  57. text-align:left;
  58. padding:6px 8px 6px 8px;
  59. display:inline-block;
  60. margin-left:15px;
  61. font-style:normal;
  62. font-family:georgia;
  63. letter-spacing:1px;
  64. border:1px solid #999;
  65. text-transform:uppercase;
  66. font-size:20px;
  67. color:#999;
  68. background:#fff;
  69. -webkit-transition: all 0.3s ease-in-out;
  70. -moz-transition: all 0.3s ease-in-out;
  71. -o-transition: all 0.3s ease-in-out;
  72. -ms-transition: all 0.3s ease-in-out;
  73. transition: all 0.3s ease-in-out;}
  74.  
  75. .linkage a:hover {
  76. color:#fff;
  77. background:#999;}
  78.  
  79. #container {margin:100px auto;margin-top:200px;text-align:center;}
  80.  
  81. #all {
  82. display:inline-block;
  83. width:130px;
  84. height:130px;
  85. padding:15px;
  86. text-align:center;
  87. margin-top:-90px;
  88. margin-left:10px;
  89. margin-right:-5px;
  90. margin-bottom:30px;
  91. border:1px solid #ededed;}
  92.  
  93. #all:hover .title {opacity:1;}
  94.  
  95. .title {
  96. opacity:0;
  97. width:142px;
  98. padding:6px 10px 7px 10px;
  99. border-bottom:0px solid #fff;
  100. background:#999;
  101. margin-top:-146px;
  102. margin-left:-16px;
  103. margin-bottom:5px;
  104. font-style:italic;
  105. text-align:left;
  106. text-transform:uppercase;
  107. letter-spacing:-1px;
  108. font-family:baskerville;
  109. font-size:20px;
  110. color:#fff;
  111. -webkit-transition: all 1s ease-in-out;
  112. -moz-transition: all 1s ease-in-out;
  113. -o-transition: all 1s ease-in-out;
  114. -ms-transition: all 1s ease-in-out;
  115. transition: all 1s ease-in-out;}
  116.  
  117. #all:hover .stuff {opacity:1;}
  118.  
  119. .stuff {
  120. background:#fff;
  121. width:157px;
  122. opacity:0;
  123. margin-top:-5px;
  124. margin-left:-15px;
  125. -webkit-transition: all 1s ease-in-out;
  126. -moz-transition: all 1s ease-in-out;
  127. -o-transition: all 1s ease-in-out;
  128. -ms-transition: all 1s ease-in-out;
  129. transition: all 1s ease-in-out;}
  130.  
  131. .stuff a {
  132. background:transparent;
  133. margin-left:-1px;
  134. width:156px;
  135. display:block;
  136. position:relative;
  137. padding:7px 3px 7px 3px;
  138. text-transform:none;
  139. letter-spacing:1px;
  140. font-size:10px;
  141. font-family:baskerville;
  142. color:#999;
  143. -webkit-transition: all 0.3s ease-in-out;
  144. -moz-transition: all 0.3s ease-in-out;
  145. -o-transition: all 0.3s ease-in-out;
  146. -ms-transition: all 0.3s ease-in-out;
  147. transition: all 0.3s ease-in-out;}
  148.  
  149. .stuff a:hover {
  150. letter-spacing:3px;
  151. background:#ddd;
  152. color:#fff;}
  153.  
  154. #all img {
  155. width:130px;
  156. height:130px;
  157. -webkit-transition: all 1s ease-in-out;
  158. -moz-transition: all 1s ease-in-out;
  159. -o-transition: all 1s ease-in-out;
  160. -ms-transition: all 1s ease-in-out;
  161. transition: all 1s ease-in-out;}
  162.  
  163. #all:hover .stuff {
  164. opacity:1;}
  165.  
  166. #all:hover img {
  167. opacity:0;}
  168.  
  169. #ackles {
  170. line-height:100%;
  171. position:fixed;
  172. font-size:10px;
  173. width:70px;
  174. height:20px;
  175. font-family:calibri;
  176. letter-spacing:1px;
  177. padding-bottom:4px;
  178. padding-right:4px;
  179. bottom:0;
  180. right:0;
  181. z-index:12;
  182. }
  183.  
  184. #ackles .ville a {
  185. color:#9a9a9a;
  186. }
  187.  
  188. #ackles .dancy{
  189. color:#9a9a9a;
  190. opacity:1.0;
  191. padding:1px 3px 2px 3px;
  192. margin-top:00px;
  193. margin-left:29px;
  194. text-align:center;
  195. overflow:hidden;
  196. position: absolute;
  197. background:#fff;
  198. font-size:10px;
  199. text-transform:uppercase;
  200. z-index:100;
  201. -webkit-transition: opacity 0.5s linear;
  202. -webkit-transition: all 0.5s linear;
  203. -moz-transition: all 0.5s linear;
  204. transition: all 0.5s linear;
  205. border:1px solid #ece4e4;
  206. }
  207.  
  208. #ackles .ville{
  209. color:#9a9a9a;
  210. background:#fff;
  211. margin-top:100px;
  212. margin-top:0px;
  213. padding:1px 4px 2px 5px;
  214. margin-left:29px;
  215. font-size:10px;
  216. text-align:left;
  217. text-transform:uppercase;
  218. opacity:0;
  219. overflow:hidden;
  220. position: absolute;
  221. -webkit-transition: opacity 0.5s linear;
  222. -webkit-transition: all 0.5s linear;
  223. -moz-transition: all 0.5s linear;
  224. transition: all 0.5s linear;
  225. z-index:1200;
  226. border:1px solid #ece4e4;
  227. }
  228.  
  229. #ackles:hover .ville {
  230. opacity:1;
  231. margin-bottom:14px;
  232. transition: all 0.5s linear;
  233. -webkit-transition: opacity 0.5s linear;
  234. -webkit-transition: all 0.5s linear;
  235. -moz-transition: all 0.5s linear;
  236. }
  237.  
  238. </style></head><body>
  239.  
  240. <div id="container">
  241. <div id="border"></div>
  242.  
  243. <div id="firstbox">
  244.  
  245. <div id="tit">navigation</div>
  246.  
  247. <div class="linkage">
  248.  
  249. <!--just change the stuff in the quotes to the link url
  250. and change the text to the link text
  251. for instance if it said <a href="/no">text</a> you would change /no to your link url and text to the link text-->
  252.  
  253. <a href="/">back</a>
  254.  
  255. <a href="/ask">ask</a>
  256.  
  257. <a href="http://tumblr.com/dashboard">dash</a>
  258.  
  259. </div>
  260.  
  261. </div>
  262.  
  263. <!--begin first box-->
  264. <div id="all">
  265. <!--first image-->
  266. <img src="http://25.media.tumblr.com/a34bc2512deb8dafc7ddc566b2857c06/tumblr_mo5dvxfHDg1rc51ufo3_250.png">
  267. <!--first title-->
  268. <div class="title">title;</a></div>
  269. <!--beginning of link box-->
  270. <div class="stuff">
  271. <!--5 links-->
  272. <a href="http://LINK">blah</a>
  273. <a href="http://LINK">blah</a>
  274. <a href="http://LINK">blah</a>
  275. <a href="http://LINK">blah</a>
  276. <a href="http://LINK">blah</a>
  277.  
  278. </div>
  279. </div>
  280. <!--end first box-->
  281.  
  282. <!--begin second box-->
  283. <div id="all">
  284. <!--second image-->
  285. <img src="http://25.media.tumblr.com/4668f8ddf6e54319af65598f6bae6345/tumblr_mo5dvxfHDg1rc51ufo6_250.png">
  286. <!--second title-->
  287. <div class="title">title;</a></div>
  288. <!--beginning of link box-->
  289. <div class="stuff">
  290. <!--5 links-->
  291. <a href="http://LINK">blah</a>
  292. <a href="http://LINK">blah</a>
  293. <a href="http://LINK">blah</a>
  294. <a href="http://LINK">blah</a>
  295. <a href="http://LINK">blah</a>
  296.  
  297. </div>
  298. </div>
  299. <!--end second box-->
  300.  
  301.  
  302. <br><br><br><br><br><br>
  303.  
  304.  
  305. <!--begin third box-->
  306. <div id="all">
  307. <!--third image-->
  308. <img src="http://25.media.tumblr.com/f776e4b2930a6416cf13aa0b9078bec5/tumblr_mo5dvxfHDg1rc51ufo8_250.png">
  309. <!--third title-->
  310. <div class="title">title;</a></div>
  311. <!--beginning of link box-->
  312. <div class="stuff">
  313. <!--5 links-->
  314. <a href="http://LINK">blah</a>
  315. <a href="http://LINK">blah</a>
  316. <a href="http://LINK">blah</a>
  317. <a href="http://LINK">blah</a>
  318. <a href="http://LINK">blah</a>
  319.  
  320. </div>
  321. </div>
  322. <!--end third box-->
  323.  
  324.  
  325. <!--begin fourth box-->
  326. <div id="all">
  327. <!--fourth image-->
  328. <img src="http://25.media.tumblr.com/0c32c940da73267d97f268c36666b7c5/tumblr_mo5dvxfHDg1rc51ufo9_250.png">
  329. <!--fourth title-->
  330. <div class="title">title;</a></div>
  331. <!--beginning of link box-->
  332. <div class="stuff">
  333. <!--5 links-->
  334. <a href="http://LINK">blah</a>
  335. <a href="http://LINK">blah</a>
  336. <a href="http://LINK">blah</a>
  337. <a href="http://LINK">blah</a>
  338. <a href="http://LINK">blah</a>
  339.  
  340. </div>
  341. </div>
  342. <!--end fourth box-->
  343.  
  344. </center>
  345.  
  346. </div>
  347.  
  348. <a style="position:fixed;left:10px;bottom:10px;font-family:calibri;font-size:8px;text-transform:uppercase;background:#bbb;color:#fff;padding:3px 4px;" href="http://flawlessphotosets.tumblr.com/post/52580028656">images credit</a>
  349.  
  350.  
  351. <div id="ackles">
  352.  
  353. <div class="dancy">
  354. &#x1d1b;&#x29c;&#x1d07;&#x1d0d;&#x1d07;
  355. </div>
  356.  
  357. <div class="ville">
  358. <a href="http://kimsjongin.tumblr.com/">&#x1d0d;&#x1d07;&#x1d07;&#x1d0d;</a>
  359. </div>
  360. </div>
  361.  
  362. <!--
  363. 　　　　　　
  364. ┊ 　 ┊ ┊
  365. ┊ ┊ ┊ ┊ ┊ ┊ ┊
  366. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  367. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  368.  
  369. ᴛʜᴇᴍᴇ ʙʏ ᴍᴇᴇᴍ (ᴋɪᴍsᴊᴏɴɢɪɴ.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ)
  370. ᴘʟᴇᴀsᴇ ᴅᴏɴ'ᴛ ʀᴇᴍᴏᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏʀ sᴛᴇᴀʟ! ^_^
  371.  
  372. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  373. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  374. ┊ ┊ ┊ ┊ ┊ ┊ ┊
  375. ┊ ┊ ┊
  376. -->
  377.  
  378. </body>
  379. </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!