API tools faq
paste
Advertisement
harreyeh

films page 1A - one row

harreyeh
Jul 18th, 2014
1,458
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.43 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. FILMS/BOOKS PAGE 01 - A
  4. (ONE ROW
  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;}
  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:10px;line-height:10px;font-size:11px;color:white;background:black;border:1px dotted transparent;-moz-transition-duration:1s;-webkit-transition-duration:1s;-o-transition-duration:1s;}#credit a:hover {border:1px dotted white;-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.  
  67.  
  68. /* ----- films ----- */
  69.  
  70.  
  71. #container{
  72. position:absolute;
  73. top:50%;
  74. width:100%;
  75. overflow-x:scroll;
  76. overflow-y:hidden;
  77. height:285px;
  78. margin-top:-145px;
  79. }
  80.  
  81. #title{
  82. width:580px;
  83. padding:10px;
  84. position:fixed;
  85. margin-top:-100px;
  86. text-align:center;
  87. text-transform:uppercase;
  88. left:50%;
  89. margin-left:-300px;
  90. transition-duration:.5s;
  91. -moz-transition-duration:.5s;
  92. -webkit-transition-duration:.5s;
  93. -o-transition-duration:.5s;
  94. }
  95.  
  96. #title h1{
  97. text-align:center;
  98. font:20pt Bitter;
  99. margin-bottom:0px;
  100. margin-top:10px;
  101. letter-spacing:2px;
  102.  
  103. }
  104.  
  105. #title:before{
  106. position:fixed;
  107. left:50%;
  108. margin-left:-300px;
  109. margin-top:-11px;
  110. content:"";
  111. width:30px;
  112. height:30px;
  113. }
  114.  
  115. #title:after{
  116. position:fixed;
  117. left:50%;
  118. margin-left:271px;
  119. margin-top:1px;
  120. content:"";
  121. width:30px;
  122. height:30px;
  123. }
  124.  
  125.  
  126. #title:hover{
  127. transition-duration:.5s;
  128. -moz-transition-duration:.5s;
  129. -webkit-transition-duration:.5s;
  130. -o-transition-duration:.5s;
  131. }
  132.  
  133. #title a{
  134. display:inline-block;
  135. font:8pt Corbel;
  136. opacity:1;
  137. letter-spacing:0px;
  138. padding-bottom:5px;
  139. margin-right:4px;
  140. margin-left:1px;
  141. transition-duration:.5s;
  142. -moz-transition-duration:.5s;
  143. -webkit-transition-duration:.5s;
  144. -o-transition-duration:.5s;
  145.  
  146. }
  147.  
  148. #title a:hover{color:#999;}
  149.  
  150. #film {
  151. display:inline-block;
  152. background:url(http://www.impawards.com/2014/posters/million_ways_to_die_in_the_west_ver11.jpg) center center no-repeat;
  153. background-size:160px 230px;
  154. margin-left:15px;
  155. width:170px;
  156. height:280px;
  157. transition-duration:.5s;
  158. -moz-transition-duration:.5s;
  159. -webkit-transition-duration:.5s;
  160. -o-transition-duration:.5s;
  161. }
  162.  
  163. #film:hover {
  164. transition-duration:.5s;
  165. -moz-transition-duration:.5s;
  166. -webkit-transition-duration:.5s;
  167. -o-transition-duration:.5s;
  168. -ms-transform: scale(1.2);
  169. -webkit-transform: scale(1.2);
  170. transform: scale(1.2);
  171. }
  172.  
  173. .com{
  174. width:130px;
  175. margin:10px;
  176. position:absolute;
  177. height:90px;
  178. padding:5px;
  179. overflow:auto;
  180. bottom:60px;
  181. opacity:0;
  182. -ms-transform: scale(.7);
  183. -webkit-transform: scale(.7);
  184. transform: scale(.7);
  185. text-align:center;
  186. transition-duration:.5s;
  187. -moz-transition-duration:.5s;
  188. -webkit-transition-duration:.5s;
  189. -o-transition-duration:.5s;
  190. }
  191.  
  192. #film:hover .com{
  193. opacity:1;
  194. font:10px Corbel;
  195. bottom:20px;
  196. transition-delay:.1s;
  197. transition-duration:.5s;
  198. -ms-transform: scale(1);
  199. -webkit-transform: scale(1);
  200. transform: scale(1);
  201. -moz-transition-duration:.5s;
  202. -webkit-transition-duration:.5s;
  203. -o-transition-duration:.5s;
  204. }
  205.  
  206. .com h1{
  207. background:black;
  208. margin:0;
  209. font:12px Bitter;
  210. letter-spacing:1px;
  211. padding:3px;
  212. line-height:140%;
  213. text-transform:uppercase;
  214.  
  215. }
  216.  
  217. /*----- STARS----*/
  218.  
  219. span{
  220. width:130px;
  221. height:20px;
  222. display:inline-block;
  223. background:transparent url(http://i60.tinypic.com/mb1hf8_th.png) center center no-repeat;
  224. background-size:65px;
  225. margin-top:-7px;
  226.  
  227. }
  228.  
  229. .zero{background-image:url(http://i60.tinypic.com/mb1hf8_th.png);}
  230. .one{background-image:url(http://i61.tinypic.com/22bwaw_th.png);}
  231. .two{background-image:url(http://i61.tinypic.com/2mc86rd_th.png);}
  232. .three{background-image:url(http://i62.tinypic.com/15i86m0_th.png);}
  233. .four{background-image:url(http://oi60.tinypic.com/11vto2q.jpg);}
  234. .five{background-image:url(http://i62.tinypic.com/dd1ez7_th.png);}
  235. .six{background-image:url(http://i62.tinypic.com/m99851_th.png);}
  236. .seven{background-image:url(http://i60.tinypic.com/244tizr_th.png);}
  237. .eight{background-image:url(http://i61.tinypic.com/o6go5x_th.png);}
  238. .nine{background-image:url(http://i57.tinypic.com/qzk5ec_th.png);}
  239. .ten{background-image:url(http://i61.tinypic.com/av6h6s_th.png);}
  240.  
  241.  
  242.  
  243.  
  244.  
  245. /*----- END STYLING ------*/
  246. </style>
  247.  
  248. </head>
  249.  
  250. <body>
  251.  
  252. <!-----
  253.  
  254. W E L C O M E
  255.  
  256. ----->
  257.  
  258.  
  259.  
  260. <div id="container">
  261. <div id="title">
  262. <h1>films watched in 2014</h1>
  263. <a href="/">back to blog</a> ┈
  264. <a href="/ask">recommend</a> ┈
  265. <a href="/dashboard">dash</a> ┈
  266. <a href="http://themesbyzsu.tumblr.com">theme credit</a>
  267. </div>
  268.  
  269. <table>
  270. <tr>
  271.  
  272.  
  273. <!-----
  274.  
  275. HERE YOU PUT YOUR THEMES!!!!!!
  276.  
  277. FILMS TEMPLATE. READ BEFORE INSTALLING.
  278. if you have any issues, message me @ themesbyzsu.tumblr.com/ask!
  279.  
  280. ------
  281.  
  282. <td>
  283. <div id="film" style="background-image:url(URLOFIMAGE)">
  284. <div class="com">
  285.  
  286. <h1>FILM TITLE</h1>
  287.  
  288. <span class="one"></span>
  289.  
  290. A mechanic and his family join the Autobots as they are targeted by a bounty hunter from another world.
  291.  
  292. </div>
  293. </div>
  294. </td>
  295.  
  296. ------
  297.  
  298. - RATING SYSTEM!!!!!!!
  299. Give the movie a score out of TEN, and type the entire word.
  300. i.e. two and a half stars: <span class="five">
  301.  
  302. - 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.
  303.  
  304. - The film should start with <td> and end with </td>. If you're having problems, check that first!
  305.  
  306. thanks for using the page ily for it! B)
  307. ---->
  308.  
  309.  
  310.  
  311. <td>
  312. <div id="film" style="background-image:url(http://media.aintitcool.com/media/uploads/2013/horrorella/grand_budapest_hotel_poster2_large.jpg)">
  313. <div class="com">
  314. <h1>The Grand Budapest Hotel</h1>
  315. <span class="nine"></span>
  316. The adventures of Gustave H, a legendary concierge at a famous European hotel between the wars, and Zero Moustafa, the lobby boy who becomes his most trusted friend.
  317. </div>
  318.  
  319.  
  320. </div>
  321.  
  322. </td>
  323.  
  324.  
  325. <!------ LEAVE EVERYTHING ELSE ALONE ------->
  326.  
  327.  
  328. </tr>
  329. </table>
  330.  
  331.  
  332. </div>
  333.  
  334. <div id="credit"><a href="http://hardziam.tumblr.com">✿</a></div>
  335.  
  336.  
  337. </body>
  338. </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!