API tools faq
paste
Advertisement
lilacthemes

Tag Page 01b

lilacthemes
Oct 3rd, 2014
1,365
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.45 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <!--
  6. page by lilacthemes.tumblr.com
  7. PLEASE DON'T REMOVE THE CREDIT AND CLAIM IT AS YOUR OWN
  8. -->
  9. <title>Navigation</title>
  10. <link rel="shortcut icon" href="{Favicon}" />
  11.  
  12. <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  13.  
  14. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  15. </script>
  16.  
  17. <!-- S M T TOOLTIP -->
  18. <script
  19. src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
  20. </script>
  21. <script
  22. src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js">
  23. </script>
  24.  
  25. <script>
  26.  
  27. (function($){
  28. $(document).ready(function(){
  29. $("a[title],span[title]").style_my_tooltips({
  30. tip_follows_cursor:true,
  31. tip_delay_time:0,
  32. tip_fade_speed:50,
  33. attribute:"title"
  34. });
  35. });
  36.  
  37. })(jQuery);
  38. </script>
  39.  
  40. <style type="text/css">
  41.  
  42. ::-webkit-scrollbar { width: 5px; height: 0px;}
  43. ::-webkit-scrollbar-track
  44. {
  45. background:transparent;
  46. }
  47. ::-webkit-scrollbar-thumb
  48. {
  49. background-color:#000; /* scrollbar's color*/
  50. }
  51. #s-m-t-tooltip
  52. {
  53. max-width:300px;
  54. background-color:#000; /* tooltip's color*/
  55. font-size:8px;
  56. color:#224184;
  57. text-transform:uppercase;
  58. letter-spacing:1px;
  59. padding:3px 3px 2px 3px;
  60. margin:20px;
  61. z-index:9999999999999999999999;
  62. font-family: 'Ubuntu', sans-serif;
  63. }
  64.  
  65. body
  66. {
  67. font-family: 'Roboto', sans-serif;
  68. background-color:rgba(10,20,40,0.8);
  69. background-image:url(''); /* image URL */
  70. background-position:top center;
  71. }
  72. a
  73. {
  74. text-decoration:none;
  75. }
  76.  
  77.  
  78. #navi
  79. {
  80. position:relative;
  81. top:250px;
  82. width:100%;
  83. margin:0px auto;
  84. text-align:center;
  85. }
  86. #navi > a
  87. {
  88. display:inline-block;
  89. padding:6px;
  90. text-transform:uppercase;
  91. width:80px;
  92. font-size:12px;
  93. margin:0 13px 0 13px;
  94. text-align:center;
  95. color:#224184;/* navigation (home,ask,dashboard,credit) color */
  96. background-color:#000; /* navigation background color */
  97. outline:10px solid rgba(0, 0, 0, 0.5); /* navigation outline color */
  98. -moz-transition: all 0.3s ease-in-out;
  99. -o-transition: all 0.3s ease-in-out;
  100. -webkit-transition: all 0.3s ease-in-out;
  101. -ms-transition:all 0.3s ease-in-out;
  102. transition: all 0.3s ease-in-out;
  103. }
  104. #navi a:hover
  105. {
  106.  
  107. outline:10px solid rgba(0, 0, 0, 0.3);
  108. }
  109. #container
  110. {
  111. position:relative;
  112. width:470px;
  113. height:250px;
  114. margin:0 auto;
  115. top:300px;
  116. overflow:scroll;
  117. background-color:#224184; /*container's background */
  118. padding:15px;
  119. outline:25px solid rgba(0, 0, 0, 0.4); /*container's outline*/
  120.  
  121. }
  122. .opener
  123. {
  124. position:relative;
  125. display:inline-block;
  126. width:200px;
  127. padding:10px;
  128. font-size:14px;
  129. color:#224184; /* title's (Title 1, Title 2 ...) text color */
  130. background-color:#000; /* title's background color */
  131. margin:5px;
  132. text-align:center;
  133. cursor:pointer;
  134. -moz-transition: all 0.4s ease-in-out;
  135. -o-transition: all 0.4s ease-in-out;
  136. -webkit-transition: all 0.4s ease-in-out;
  137. -ms-transition:all 0.4s ease-in-out;
  138. transition: all 0.4s ease-in-out;
  139. }
  140. .opener:hover
  141. {
  142. /* PLEASE DON'T MESS WITH THIS UNLESS YOU'RE GOOD AT CSS
  143. title's (Title 1, Title 2 ...) background hover color */
  144. background-color:transparent;
  145. box-shadow: inset 0 0 0 0 rgba(200,95,66, 0.4),
  146. inset 0 0 0 20px rgba(0,0,0,0.6),
  147. 0 1px 2px rgba(0,0,0,0.1);
  148. }
  149. .popup
  150. {
  151. position: fixed;
  152. width:100%;
  153. height:105%;
  154. top:0;
  155. bottom:0;
  156. left:0;
  157. right:0;
  158. background-color:#224184; /* popup's background */
  159. z-index:-5;
  160. display:block;
  161. visibility:hidden;
  162. overflow:hidden;
  163. }
  164. .popup h2
  165. {
  166. position:relative;
  167. top:80px;
  168. color:#000; /* Ask box's title */
  169. }
  170. .links
  171. {
  172. position: relative;
  173. width:580px;
  174. top:100px;
  175. margin:0 auto;
  176. height:75%;
  177. overflow:scroll;
  178. text-align:center;
  179. }
  180. .links a
  181. {
  182. display:inline-block;
  183. margin:8px;
  184. padding:5px;
  185. width:200px;
  186. color:#224184;
  187. background-color:#000;
  188. /* popup's link's (tag 1, tag 2...) background color */
  189. text-align:center;
  190. font-size:12px;
  191. text-transform:capitalize;
  192. -moz-transition: all 0.5s ease-in-out;
  193. -o-transition: all 0.5s ease-in-out;
  194. -webkit-transition: all 0.5s ease-in-out;
  195. -ms-transition:all 0.5s ease-in-out;
  196. transition: all 0.5s ease-in-out;
  197. }
  198. .links a:hover
  199. {
  200. color:#000;
  201. background-color:#224184;
  202. }
  203.  
  204. .popup > span
  205. {
  206. position:fixed;
  207. right:350px;
  208. font-size:30px;
  209. top:60px;
  210. color:#000; /* close button */
  211. cursor:pointer;
  212. -moz-transition: all 0.5s ease-in-out;
  213. -o-transition: all 0.5s ease-in-out;
  214. -webkit-transition: all 0.5s ease-in-out;
  215. -ms-transition:all 0.5s ease-in-out;
  216. transition: all 0.5s ease-in-out;
  217. }
  218. .popup > span:hover
  219. {
  220. color:#224184; /* hover over close button */
  221. }
  222. </style>
  223. </head>
  224. <body>
  225.  
  226. <script>
  227. $(document).ready(function(){
  228. $(".popup").hide();
  229.  
  230. $(".opener").click(function(){
  231. $(this).next(".popup").fadeIn();
  232. $(".popup").css("z-index",9);
  233. $(".popup").css("visibility","visible");
  234. });
  235. $(".popup > span").click(function(){
  236. $(".popup").fadeOut();
  237. $(".popup").css("z-index",-2);
  238. });
  239. });
  240. </script>
  241. <div id="navi">
  242. <a href="/">home</a>
  243. <a href="javascript:;" class="opener"
  244. style="box-shadow:0 0 0 rgba(0,0,0,0.0);">ask</a>
  245. <div class="popup"><span title="close">╳ </span>
  246.  
  247. <h2>Ask Me</h2>
  248. <iframe frameborder="0" class="links" style="height:200px"
  249. src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" id="ask_form">
  250. </iframe>
  251.  
  252. </div>
  253. <a href="https://www.tumblr.com/dashboard">dashboard</a>
  254. <a href="http://lilacthemes.tumblr.com/" target="_blank"
  255. title="lilacthemes">credit</a>
  256. </div>
  257.  
  258. <div id="container">
  259.  
  260. <span class="opener">Title 1</span>
  261. <div class="popup"><span title="close">╳ </span>
  262. <div class="links">
  263. <a href="TagURL">Tag 1</a>
  264. <a href="TagURL">Tag 2</a>
  265. <a href="TagURL">Tag 3</a>
  266. <a href="TagURL">Tag 4</a>
  267. <a href="TagURL">Tag 5</a>
  268. <a href="TagURL">Tag 6</a>
  269. <a href="TagURL">Tag 7</a>
  270. <a href="TagURL">Tag 8</a>
  271. <a href="TagURL">Tag 9</a>
  272. <a href="TagURL">Tag 10</a>
  273. </div>
  274. </div>
  275.  
  276. <span class="opener">Title 2</span>
  277. <div class="popup"><span title="close">╳ </span>
  278. <div class="links">
  279. <a href="TagURL">Tag 1</a>
  280. <a href="TagURL">Tag 2</a>
  281. <a href="TagURL">Tag 3</a>
  282. <a href="TagURL">Tag 4</a>
  283. <a href="TagURL">Tag 5</a>
  284. <a href="TagURL">Tag 6</a>
  285. <a href="TagURL">Tag 7</a>
  286. <a href="TagURL">Tag 8</a>
  287. <a href="TagURL">Tag 9</a>
  288. <a href="TagURL">Tag 10</a>
  289. <a href="TagURL">Tag 11</a>
  290. <a href="TagURL">Tag 12</a>
  291. <a href="TagURL">Tag 13</a>
  292. <a href="TagURL">Tag 14</a>
  293. <a href="TagURL">Tag 15</a>
  294. <a href="TagURL">Tag 16</a>
  295. <a href="TagURL">Tag 17</a>
  296. <a href="TagURL">Tag 18</a>
  297. <a href="TagURL">Tag 19</a>
  298. <a href="TagURL">Tag 20</a>
  299. <a href="TagURL">Tag 21</a>
  300. <a href="TagURL">Tag 22</a>
  301. <a href="TagURL">Tag 23</a>
  302. <a href="TagURL">Tag 24</a>
  303. <a href="TagURL">Tag 25</a>
  304. <a href="TagURL">Tag 26</a>
  305. <a href="TagURL">Tag 27</a>
  306. <a href="TagURL">Tag 28</a>
  307. <a href="TagURL">Tag 29</a>
  308. <a href="TagURL">Tag 30</a>
  309. </div>
  310. </div>
  311.  
  312. <span class="opener">Title 3</span>
  313. <div class="popup"><span title="close">╳ </span>
  314. <div class="links">
  315. <a href="TagURL">Tag 1</a>
  316. <a href="TagURL">Tag 2</a>
  317. <a href="TagURL">Tag 3</a>
  318. <a href="TagURL">Tag 4</a>
  319. <a href="TagURL">Tag 5</a>
  320. <a href="TagURL">Tag 6</a>
  321. <a href="TagURL">Tag 7</a>
  322. <a href="TagURL">Tag 8</a>
  323. <a href="TagURL">Tag 9</a>
  324. <a href="TagURL">Tag 10</a>
  325. </div>
  326. </div>
  327.  
  328. <span class="opener">Title 4</span>
  329. <div class="popup"><span title="close">╳ </span>
  330. <div class="links">
  331. <a href="TagURL">Tag 1</a>
  332. <a href="TagURL">Tag 2</a>
  333. <a href="TagURL">Tag 3</a>
  334. <a href="TagURL">Tag 4</a>
  335. <a href="TagURL">Tag 5</a>
  336. <a href="TagURL">Tag 6</a>
  337. <a href="TagURL">Tag 7</a>
  338. <a href="TagURL">Tag 8</a>
  339. <a href="TagURL">Tag 9</a>
  340. <a href="TagURL">Tag 10</a>
  341. </div>
  342. </div>
  343.  
  344. <span class="opener">Title 5</span>
  345. <div class="popup"><span title="close">╳ </span>
  346. <div class="links">
  347. <a href="TagURL">Tag 1</a>
  348. <a href="TagURL">Tag 2</a>
  349. <a href="TagURL">Tag 3</a>
  350. <a href="TagURL">Tag 4</a>
  351. <a href="TagURL">Tag 5</a>
  352. <a href="TagURL">Tag 6</a>
  353. <a href="TagURL">Tag 7</a>
  354. <a href="TagURL">Tag 8</a>
  355. <a href="TagURL">Tag 9</a>
  356. <a href="TagURL">Tag 10</a>
  357. </div>
  358. </div>
  359.  
  360. <span class="opener">Title 6</span>
  361. <div class="popup"><span title="close">╳ </span>
  362. <div class="links">
  363. <a href="TagURL">Tag 1</a>
  364. <a href="TagURL">Tag 2</a>
  365. <a href="TagURL">Tag 3</a>
  366. <a href="TagURL">Tag 4</a>
  367. <a href="TagURL">Tag 5</a>
  368. <a href="TagURL">Tag 6</a>
  369. <a href="TagURL">Tag 7</a>
  370. <a href="TagURL">Tag 8</a>
  371. <a href="TagURL">Tag 9</a>
  372. <a href="TagURL">Tag 10</a>
  373. </div>
  374. </div>
  375.  
  376. <span class="opener">Title 7</span>
  377. <div class="popup"><span title="close">╳ </span>
  378. <div class="links">
  379. <a href="TagURL">Tag 1</a>
  380. <a href="TagURL">Tag 2</a>
  381. <a href="TagURL">Tag 3</a>
  382. <a href="TagURL">Tag 4</a>
  383. <a href="TagURL">Tag 5</a>
  384. <a href="TagURL">Tag 6</a>
  385. <a href="TagURL">Tag 7</a>
  386. <a href="TagURL">Tag 8</a>
  387. <a href="TagURL">Tag 9</a>
  388. <a href="TagURL">Tag 10</a>
  389. </div>
  390. </div>
  391.  
  392. <span class="opener">Title 8</span>
  393. <div class="popup"><span title="close">╳ </span>
  394. <div class="links">
  395. <a href="TagURL">Tag 1</a>
  396. <a href="TagURL">Tag 2</a>
  397. <a href="TagURL">Tag 3</a>
  398. <a href="TagURL">Tag 4</a>
  399. <a href="TagURL">Tag 5</a>
  400. <a href="TagURL">Tag 6</a>
  401. <a href="TagURL">Tag 7</a>
  402. <a href="TagURL">Tag 8</a>
  403. <a href="TagURL">Tag 9</a>
  404. <a href="TagURL">Tag 10</a>
  405. </div>
  406. </div>
  407.  
  408. <span class="opener">Title 9</span>
  409. <div class="popup"><span title="close">╳ </span>
  410. <div class="links">
  411. <a href="TagURL">Tag 1</a>
  412. <a href="TagURL">Tag 2</a>
  413. <a href="TagURL">Tag 3</a>
  414. <a href="TagURL">Tag 4</a>
  415. <a href="TagURL">Tag 5</a>
  416. <a href="TagURL">Tag 6</a>
  417. <a href="TagURL">Tag 7</a>
  418. <a href="TagURL">Tag 8</a>
  419. <a href="TagURL">Tag 9</a>
  420. <a href="TagURL">Tag 10</a>
  421. </div>
  422. </div>
  423.  
  424. <span class="opener">Title 10</span>
  425. <div class="popup"><span title="close">╳ </span>
  426. <div class="links">
  427. <a href="TagURL">Tag 1</a>
  428. <a href="TagURL">Tag 2</a>
  429. <a href="TagURL">Tag 3</a>
  430. <a href="TagURL">Tag 4</a>
  431. <a href="TagURL">Tag 5</a>
  432. <a href="TagURL">Tag 6</a>
  433. <a href="TagURL">Tag 7</a>
  434. <a href="TagURL">Tag 8</a>
  435. <a href="TagURL">Tag 9</a>
  436. <a href="TagURL">Tag 10</a>
  437. </div>
  438. </div>
  439.  
  440. <span class="opener">Title 11</span>
  441. <div class="popup"><span title="close">╳ </span>
  442. <div class="links">
  443. <a href="TagURL">Tag 1</a>
  444. <a href="TagURL">Tag 2</a>
  445. <a href="TagURL">Tag 3</a>
  446. <a href="TagURL">Tag 4</a>
  447. <a href="TagURL">Tag 5</a>
  448. <a href="TagURL">Tag 6</a>
  449. <a href="TagURL">Tag 7</a>
  450. <a href="TagURL">Tag 8</a>
  451. <a href="TagURL">Tag 9</a>
  452. <a href="TagURL">Tag 10</a>
  453. </div>
  454. </div>
  455.  
  456. <span class="opener">Title 12</span>
  457. <div class="popup"><span title="close">╳ </span>
  458. <div class="links">
  459. <a href="TagURL">Tag 1</a>
  460. <a href="TagURL">Tag 2</a>
  461. <a href="TagURL">Tag 3</a>
  462. <a href="TagURL">Tag 4</a>
  463. <a href="TagURL">Tag 5</a>
  464. <a href="TagURL">Tag 6</a>
  465. <a href="TagURL">Tag 7</a>
  466. <a href="TagURL">Tag 8</a>
  467. <a href="TagURL">Tag 9</a>
  468. <a href="TagURL">Tag 10</a>
  469. </div>
  470. </div>
  471.  
  472. <!-- COPY THIS CODE AND PASTE IT FOR THE POPUP
  473.  
  474. <span class="opener">Title </span>
  475. <div class="popup"><span title="close">╳ </span>
  476. <div class="links">
  477. <a href="TagURL">Tag 1</a>
  478. <a href="TagURL">Tag 2</a>
  479. <a href="TagURL">Tag 3</a>
  480. <a href="TagURL">Tag 4</a>
  481. <a href="TagURL">Tag 5</a>
  482. <a href="TagURL">Tag 6</a>
  483. <a href="TagURL">Tag 7</a>
  484. <a href="TagURL">Tag 8</a>
  485. <a href="TagURL">Tag 9</a>
  486. <a href="TagURL">Tag 10</a>
  487. </div>
  488. </div>
  489.  
  490. -->
  491.  
  492.  
  493. </div>
  494. </body>
  495. </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!