API tools faq
paste
Advertisement
harreyeh

films page 1B - two rows

harreyeh
Jul 18th, 2014
1,394
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.97 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. FILMS/BOOKS PAGE 01 - B
  4. (TWO ROWS)
  5. THEME BY HARDZIAM / THEMESBYZSU
  6.  
  7. Do not use as base
  8. Keep (BOTH) credits in tact please!!!!
  9.  
  10. MESSAGE ME @ themesbyzsu.tumblr.com/ask if you have ANY questions about using this page theme or how to properly customize it! :~)))))
  11.  
  12.  
  13. -->
  14.  
  15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  16.  
  17. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  18.  
  19. <head>
  20.  
  21. <title>{Title}</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.  
  25. <link href='http://fonts.googleapis.com/css?family=Bitter|Oswald|Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'>
  26.  
  27. <style type="text/css">
  28.  
  29. /* ------ [ C O L O R D E F A U L T S ] ------ */
  30.  
  31. /* ------ things that are black ------ */
  32.  
  33. body{background:black;}
  34. #title{border:1px dotted #999;outline:10px solid black;}
  35. .com{background:black; border:5px solid rgba(0,0,0,.4);}
  36.  
  37. /* ------ things that are white ------ */
  38.  
  39. #container{background:white;}
  40. #title{color:white;}
  41. #title a{color:white;}
  42. #title:after{border-bottom:1px solid white; border-right:1px solid white;}
  43. #title:before{border-left:1px solid white; border-top:1px solid white;}
  44. .com{color:white;}
  45. .com h1{color:white;}
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52. /* --------- BASICS --------- */
  53.  
  54. body {position:absolute;margin:auto;height:100%;width:100%;font-size:12px;font-family:Helvetica;}
  55.  
  56. a {text-decoration:none;outline:none;
  57. -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}
  58.  
  59. a:hover { color:#999;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}
  60.  
  61. #credit a{position:fixed;right:10px;bottom:10px;padding:5px;line-height:10px;font-size:11px;color:black;background:white;border:1px solid transparent;-moz-transition-duration:1s;-webkit-transition-duration:1s;-o-transition-duration:1s;}#credit a:hover {border:1px solid black;-moz-transition-duration:1s;-webkit-transition-duration:1s;-o-transition-duration:1s;}
  62.  
  63. ::-webkit-scrollbar {background-color:#000; height:1px; width:1px;}
  64. ::-webkit-scrollbar-thumb:vertical {background-color:#fff; height:1px;}
  65. ::-webkit-scrollbar-thumb:horizontal {background-color:#fff;height:1px!important}
  66. /* ----- films ----- */
  67.  
  68.  
  69. #container{
  70. position:absolute;
  71. width:100%;
  72. overflow-x:scroll;
  73. overflow-y:hidden;
  74. height:550px;
  75. bottom:0;
  76. }
  77.  
  78. #title{
  79. width:580px;
  80. padding:10px;
  81. position:fixed;
  82. margin-top:-55px;
  83. text-align:center;
  84. background:black;
  85. text-transform:uppercase;
  86. left:50%;
  87. margin-left:-300px;
  88. transition-duration:.5s;
  89. -moz-transition-duration:.5s;
  90. -webkit-transition-duration:.5s;
  91. -o-transition-duration:.5s;
  92. }
  93.  
  94. #title h1{
  95. text-align:center;
  96. font:20pt Bitter;
  97. margin-bottom:0px;
  98. margin-top:10px;
  99. letter-spacing:2px;
  100.  
  101. }
  102.  
  103. #title:before{
  104. position:fixed;
  105. left:50%;
  106. margin-left:-300px;
  107. margin-top:-11px;
  108. content:"";
  109. width:30px;
  110. height:30px;
  111. }
  112.  
  113. #title:after{
  114. position:fixed;
  115. left:50%;
  116. margin-left:271px;
  117. margin-top:1px;
  118. content:"";
  119. width:30px;
  120. height:30px;
  121. }
  122.  
  123.  
  124. #title:hover{
  125. transition-duration:.5s;
  126. -moz-transition-duration:.5s;
  127. -webkit-transition-duration:.5s;
  128. -o-transition-duration:.5s;
  129. }
  130.  
  131. #title a{
  132. display:inline-block;
  133. font:8pt Corbel;
  134. opacity:1;
  135. letter-spacing:0px;
  136. padding-bottom:5px;
  137. margin-right:4px;
  138. margin-left:1px;
  139. transition-duration:.5s;
  140. -moz-transition-duration:.5s;
  141. -webkit-transition-duration:.5s;
  142. -o-transition-duration:.5s;
  143.  
  144. }
  145.  
  146. #title a:hover{color:#999;}
  147.  
  148. #film {
  149. display:inline-block;
  150. background:url(http://www.impawards.com/2014/posters/million_ways_to_die_in_the_west_ver11.jpg) center center no-repeat;
  151. background-size:160px 230px;
  152. margin-left:15px;
  153. margin-bottom:-20px;
  154. width:170px;
  155. height:280px;
  156. transition-duration:.5s;
  157. -moz-transition-duration:.5s;
  158. -webkit-transition-duration:.5s;
  159. -o-transition-duration:.5s;
  160. }
  161.  
  162. #film:hover {
  163. transition-duration:.5s;
  164. -moz-transition-duration:.5s;
  165. -webkit-transition-duration:.5s;
  166. -o-transition-duration:.5s;
  167. -ms-transform: scale(1.2);
  168. -webkit-transform: scale(1.2);
  169. transform: scale(1.2);
  170. }
  171.  
  172. .com{
  173. width:130px;
  174. margin:10px;
  175. position:absolute;
  176. height:90px;
  177. padding:5px;
  178. overflow:auto;
  179. bottom:60px;
  180. opacity:0;
  181. -ms-transform: scale(.7);
  182. -webkit-transform: scale(.7);
  183. transform: scale(.7);
  184. text-align:center;
  185. transition-duration:.5s;
  186. -moz-transition-duration:.5s;
  187. -webkit-transition-duration:.5s;
  188. -o-transition-duration:.5s;
  189. }
  190.  
  191. #film:hover .com{
  192. opacity:1;
  193. font:10px Corbel;
  194. bottom:20px;
  195. transition-delay:.1s;
  196. transition-duration:.5s;
  197. -ms-transform: scale(1);
  198. -webkit-transform: scale(1);
  199. transform: scale(1);
  200. -moz-transition-duration:.5s;
  201. -webkit-transition-duration:.5s;
  202. -o-transition-duration:.5s;
  203. }
  204.  
  205. .com h1{
  206. background:black;
  207. margin:0;
  208. font:12px Bitter;
  209. letter-spacing:1px;
  210. padding:3px;
  211. line-height:140%;
  212. text-transform:uppercase;
  213.  
  214. }
  215.  
  216. /*----- STARS----*/
  217.  
  218. span{
  219. width:130px;
  220. height:20px;
  221. display:inline-block;
  222. background:transparent url(http://i60.tinypic.com/mb1hf8_th.png) center center no-repeat;
  223. background-size:65px;
  224. margin-top:-7px;
  225.  
  226. }
  227.  
  228. .zero{background-image:url(http://i60.tinypic.com/mb1hf8_th.png);}
  229. .one{background-image:url(http://i61.tinypic.com/22bwaw_th.png);}
  230. .two{background-image:url(http://i61.tinypic.com/2mc86rd_th.png);}
  231. .three{background-image:url(http://i62.tinypic.com/15i86m0_th.png);}
  232. .four{background-image:url(http://oi60.tinypic.com/11vto2q.jpg);}
  233. .five{background-image:url(http://i62.tinypic.com/dd1ez7_th.png);}
  234. .six{background-image:url(http://i62.tinypic.com/m99851_th.png);}
  235. .seven{background-image:url(http://i60.tinypic.com/244tizr_th.png);}
  236. .eight{background-image:url(http://i61.tinypic.com/o6go5x_th.png);}
  237. .nine{background-image:url(http://i57.tinypic.com/qzk5ec_th.png);}
  238. .ten{background-image:url(http://i61.tinypic.com/av6h6s_th.png);}
  239.  
  240.  
  241.  
  242.  
  243.  
  244. /*----- END STYLING ------*/
  245. </style>
  246.  
  247. </head>
  248.  
  249. <body>
  250.  
  251. <!-----
  252.  
  253. W E L C O M E
  254.  
  255. ----->
  256.  
  257.  
  258.  
  259. <div id="container">
  260. <div id="title">
  261. <h1>films watched in 2014</h1>
  262. <a href="/">back to blog</a> ┈
  263. <a href="/ask">recommend</a> ┈
  264. <a href="/dashboard">dash</a> ┈
  265. <a href="http://themesbyzsu.tumblr.com">theme credit</a>
  266. </div>
  267.  
  268. <table>
  269. <tr>
  270.  
  271.  
  272.  
  273. <!-----
  274.  
  275.  
  276. FILMS TEMPLATE. READ BEFORE INSTALLING.
  277. if you have any issues, message me @ themesbyzsu.tumblr.com/ask!
  278.  
  279. ------
  280.  
  281. <td>
  282. <div id="film" style="background-image:url(URLOFIMAGE)">
  283. <div class="com">
  284.  
  285. <h1>FILM TITLE</h1>
  286.  
  287. <span class="one"></span>
  288.  
  289. A mechanic and his family join the Autobots as they are targeted by a bounty hunter from another world.
  290.  
  291. </div>
  292. </div>
  293. </td>
  294.  
  295. ------
  296.  
  297. - RATING SYSTEM!!!!!!!
  298. Give the movie a score out of TEN, and type the entire word.
  299. i.e. two and a half stars: <span class="five">
  300.  
  301. - Make sure the image isn't too large. It will resize to fit the box, but if it's 1000px wide then it'll take longer to the page to load.
  302. - The film should start with <td> and end with </td>. If you're having problems, check that first!
  303.  
  304. thanks for using the page ily for it! B)
  305. ---->
  306.  
  307. <td>
  308. <div id="film" style="background-image:url(http://upload.wikimedia.org/wikipedia/en/archive/9/94/20140606082910!Transformers_Age_of_Extinction_Poster.jpeg)">
  309.  
  310. <div class="com">
  311. <h1>Transformers: <br>Age of Extinction</h1>
  312. <span class="one"></span>
  313. A mechanic and his family join the Autobots as they are targeted by a bounty hunter from another world.
  314. </div>
  315. </div>
  316. </td>
  317.  
  318.  
  319.  
  320. </tr>
  321. <tr>
  322.  
  323.  
  324. <!-------
  325. HERE YOU START YOUR NEW LINE!!!!!!
  326. ~~try have the same amount in each line~~
  327. --->
  328.  
  329.  
  330. <td>
  331. <div id="film" style="background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS_n1wowSeczsQQDPBCMq8VpGVP01Lbjsph2SNz80f_9VH_psk9)">
  332. <div class="com">
  333. <h1>The Lego Movie</h1>
  334. <span class="eight"></span>
  335. An ordinary Lego construction worker, thought to be the prophesied 'Special', is recruited to join a quest to stop an evil tyrant from gluing the Lego universe into eternal stasis.
  336. </div>
  337.  
  338. </div>
  339. </td>
  340.  
  341.  
  342.  
  343.  
  344. <!------ END FILMS ------->
  345. </tr>
  346. </table>
  347.  
  348.  
  349.  
  350.  
  351. </div>
  352.  
  353. <div id="credit"><a href="http://hardziam.tumblr.com">✿</a></div>
  354.  
  355.  
  356. </body>
  357. </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!