API tools faq
paste
Advertisement
inquisitorismage

Tags Page o1

inquisitorismage
Apr 26th, 2014
2,293
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.05 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5.  
  6. <title>{Title}</title>
  7.  
  8. <link rel="shortcut icon" href="{Favicon}" />
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10.  
  11. {block:Description}
  12. <meta name="description" content="{MetaDescription}" />
  13. {/block:Description}
  14.  
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23. <!--------------------------------------------
  24.  
  25.  
  26. TAGS PAGE #01 by INQUISITORISMAGE.tumblr.com
  27.  
  28. You can edit the page but please don't be a thief and LEAVE the CREDIT.
  29. Do NOT use parts of my code for your own purposes.
  30.  
  31.  
  32. -------------------------------------------->
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  43. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  44. <script>
  45. (function($){
  46. $(document).ready(function(){
  47. $("[title]").style_my_tooltips({
  48. tip_follows_cursor:true,
  49. tip_delay_time:200,
  50. tip_fade_speed:300
  51. }
  52. );
  53. });
  54. })(jQuery);
  55. </script>
  56.  
  57. <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
  58.  
  59. <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css'>
  60.  
  61.  
  62. <style type="text/css">
  63.  
  64.  
  65. ::-webkit-scrollbar {
  66. width:5px;
  67. height:5px;
  68. background: #fff;
  69. }
  70.  
  71.  
  72. ::-webkit-scrollbar-thumb:vertical {
  73. height:5px;
  74. background: #e0e0e0;
  75. }
  76.  
  77.  
  78. ::-webkit-scrollbar-thumb:horizontal {
  79. height:5px;
  80. background: #e0e0e0;
  81. }
  82.  
  83.  
  84. #s-m-t-tooltip {
  85. z-index: 99999;
  86. position: absolute;
  87. background-color: #f5f5f5;
  88. padding: 5px;
  89. padding-bottom: 3px;
  90. padding-top: 3px;
  91. max-width: 300px;
  92. margin-top: 20px;
  93. margin-left: 10px;
  94. display: inline-block;
  95. text-transform: uppercase;
  96. font-style: ;
  97. font-family: consolas;
  98. font-size: 8px;
  99. color: #a0a0a0;
  100. letter-spacing: 3px;
  101. }
  102.  
  103.  
  104. body {
  105. background-color: #fafafa;
  106. text-align: center;
  107. font-family: 'Source Code Pro';
  108. font-size: 8px;
  109. letter-spacing: 3px;
  110. line-height: 17px;
  111. color: #cacaca;
  112. }
  113.  
  114.  
  115. .content {
  116. width: 720px;
  117. margin: auto;
  118. margin-top: 70px;
  119. }
  120.  
  121.  
  122. a, a:visited {
  123. display: inline-block;
  124. width: 158px;
  125. height: auto;
  126. background-color: #f5f5f5;
  127. padding: 2px;
  128. margin-bottom: 1px;
  129. text-decoration: none;
  130. -webkit-transition: 0.5s linear;
  131. -moz-transition: 0.5s linear;
  132. -o-transition: 0.5s linear;
  133. color: #cacaca;
  134. }
  135.  
  136.  
  137. a:hover, a:active {
  138. text-decoration: none;
  139. background-color: #fff;
  140. -webkit-transition: 0.5s linear;
  141. -moz-transition: 0.5s linear;
  142. -o-transition: 0.5s linear;
  143. color: #888;
  144. }
  145.  
  146.  
  147. .description {
  148. padding: 12px;
  149. -webkit-border-top-left-radius: 20px;
  150. -moz-border-radius-topleft: 20px;
  151. border-top-left-radius: 20px;
  152. -webkit-border-bottom-right-radius: 20px;
  153. -moz-border-radius-bottomright: 20px;
  154. border-bottom-right-radius: 20px;
  155. line-height: 13px;
  156. text-align: center;
  157. font-family: 'Yanone Kaffeesatz', 'sans-serif';
  158. font-size: 10px;
  159. text-transform: uppercase;
  160. letter-spacing: 2px;
  161. -webkit-transition: 0.5s linear;
  162. -moz-transition: 0.5s linear;
  163. -o-transition: 0.5s linear;
  164. opacity: 0;
  165. background-color: #f5f5f5;
  166. height: auto;
  167. width: 150px;
  168. margin-top: -140px;
  169. margin-left: 190px;
  170. }
  171.  
  172.  
  173. .image:hover .description {
  174. -webkit-transition: 0.5s linear;
  175. -moz-transition: 0.5s linear;
  176. -o-transition: 0.5s linear;
  177. opacity: 1.0;
  178. }
  179.  
  180.  
  181. .image {
  182. z-index: 999;
  183. position: absolute;
  184. margin-left: 535px;
  185. height: 210px;
  186. width: 150px;
  187. margin-top: 60px;
  188. }
  189.  
  190.  
  191. .image img {
  192. border: 15px double #f2f2f2;
  193. height: 210px;
  194. width: 150px;
  195. -webkit-transition: 0.3s linear;
  196. -moz-transition: 0.3s linear;
  197. -o-transition: 0.3s linear;
  198. }
  199.  
  200. .image img:hover {
  201. -webkit-transition: 0.3s linear;
  202. -moz-transition: 0.3s linear;
  203. -o-transition: 0.3s linear;
  204. opacity: 0.9;
  205. }
  206.  
  207.  
  208. .naviborder {
  209. position: absolute;
  210. z-index: 99999;
  211. margin-top: 245px;
  212. margin-left: 575px;
  213. background-color: #;
  214. width: 200px;
  215. height: 200px;
  216. }
  217.  
  218.  
  219. .navibg {
  220. opacity: 0.8;
  221. height: 100px;
  222. width: 100px;
  223. -webkit-border-radius: 50px;
  224. -moz-border-radius: 50px;
  225. border-radius: 50px;
  226. background-color: #ff9a90; /* Navigation circle color */
  227.  
  228. /* If you want to remove the spin animation, get rid of everything starting from here... */
  229.  
  230. -webkit-transform: perspective(100px) rotateY(0deg);
  231. -moz-transform: perspective(100px) rotateY(0deg);
  232. -o-transform: perspective(100px) rotateY(0deg);
  233. -webkit-transition: all .5s ease-in-out;
  234. -moz-transition: all .5s ease-in-out;
  235. -o-transition: all .5s ease-in-out;
  236. transition: all .5s ease-in-out;
  237. }
  238.  
  239.  
  240. .navibg:hover {
  241. opacity: 1.0;
  242. -webkit-transform: perspective(100px) rotateY(360deg);
  243. -moz-transform: perspective(100px) rotateY(360deg);
  244. -o-transform: perspective(100px) rotateY(360deg);
  245. -webkit-transition: all .5s ease-in-out;
  246. -moz-transition: all .5s ease-in-out;
  247. -o-transition: all .5s ease-in-out;
  248. transition: all .5s ease-in-out;
  249.  
  250. /* ...all the way to here. This way the navigation won't do the spinning thing when you hover over it. */
  251.  
  252. }
  253.  
  254.  
  255. .navlinks {
  256. text-align: center;
  257. position: absolute;
  258. margin-top: 25px;
  259. margin-left: 25px;
  260. }
  261.  
  262.  
  263. .navlinks a {
  264. width: auto;
  265. text-transform: uppercase;
  266. display: inline-block;
  267. background-color: transparent;
  268. color: #fff;
  269. line-height: 10px;
  270. height: 10px;
  271. }
  272.  
  273.  
  274. .navlinks a:hover {
  275. color: #f5f5f5;
  276. }
  277.  
  278.  
  279. .tagtitle {
  280. -moz-border-radius-topright: 35px;
  281. -webkit-border-top-right-radius: 35px;
  282. border-top-right-radius: 35px;
  283. -moz-border-radius-bottomleft: 35px;
  284. -webkit-border-bottom-left-radius: 35px;
  285. border-bottom-left-radius: 35px;
  286. font-family: 'Yanone Kaffeesatz', 'sans-serif';
  287. font-size: 10px;
  288. margin-top: 15px;
  289. color: #fff;
  290. background-color: #ffbeb7; /* Heading background color */
  291. height: 17px;
  292. padding: 2px;
  293. margin-bottom: 1px;
  294. text-transform: uppercase;
  295. letter-spacing: 3px;
  296. -webkit-transition: 0.3s linear;
  297. -moz-transition: 0.3s linear;
  298. -o-transition: 0.3s linear;
  299. }
  300.  
  301.  
  302. .tagtitle:hover {
  303. opacity: 0.7;
  304. -webkit-transition: 0.3s linear;
  305. -moz-transition: 0.3s linear;
  306. -o-transition: 0.3s linear;
  307. }
  308.  
  309.  
  310. form {
  311. margin-top: 25px;
  312. width: 500px;
  313. }
  314.  
  315.  
  316. .search {
  317. padding: 5px 15px 5px 15px;
  318. }
  319.  
  320.  
  321. .rounded {
  322. border-radius:15px;
  323. -moz-border-radius:15px;
  324. -webkit-border-radius:15px;
  325. }
  326.  
  327.  
  328. input[type=text] {
  329. color:#bcbcbc;
  330. width: 180px;
  331. }
  332.  
  333.  
  334. input[type=submit], input[type=submit]:hover {
  335. position: relative;
  336. padding: 5px;
  337. padding-top: 4px;
  338. padding-bottom: 4px;
  339. top: -1px;
  340. left: 8px;
  341. border: 1px solid #e0e0e0;
  342. background: #eee;
  343. color: #aaa;
  344. cursor: pointer;
  345. font-family: 'Source Code Pro';
  346. font-size: 8px;
  347. letter-spacing: 3px;
  348. text-transform: uppercase;
  349. }
  350.  
  351.  
  352. .searchtags input[type=text] {
  353. border: 1px solid #ddd;
  354. background-color: #fcfcfc;
  355. font-family: 'Source Code Pro';
  356. font-size: 10px;
  357. letter-spacing: 0px;
  358. }
  359.  
  360.  
  361. .xxx {
  362. -webkit-border-radius: 50px;
  363. -moz-border-radius: 50px;
  364. border-radius: 50px;
  365. position: fixed;
  366. bottom: 10px;
  367. right: 10px;
  368. background-color: #ff5a49;
  369. height: 30px;
  370. width: 30px;
  371. }
  372.  
  373. .xxx a {
  374. background: transparent;
  375. color: #fff;
  376. font-style: italic;
  377. font-family: georgia;
  378. font-size: 17px;
  379. letter-spacing: -1px;
  380. margin-left: -67px;
  381. margin-top: 3px;
  382.  
  383. }
  384.  
  385.  
  386. </style>
  387. </head>
  388.  
  389. <body>
  390.  
  391.  
  392. <div class="content">
  393.  
  394.  
  395.  
  396.  
  397.  
  398. <!---------------------------------------------------
  399.  
  400. IMAGE, DESCRIPTION, NAVIGATION
  401.  
  402. To change the image, replace the URL below
  403. with the URL of the image you want. The size
  404. should be 150x210px, it not it will
  405. stretch/shrink to fit.
  406.  
  407. If you don't want a description, remove
  408. everything from <div class="description">
  409. to the </div> right after the desc text.
  410.  
  411. You can customize the navigation below,
  412. if you want to change the links. I would
  413. recommend keeping three of them however,
  414. 'cause otherwise it will look funny.
  415.  
  416. If you want to remove the spinning animation
  417. from the navigation: ctrl + f, type .navibg
  418. and follow the instructions. It's simple!
  419.  
  420. ---------------------------------------------------->
  421.  
  422. <div class="image"><img src="http://i.imgur.com/sbnX39Z.png">
  423.  
  424. <div class="description">here you have room for a description. it looks better if you keep it short-ish, but the box will stretch if you wish to make it long.</div>
  425.  
  426. </div>
  427.  
  428.  
  429. <div class="naviborder">
  430. <div class="navibg">
  431.  
  432. <div class="navlinks">
  433. <a href="/">back</a><br>
  434. <a href="/ask">askbox</a><br>
  435. <a href="http://www.tumblr.com">dash</a>
  436. </div>
  437. </div>
  438. </div>
  439.  
  440.  
  441.  
  442.  
  443.  
  444.  
  445. <!---------------------------------------------------
  446. TAGS
  447. ---------------------------------------------------->
  448.  
  449.  
  450. <table width="500px" cellpadding="" cellspacing="" style="font-size: 10px;letter-spacing: 0px;">
  451. <tr>
  452.  
  453.  
  454.  
  455. <!----------------------------
  456.  
  457. BEGIN COLUMN 1
  458.  
  459. The column begins with <td> and ends with </td>.
  460.  
  461. You can make a heading with
  462. <div class="tagtitle">heading here</div>.
  463.  
  464. Tags go between <a href="/tagged/"> and </a>.
  465.  
  466. Tag names and URLs are the same, for example
  467. <a href="/tagged/HEY">HEY</a>
  468. or <a href="/tagged/THIS-IS-A-TAG">THIS IS A TAG</a>.
  469.  
  470. ----------------------------->
  471.  
  472. <td valign="top">
  473.  
  474.  
  475.  
  476. <div class="tagtitle">
  477. title here
  478. </div>
  479.  
  480. <a href="/tagged/" target="_blank">
  481. tag
  482. </a><br>
  483.  
  484. <a href="/tagged/" target="_blank">
  485. tag
  486. </a><br>
  487.  
  488. <a href="/tagged/" target="_blank">
  489. tag
  490. </a><br>
  491.  
  492. <a href="/tagged/" target="_blank">
  493. tag
  494. </a><br>
  495.  
  496.  
  497.  
  498. <div class="tagtitle">
  499. title here
  500. </div>
  501.  
  502. <a href="/tagged/" target="_blank">
  503. tag
  504. </a><br>
  505.  
  506. <a href="/tagged/" target="_blank">
  507. tag
  508. </a><br>
  509.  
  510. <a href="/tagged/" target="_blank">
  511. tag
  512. </a><br>
  513.  
  514. <a href="/tagged/" target="_blank">
  515. tag
  516. </a><br>
  517.  
  518. <a href="/tagged/" target="_blank">
  519. tag
  520. </a><br>
  521.  
  522. <a href="/tagged/" target="_blank">
  523. tag
  524. </a><br>
  525.  
  526. <a href="/tagged/" target="_blank">
  527. tag
  528. </a><br>
  529.  
  530. <a href="/tagged/" target="_blank">
  531. tag
  532. </a><br>
  533.  
  534.  
  535.  
  536. <div class="tagtitle">
  537. title here
  538. </div>
  539.  
  540. <a href="/tagged/" target="_blank">
  541. tag
  542. </a><br>
  543.  
  544. <a href="/tagged/" target="_blank">
  545. tag
  546. </a><br>
  547.  
  548. <a href="/tagged/" target="_blank">
  549. tag
  550. </a><br>
  551.  
  552.  
  553.  
  554. </td>
  555.  
  556.  
  557.  
  558. <!----------------------------
  559.  
  560. BEGIN COLUMN 2
  561.  
  562. The column begins with <td> and ends with </td>.
  563.  
  564. You can make a heading with
  565. <div class="tagtitle">heading here</div>.
  566.  
  567. Tags go between <a href="/tagged/"> and </a>.
  568.  
  569. Tag names and URLs are the same, for example
  570. <a href="/tagged/HEY">HEY</a>
  571. or <a href="/tagged/THIS-IS-A-TAG">THIS IS A TAG</a>.
  572.  
  573. ----------------------------->
  574.  
  575. <td valign="top">
  576.  
  577.  
  578.  
  579. <div class="tagtitle">
  580. title here
  581. </div>
  582.  
  583. <a href="/tagged/" target="_blank">
  584. tag
  585. </a><br>
  586.  
  587. <a href="/tagged/" target="_blank">
  588. tag
  589. </a><br>
  590.  
  591. <a href="/tagged/" target="_blank">
  592. tag
  593. </a><br>
  594.  
  595. <a href="/tagged/" target="_blank">
  596. tag
  597. </a><br>
  598.  
  599. <a href="/tagged/" target="_blank">
  600. tag
  601. </a><br>
  602.  
  603. <a href="/tagged/" target="_blank">
  604. tag
  605. </a><br>
  606.  
  607.  
  608.  
  609. <div class="tagtitle">
  610. title here
  611. </div>
  612.  
  613. <a href="/tagged/" target="_blank">
  614. tag
  615. </a><br>
  616.  
  617. <a href="/tagged/" target="_blank">
  618. tag
  619. </a><br>
  620.  
  621. <a href="/tagged/" target="_blank">
  622. tag
  623. </a><br>
  624.  
  625. <a href="/tagged/" target="_blank">
  626. tag
  627. </a><br>
  628.  
  629.  
  630.  
  631. <div class="tagtitle">
  632. title here
  633. </div>
  634.  
  635. <a href="/tagged/" target="_blank">
  636. tag
  637. </a><br>
  638.  
  639. <a href="/tagged/" target="_blank">
  640. tag
  641. </a><br>
  642.  
  643. <a href="/tagged/" target="_blank">
  644. tag
  645. </a><br>
  646.  
  647. <a href="/tagged/" target="_blank">
  648. tag
  649. </a><br>
  650.  
  651. <a href="/tagged/" target="_blank">
  652. tag
  653. </a><br>
  654.  
  655.  
  656.  
  657. </td>
  658.  
  659.  
  660.  
  661. <!----------------------------
  662.  
  663. BEGIN COLUMN 3
  664.  
  665. The column begins with <td> and ends with </td>.
  666.  
  667. You can make a heading with
  668. <div class="tagtitle">heading here</div>.
  669.  
  670. Tags go between <a href="/tagged/"> and </a>.
  671.  
  672. Tag names and URLs are the same, for example
  673. <a href="/tagged/HEY">HEY</a>
  674. or <a href="/tagged/THIS-IS-A-TAG">THIS IS A TAG</a>.
  675.  
  676. ----------------------------->
  677.  
  678.  
  679. <td valign="top">
  680.  
  681.  
  682.  
  683. <div class="tagtitle">
  684. title here
  685. </div>
  686.  
  687. <a href="/tagged/" target="_blank">
  688. tag
  689. </a><br>
  690.  
  691. <a href="/tagged/" target="_blank">
  692. tag
  693. </a><br>
  694.  
  695. <a href="/tagged/" target="_blank">
  696. tag
  697. </a><br>
  698.  
  699. <a href="/tagged/" target="_blank">
  700. tag
  701. </a><br>
  702.  
  703. <a href="/tagged/" target="_blank">
  704. tag
  705. </a><br>
  706.  
  707.  
  708.  
  709. <div class="tagtitle">
  710. title here
  711. </div>
  712.  
  713. <a href="/tagged/" target="_blank">
  714. tag
  715. </a><br>
  716.  
  717. <a href="/tagged/" target="_blank">
  718. tag
  719. </a><br>
  720.  
  721. <a href="/tagged/" target="_blank">
  722. tag
  723. </a><br>
  724.  
  725.  
  726.  
  727. <div class="tagtitle">
  728. title here
  729. </div>
  730.  
  731. <a href="/tagged/" target="_blank">
  732. tag
  733. </a><br>
  734.  
  735. <a href="/tagged/" target="_blank">
  736. tag
  737. </a><br>
  738.  
  739. <a href="/tagged/" target="_blank">
  740. tag
  741. </a><br>
  742.  
  743. <a href="/tagged/" target="_blank">
  744. tag
  745. </a><br>
  746.  
  747. <a href="/tagged/" target="_blank">
  748. tag
  749. </a><br>
  750.  
  751. <a href="/tagged/" target="_blank">
  752. tag
  753. </a><br>
  754.  
  755. <a href="/tagged/" target="_blank">
  756. tag
  757. </a><br>
  758.  
  759.  
  760.  
  761. </td>
  762.  
  763. </tr>
  764. </table>
  765.  
  766.  
  767.  
  768.  
  769. <!---------------------------------------------------
  770.  
  771. SEARCH BOX
  772.  
  773. You can change the box text to something
  774. else if you like, just replace 'looking
  775. for another tag?' with whatever you want,
  776. or you can even remove it completely.
  777.  
  778. ---------------------------------------------------->
  779.  
  780. <div class="searchtags">
  781. <form action="/search" method="get">
  782.  
  783. <span>
  784. <input type="text" class="search rounded" name="q" value="{SearchQuery}" placeholder="looking for another tag?"/><input type="submit" value="Search"/>
  785. </span>
  786.  
  787. </form>
  788. </div>
  789.  
  790.  
  791. </div>
  792.  
  793.  
  794. <div class="xxx">
  795. <a href="http://inquisitorismage.tumblr.com" target="_blank" title="page by inquisitorismage">iim</a>
  796. </div>
  797.  
  798. </body>
  799. </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!