API tools faq
paste
cchellez

365 Films Page Coding

cchellez
Feb 29th, 2012
1,670
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.48 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. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <!-- Movie Chart by Anthagio @ http://anthagio.com
  5.  
  6. Tutorial:
  7.  
  8. 1) If you want to add a new movie, paste the coding below near the bottom of the HTML right after "Add new movies here" and before "<div class="clear"></div>".
  9.  
  10. <div class="movie">
  11. <span class="title">Movie Title</span> <span class="date">(Year)</span>
  12. <div class="clear"></div>
  13.  
  14. <div class="movie_poster">
  15. <a class="movie_popup" href="#movietitle"><img src="URL to movie poster image here" alt="movie_poster" /><a>
  16. </div>
  17.  
  18. <div class="movie_rating zero"></div>
  19.  
  20. <div style="display: none;">
  21. <div style="padding: 0 5px 0 0;" id="movietitle">
  22. <b>Director:</b> Steven Bob.
  23. <p><b>Key Cast:</b> Sam, Mary, and John.</p>
  24. <p><b>Run Time:</b> One hour and twenty-five minutes.</p>
  25. <p><b>Summary:</b> A boy runs around town.</p>
  26. <p><b>Date Watched:</b> January 24th, 2012.</p>
  27. <p><b>Likes:</b> Everything.</p>
  28. <p><b>Dislikes:</b> Nothing.</p>
  29. </div>
  30. </div>
  31. </div>
  32.  
  33. 2) Change "movietitle" in "<a class="movie_popup" href="#movietitle"><img src="URL to movie poster image here" alt="movie_poster" /></a>" to the title of your movie (no spaces).
  34. 3) Change "Movie Title" in "<span class="title">Movie Title</span>", "(Year)" in "<span class="date">(Year)</span>", and "URL to movie poster image here" in "<a class="movie_popup" href="#movietitle"><img src="URL to movie poster image here" alt="movie_poster" /></a>" accordingly.
  35. 4) Change "<div class="movie_rating zero"></div>" to fit your rating: zero, half, one, one_half, two, two_half, three, three_half, four, four_half, or five.
  36. 5) Similar to step one, change "movietitle" in "<div style="padding: 0 5px 0 0;" id="movietitle">" to the title of your movie (no spaces).
  37. 6) Fill in the Director, Key Cast, Run Time, etc. sections. You can add or removes sections and you can find all of this info on http://www.imdb.com. This area is the box that pops up when you click on the movie titles.
  38.  
  39. Extras:
  40.  
  41. * If you want to fade a movie, change "<div class="movie">" to "<div class="movie soon">".
  42. * If you want to display a blank post, change "<a class="movie_popup" href="#movietitle"><img src="URL to movie poster image here" alt="movie_poster" /></a>" to "<div class="blank_movie"></div>".
  43. * If you don't want a popup window, replace "<a class="movie_popup" href="#movietitle"><img src="URL to movie poster image here" alt="movie_poster" /></a>" with "<img src="URL to movie poster image here" alt="movie_poster" />".
  44. ∟ Additionally, you can remove the coding below from the section.
  45.  
  46. <div style="display: none;">
  47. <div style="padding: 0 5px 0 0;" id="movietitle">
  48. <b>Director:</b> Steven Bob.
  49. <p><b>Key Cast:</b> Sam, Mary, and John.</p>
  50. <p><b>Run Time:</b> One hour and twenty-five minutes.</p>
  51. <p><b>Summary:</b> A boy runs around town.</p>
  52. <p><b>Date Watched:</b> January 24th, 2012.</p>
  53. <p><b>Likes:</b> Everything.</p>
  54. <p><b>Dislikes:</b> Nothing.</p>
  55. </div>
  56. </div>
  57.  
  58. * If you're confused, check out the sections I've already added to the chart. You can delete/edit these to fit your liking.
  59.  
  60. Customization:
  61.  
  62. * If you want to change the colors, look through the CSS coding below and each section is commented on.
  63. ∟ You can get the color codes (#eaeaea, #ffffff, #ff1122, etc.) using Photoshop or by visiting http://www.developingwebs.net/tools/color.php
  64.  
  65. * If you want to remove the rounded border, place the coding below somewhere after "<style type="text/css">" but before "</style>".
  66. ∟ ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track, #movies .movie .movie_poster, #movies .movie .movie_poster img, #movies .movie .movie_poster .blank_movie, .fancybox-outer {border-radius: 0px!important; -moz-border-radius: 0px!important; -webkit-border-radius: 0px!important;}
  67.  
  68. * If you want to hide the movie ratings, place ".movie_rating {display: none!important;}" somewhere after "<style type="text/css">" but before "</style>".
  69.  
  70. * If you want to change the rating stars' colors, you can download the graphic .PSD (http://api.cld.me/3o1E0V1A3q1z2Y0X3J3d/download/stars.psd) and change the colors in Photoshop.
  71. ∟ All you have to do is upload the picture to Tinypic.com or Imgur.com and then look for the coding below in between "<style type="text/css">" and "</style>" and replace "http://i.imgur.com/EXHch.png" accordingly.
  72. ∟ #movies .movie .movie_rating {background-image: url("http://i.imgur.com/EXHch.png");}
  73. -->
  74.  
  75. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  76. <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
  77.  
  78. <title>365 Films in 2012</title>
  79.  
  80. <meta name="author" content="Anthagio" />
  81. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  82.  
  83. <link rel="shortcut icon" href="{Favicon}" />
  84. <link rel="apple-touch-icon" href="{PortraitURL-128}" />
  85. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  86.  
  87. <script type="text/javascript" src="http://static.tumblr.com/3driglx/Prqlv4lo5/jquery.js"></script>
  88. <script src="http://static.tumblr.com/3driglx/FO0lxha3v/jquery.fancybox.pack.js"></script>
  89. <script type="text/javascript">$(document).ready(function(){$(".movie_popup").fancybox({maxWidth: 350, maxHeight: 200, fitToView: false, width: '70%', closeBtn: false, autoSize: false, closeClick: true, padding: 10, openEffect: 'none', closeEffect: 'none'});});</script>
  90.  
  91. <link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
  92. <link rel="stylesheet" href="http://static.tumblr.com/3driglx/1VBlpk1wi/reset.css" type="text/css">
  93. <link rel="stylesheet" href="http://static.tumblr.com/3driglx/soalxjbnt/movies.css" type="text/css">
  94. <link rel="stylesheet" href="http://static.tumblr.com/3driglx/Vt6lxicju/fancybox.css" type="text/css">
  95.  
  96. <style type="text/css">
  97. body {background: #ffffff url("");} /* Background color and image of the page */
  98.  
  99. ::-webkit-scrollbar-track {background-color: #eaeaea;} /* Scroll track background color (Google Chrome only) */
  100.  
  101. ::-webkit-scrollbar-thumb {background-color: #030303;} /* Scroll track bar color (Google Chrome only) */
  102.  
  103. ::-webkit-scrollbar-thumb:window-inactive {background-color: #eaeaea;} /* Scroll track background color (Google Chrome only) */
  104.  
  105. #movies #header {color: #000000;} /* Header text color */
  106.  
  107. #movies #header h1 {font-family: helvetica neue; letter-spacing: 10px; color: #000000;} /* Header title color */
  108.  
  109. #movies .movie {color: #000000;} /* Movie section text color */
  110.  
  111. #movies .movie span.title {font-size: 9px; color: #000000;} /* Color of movie titles */
  112. #movies .movie span.date {font-size: 8px; color: #4e4e4e;} /* Color of movie years */
  113.  
  114. #movies .movie .movie_poster {
  115. background: #222222; /* Color of inner border around movie posters */
  116. border: 1px solid #000000; /* Color of outter border around movie posters */
  117. }
  118.  
  119. #movies .movie .movie_poster .blank_movie {background: #222222;} /* Color of blank poster */
  120.  
  121. #movies .movie .movie_rating {background-image: url("http://i.imgur.com/EXHch.png");} /* Master image of rating stars */
  122.  
  123. a {color: #4e4e4e;} /* Color of links */
  124. a:hover {color: #000000;} /* Color of links when you hover over them */
  125.  
  126. .fancybox-outer, .fancybox-inner {
  127. background: #ffffff; /* Popup window background color */
  128. color: #000000; /* Popup window text color */
  129. }
  130.  
  131. .fancybox-outer b, .fancybox-inner b {color: #000000;} /* Popup window section title color */
  132.  
  133. #credit {color: #000000;} /* Color of the credit text */
  134. </style>
  135. </head>
  136.  
  137. <body>
  138. <div id="movies">
  139. <div id="header">
  140. <h1>365 Film Challenge</h1>
  141. Asterisks preceding a title indicate a movie seen in theatres.<br/>
  142. Click a poster for more information, including graphic links.<br/>
  143. This list does <i>not</i> include re-watches.<br />
  144. <a href="http://{Name}.tumblr.com">Back to my blog.</a></div>
  145.  
  146. <!-- Header ends and movies begin -->
  147.  
  148.  
  149.  
  150.  
  151. <!-- Movie One -->
  152.  
  153. <div class="movie">
  154. <span class="title">The Departed</span>
  155. <span class="date">(2006)</span>
  156. <div class="clear"></div>
  157.  
  158. <div class="movie_poster">
  159. <a class="movie_popup" href="#thedeparted"><img src="http://i39.tinypic.com/wcd0n6.jpg" alt="movie_poster" /></a>
  160. </div>
  161.  
  162. <div class="movie_rating five"></div>
  163.  
  164. <div style="display: none;">
  165. <div style="padding: 0 5px 0 0;" id="thedeparted">
  166. <b>Director:</b> Martin Scorsese
  167. <p><b>Key Cast:</b> Leonardo DiCaprio, Matt Damon, and Jack Nicholson</p>
  168. <p><b>Run Time:</b> 151 minutes</p>
  169. <p><b>Summary:</b> Two men from opposite sides of the law are undercover within the Massachusetts State Police and the Irish mafia, but violence and bloodshed boil when discoveries are made, and the moles are dispatched to find out their enemy's identities.</p>
  170. <p><b>Date Watched:</b> January 1st, 2012</p>
  171. <p><b>Graphic:</b> <a href="http://tomhardigans.tumblr.com/post/15224251612">Posted Here</a></p>
  172. </div>
  173. </div>
  174. </div>
  175.  
  176. <!-- Movie Two -->
  177.  
  178. <div class="movie">
  179. <span class="title">* The Girl with the Dragon Tattoo</span>
  180. <span class="date">(2011)</span>
  181. <div class="clear"></div>
  182.  
  183. <div class="movie_poster">
  184. <a class="movie_popup" href="#thegirlwiththedragontattoo"><img src="http://i41.tinypic.com/r9mweg.jpg" alt="movie_poster" /></a>
  185. </div>
  186.  
  187. <div class="movie_rating four"></div>
  188.  
  189. <div style="display: none;">
  190. <div style="padding: 0 5px 0 0;" id="thegirlwiththedragontattoo">
  191. <b>Director:</b> David Fincher
  192. <p><b>Key Cast:</b> Daniel Craig, Rooney Mara and Christopher Plummer</p>
  193. <p><b>Run Time:</b> 158 minutes</p>
  194. <p><b>Summary:</b> Journalist Mikael Blomkvist is aided in his search for a woman who has been missing for forty years by Lisbeth Salander, a young computer hacker.</p>
  195. <p><b>Date Watched:</b> January 1st, 2012</p>
  196. <p><b>Graphic:</b> <a href="http://tomhardigans.tumblr.com/post/15233895192">Posted Here</a></p>
  197. </div>
  198. </div>
  199. </div>
  200.  
  201. <!-- Movie Three -->
  202.  
  203. <div class="movie">
  204. <span class="title">Rise of the Planet of the Apes</span>
  205. <span class="date">(2011)</span>
  206. <div class="clear"></div>
  207.  
  208. <div class="movie_poster">
  209. <a class="movie_popup" href="#riseoftheplanetoftheapes"><img src="http://i41.tinypic.com/23piqo.jpg" alt="movie_poster" /></a>
  210. </div>
  211.  
  212. <div class="movie_rating three"></div>
  213.  
  214. <div style="display: none;">
  215. <div style="padding: 0 5px 0 0;" id="riseoftheplanetoftheapes">
  216. <b>Director:</b> Rupert Wyatt
  217. <p><b>Key Cast:</b> James Franco, Andy Serkis and Freida Pinto</p>
  218. <p><b>Run Time:</b> 105 minutes</p>
  219. <p><b>Summary:</b> During experiments to find a cure for Alzheimer's disease, a genetically-enhanced chimpanzee uses its greater intelligence to lead other apes to freedom.</p>
  220. <p><b>Date Watched:</b> January 2nd, 2012</p>
  221. <p><b>Graphic:</b> <a href="http://tomhardigans.tumblr.com/post/15276864732">Posted Here</a></p>
  222. </div>
  223. </div>
  224. </div>
  225.  
  226. <!-- Movie Four -->
  227.  
  228. <div class="movie">
  229. <span class="title">3:10 to Yuma</span>
  230. <span class="date">(2007)</span>
  231. <div class="clear"></div>
  232.  
  233. <div class="movie_poster">
  234. <a class="movie_popup" href="#threetentoyuma"><img src="http://i44.tinypic.com/34yr7gm.jpg" alt="movie_poster" /></a>
  235. </div>
  236.  
  237. <div class="movie_rating four"></div>
  238.  
  239. <div style="display: none;">
  240. <div style="padding: 0 5px 0 0;" id="threetentoyuma">
  241. <b>Director:</b> James Mangold
  242. <p><b>Key Cast:</b> Russell Crowe, Christian Bale and Ben Foster</p>
  243. <p><b>Run Time:</b> 122 minutes</p>
  244. <p><b>Summary:</b> A small-time rancher agrees to hold a captured outlaw who's awaiting a train to go to court in Yuma. A battle of wills ensues as the outlaw tries to psych out the rancher.</p>
  245. <p><b>Date Watched:</b> January 3rd, 2012</p>
  246. <p><b>Graphic:</b> <a href="http://tomhardigans.tumblr.com/post/15335093353">Posted Here</a></p>
  247. </div>
  248. </div>
  249. </div>
  250.  
  251. <!-- Movie Five -->
  252.  
  253. <div class="movie">
  254. <span class="title">The Hurt Locker</span>
  255. <span class="date">(2008)</span>
  256. <div class="clear"></div>
  257.  
  258. <div class="movie_poster">
  259. <a class="movie_popup" href="#thehurtlocker"><img src="http://i43.tinypic.com/vg3l2w.jpg" alt="movie_poster" /></a>
  260. </div>
  261.  
  262. <div class="movie_rating three"></div>
  263.  
  264. <div style="display: none;">
  265. <div style="padding: 0 5px 0 0;" id="thehurtlocker">
  266. <b>Director:</b> Kathryn Bigelow
  267. <p><b>Key Cast:</b> Jeremy Renner, Anthony Mackie and Brian Geraghty</p>
  268. <p><b>Run Time:</b> 131 minutes</p>
  269. <p><b>Summary:</b> Forced to play a dangerous game of cat-and-mouse in the chaos of war, an elite Army bomb squad unit must come together in a city where everyone is a potential enemy and every object could be a deadly bomb.</p>
  270. <p><b>Date Watched:</b> January 4th, 2012</p>
  271. <p><b>Graphic:</b> <a href="http://tomhardigans.tumblr.com/post/15605889306">Posted Here</a></p>
  272. </div>
  273. </div>
  274. </div>
  275.  
  276.  
  277. <!-- This is a faded post which means I am going to watch this movie soon and I removed the popup window -->
  278.  
  279. <div class="movie soon">
  280. <span class="title">Brick</span>
  281. <span class="date">(2005)</span>
  282. <div class="clear"></div>
  283.  
  284. <div class="movie_poster">
  285. <img src="http://i41.tinypic.com/sdlddw.jpg" alt="movie_poster" />
  286. </div>
  287.  
  288. <div class="movie_rating zero"></div>
  289. </div>
  290.  
  291. <!-- This is a faded post which means I am going to watch this movie soon and I removed the popup window -->
  292.  
  293. <div class="movie soon">
  294. <span class="title">Sunshine</span>
  295. <span class="date">(2007)</span>
  296. <div class="clear"></div>
  297.  
  298. <div class="movie_poster">
  299. <img src="http://i42.tinypic.com/wl64ia.jpg" alt="movie_poster" />
  300. </div>
  301.  
  302. <div class="movie_rating zero"></div>
  303. </div>
  304.  
  305.  
  306. <!-- This is a faded post which means I am going to watch this movie soon and I removed the popup window -->
  307.  
  308. <div class="movie soon">
  309. <span class="title">Gran Torino</span>
  310. <span class="date">(2008)</span>
  311. <div class="clear"></div>
  312.  
  313. <div class="movie_poster">
  314. <img src="http://i41.tinypic.com/2j0nqkj.jpg" alt="movie_poster" />
  315. </div>
  316.  
  317. <div class="movie_rating zero"></div>
  318. </div>
  319.  
  320. <!-- This is a faded post which means I am going to watch this movie soon and I removed the popup window -->
  321.  
  322. <div class="movie soon">
  323. <span class="title">The Lovely Bones</span>
  324. <span class="date">(2009)</span>
  325. <div class="clear"></div>
  326.  
  327. <div class="movie_poster">
  328. <img src="http://i44.tinypic.com/4fyiys.jpg" alt="movie_poster" />
  329. </div>
  330.  
  331. <div class="movie_rating zero"></div>
  332. </div>
  333.  
  334. <!-- This is a faded post which means I am going to watch this movie soon and I removed the popup window -->
  335.  
  336. <div class="movie soon">
  337. <span class="title">Monte Carlo</span>
  338. <span class="date">(2011)</span>
  339. <div class="clear"></div>
  340.  
  341. <div class="movie_poster">
  342. <img src="http://i44.tinypic.com/34e6v5l.jpg" alt="movie_poster" />
  343. </div>
  344.  
  345. <div class="movie_rating zero"></div>
  346. </div>
  347.  
  348.  
  349. <!-- Add new movies here -->
  350.  
  351.  
  352.  
  353.  
  354. <div class="clear"></div>
  355.  
  356. </div>
  357. </div>
  358.  
  359. <!-- Please do not remove my credit -->
  360.  
  361. <div id="credit">Chart code by <a href="http://anthagio.com/moviechart">Anthagio</a>.<br />Inspired by <a href="http://the-troubled-one.tumblr.com">the-troubled-one</a>.</div>
  362. </body>
  363. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!