API tools faq
paste
Advertisement
lilacthemes

Tag Page 01c

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