API tools faq
paste
Advertisement
pistachi-o

films in 2012 table

pistachi-o
Mar 8th, 2012
13,187
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.31 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.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <!--
  6. films in 2012 table by pistachi-o.tumblr.com
  7. idea from the-troubled-one/smoothdog.tumblr.com
  8. please don't remove the credit and claim it as your own
  9. -->
  10.  
  11. <head>
  12.  
  13. <title>{Title}</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  16.  
  17. <meta name="description" content="" />
  18.  
  19. <meta http-equiv="x-dns-prefetch-control" content="off"/></head>
  20.  
  21. <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
  22.  
  23. <script type="text/javascript">
  24. WebFontConfig = {
  25. google: { families: [ 'Droid+Serif::latin' ] }
  26. };
  27. (function() {
  28. var wf = document.createElement('script');
  29. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  30. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  31. wf.type = 'text/javascript';
  32. wf.async = 'true';
  33. var s = document.getElementsByTagName('script')[0];
  34. s.parentNode.insertBefore(wf, s);
  35. })(); </script>
  36.  
  37.  
  38. <style type="text/css">
  39.  
  40. ::-webkit-scrollbar {height: 12px; width: 10px;}
  41. ::-webkit-scrollbar-thumb {background-color:#DEDEDE;}
  42. ::-webkit-scrollbar-track {background-color:#FFFFFF;}
  43. ::-webkit-scrollbar-buttom {background-color:#000000;}
  44.  
  45. body {
  46. background-color: #FDF9F1;
  47. color: #696866;
  48. font-family: 'Droid Serif', Georgia, serif;
  49. font-size: 10px;
  50. text-align: center;
  51. line-height: 100%;
  52. }
  53.  
  54. a:link, a:active, a:visited {
  55. color: #033649;
  56. text-decoration: none;
  57. }
  58.  
  59. a:hover {
  60. color: #9ABFC8;
  61. text-decoration: none;
  62. }
  63.  
  64. .content {
  65. position: relative;
  66. width: 900px;
  67. margin: 0 auto;
  68. padding-top: 50px;
  69. padding-bottom: 50px;
  70. text-align: center;
  71. }
  72.  
  73. #title {
  74. position: relative;
  75. padding: 5px;
  76. color: #036564;
  77. font-family: 'RiotSquadRegular', Arial, sans-serif;
  78. font-size: 45px;
  79. font-weight: bold;
  80. letter-spacing: 3px;
  81. line-height: 100%;
  82. text-align: center;
  83. text-shadow: 2px 2px #CDB380;
  84. }
  85.  
  86. .links {
  87. text-transform: uppercase;
  88. font-size: 10px;
  89. text-align: center;
  90. line-height: 100%;
  91. padding-bottom: 10px;
  92. }
  93.  
  94. .view {
  95. width: 140px;
  96. height: 195px;
  97. margin: 5px;
  98. float: left;
  99. overflow: hidden;
  100. position: relative;
  101. text-align: center;
  102. background: #fff;
  103. }
  104.  
  105. .view .mask,.view .content {
  106. width: 140px;
  107. height: 100%;
  108. position: absolute;
  109. overflow: hidden;
  110. top: 0;
  111. left: 0;
  112. }
  113.  
  114. .view img {
  115. width: 140px;
  116. height: 195px;
  117. display: block;
  118. position: relative;
  119. }
  120.  
  121. .view h2 {
  122. color: #fff;
  123. font-family: 'Droid Serif', Georgia, serif;
  124. text-align: center;
  125. position: relative;
  126. font-size: 12px;
  127. padding: 10px;
  128. background: rgba(0, 0, 0, 0.8);
  129. margin: 20px 0 0 0;
  130. }
  131.  
  132. .view p {
  133. font-family: 'Droid Serif', Georgia, serif;
  134. font-size: 12px;
  135. position: relative;
  136. color: #fff;
  137. padding: 10px 5px 5px;
  138. text-align: center;
  139. }
  140.  
  141. .view a.info {
  142. display: inline-block;
  143. text-decoration: none;
  144. padding: 5px 8px;
  145. background: #FDF9F1;
  146. font-size: 8px;
  147. color: #000;
  148. text-transform: uppercase;
  149. -webkit-box-shadow: 0 0 1px #000;
  150. -moz-box-shadow: 0 0 1px #000;
  151. box-shadow: 0 0 1px #000;
  152. }
  153.  
  154. .view a.info: hover {
  155. -webkit-box-shadow: 0 0 5px #000;
  156. -moz-box-shadow: 0 0 5px #000;
  157. box-shadow: 0 0 5px #000;
  158. }
  159.  
  160. .view-style img {
  161. -webkit-transition: all 0.6s ease-in-out;
  162. -moz-transition: all 0.6s ease-in-out;
  163. -o-transition: all 0.6s ease-in-out;
  164. -ms-transition: all 0.6s ease-in-out;
  165. transition: all 0.6s ease-in-out;
  166. }
  167.  
  168. .view-style .mask {
  169. background-color: #E8DDCB;
  170. -webkit-transform: translateX(-140px);
  171. -moz-transform: translateX(-140px);
  172. -o-transform: translateX(-140px);
  173. -ms-transform: translateX(-140px);
  174. transform: translateX(-140px);
  175. filter: alpha(opacity=100);
  176. opacity: 1;
  177. -webkit-transition: all 0.6s ease-in-out;
  178. -moz-transition: all 0.6s ease-in-out;
  179. -o-transition: all 0.6s ease-in-out;
  180. -ms-transition: all 0.6s ease-in-out;
  181. transition: all 0.6s ease-in-out;
  182. }
  183.  
  184. .view-style h2 {
  185. background: rgba(255, 255, 255, 0.5);
  186. color: #000;
  187. -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
  188. -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
  189. box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
  190. }
  191.  
  192. .view-style p {
  193. filter: alpha(opacity=0);
  194. opacity: 0;
  195. color: #333;
  196. -webkit-transition: all 0.2s linear;
  197. -moz-transition: all 0.2s linear;
  198. -o-transition: all 0.2s linear;
  199. -ms-transition: all 0.2s linear;
  200. transition: all 0.2s linear;
  201. }
  202.  
  203. .view-style:hover .mask {
  204. -webkit-transform: translateX(0px);
  205. -moz-transform: translateX(0px);
  206. -o-transform: translateX(0px);
  207. -ms-transform: translateX(0px);
  208. transform: translateX(0px);
  209. }
  210.  
  211. .view-style:hover img {
  212. -webkit-transform: translateX(140px);
  213. -moz-transform: translateX(140px);
  214. -o-transform: translateX(140px);
  215. -ms-transform: translateX(140px);
  216. transform: translateX(140px);
  217. }
  218.  
  219. .view-style:hover p {
  220. filter: alpha(opacity=100);
  221. opacity: 1;
  222. }
  223.  
  224. .credits {
  225. position: fixed;
  226. padding: 5px;
  227. bottom: 5px;
  228. left: 0;
  229. margin-left: 5px;
  230. z-index: 1000;
  231. text-transform: uppercase;
  232. font-size: 8px;
  233. }
  234.  
  235. @font-face {
  236. font-family: 'SixCapsRegular';
  237. src: url('http://static.tumblr.com/whx9ghv/Hkfm09olb/sixcaps-webfont.eot');
  238. src: url('http://static.tumblr.com/whx9ghv/Hkfm09olb/sixcaps-webfont.eot?#iefix') format('embedded-opentype'),
  239. url('http://static.tumblr.com/whx9ghv/4txm09omb/sixcaps-webfont.woff') format('woff'),
  240. url('http://static.tumblr.com/whx9ghv/S2Hm09om0/sixcaps-webfont.ttf') format('truetype'),
  241. url('http://static.tumblr.com/whx9ghv/Z6lm09olp/sixcaps-webfont.svg#SixCapsRegular') format('svg');
  242. font-weight: normal;
  243. font-style: normal;
  244. }
  245.  
  246. @font-face {
  247. font-family: 'RiotSquadRegular';
  248. src: url('http://static.tumblr.com/whx9ghv/M5Im0fjtx/riotsqua_0-webfont.eot');
  249. src: url('http://static.tumblr.com/whx9ghv/M5Im0fjtx/riotsqua_0-webfont.eot?#iefix') format('embedded-opentype'),
  250. url('http://static.tumblr.com/whx9ghv/RGtm0fjvu/riotsqua_0-webfont.woff') format('woff'),
  251. url('http://static.tumblr.com/whx9ghv/qT2m0fjvi/riotsqua_0-webfont.ttf') format('truetype'),
  252. url('http://static.tumblr.com/whx9ghv/3jAm0fjv5/riotsqua_0-webfont.svg#RiotSquadRegular') format('svg');
  253. font-weight: normal;
  254. font-style: normal;
  255. }
  256.  
  257. @import url(http://fonts.googleapis.com/css?family=Droid+Serif)
  258.  
  259.  
  260. </style>
  261.  
  262. <body>
  263. <div class="credits"><a href="http://nutty-themes.tumblr.com/" target="_blank">THEME BY PISTACHI-O</a></div>
  264.  
  265. <div class="content">
  266.  
  267. <div id="title">ONE HUNDRED FILMS IN A YEAR </div>
  268. <div class="links"><a href="">« BACK</a> ♦ <a href="#">LINK</a> ♦ <a href="#">LINK</a> ♦ <a href="#">LINK</a> ♦ <a href="#">LINK</a>
  269. </div>
  270.  
  271.  
  272. <!-- THIS IS AN EXAMPLE -->
  273.  
  274. <div class="view view-style">
  275. <img src="http://i.imgur.com/5444b.jpg">
  276. <div class="mask">
  277. <h2>Title (Year)</h2>
  278. <p>Date Watched<br>
  279. ★★★★★ (Rating)</p>
  280. <a href="#" class="links">CREDIT TO MAKER</a>
  281. <a href="#" class="info">(link to graphic?)</a>
  282. </div>
  283. </div>
  284.  
  285. <!-- THIS IS THE CODE FOR EACH FILM -->
  286.  
  287. <div class="view view-style">
  288. <img src="">
  289. <div class="mask">
  290. <h2>Title</h2>
  291. <p>Your Text <br>
  292. ★★★★★</p>
  293. <a href="#" class="links">CREDIT TO MAKER</a>
  294. <a href="#" class="info">(link to graphic?)</a>
  295. </div>
  296. </div>
  297.  
  298.  
  299.  
  300. </div>
  301.  
  302.  
  303.  
  304. </body>
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!