API tools faq
paste
Advertisement
luciam

Tags Page #5

luciam
Mar 14th, 2015
5,732
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!-------------------------------------------------
  3. TAGS PAGE #05 BY:
  4. http://robbarya.tumblr.com
  5. http://phoenixthemes.tumblr.com
  6. (INSTRUCTIONS IN CODE)
  7. ...................................................
  8. ...................................................
  9.  
  10. TERMS OF USE:
  11. - DON'T CLAIM AS YOUR OWN
  12. - DON'T REMOVE OR MOVE THE CREDIT
  13. - DON'T REDISTRIBUTE
  14. - DON'T USE AS A BASE. YOU CAN EDIT IT AS MUCH AS YOU LIKE AS LONG AS THE CREDIT IS STILL IN ITS ORIGINAL PLACE- Thank you
  15. --------------------------------------------->
  16. <head>
  17.  
  18. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  19.  
  20.  
  21. <title>Navigation</title><!---Change the browser title----->
  22.  
  23. <link rel="shortcut icon" href="{Favicon}" />
  24.  
  25. <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  26. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  27.  
  28.  
  29. <style type="text/css">
  30. /*--------------------------------RESET----------------------------------*/
  31.  
  32. html, body, div, span, applet, object, iframe,
  33. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  34. a, abbr, acronym, address, big, cite, code,
  35. del, dfn, em, img, ins, kbd, q, s, samp,
  36. small, strike, strong, sub, sup, tt, var,
  37. b, u, i, center,
  38. dl, dt, dd,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52.  
  53. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
  54. display:block;
  55. }
  56.  
  57.  
  58. ::-webkit-scrollbar-thumb:vertical {
  59. background:#333; /*Change the scrollbar color*/
  60. height:5px;
  61. }
  62.  
  63. ::-webkit-scrollbar-thumb:horizontal {
  64. background:#333; /*Change the scrollbar color*/
  65. height:2px;
  66. }
  67.  
  68. ::-webkit-scrollbar-corner {
  69. background-color: transparent;
  70. }
  71.  
  72. ::-webkit-scrollbar {
  73. background-color: transparent;
  74. height:2px;
  75. width:2px;
  76. }
  77.  
  78. * {
  79. box-sizing: border-box;
  80. -webkit-box-sizing: border-box;
  81. -moz-box-sizing: border-box;
  82. -webkit-transition: all 0.4s ease-out;
  83. -moz-transition: all 0.4s ease-out;
  84. -ms-transition: all 0.4s ease-out;
  85. -o-transition: all 0.4s ease-out;
  86. transition: all 0.4s ease-out;
  87. }
  88.  
  89.  
  90. body {
  91. background-image:url(''); /*Add a background image if you want*/
  92. background-color: #eee; /*Change the background color*/
  93. color: #666; /*Change the text color*/
  94. height:100%;
  95. background-attachment:static;
  96. background-repeat:repeat;
  97. margin: 0;
  98. padding: 0px;
  99. font-family:consolas, sans serif;
  100. font-size: 10px;
  101. letter-spacing: 1px;
  102. white-space: -moz-pre-wrap;
  103. white-space: -pre-wrap;
  104. white-space: -o-pre-wrap;
  105. word-wrap: break-word;
  106. }
  107.  
  108. a, a:active, a:visited, a:hover {
  109. text-decoration:none;
  110. -webkit-transition: all 0.6s ease-out;
  111. -moz-transition: all 0.6s ease-out;
  112. -ms-transition: all 0.6s ease-out;
  113. -o-transition: all 0.6s ease-out;
  114. transition: all 0.6s ease-out;
  115. }
  116.  
  117. .all {
  118. max-width:820px;
  119. width:100%;
  120. height:100%;
  121. margin:0px auto;
  122. }
  123.  
  124. header {
  125. position:relative;
  126. left:-5px;
  127. border-radius:5px;
  128. max-width:810px;
  129. width:100%;
  130. height:210px;
  131. margin:10px auto;
  132. background:#fff; /*Change the header background color*/
  133. padding:10px;
  134. -webkit-box-shadow: 2px 2px 3px 0px rgba(204,204,204,0.5);
  135. -moz-box-shadow: 2px 2px 3px 0px rgba(204,204,204,0.5);
  136. box-shadow: 2px 2px 3px 0px rgba(204,204,204,0.5);
  137. }
  138.  
  139. header img {
  140. display:block;
  141. border-radius:5px;
  142. width:190px;
  143. height:190px;
  144. float:left;
  145. }
  146.  
  147. #links {
  148. border-left:1px solid #ccc; /*Change the links border color*/
  149. width:100px;
  150. height:100%;
  151. float:right;
  152. border-radius:5px;
  153. padding:20px;
  154. }
  155.  
  156. #links div {
  157. position: relative;
  158. top: 50%;
  159. transform: translateY(-50%);
  160. }
  161.  
  162. #links a {
  163. color: #333; /*Change the links color*/
  164. text-align:left;
  165. display:block;
  166. margin-bottom:5px;
  167. padding:3px;
  168. font-weight:bold;
  169. text-transform:uppercase;
  170. font-size:8px;
  171. }
  172.  
  173. h1 {
  174. text-transform:uppercase;
  175. line-height:130%;
  176. text-align:center;
  177. font-family: 'Montserrat', consolas, sans-serif;
  178. color: #333; /*Change the title color*/
  179. letter-spacing:0.2em;
  180. display:block;
  181. width:100%;
  182. display:block;
  183. }
  184.  
  185. #title {
  186. background:#eee; /*Change the title background color*/
  187. background-image:url('');
  188. width:auto;
  189. margin-left:200px;
  190. margin-right:110px;
  191. height:100%;
  192. min-width:200px;
  193. border-radius:5px;
  194. }
  195.  
  196. #title h1 {
  197. position: relative;
  198. top: 50%;
  199. transform: translateY(-50%);
  200. font-size:24px;
  201. }
  202.  
  203. section.tagbox {
  204. -webkit-box-shadow: 2px 2px 3px 0px rgba(204,204,204,0.5);
  205. -moz-box-shadow: 2px 2px 3px 0px rgba(204,204,204,0.5);
  206. box-shadow: 2px 2px 3px 0px rgba(204,204,204,0.5);
  207. border-radius:5px;
  208. background:#fff;
  209. margin: 0px 10px 10px 0px;
  210. width:400px;
  211. display:table;
  212. border-collapse:separate;
  213. border-spacing:10px;
  214. position:relative;
  215. float:left;
  216. }
  217.  
  218. .taginner {
  219. max-height:500px;
  220. word-wrap:break-word;
  221. }
  222.  
  223. .listtitle {
  224. background:#eee; /*Change the tags title background color*/
  225. border-radius:5px;
  226. display:table-cell;
  227. vertical-align:middle;
  228. width:50%;
  229. height:100%;
  230. padding:20px;
  231. }
  232.  
  233.  
  234. .listtitle h1 {
  235. color: #333; /*Change the tags title color*/
  236. font-size:16px;
  237. display:block;
  238. width:150px;
  239. word-wrap: break-word;
  240. }
  241.  
  242. .tagbox:hover .listtitle {
  243. background:#333; /*Change the tags title background color on hover*/
  244. }
  245.  
  246. .tagbox:hover .listtitle h1 {
  247. color:#fff; /*Change the tags title color on hover*/
  248. }
  249. .tags {
  250. border-radius:5px;
  251. display:table-cell;
  252. max-height:500px;
  253. overflow:scroll;
  254. width:50%;
  255. padding:20px;
  256. border-left:1px solid #ccc; /*Change the tags border color*/
  257. }
  258.  
  259. .tags a, .tags p, .tags span {
  260. text-align:left;
  261. padding:3px;
  262. font-weight:bold;
  263. text-transform:uppercase;
  264. font-size:8px;
  265. }
  266.  
  267. .tags a {
  268. display:block;
  269. color:#666; /*Change the tags color*/
  270. }
  271.  
  272. .tags a:hover {
  273. color:#8dd1c5; /*Change the tags color on hover*/
  274. }
  275.  
  276. </style>
  277.  
  278. </head>
  279. <body>
  280.  
  281. <header>
  282. <img src="http://static.tumblr.com/d4tdea8/oJDnl7yh2/boleta.jpg"><!--------Top image URL here. To get an URL you should previously upload the image on
  283. http://www.tumblr.com/themes/upload_static_file and then copy here the link it gives you, between the "". Make it 190x190 --------->
  284. <div id="links">
  285. <div>
  286. <a href="/">home</a> <!---Change the links--->
  287. <a href="http://tumblr.com/dashboard">dash</a>
  288. <a href="/">link 1</a>
  289. <a href="/">link 2</a>
  290. <a href="/">link 3</a>
  291.  
  292.  
  293.  
  294. <a href="http://robbarya.tumblr.com">credit</a>
  295. </div>
  296. </div>
  297. <div id="title">
  298. <h1>navigation</h1><!---Change the title--->
  299. </div>
  300. </header>
  301. <div class="all">
  302.  
  303.  
  304. <section class="tagbox">
  305. <div class="listtitle">
  306. <h1>Tags title</h1><!----Change the list title!---->
  307. </div>
  308. <div class="tags">
  309. <div class="taginner">
  310. <a href="/tagged/tag" target="_blank">LINK</a>
  311. <a href="/tagged/tag" target="_blank">LINK</a>
  312. <a href="/tagged/tag" target="_blank">LINK</a>
  313. <a href="/tagged/tag" target="_blank">LINK</a>
  314. <a href="/tagged/tag" target="_blank">LINK</a>
  315. <a href="/tagged/tag" target="_blank">LINK</a>
  316. <a href="/tagged/tag" target="_blank">LINK</a>
  317. <a href="/tagged/tag" target="_blank">LINK</a>
  318. <a href="/tagged/tag" target="_blank">LINK</a>
  319. <a href="/tagged/tag" target="_blank">LINK</a>
  320. <a href="/tagged/tag" target="_blank">LINK</a>
  321. <a href="/tagged/tag" target="_blank">LINK</a>
  322. <a href="/tagged/tag" target="_blank">LINK</a>
  323. <!----You can erase these or add more!---->
  324. </div>
  325. </div>
  326. </section>
  327.  
  328.  
  329. <section class="tagbox">
  330. <div class="listtitle">
  331. <h1>Tags title</h1>
  332. </div>
  333. <div class="tags">
  334. <div class="taginner">
  335. <a href="/tagged/tag" target="_blank">LINK</a>
  336. <a href="/tagged/tag" target="_blank">LINK</a>
  337. <a href="/tagged/tag" target="_blank">LINK</a>
  338. <a href="/tagged/tag" target="_blank">LINK</a>
  339. <a href="/tagged/tag" target="_blank">LINK</a>
  340. <a href="/tagged/tag" target="_blank">LINK</a>
  341. <a href="/tagged/tag" target="_blank">LINK</a>
  342. <a href="/tagged/tag" target="_blank">LINK</a>
  343. <a href="/tagged/tag" target="_blank">LINK</a>
  344. </div>
  345. </div>
  346. </section>
  347.  
  348. <section class="tagbox">
  349. <div class="listtitle">
  350. <h1>This title has only one link</h1>
  351. </div>
  352. <div class="tags">
  353. <div class="taginner">
  354. <a href="/tagged/tag" target="_blank">LINK</a>
  355. </div>
  356. </div>
  357. </section>
  358.  
  359. <section class="tagbox">
  360. <div class="listtitle">
  361. <h1>Tags title</h1>
  362. </div>
  363. <div class="tags">
  364. <div class="taginner">
  365. <a href="/tagged/tag" target="_blank">LINK</a>
  366. <a href="/tagged/tag" target="_blank">LINK</a>
  367. <a href="/tagged/tag" target="_blank">LINK</a>
  368. <a href="/tagged/tag" target="_blank">LINK</a>
  369. <a href="/tagged/tag" target="_blank">LINK</a>
  370. <a href="/tagged/tag" target="_blank">LINK</a>
  371. <a href="/tagged/tag" target="_blank">LINK</a>
  372. <a href="/tagged/tag" target="_blank">LINK</a>
  373. <a href="/tagged/tag" target="_blank">LINK</a>
  374. <a href="/tagged/tag" target="_blank">LINK</a>
  375. <a href="/tagged/tag" target="_blank">LINK</a>
  376. <a href="/tagged/tag" target="_blank">LINK</a>
  377. <a href="/tagged/tag" target="_blank">LINK</a>
  378. </div>
  379. </div>
  380. </section>
  381.  
  382. <section class="tagbox">
  383. <div class="listtitle">
  384. <h1>Tags title</h1>
  385. </div>
  386. <div class="tags">
  387. <div class="taginner">
  388. <a href="/tagged/tag" target="_blank">LINK</a>
  389. <a href="/tagged/tag" target="_blank">LINK</a>
  390. <a href="/tagged/tag" target="_blank">LINK</a>
  391. <a href="/tagged/tag" target="_blank">LINK</a>
  392. <a href="/tagged/tag" target="_blank">LINK</a>
  393. <a href="/tagged/tag" target="_blank">LINK</a>
  394. <a href="/tagged/tag" target="_blank">LINK</a>
  395. <a href="/tagged/tag" target="_blank">LINK</a>
  396. <a href="/tagged/tag" target="_blank">LINK</a>
  397. </div>
  398. </div>
  399. </section>
  400.  
  401. <section class="tagbox">
  402. <div class="listtitle">
  403. <h1>Tags title</h1>
  404. </div>
  405. <div class="tags">
  406. <div class="taginner">
  407. <p>You can write text too. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean hendrerit urna vitae quam facilisis interdum. Maecenas eleifend neque leo, vel dictum leo faucibus id. Nullam at mauris id tortor accumsan rhoncus. Sed quis quam ultricies, consequat eros et, tempus nunc. Proin malesuada nibh vitae nisi cursus lobortis. </p> <!--Do it between <p> and </p> for each paragraph--->
  408. <a href="/tagged/tag" target="_blank">LINK</a>
  409. <a href="/tagged/tag" target="_blank">LINK</a>
  410. <a href="/tagged/tag" target="_blank">LINK</a>
  411. </div>
  412. </div>
  413. </section>
  414.  
  415. <section class="tagbox">
  416. <div class="listtitle">
  417. <h1>Tags title</h1>
  418. </div>
  419. <div class="tags">
  420. <div class="taginner">
  421. <a href="/tagged/tag" target="_blank">LINK</a>
  422. <a href="/tagged/tag" target="_blank">LINK</a>
  423. <a href="/tagged/tag" target="_blank">LINK</a>
  424. <a href="/tagged/tag" target="_blank">LINK</a>
  425. <a href="/tagged/tag" target="_blank">LINK</a>
  426. <a href="/tagged/tag" target="_blank">LINK</a>
  427. <a href="/tagged/tag" target="_blank">LINK</a>
  428. <a href="/tagged/tag" target="_blank">LINK</a>
  429. <a href="/tagged/tag" target="_blank">LINK</a>
  430. </div>
  431. </div>
  432. </section>
  433.  
  434.  
  435. <!--- Start of tagbox--->
  436.  
  437. <section class="tagbox">
  438. <div class="listtitle">
  439. <h1>Tags title</h1>
  440. </div>
  441. <div class="tags">
  442. <div class="taginner">
  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. <a href="/tagged/tag" target="_blank">LINK</a>
  447. <a href="/tagged/tag" target="_blank">LINK</a>
  448. <a href="/tagged/tag" target="_blank">LINK</a>
  449. <a href="/tagged/tag" target="_blank">LINK</a>
  450. <a href="/tagged/tag" target="_blank">LINK</a>
  451. <a href="/tagged/tag" target="_blank">LINK</a>
  452. <a href="/tagged/tag" target="_blank">LINK</a>
  453. <a href="/tagged/tag" target="_blank">LINK</a>
  454. <a href="/tagged/tag" target="_blank">LINK</a>
  455. <a href="/tagged/tag" target="_blank">LINK</a>
  456. </div>
  457. </div>
  458. </section>
  459.  
  460. <!------You can delete or add as many group of tags as you like. Each group starts at <section class="tagbox"> and ends at </section>-------->
  461.  
  462.  
  463.  
  464.  
  465. </div><!--ALL-->
  466.  
  467.  
  468. <script type="text/javascript" src="http://static.tumblr.com/nj7bgyh/zr9m0w1np/masonryq.js"></script>
  469. <script type="text/javascript" src="http://static.tumblr.com/nj7bgyh/J0qm0vycn/querymasonry.js"></script>
  470. <script src="http://static.tumblr.com/nj7bgyh/bynm0xy7g/endlessscrolljquery.js"></script>
  471. <script src="http://static.tumblr.com/nj7bgyh/rNom0vy8o/masonry.js"></script>
  472. <script type="text/javascript">
  473. $(window).load(function () {
  474. $('.all').masonry(),
  475. $('.tagbox').infinitescroll({
  476. itemSelector : ".tagbox",
  477. navSelector : "div.navigation",
  478. nextSelector : ".navigation a#next",
  479. bufferPx : 10000,
  480. extraScrollPx: 12000,
  481. loadingImg : "",
  482. loadingText : "",
  483. },
  484. function() { $('.all').masonry({ appendedContent: $(this) });
  485. });
  486. });
  487.  
  488. </script>
  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!