API tools faq
paste
Advertisement
luciam

Tags Page #6

luciam
Jul 13th, 2015
3,059
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.12 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-------------------------------------------------
  4. TAGS PAGE #06 BY: http://phoenixthemes.tumblr.com (INSTRUCTIONS IN CODE)
  5. ...................................................
  6. ...................................................
  7.  
  8.  
  9. TERMS OF USE:
  10. -Don’t remove or move the credit
  11. -Don’t redistribute
  12. -Don’t use as a base or take bits of code
  13. -You can edit it as much as you like as long as the credit remains untouched.
  14. --------------------------------------------->
  15.  
  16. <head>
  17.  
  18. <title>Navigation</title> <!--Change the browser title--->
  19.  
  20. <link rel="shortcut icon" href="{Favicon}" />
  21.  
  22. <!----TOOLTIP------------------>
  23.  
  24. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  25. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  26. <script>
  27. (function($){
  28. $(document).ready(function(){
  29. $("[title]").style_my_tooltips({
  30. tip_follows_cursor:true,
  31. tip_delay_time:0,
  32. tip_fade_speed:400,
  33. attribute:"title"
  34. });
  35. });
  36. })(jQuery);
  37. </script>
  38.  
  39.  
  40. <style type="text/css">
  41.  
  42.  
  43. /*--------------------------------RESET----------------------------------*/
  44.  
  45. html, body, div, span, applet, object, iframe,
  46. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  47. a, abbr, acronym, address, big, cite, code,
  48. del, dfn, em, img, ins, kbd, q, s, samp,
  49. small, strike, strong, sub, sup, tt, var,
  50. b, u, i, center,
  51. dl, dt, dd,
  52. fieldset, form, label, legend,
  53. table, caption, tbody, tfoot, thead, tr, th, td,
  54. article, aside, canvas, details, embed,
  55. figure, figcaption, footer, header, hgroup,
  56. menu, nav, output, ruby, section, summary,
  57. time, mark, audio, video {
  58. margin: 0;
  59. padding: 0;
  60. border: 0;
  61. font-size: 100%;
  62. font: inherit;
  63. vertical-align: baseline;
  64. }
  65.  
  66. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
  67. display:block;
  68. }
  69.  
  70. /*-------------------------------SCROLL----------------------------------*/
  71.  
  72. ::-webkit-scrollbar-thumb:vertical {
  73. border-left: 1px solid #999; /*scrollbar color*/
  74. background:transparent;
  75. height:5px;
  76. }
  77.  
  78. ::-webkit-scrollbar-thumb:horizontal {
  79. border-top: 1px solid #999; /*scrollbar color*/
  80. background:transparent;
  81. height:3px;
  82. }
  83.  
  84. ::-webkit-scrollbar-corner {
  85. background-color: transparent;
  86. }
  87.  
  88. ::-webkit-scrollbar {
  89. background-color: transparent;
  90. height:2px;
  91. width:5px;
  92. }
  93.  
  94. * {
  95. box-sizing: border-box;
  96. -webkit-box-sizing: border-box;
  97. -moz-box-sizing: border-box;
  98. -webkit-transition: all 0.4s ease-out;
  99. -moz-transition: all 0.4s ease-out;
  100. -ms-transition: all 0.4s ease-out;
  101. -o-transition: all 0.4s ease-out;
  102. transition: all 0.4s ease-out;
  103. }
  104.  
  105. /*---------------------------BODY-------------------------------------*/
  106. #s-m-t-tooltip{
  107. font-family: calibri;
  108. letter-spacing:1px;
  109. max-width:150px;
  110. font-size: 8px;
  111. margin:0px 10px;
  112. padding:3px 5px;
  113. background:#c4a2b0; /*tooltip background color*/
  114. color: #fff; /*tooltip color*/
  115. opacity: .8;
  116. z-index:999;
  117. text-transform:uppercase;
  118. border:1px solid #fff; /*tooltip border color*/
  119. }
  120.  
  121. html {
  122. height: 100%;
  123. }
  124.  
  125.  
  126. body {
  127. background: #eee; /*background color*/
  128. color: #666; /*text color*/
  129. background-attachment: fixed;
  130. background-position:bottom;
  131. background-size:150%;
  132. height:100%;
  133. background-attachment:fixed;
  134. background-repeat:no-repeat;
  135. margin: 0;
  136. padding: 0px;
  137. font-family: Consolas,'Trebuchet MS', sans-serif;
  138. font-size: 10px;
  139. word-wrap: break-word;
  140. letter-spacing: 1px;
  141. }
  142.  
  143. a, a:active, a:visited, a:hover {
  144. color: #666; /*links color*/
  145. text-decoration:none;
  146. -webkit-transition: all 0.6s ease-out;
  147. -moz-transition: all 0.6s ease-out;
  148. -ms-transition: all 0.6s ease-out;
  149. -o-transition: all 0.6s ease-out;
  150. transition: all 0.6s ease-out;
  151. }
  152.  
  153. a:hover {
  154. color: #888888; /*links hover color*/
  155. }
  156.  
  157. pre {
  158. white-space: pre-wrap;
  159. white-space: -moz-pre-wrap;
  160. white-space: -pre-wrap;
  161. white-space: -o-pre-wrap;
  162. word-wrap: break-word;
  163. }
  164.  
  165. small{font-size:8px;}
  166.  
  167. big {font-size:12px;}
  168.  
  169.  
  170. /*--------------------------------------*/
  171.  
  172. #centerdiv {
  173. width:100%;
  174. height:80%;
  175. position:relative;
  176. top:50%;
  177. transform:translatey(-50%);
  178. -webkit-transform:translatey(-50%);
  179. -moz-transform:translatey(-50%);
  180. }
  181.  
  182. #todo {
  183. width: 500px;
  184. margin:0 auto;
  185. background: #fff; /*container background color*/
  186. padding:25px;
  187. height: 570px;
  188. overflow:hidden;
  189. }
  190.  
  191. header {
  192. background-color:#c4a2b0; /*header background color*/
  193. width: 450px;
  194. height: 50px;
  195. z-index:99;
  196.  
  197. }
  198.  
  199.  
  200. #titulo {
  201. font-family: calibri, sans-serif;
  202. text-transform:uppercase;
  203. letter-spacing: 0.2em;
  204. position:absolute;
  205. color:#fff; /*title color*/
  206. margin:12px;
  207. width:250px;
  208. letter-spacing: 0.2em;
  209. font-size:20px;
  210. font-weight:bold;
  211. }
  212.  
  213.  
  214. #main {
  215. background:#eee;/*upper content background color*/
  216. width:450px;
  217. height:200px;
  218. overflow:auto;
  219. margin-top:10px;
  220. padding:15px;
  221. overflow:auto;
  222. }
  223.  
  224. nav {
  225. float:right;
  226. text-align:right;
  227. margin-right:20px;
  228. }
  229.  
  230. nav a {
  231. text-transform:uppercase;
  232. color:#fff; /*main links color*/
  233. font-weight:bold;
  234. font-size:9px;
  235. letter-spacing:0.2em;
  236. display:inline-block;
  237. padding:5px;
  238. margin-top:15px;
  239. }
  240.  
  241. nav a:hover {
  242. opacity:0.6;
  243. color:#fff; /*main links color*/
  244. }
  245.  
  246. /*-----------------------------*/
  247.  
  248. .phoenixt {
  249. position:absolute;
  250. bottom:20px;
  251. right:20px;
  252. text-align:center;
  253. }
  254.  
  255. #main h1 {
  256. color: #fff; /*list separator color*/
  257. overflow:hidden;
  258. padding: 0;
  259. margin: 0;
  260. width:420px;
  261. display:inline-block;
  262. padding: 7px;
  263. height:25px;
  264. margin-bottom: 5px;
  265. background:#c4a2b0; /*list separator background color*/
  266. text-transform:uppercase;
  267. text-align:center;
  268. }
  269.  
  270. .link label{
  271. overflow:hidden;
  272. cursor:pointer;
  273. padding: 0;
  274. margin: 0;
  275. width:200px;
  276. display:block;
  277. float:left;
  278. padding: 10px;
  279. height:30px;
  280. margin-bottom: 5px;
  281. margin-left:5px;
  282. background: #fff; /*list title background color*/
  283. color:#666; /*list title color*/
  284. text-transform:uppercase;
  285. text-align:center;
  286. }
  287.  
  288.  
  289. .link label:hover {
  290. background-color:#c4a2b0;
  291. color: #fff; /*Change the list titles color when hover*/
  292. }
  293.  
  294. [type=radio]:checked ~ label {
  295. z-index: 2;
  296. background-color: #c4a2b0;/*list titles background color when checked*/
  297. outline: 1px solid #fff; /*list titles border color when checked*/
  298. outline-offset: -3px;
  299. color: #fff;/*list titles color when checked*/
  300. }
  301.  
  302. .link [type=radio] {
  303. display: none;
  304. }
  305.  
  306. .contenido {
  307. background-color: #eee; /*bottom content color*/
  308. color:#666; /*content text color*/
  309. float:right;
  310. width: 450px;
  311. margin-top: 110px;
  312. margin-left: -15px;
  313. height: 250px;
  314. padding: 10px;
  315. overflow:hidden;
  316. position: absolute;
  317. opacity:0;
  318. top:190px;
  319. font-size: 8px;
  320. }
  321.  
  322. .contenido img {
  323. height:230px;
  324. width:210px;
  325. }
  326.  
  327. .contenido .links {
  328. float:right;
  329. width:210px;
  330. height:230px;
  331. overflow:auto;
  332. }
  333. .contenido a {
  334. color: #666; /*links/tags color*/
  335. font-size: 8px;
  336. margin:5px 0px;
  337. display: block;
  338. text-decoration: none;
  339. text-transform: uppercase;
  340. }
  341.  
  342. .contenido a:hover {
  343. color:#666; /*links/tags color when hover*/
  344. letter-spacing: 2px;
  345. font-weight: bold;
  346. }
  347.  
  348.  
  349. [type=radio]:checked ~ label ~ .contenido {
  350. z-index: 99;
  351. opacity:1;
  352. }
  353.  
  354.  
  355.  
  356.  
  357. </style>
  358.  
  359.  
  360. </head>
  361.  
  362. <body>
  363.  
  364. <div id="centerdiv">
  365. <div id="todo">
  366.  
  367. <header id="header">
  368. <div id="titulo">Navigation</div><!--Title-->
  369. <nav>
  370. <a href="/">home</a> <!--Link-->
  371. <a href="http://tumblr.com/dashboard">dash</a> <!--Link-->
  372. <a href="/">link 1</a> <!--Link-->
  373. <a href="/">link 2</a> <!--Link-->
  374.  
  375. </nav>
  376. </header>
  377.  
  378.  
  379. <div id="main">
  380.  
  381. <h1>first</h1><!----Change the lists separator!---->
  382.  
  383.  
  384. <!---Each group of tags begins with <div class="link"> and ends at </div>-->
  385. <div class="link">
  386. <input type="radio" id="tab-1" name="tab-group-1" checked>
  387.  
  388. <label for="tab-1">list title</label><!----Change the list title!---->
  389.  
  390. <div class="contenido">
  391.  
  392. <img src="http://static.tumblr.com/d4tdea8/kIHnrgl94/tumblr_tags_navigation_page.jpg">
  393. <!--------Image URL here. To get an URL you should previously upload the image on
  394. http://www.tumblr.com/themes/upload_static_file and then copy here the link it gives you, between the "". Make it 210x230px. If you don't want an image just delete it--------->
  395.  
  396. <div class="links">
  397. <a href="/tagged/tag" target="_blank">LINK</a>
  398. <a href="/tagged/tag" target="_blank">LINK</a>
  399. <br><!--Line jump-->
  400. <a href="/tagged/tag" target="_blank">LINK</a>
  401. <a href="/tagged/tag" target="_blank">LINK</a>
  402. <a href="/tagged/tag" target="_blank">LINK</a>
  403. <a href="/tagged/tag" target="_blank">LINK</a>
  404. <a href="/tagged/tag" target="_blank">LINK</a>
  405. <a href="/tagged/tag" target="_blank">LINK</a>
  406. <a href="/tagged/tag" target="_blank">LINK</a>
  407. <a href="/tagged/tag" target="_blank">LINK</a>
  408. <p>Here you can write any text that isn't a link or tag</p><!--Do it between p and /p -->
  409. <a href="/tagged/tag" target="_blank">LINK</a>
  410. <a href="/tagged/tag" target="_blank">LINK</a>
  411. <a href="/tagged/tag" target="_blank">LINK</a>
  412. <!----You can erase these or add more!---->
  413. </div>
  414.  
  415. </div>
  416. </div><!--End of the first group, don't delete any </div>--->
  417.  
  418.  
  419. <div class="link">
  420. <input type="radio" id="tab-2" name="tab-group-1">
  421. <label for="tab-2">List title</label>
  422.  
  423. <div class="contenido">
  424. <img src="http://static.tumblr.com/d4tdea8/Bo2nrggtx/xdmb0ic7tx.jpg">
  425.  
  426. <div class="links">
  427.  
  428. <a href="/tagged/tag" target="_blank">LINK</a>
  429. <a href="/tagged/tag" target="_blank">LINK</a>
  430. <br><!--Line jump-->
  431. <a href="/tagged/tag" target="_blank">LINK</a>
  432. <a href="/tagged/tag" target="_blank">LINK</a>
  433. <a href="/tagged/tag" target="_blank">LINK</a>
  434. <a href="/tagged/tag" target="_blank">LINK</a>
  435. <a href="/tagged/tag" target="_blank">LINK</a>
  436. <a href="/tagged/tag" target="_blank">LINK</a>
  437. <a href="/tagged/tag" target="_blank">LINK</a>
  438. <a href="/tagged/tag" target="_blank">LINK</a>
  439. <a href="/tagged/tag" target="_blank">LINK</a>
  440. <a href="/tagged/tag" target="_blank">LINK</a>
  441. <a href="/tagged/tag" target="_blank">LINK</a>
  442. <p>Here you can write any text that isn't a link or tag</p><!--Do it between p and /p -->
  443. <a href="/tagged/tag" target="_blank">LINK</a>
  444. <a href="/tagged/tag" target="_blank">LINK</a>
  445. <a href="/tagged/tag" target="_blank">LINK</a>
  446. <!----You can erase these or add more!---->
  447.  
  448. </div>
  449.  
  450. </div>
  451. </div>
  452.  
  453. <div class="link">
  454. <input type="radio" id="tab-3" name="tab-group-1">
  455. <label for="tab-3">List title</label>
  456.  
  457. <div class="contenido">
  458.  
  459. <div class="links">
  460. <a href="/tagged/tag" target="_blank">LINK</a>
  461. <a href="/tagged/tag" target="_blank">LINK</a>
  462. <br><!--Line jump-->
  463. <a href="/tagged/tag" target="_blank">LINK</a>
  464. <a href="/tagged/tag" target="_blank">LINK</a>
  465. <a href="/tagged/tag" target="_blank">LINK</a>
  466. <a href="/tagged/tag" target="_blank">LINK</a>
  467. <a href="/tagged/tag" target="_blank">LINK</a>
  468. <a href="/tagged/tag" target="_blank">LINK</a>
  469. <a href="/tagged/tag" target="_blank">LINK</a>
  470. <a href="/tagged/tag" target="_blank">LINK</a>
  471. <a href="/tagged/tag" target="_blank">LINK</a>
  472. <a href="/tagged/tag" target="_blank">LINK</a>
  473. <a href="/tagged/tag" target="_blank">LINK</a>
  474. <p>Here you can write any text that isn't a link or tag</p><!--Do it between p and /p -->
  475. <a href="/tagged/tag" target="_blank">LINK</a>
  476. <a href="/tagged/tag" target="_blank">LINK</a>
  477. <a href="/tagged/tag" target="_blank">LINK</a>
  478. <!----You can erase these or add more!---->
  479.  
  480. </div>
  481. </div>
  482.  
  483. <div class="link">
  484. <input type="radio" id="tab-4" name="tab-group-1">
  485. <label for="tab-4">List title</label>
  486.  
  487. <div class="contenido">
  488.  
  489. <img src="http://static.tumblr.com/d4tdea8/kIHnrgl94/tumblr_tags_navigation_page.jpg">
  490.  
  491. <div class="links">
  492. <a href="/tagged/tag" target="_blank">LINK</a>
  493. <a href="/tagged/tag" target="_blank">LINK</a>
  494. <br><!--Line jump-->
  495. <a href="/tagged/tag" target="_blank">LINK</a>
  496. <a href="/tagged/tag" target="_blank">LINK</a>
  497. <a href="/tagged/tag" target="_blank">LINK</a>
  498. <a href="/tagged/tag" target="_blank">LINK</a>
  499. <a href="/tagged/tag" target="_blank">LINK</a>
  500. <a href="/tagged/tag" target="_blank">LINK</a>
  501. <a href="/tagged/tag" target="_blank">LINK</a>
  502. <a href="/tagged/tag" target="_blank">LINK</a>
  503. <a href="/tagged/tag" target="_blank">LINK</a>
  504. <a href="/tagged/tag" target="_blank">LINK</a>
  505. <a href="/tagged/tag" target="_blank">LINK</a>
  506. <a href="/tagged/tag" target="_blank">LINK</a>
  507. <a href="/tagged/tag" target="_blank">LINK</a>
  508. <a href="/tagged/tag" target="_blank">LINK</a>
  509. <!----You can erase these or add more!---->
  510.  
  511. </div>
  512.  
  513. </div>
  514. </div>
  515.  
  516. <h1>Second</h1>
  517.  
  518. <div class="link">
  519. <input type="radio" id="tab-5" name="tab-group-1">
  520. <label for="tab-5">List title</label>
  521.  
  522. <div class="contenido">
  523.  
  524. <img src="http://static.tumblr.com/d4tdea8/Bo2nrggtx/xdmb0ic7tx.jpg">
  525.  
  526. <div class="links">
  527. <a href="/tagged/tag" target="_blank">LINK</a>
  528. <a href="/tagged/tag" target="_blank">LINK</a>
  529. <br><!--Line jump-->
  530. <a href="/tagged/tag" target="_blank">LINK</a>
  531. <a href="/tagged/tag" target="_blank">LINK</a>
  532. <a href="/tagged/tag" target="_blank">LINK</a>
  533. <a href="/tagged/tag" target="_blank">LINK</a>
  534. <a href="/tagged/tag" target="_blank">LINK</a>
  535. <a href="/tagged/tag" target="_blank">LINK</a>
  536. <a href="/tagged/tag" target="_blank">LINK</a>
  537. <a href="/tagged/tag" target="_blank">LINK</a>
  538. <a href="/tagged/tag" target="_blank">LINK</a>
  539. <a href="/tagged/tag" target="_blank">LINK</a>
  540. <a href="/tagged/tag" target="_blank">LINK</a>
  541. <a href="/tagged/tag" target="_blank">LINK</a>
  542. <a href="/tagged/tag" target="_blank">LINK</a>
  543. <a href="/tagged/tag" target="_blank">LINK</a>
  544. <!----You can erase these or add more!---->
  545.  
  546. </div>
  547.  
  548. </div>
  549. </div>
  550.  
  551. <!--To add another list copy everything from here-->
  552. <div class="link">
  553. <input type="radio" id="tab-6" name="tab-group-1">
  554. <label for="tab-6">List title</label>
  555.  
  556. <div class="contenido">
  557.  
  558. <img src="http://static.tumblr.com/d4tdea8/kIHnrgl94/tumblr_tags_navigation_page.jpg">
  559.  
  560. <div class="links">
  561. <a href="/tagged/tag" target="_blank">LINK</a>
  562. <a href="/tagged/tag" target="_blank">LINK</a>
  563. <a href="/tagged/tag" target="_blank">LINK</a>
  564. <a href="/tagged/tag" target="_blank">LINK</a>
  565. <a href="/tagged/tag" target="_blank">LINK</a>
  566. <a href="/tagged/tag" target="_blank">LINK</a>
  567. <a href="/tagged/tag" target="_blank">LINK</a>
  568. <a href="/tagged/tag" target="_blank">LINK</a>
  569.  
  570. </div>
  571.  
  572. </div>
  573. </div>
  574. <!--To here. Remember to change the tabs number from, for example, tab-6 to tab-7 and so on. The tab-group-1 doesn't have to be changed-->
  575.  
  576.  
  577.  
  578.  
  579.  
  580.  
  581. </div><!--main-->
  582.  
  583.  
  584.  
  585. </div></div></div><!---todo--->
  586. <!----------------------------------------------------------------->
  587. <div class="phoenixt"><a href="http://phoenixthemes.tumblr.com">P.</a></div>
  588. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  589. <script>
  590. $(document).ready(function(){
  591. $('.head').click(function(e){
  592. e.preventDefault();
  593. $(this).closest('li').find('.content').slideToggle();
  594. $('.head').click(function(e){
  595. e.preventDefault();
  596. $(this).closest('li').find('.content').not(':animated').slideToggle();
  597. });
  598. });
  599. });
  600. </script>
  601.  
  602. <!----------------------------------------------------------------->
  603.  
  604.  
  605. </body>
  606. </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!