API tools faq
paste
Advertisement
waltzy

thumbnail page

waltzy
Mar 9th, 2013
390
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.29 KB | None | 0 0
raw download clone embed print report
  1. <html><head>
  2. <!-- simple thumbnail layout by waltzy.tumblr.com -->
  3. <link rel="shortcut icon" href="{Favicon}" />
  4. <title>{Title}</title>
  5.  
  6. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  7. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  8. <script type="text/javascript" charset="utf-8">
  9. var $j = jQuery.noConflict();
  10. $j(function() {
  11. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  12. $j("img").lazyload({
  13. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  14. effect: "fadeIn",
  15. });
  16. });
  17. </script>
  18. <style>
  19. body {
  20. font-family: Trebuchet MS, sans serif;
  21. font-size: .9em;
  22. margin: 0px;
  23. padding: 0px;
  24. overflow-x: hidden;
  25. }
  26. .main, .navigation {
  27. padding: 20px;
  28. }
  29.  
  30. h3, h2 {
  31. text-transform: uppercase;
  32. color: #222222;
  33. clear: both;
  34. }
  35. a:link, a:visited,.navigation a {
  36. color: #E69549;
  37. text-decoration: none;
  38. -webkit-transition: all .35s linear;
  39. -moz-transition: all .35s linear;
  40. }
  41. a:hover, a:active {
  42. color: #940611;
  43. -webkit-transition: all .35s linear;
  44. -moz-transition: all .35s linear;
  45. }
  46. .thumbnail a:link, .thumbnail a:visited {
  47. color: white;
  48. }
  49. .thumbnail {
  50. float: left;
  51. text-align: center;
  52. overflow: hidden;
  53. margin-left: 5px;
  54. margin-top: -10px;
  55. margin-bottom: 0px;
  56. padding: 0px;
  57. opacity: .8;
  58. -webkit-transition: all .35s linear;
  59. -moz-transition: all .35s linear;
  60. }
  61.  
  62. .thumbnail:hover {
  63. opacity: 1;
  64. -webkit-transition: all .35s linear;
  65. -moz-transition: all .35s linear;
  66. }
  67. .thumbnail img {
  68. position: relative;
  69. height: 130px;
  70. }
  71.  
  72. .thumbnail span{
  73. display: block;
  74. margin: 0px;
  75. text-align: center;
  76. position: relative;
  77. top: -19px;
  78. height: 19px;
  79. width: 100%;
  80. background: #111111;
  81. opacity: .8;
  82. }
  83.  
  84. #header {
  85. background-color: #777777;
  86. color: #dddddd;
  87. width: 100%;
  88. margin: 0px;
  89. padding: 10px;
  90. padding-top: 20px;
  91. }
  92. #header h3, .footer h3 {
  93. color: #dddddd;
  94. margin: 0px;
  95. }
  96. .nav {
  97. font-size: 3em;
  98. }
  99.  
  100. #theme-credit {
  101. position: fixed;
  102. bottom: 0px;
  103. right: 0px;
  104. font-size: .9em;
  105. font-style: italic;
  106. }
  107.  
  108. </style>
  109.  
  110. </head><body>
  111. <div id="header">
  112. <h3>{Title}</h3>
  113.  
  114. <a href="/">Home</a> - <a href="/faq">Ask</a> - <a href="/archive">Archive</a>
  115. <br />Stick your description and stuff here, yo. If you want to automatically display the same description you have on your main blog page, uncomment the following part:
  116. <!-- {Description} -->
  117. </div>
  118.  
  119.  
  120. <div id="main" class="main">
  121.  
  122. <h2>2013</h2>
  123.  
  124.  
  125. <h3>Official Events</h3>
  126. <div id="events">
  127.  
  128. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/pca 2013"><img src="http://24.media.tumblr.com/5cb26aa4caeaa419a106c1d665182f3d/tumblr_mge353q9181qfcdl6o1_250.jpg"><span>pca 2013</span></a></div>
  129.  
  130. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/oscars 2013"><img src="http://25.media.tumblr.com/7ffe399c4337133e1b1aabe2e05ddbf4/tumblr_mir5mrO2Si1qzlhm3o1_250.jpg"><span>oscars 2013</span></a></div>
  131.  
  132. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/paley 2013"><img src="http://25.media.tumblr.com/2bea0db0527ed4d4eabf983efb6876b6/tumblr_mix1lzgKm91qfcdl6o1_250.jpg"><span>paley 2013</span></a></div>
  133.  
  134. </div>
  135.  
  136.  
  137. <h3>Official Videos and TV appearances</h3>
  138. <div id="tv">
  139. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/chris on larry"><img src="http://25.media.tumblr.com/42dd118a3296cd80c57661fdd24c185b/tumblr_mgf2dqhy5c1qjenjvo3_250.gif"><span>chris on larry</span></a></div>
  140.  
  141. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/chris on kelly 2013"><img src="http://24.media.tumblr.com/d82814d28e07301390094687571ff87b/tumblr_mgmuidLb2r1qaxxelo1_250.gif"><span>chris on kelly 2013</span></a></div>
  142.  
  143.  
  144. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/chris on ellen"><img src="http://24.media.tumblr.com/3713ebde34324687a7f55768094c3f1e/tumblr_mgzpk97btM1rk63wco1_250.jpg"><span>chris on ellen</span></a></div>
  145.  
  146. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/chris on kathy"><img src="http://25.media.tumblr.com/403b980f76a5c58e0768d186e0479caf/tumblr_mhkwkcDo2E1qe476yo2_250.jpg"><span>chris on kathy</span></a></div>
  147.  
  148. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/i heart glee"><img src="http://24.media.tumblr.com/1aa333b0f14a5d736314135b56a87ed9/tumblr_mixv1lryRB1qj8dg6o1_250.jpg"><span>i heart glee</span></a></div>
  149.  
  150.  
  151. </div>
  152.  
  153.  
  154. <h3>Photoshoots</h3>
  155. <div id="photoshoots">
  156. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/chris in august man"><img src="http://25.media.tumblr.com/7dc96899f3e2dc74a906570220b1feaa/tumblr_mh8jiogd2g1qbwzwoo6_r1_250.gif"><span>chris in august man</span></a></div>
  157. </div>
  158.  
  159. <h3>Personal</h3>
  160. <div id="personal">
  161. <span id="result-chrisnewyears2013"><div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/new year's 2013"><img src="http://25.media.tumblr.com/26dbcf3a4a881eebd7ab845824cbb9d4/tumblr_mg0hkzH90K1r5unc3o1_250.jpg"><span>new year's 2013</span></a></div></span>
  162.  
  163. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/st. patrick 2013"><img src="http://25.media.tumblr.com/f12fe0be15b14655456660e04c00d349/tumblr_mj4kdaDQV81qe476yo1_250.jpg"><span>st. patrick 2013</span></a></div>
  164.  
  165. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/spw at sayers"><img src="http://25.media.tumblr.com/c4468ba19fce4f404c958dd0423958c0/tumblr_mj917gJ74K1qfcdl6o3_250.jpg"><span>spw at sayers</span></a></div>
  166.  
  167. </div>
  168.  
  169.  
  170. <h3>SBL</h3>
  171. <div id="sbl">
  172.  
  173. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/sbl la"><img src="http://25.media.tumblr.com/7c8e69fd54f54288aac38ad45bc02d34/tumblr_mg9cfyljTH1qcy3j9o3_250.png"><span>sbl la</span>
  174. </a></div>
  175.  
  176. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/sbl ny"><img src="http://24.media.tumblr.com/8fa46ee9d319b28e7873b5487242b489/tumblr_mghxk08FBU1qcvzebo7_250.jpg"><span>sbl ny</span></a></div>
  177.  
  178. <div class="thumbnail"><a href="http://waltzy.tumblr.com/tagged/sbl la qa"><img src="http://25.media.tumblr.com/7b7d57c9f438af463329e65f70d20c5c/tumblr_mgjz114ihs1qfphyto4_250.gif"><span>sbl la qa</span></a></div>
  179.  
  180. </div>
  181.  
  182.  
  183.  
  184.  
  185.  
  186.  
  187.  
  188.  
  189.  
  190.  
  191.  
  192.  
  193.  
  194.  
  195.  
  196.  
  197.  
  198.  
  199. </div><!-- main -->
  200.  
  201.  
  202.  
  203.  
  204.  
  205.  
  206. <div id="theme-credit"><a href="http://waltzy.tumblr.com">theme</a>
  207.  
  208.  
  209.  
  210. </body></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!