API tools faq
paste
Advertisement
sebastianslan

Tags Page 02

sebastianslan
Jul 23rd, 2014
2,898
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.26 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. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. * TAGS #02 by saaraa @ cyantists.tumblr.com
  8.  
  9. - terms of use: http://cyantists.tumblr.com/terms
  10.  
  11. - I am no longer offering support for this theme
  12.  
  13. - enjoy!
  14.  
  15. ------------------------------------------------------------------------>
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19.  
  20. <!-----------------------------------------------------------------------
  21. COLOURS
  22. - to change the darker blue colour find and replace #54c1fd
  23. - to change the darker pink colour find and replace #fc53b3
  24. - to change the lighter blue colour find and replace #c2e8fc
  25. - to change the lighter pink colour find and replace #fcc2e3
  26. - to change the colour of th tags find and replace #969393
  27.  
  28. OTHER
  29. - title is in the second column
  30. <!------------------------------------------------------------------------>
  31.  
  32.  
  33.  
  34. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  35. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  36. <script>
  37. (function($){
  38. $(document).ready(function(){
  39. $("[title]").style_my_tooltips({
  40. tip_follows_cursor:true,
  41. tip_delay_time:200,
  42. tip_fade_speed:300
  43. }
  44. );
  45. });
  46. })(jQuery);
  47. </script>
  48.  
  49. <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
  50.  
  51. <link href='http://fonts.googleapis.com/css?family=Rosario:400,700' rel='stylesheet' type='text/css'>
  52.  
  53. </head>
  54.  
  55. <style type="text/css">
  56.  
  57. ::-webkit-scrollbar {
  58. height:auto; width:4px; background:#eee; }
  59.  
  60. ::-webkit-scrollbar-thumb:vertical {
  61. height:auto; background:#ddd; }
  62.  
  63. ::-webkit-scrollbar-thumb:hotizontal {
  64. display:none;}
  65.  
  66. ::selection {background:#fc53b3; color:#fff;}
  67. ::-webkit-selection {background:#fc53b3; color:#fff;}
  68. ::-moz-selection {background:#fc53b3; color:#fff;}
  69. ::-o-selection {background:#fc53b3; color:#fff;}
  70.  
  71. body {
  72. background-color:#fff; padding:0px; height:100%; overflow-y:hidden;
  73. background-image: url('http://assets.tumblr.com/images/x.gif'); color:#969393;
  74. font-family: 'Rosario', sans-serif; font-size:11px; margin:0px; }
  75.  
  76. a:link, a:active, a:visited {
  77. text-decoration:none; color:#54c1fd;
  78. transition:all 0.4s ease-in-out;
  79. -webkit-transition-duration:all 0.4s ease-in-out;
  80. -o-transition-transition:all 0.4s ease-in-out;
  81. -moz-transition-durartion:all 0.4s ease-in-out;
  82. -ms-transition-durartion:all 0.4s ease-in-out;
  83. }
  84.  
  85. a:hover {
  86. text-decoration:none; color:#fc53b3;
  87. transition:all 0.4s ease-in-out;
  88. -webkit-transition-duration:all 0.4s ease-in-out;
  89. -o-transition-transition:all 0.4s ease-in-out;
  90. -moz-transition-durartion:all 0.4s ease-in-out;
  91. -ms-transition-durartion:all 0.4s ease-in-out;
  92. }
  93.  
  94. i, em, .em {color:#fc53b3; padding-right:1px;}
  95.  
  96. b, strong, .strong {color:#777;}
  97.  
  98. small {font-size:9px; }
  99.  
  100. big {font-size:12px; }
  101.  
  102. sup, sub {font-size:10px; }
  103.  
  104. blockquote {border-left:solid 2px #eee; margin:0; padding-left:10px; }
  105.  
  106. iframe#tumblr_controls {
  107. right:3px !important;
  108. position:fixed !important;
  109. opacity:0.5;
  110. transition:all 0.6s ease-in-out;
  111. -webkit-transition:all 0.6s ease-in-out;
  112. -o-transition:all 0.6s ease-in-out;
  113. -moz-transition:all 0.6s ease-in-out;
  114. -ms-transition:all 0.6s ease-in-out;
  115. filter:invert(1);
  116. -webkit-filter:invert(1);
  117. -o-filter:invert(1);
  118. -moz-filter:invert(1);
  119. -ms-filter:invert(1);}
  120.  
  121. iframe#tumblr_controls:hover {
  122. opacity:1;
  123. transition:all 0.6s ease-in-out;
  124. -webkit-transition:all 0.6s ease-in-out;
  125. -o-transition:all 0.6s ease-in-out;
  126. -moz-transition:all 0.6s ease-in-out;
  127. -ms-transition:all 0.6s ease-in-out;}
  128.  
  129. #links, #links1 {width:32px; margin-left:64px; margin-bottom:25px;}
  130.  
  131. #links {margin-bottom:73px;}
  132.  
  133. a.s-link:link, a.s-link:active, a.s-link:visited {
  134. width:32px;
  135. display:inline-block;
  136. text-align:center;
  137. height:12px;
  138. margin-top:2px;
  139. padding:8px 0px 10px 0px;
  140. background:transparent;
  141. color:#54c1fd;
  142. font-variant:small-caps;
  143. transition:all 0.3s ease-in-out;
  144. -webkit-transition-duration:all 0.3s ease-in-out;
  145. -o-transition-transition:all 0.3s ease-in-out;
  146. -moz-transition-durartion:all 0.3s ease-in-out;
  147. -ms-transition-durartion:all 0.3s ease-in-out;
  148. }
  149.  
  150. a.s-link:hover
  151. {color:#fc53b3;}
  152.  
  153. #page-container {
  154. position:absolute;
  155. width:680px;
  156. position:absolute; margin:auto; bottom:0;
  157. left:0; top:0; right:0;
  158. }
  159.  
  160. #main {
  161. width:500px;
  162. float:right;
  163. margin-bottom:200px;
  164. padding-top:30px;
  165. z-index:20;
  166. margin-right:80px;
  167. height:645px;
  168. }
  169.  
  170. #s-m-t-tooltip {
  171. margin-top:20px; margin-left:10px; padding:4px;display:inline-block;
  172. text-align:center; position:absolute; font-size:9px; line-height:9px;
  173. font-family:Calibri; font-weight:900; z-index:9999; color:#fff;
  174. background:#fc53b3; text-transform:uppercase;
  175. letter-spacing:1px;}
  176.  
  177. #title {
  178. width:160px;
  179. font-size:35px;
  180. padding:0px 0px 14px 0px;
  181. text-align:center;
  182. font-size:35px;
  183. line-height:24px;
  184. font-family: 'Lobster', cursive;
  185. }
  186.  
  187. #title a:link, #title a:active, #title a:visited {
  188. color:#fcc2e3;
  189. transition:all 0.4s ease-in-out;
  190. -webkit-transition-duration:all 0.4s ease-in-out;
  191. -o-transition-transition:all 0.4s ease-in-out;
  192. -moz-transition-durartion:all 0.4s ease-in-out;
  193. -ms-transition-durartion:all 0.4s ease-in-out;}
  194.  
  195. #title a:hover {
  196. color:#c2e8fc;
  197. transition:all 0.4s ease-in-out;
  198. -webkit-transition-duration:all 0.4s ease-in-out;
  199. -o-transition-transition:all 0.4s ease-in-out;
  200. -moz-transition-durartion:all 0.4s ease-in-out;
  201. -ms-transition-durartion:all 0.4s ease-in-out;
  202. }
  203.  
  204. .t-link, a.t-link:link, a.t-link:active, a.t-link:visited {
  205. cursor:default;
  206. font-variant:small-caps;
  207. text-transform:lowercase;
  208. letter-spacing:1px;
  209. text-align:center;
  210. font-weight:bold;
  211. background:#54c1fd;
  212. margin-top:10px;
  213. margin-left:0px;
  214. display:block;
  215. width:160px;
  216. padding:3px 0px 4px 0px;
  217. color:#fff;
  218. transition:all 0.4s ease-in-out;
  219. -webkit-transition-duration:all 0.4s ease-in-out;
  220. -o-transition-transition:all 0.4s ease-in-out;
  221. -moz-transition-durartion:all 0.4s ease-in-out;
  222. -ms-transition-durartion:all 0.4s ease-in-out;
  223. }
  224.  
  225. #section-cont:hover .t-link,
  226. #section-cont:hover a.t-link:link,
  227. #section-cont:hover a.t-link:active,
  228. #section-cont:hover a.t-link:visited {
  229. background:#fc53b3;
  230. transition:all 0.4s ease-in-out;
  231. -webkit-transition-duration:all 0.4s ease-in-out;
  232. -o-transition-transition:all 0.4s ease-in-out;
  233. -moz-transition-durartion:all 0.4s ease-in-out;
  234. -ms-transition-durartion:all 0.4s ease-in-out;
  235. }
  236.  
  237.  
  238. #section-cont {
  239. width:160px;
  240. margin-left:0px;
  241. padding:0px;
  242. transition:all 0.4s ease-in-out;
  243. -webkit-transition-duration:all 0.4s ease-in-out;
  244. -o-transition-transition:all 0.4s ease-in-out;
  245. -moz-transition-durartion:all 0.4s ease-in-out;
  246. -ms-transition-durartion:all 0.4s ease-in-out;
  247. }
  248.  
  249. #section-cont:hover #tags-cont-l,
  250. #section-cont:hover #tags-cont-s {
  251. border-bottom:3px solid #fc53b3;
  252. transition-duration:0.5s;
  253. -webkit-transition-duration:0.5s;
  254. -o-transistion-duration:0.5s;
  255. -moz-transition-duration:0.5s;
  256. -ms-transition-duration:0.5s;
  257. }
  258.  
  259. #tags-cont-l, #tags-cont-s {
  260. width:160px;
  261. margin-left:0px;
  262. height:218px;
  263. overflow-y:scroll;
  264. border-bottom:3px solid #54c1fd;
  265. transition-duration:0.5s;
  266. -webkit-transition-duration:0.5s;
  267. -o-transistion-duration:0.5s;
  268. -moz-transition-duration:0.5s;
  269. -ms-transition-duration:0.5s;
  270. }
  271.  
  272. #tags-cont-s {height:182px;}
  273.  
  274. a.tag:link, a.tag:active, a.tag:visited {
  275. display:block;
  276. width:152px;
  277. margin:2px 0px;
  278. padding:1px 0px 1px 4px;
  279. color:#969393;
  280. letter-spacing:1px;
  281. font-variant:small-caps;
  282. text-transform:lowercase;
  283. transition:all 0.3s ease-in-out;
  284. -webkit-transition:all 0.3s ease-in-out;
  285. -moz-transition:all 0.3s ease-in-out;
  286. -o-transition:all 0.3s ease-in-out;
  287. -ms-transition:all 0.3s ease-in-out;}
  288.  
  289. a.tag:hover {color:#fc53b3; letter-spacing:2px;
  290. transition:all 0.3s ease-in-out;
  291. -webkit-transition:all 0.3s ease-in-out;
  292. -moz-transition:all 0.3s ease-in-out;
  293. -o-transition:all 0.3s ease-in-out;
  294. -ms-transition:all 0.3s ease-in-out;}
  295.  
  296. #column1 {
  297. width:160px;
  298. margin-left:0px;
  299. margin-top:15px;
  300. height:500px;
  301. }
  302.  
  303. #column2 {
  304. width:160px;
  305. margin-left:170px;
  306. margin-top:-500px;
  307. height:500px;
  308. }
  309.  
  310. #column3 {
  311. width:160px;
  312. margin-left:340px;
  313. margin-top:-500px;
  314. height:500px;
  315. }
  316.  
  317. {CustomCSS}</style>
  318.  
  319. <body>
  320.  
  321. <div id="page-container">
  322.  
  323. <div id="main">
  324.  
  325. <div id="column1">
  326.  
  327. <div id="links">
  328. <a class="s-link" href="/">
  329. &#8962;</a>
  330. </div>
  331.  
  332. <!------------------------------ SECTION ------------------------------>
  333. <div id="section-cont">
  334. <div class="t-link">title one</div>
  335. <div id="tags-cont-l">
  336. <a class="tag" href="/tagged/tag">tag one</a>
  337. <a class="tag" href="/tagged/tag">tag two</a>
  338. <a class="tag" href="/tagged/tag">tag three</a>
  339. <a class="tag" href="/tagged/tag">tag four</a>
  340. <a class="tag" href="/tagged/tag">tag five</a>
  341. <a class="tag" href="/tagged/tag">tag six</a>
  342. <a class="tag" href="/tagged/tag">tag seven</a>
  343. <a class="tag" href="/tagged/tag">tag eight</a>
  344. <a class="tag" href="/tagged/tag">tag nine</a>
  345. <a class="tag" href="/tagged/tag">tag ten</a>
  346. <a class="tag" href="/tagged/tag">tag eleven</a>
  347. <a class="tag" href="/tagged/tag">tag twelve</a>
  348. <a class="tag" href="/tagged/tag">tag thrirteen</a>
  349. <a class="tag" href="/tagged/tag">tag fourteen</a>
  350. <a class="tag" href="/tagged/tag">tag fifteen</a>
  351. </div>
  352. </div>
  353.  
  354. <!------------------------------ SECTION ------------------------------>
  355. <div id="section-cont">
  356. <div class="t-link">title two</div>
  357. <div id="tags-cont-s">
  358. <a class="tag" href="/tagged/tag">tag one</a>
  359. <a class="tag" href="/tagged/tag">tag two</a>
  360. <a class="tag" href="/tagged/tag">tag three</a>
  361. <a class="tag" href="/tagged/tag">tag four</a>
  362. <a class="tag" href="/tagged/tag">tag five</a>
  363. <a class="tag" href="/tagged/tag">tag six</a>
  364. <a class="tag" href="/tagged/tag">tag seven</a>
  365. <a class="tag" href="/tagged/tag">tag eight</a>
  366. <a class="tag" href="/tagged/tag">tag nine</a>
  367. <a class="tag" href="/tagged/tag">tag ten</a>
  368. <a class="tag" href="/tagged/tag">tag eleven</a>
  369. <a class="tag" href="/tagged/tag">tag twelve</a>
  370. <a class="tag" href="/tagged/tag">tag thrirteen</a>
  371. <a class="tag" href="/tagged/tag">tag fourteen</a>
  372. <a class="tag" href="/tagged/tag">tag fifteen</a>
  373. </div>
  374. </div>
  375.  
  376. </div>
  377.  
  378. <div id="column2">
  379.  
  380. <div id="links1">
  381. <a class="s-link" href="/ask">
  382. ?</a>
  383. </div>
  384.  
  385. <div id="title"><a href="/">navigation</a></div>
  386.  
  387. <!------------------------------ SECTION ------------------------------>
  388. <div id="section-cont">
  389. <div class="t-link">title three</div>
  390. <div id="tags-cont-l">
  391. <a class="tag" href="/tagged/tag">tag one</a>
  392. <a class="tag" href="/tagged/tag">tag two</a>
  393. <a class="tag" href="/tagged/tag">tag three</a>
  394. <a class="tag" href="/tagged/tag">tag four</a>
  395. <a class="tag" href="/tagged/tag">tag five</a>
  396. <a class="tag" href="/tagged/tag">tag six</a>
  397. <a class="tag" href="/tagged/tag">tag seven</a>
  398. <a class="tag" href="/tagged/tag">tag eight</a>
  399. <a class="tag" href="/tagged/tag">tag nine</a>
  400. <a class="tag" href="/tagged/tag">tag ten</a>
  401. <a class="tag" href="/tagged/tag">tag eleven</a>
  402. <a class="tag" href="/tagged/tag">tag twelve</a>
  403. <a class="tag" href="/tagged/tag">tag thrirteen</a>
  404. <a class="tag" href="/tagged/tag">tag fourteen</a>
  405. <a class="tag" href="/tagged/tag">tag fifteen</a>
  406. </div>
  407. </div>
  408.  
  409. <!------------------------------ SECTION ------------------------------>
  410. <div id="section-cont">
  411. <div class="t-link">title four</div>
  412. <div id="tags-cont-s">
  413. <a class="tag" href="/tagged/tag">tag one</a>
  414. <a class="tag" href="/tagged/tag">tag two</a>
  415. <a class="tag" href="/tagged/tag">tag three</a>
  416. <a class="tag" href="/tagged/tag">tag four</a>
  417. <a class="tag" href="/tagged/tag">tag five</a>
  418. <a class="tag" href="/tagged/tag">tag six</a>
  419. <a class="tag" href="/tagged/tag">tag seven</a>
  420. <a class="tag" href="/tagged/tag">tag eight</a>
  421. <a class="tag" href="/tagged/tag">tag nine</a>
  422. <a class="tag" href="/tagged/tag">tag ten</a>
  423. <a class="tag" href="/tagged/tag">tag eleven</a>
  424. <a class="tag" href="/tagged/tag">tag twelve</a>
  425. <a class="tag" href="/tagged/tag">tag thrirteen</a>
  426. <a class="tag" href="/tagged/tag">tag fourteen</a>
  427. <a class="tag" href="/tagged/tag">tag fifteen</a>
  428. </div>
  429. </div>
  430.  
  431. </div>
  432.  
  433. <div id="column3">
  434.  
  435. <!--- PLEASE DO NOT ALTER OR REMOVE --->
  436. <div id="links"><a class="s-link" href="http://cyantists.tumblr.com/" title="c. cyantists">&copy;</a></div>
  437. <!--- THANK YOU --->
  438.  
  439. <!------------------------------ SECTION ------------------------------>
  440. <div id="section-cont">
  441. <div class="t-link">title five</div>
  442. <div id="tags-cont-l">
  443. <a class="tag" href="/tagged/tag">tag one</a>
  444. <a class="tag" href="/tagged/tag">tag two</a>
  445. <a class="tag" href="/tagged/tag">tag three</a>
  446. <a class="tag" href="/tagged/tag">tag four</a>
  447. <a class="tag" href="/tagged/tag">tag five</a>
  448. <a class="tag" href="/tagged/tag">tag six</a>
  449. <a class="tag" href="/tagged/tag">tag seven</a>
  450. <a class="tag" href="/tagged/tag">tag eight</a>
  451. <a class="tag" href="/tagged/tag">tag nine</a>
  452. <a class="tag" href="/tagged/tag">tag ten</a>
  453. <a class="tag" href="/tagged/tag">tag eleven</a>
  454. <a class="tag" href="/tagged/tag">tag twelve</a>
  455. <a class="tag" href="/tagged/tag">tag thrirteen</a>
  456. <a class="tag" href="/tagged/tag">tag fourteen</a>
  457. <a class="tag" href="/tagged/tag">tag fifteen</a>
  458. </div>
  459. </div>
  460.  
  461. <!------------------------------ SECTION ------------------------------>
  462. <div id="section-cont">
  463. <div class="t-link">title six</div>
  464. <div id="tags-cont-s">
  465. <a class="tag" href="/tagged/tag">tag one</a>
  466. <a class="tag" href="/tagged/tag">tag two</a>
  467. <a class="tag" href="/tagged/tag">tag three</a>
  468. <a class="tag" href="/tagged/tag">tag four</a>
  469. <a class="tag" href="/tagged/tag">tag five</a>
  470. <a class="tag" href="/tagged/tag">tag six</a>
  471. <a class="tag" href="/tagged/tag">tag seven</a>
  472. <a class="tag" href="/tagged/tag">tag eight</a>
  473. <a class="tag" href="/tagged/tag">tag nine</a>
  474. <a class="tag" href="/tagged/tag">tag ten</a>
  475. <a class="tag" href="/tagged/tag">tag eleven</a>
  476. <a class="tag" href="/tagged/tag">tag twelve</a>
  477. <a class="tag" href="/tagged/tag">tag thrirteen</a>
  478. <a class="tag" href="/tagged/tag">tag fourteen</a>
  479. <a class="tag" href="/tagged/tag">tag fifteen</a>
  480. </div>
  481. </div>
  482.  
  483. </div>
  484.  
  485. </div> <!------------------------ CLOSE MAIN ----------------------->
  486.  
  487. </div>
  488.  
  489.  
  490. </body>
  491. </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!