Advertisement
attractedtosin

Tag Page 002

Mar 4th, 2014
12,721
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.14 KB | None | 0 0
  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. TAG PAGE 002
  7. ohcodey.tumblr.com [wolfwrecked]
  8.  
  9. Please observe common theme sharing etiquette:
  10. :you may alter but do not remove credit
  11. :do not use as a base or redistibute
  12. :etc
  13.  
  14. ----->
  15.  
  16.  
  17.  
  18. <title> tags page </title>
  19.  
  20.  
  21.  
  22. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400italic' rel='stylesheet' type='text/css'>
  23. <link href='http://fonts.googleapis.com/css?family=Merriweather+Sans' rel='stylesheet' type='text/css'>
  24.  
  25. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  26. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  27.  
  28. <script>
  29. $(function(){
  30. var $container = $('#container');
  31. $container.imagesLoaded(function(){
  32. $container.masonry({
  33. itemSelector: '.item',
  34. });
  35. });
  36.  
  37. $container.infinitescroll({
  38. itemSelector : ".item",
  39. navSelector : "div.pagination",
  40. nextSelector : ".pagination a#next",
  41. loadingImg : "",
  42. loadingText : "<em></em>",
  43. bufferPx : 10000,
  44. extraScrollPx: 12000,
  45. },
  46.  
  47. // trigger Masonry as a callback
  48. function( newElements ) {
  49. var $newElems = $( newElements ).css({ opacity: 0 });
  50. // ensure that images load before adding to masonry layout
  51. $newElems.imagesLoaded(function(){
  52. $newElems.animate({ opacity: 1 });
  53. $container.masonry( 'appended', $newElems, true );
  54. });
  55. }
  56. );
  57. });
  58.  
  59. </script>
  60.  
  61.  
  62. </head>
  63.  
  64. <style type="text/css">
  65.  
  66. a {color:#888888; text-decoration:none;}
  67.  
  68. body {
  69. font-family: 'Merriweather Sans', sans-serif;
  70. font-size:10px;
  71. text-align:justify;
  72. color:#333333;
  73. }
  74.  
  75. #container {
  76. width:700px;
  77. margin-left:auto;
  78. margin-right:auto;
  79. margin-top:50px;
  80. letter-spacing:+1px;
  81. padding-bottom:50px;
  82. border-bottom:solid 1px #eeeeee;
  83. margin-bottom:50px;
  84. }
  85.  
  86. .head {
  87. width:800px;
  88. margin-left:auto;
  89. margin-right:auto;
  90. margin-top:50px;
  91. letter-spacing:+1px;
  92. font-size:8px;
  93. color:#888888;
  94. text-align:right;
  95. }
  96.  
  97. .head a {
  98. display:inline-block;
  99. text-align:center;
  100. padding:5px 10px;
  101. margin:0 0 0 3px;
  102. background-color:#f7f7f7;
  103. }
  104.  
  105. .item {
  106. width:200px;
  107. margin:15px;
  108. }
  109.  
  110. .item a {
  111. text-align:center;
  112. letter-spacing:+1px;
  113. font-size:8px;
  114. width:190px;
  115. padding:5px;
  116. margin:1px;
  117. display:block;
  118. background-color:#f7f7f7;
  119. color:#888888;
  120. transition: all 0.3s ease-out;
  121. -o-transition: all 0.3s ease-out;
  122. -webkit-transition: all 0.3s ease-out;
  123. -moz-transition: all 0.3s ease-out;
  124. }
  125.  
  126. .item a:hover {
  127. background-color:#fcfcfc;transition: all 0.3s ease-out;
  128. -o-transition: all 0.3s ease-out;
  129. -webkit-transition: all 0.3s ease-out;
  130. -moz-transition: all 0.3s ease-out;}
  131.  
  132. h03 {
  133. text-align:center;
  134. font-family: 'Playfair Display', serif;
  135. font-style:italic;
  136. font-size:16pt;
  137. letter-spacing:1px;
  138. text-transform:lowercase;
  139. width:190px;
  140. padding:5px 5px 7px 5px;
  141. margin:1px;
  142. display:block;
  143. border-top:solid 1px #eeeeee;
  144. color:#888888;
  145. }
  146.  
  147. h01 {
  148. text-align:center;
  149. font-family: 'Playfair Display', serif;
  150. font-style:italic;
  151. font-size:36pt;
  152. letter-spacing:1px;
  153. border-bottom:solid 1px #eeeeee;
  154. color:#888888;
  155. width:780px;
  156. padding-left:20px;
  157. text-align:left;
  158. display:block;
  159. }
  160.  
  161. ::selection {
  162. background:#6dbf2a;
  163. color:#ffffff;
  164. }
  165. ::-moz-selection {
  166. background:#6dbf2a;
  167. color:#ffffff;
  168. }
  169. ::-webkit-selection {
  170. background:#6dbf2a;
  171. color:#ffffff;
  172. }
  173. ::-webkit-scrollbar {
  174. width:10px;
  175. height:auto;
  176. background:#ffffff;;
  177. }
  178.  
  179. ::-webkit-scrollbar-corner {background:#ffffff;}
  180. ::-webkit-scrollbar-thumb:vertical {background:#eeeeee; }
  181. ::-webkit-scrollbar-thumb:horizontal {background:#eeeeee;}
  182. ::-webkit-scrollbar-thumb:hover {background:#ffffff;}
  183.  
  184. .credit {
  185. padding:10px;
  186. font-size:10px;
  187. position:fixed;
  188. bottom:10px;
  189. right:15px;
  190. }
  191.  
  192. .credit a {color:#dddddd;}
  193.  
  194. </style>
  195.  
  196.  
  197.  
  198. <body>
  199.  
  200. <div class="head">
  201.  
  202. <h01>Heading.</h01>
  203.  
  204. <a href="/">home</a> <a href="/">link</a> <a href="/">link</a>
  205.  
  206. </div>
  207.  
  208.  
  209.  
  210. <div id="container">
  211.  
  212.  
  213.  
  214.  
  215. <!--
  216.  
  217. THIS IS A TEMPLATE FOR EACH COLUMN, COPY & PASTE AS BELOW:
  218.  
  219. <div class="item">
  220.  
  221. <h03>Heading</h03>
  222. <a href="link">link name</a>
  223. <a href="link">link name</a>
  224. <a href="link">link name</a>
  225. <a href="link">link name</a>
  226. <a href="link">link name</a>
  227.  
  228. </div>
  229.  
  230.  
  231. -->
  232.  
  233.  
  234.  
  235.  
  236.  
  237. <div class="item">
  238.  
  239. <h03>Heading</h03>
  240. <a href="link">link name</a>
  241. <a href="link">link name</a>
  242. <a href="link">link name</a>
  243. <a href="link">link name</a>
  244. <a href="link">link name</a>
  245.  
  246. </div>
  247.  
  248.  
  249. <div class="item">
  250.  
  251. <h03>Heading</h03>
  252. <a href="link">link name</a>
  253. <a href="link">link name</a>
  254. <a href="link">link name</a>
  255. <a href="link">link name</a>
  256. <a href="link">link name</a>
  257. <a href="link">link name</a>
  258. <a href="link">link name</a>
  259.  
  260. </div>
  261.  
  262.  
  263. <div class="item">
  264.  
  265. <h03>Heading</h03>
  266. <a href="link">link name</a>
  267. <a href="link">link name</a>
  268. <a href="link">link name</a>
  269. <a href="link">link name</a>
  270. <a href="link">link name</a>
  271.  
  272. </div>
  273.  
  274.  
  275.  
  276.  
  277.  
  278.  
  279.  
  280.  
  281.  
  282.  
  283. </div>
  284. <div class="credit">
  285. <a href="http://ohcodey.tumblr.com">&copy;</a>
  286. </div>
  287. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement