API tools faq
paste
Advertisement
kailana

:)

kailana
Oct 27th, 2014
300
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 56.93 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <html>
  3. <head>
  4.  
  5. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald">
  6.  
  7. <title>#GizTheater</title>
  8. <link rel="shortcut icon" href="{Favicon}" />
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  10. <style type="text/css">
  11.  
  12. body {
  13. color:#6d6c6c;
  14. background-color:#f7f8f9;
  15. font-size:10px;
  16. font-family:arial;
  17. line-height:110%;
  18. text-align:left;}
  19.  
  20. a:link, a:active, a:visited {color:#bbbbbb; text-decoration:none;}
  21. a:hover {color:#9cb6c6; -webkit-transition:0.6s; -moz-transition:0.6s; transition:0.6s;}
  22.  
  23. ::-webkit-scrollbar-thumb:vertical {background-color:#d2dee5;}
  24. ::-webkit-scrollbar-thumb:horizontal {display:none;}
  25. ::-webkit-scrollbar {background-color:#ffffff; height:0px; width:4px;}
  26.  
  27. ::-moz-selection {background-color:#bbbbbb;}
  28. ::selection {background-color:#bbbbbb;}
  29.  
  30. #content {
  31. margin:0px auto 70px auto;
  32. width:1019px;
  33. height:auto;
  34. padding:20px;
  35. background-color:#eaedef;
  36. text-align:left;}
  37.  
  38. #blogtitle {
  39. font-size:25px;
  40. font-family:oswald;
  41. letter-spacing:1px;
  42. margin-bottom:50px;
  43. text-align:left;
  44. color:#808182;
  45. text-transform:uppercase;}
  46. #blogtitle:first-letter {
  47. font-weight:bold;
  48. color:#d2dee5;}
  49.  
  50. #sidebar {
  51. margin:20px auto 20px auto;
  52. width:899px;
  53. height:auto;
  54. padding:90px 80px 70px 80px;
  55. overflow:hidden;
  56. text-align:right;
  57. background-color:#f7f8f9;}
  58.  
  59. .navigation {
  60. margin-left:-30px;
  61. position:absolute;
  62. text-align:left;}
  63. .navigation a {
  64. padding:5px 12px 4px 12px;
  65. font-size:8px;
  66. width:45px;
  67. text-align:center;
  68. margin-left:-3px;
  69. font-family:tahoma;
  70. text-transform:uppercase;
  71. color:#808182;
  72. display:inline-block;
  73. -webkit-transition:all 0.3s ease-out;
  74. -moz-transition:all 0.3s ease-out;
  75. transition:all 0.3s ease-out;}
  76. .navigation a:hover {
  77. color:#f7f8f9;
  78. background-color:#9cb6c6;
  79. -webkit-transition:all 0.3s ease-out;
  80. -moz-transition:all 0.3s ease-out;
  81. transition:all 0.3s ease-out;}
  82.  
  83. .links {
  84. text-align:center;
  85. margin-top:10px;}
  86. .links a:hover {
  87. background-color:#0dc9ba;}
  88.  
  89. #template {
  90. width:459px;
  91. height:280px;
  92. padding:15px;
  93. text-align:left;
  94. overflow:hidden;
  95. margin:9px 8px 10px 8px;
  96. background-color:#ffffff;
  97. display:inline-block;
  98. border:1px solid #e1e1e1;
  99. -webkit-transition:all .6s ease-out;
  100. -moz-transition:all .6s ease-out;
  101. transition:all .6s ease-out;}
  102. #template img {
  103. width:173px;
  104. height:274px;
  105. padding:2px;
  106. float:left;
  107. border:1px solid #e1e1e1;}
  108.  
  109. #info {
  110. width:265px;
  111. height:280px;
  112. overflow:hidden;
  113. padding-left:15px;
  114. margin-left:179px;}
  115.  
  116. #media-title {
  117. padding:15px 10px;
  118. font-size:14px;
  119. font-family:oswald;
  120. letter-spacing:1px;
  121. margin-bottom:10px;
  122. text-transform:uppercase;
  123. background-color:#d2dee5;
  124. color:#ffffff;
  125. height:23px;
  126. overflow:hidden;
  127. -webkit-transition:all 0.3s ease-out;
  128. -moz-transition:all 0.3s ease-out;
  129. transition:all 0.3s ease-out;}
  130. #media-title:hover {
  131. background-color:#d2dee5;
  132. -webkit-transition:all 0.3s ease-out;
  133. -moz-transition:all 0.3s ease-out;
  134. transition:all 0.3s ease-out;}
  135. #media-title a {
  136. color:#ffffff;
  137. -webkit-transition:all 0.3s ease-out;
  138. -moz-transition:all 0.3s ease-out;
  139. transition:all 0.3s ease-out;}
  140. #media-title a:hover {
  141. text-shadow:2px 1px #9cb6c6;
  142. -webkit-transition:all 0.3s ease-out;
  143. -moz-transition:all 0.3s ease-out;
  144. transition:all 0.3s ease-out;}
  145.  
  146. .details-title {
  147. margin-top:4px;
  148. font-size:8px;
  149. margin-bottom:-3px;
  150. font-family:tahoma;}
  151.  
  152. #filters-title {
  153. padding:15px 10px;
  154. font-size:14px;
  155. font-family:oswald;
  156. letter-spacing:1px;
  157. margin-bottom:10px;
  158. text-transform:uppercase;
  159. background-color:#262626;
  160. color:#e5e4e4;}
  161.  
  162. #comments-title {
  163. text-align:center;
  164. font-size:8px;
  165. padding:7px 0px 6px 0px;
  166. color:#ffffff;
  167. background-color:#d2dee5;
  168. font-family:tahoma;}
  169.  
  170. .stats {
  171. padding:4px;
  172. width:1357px;
  173. height:11px;
  174. font-size:7px;
  175. letter-spacing:1px;
  176. font-family:tahoma;
  177. text-transform:uppercase;
  178. margin-bottom:1px;}
  179. .stats:nth-of-type(1n+0) {background-color:#fafafa;}
  180. .stats:nth-of-type(2n+0) {background-color:#f6f6f6;}
  181.  
  182. .label1 {color:#454545;}
  183. .label2 {color:#454545;}
  184.  
  185. #summary {
  186. padding:0px 10px;
  187. width:225px;
  188. margin-top:10px;
  189. max-height:88px;
  190. overflow:auto;
  191. font-size:7px;
  192. font-family:tahoma;
  193. letter-spacing:1px;
  194. text-align:justify;
  195. text-transform:uppercase;
  196. border-top:20px solid #f0f0f0;
  197. border-bottom:20px solid #f0f0f0;
  198. border-left:10px solid #f0f0f0;
  199. border-right:10px solid #f0f0f0;
  200. background-color:#f0f0f0;}
  201.  
  202. #comments {
  203. position:absolute;
  204. width:134px;
  205. height:234px;
  206. overflow:auto;
  207. font-size:7px;
  208. font-family:tahoma;
  209. opacity:0.0;
  210. line-height:1.5;
  211. letter-spacing:1px;
  212. text-align:justify;
  213. text-transform:uppercase;
  214. padding-right:6px;
  215. border:10px solid #ffffff;
  216. border-right:3px solid #ffffff;
  217. background-color:#ffffff;
  218. margin:13px;
  219. -webkit-transition:all 0.3s ease-out;
  220. -moz-transition:all 0.3s ease-out;
  221. transition:all 0.3s ease-out;}
  222. #template:hover #comments {
  223. opacity:1.0;
  224. -webkit-transition:all 0.3s ease-out;
  225. -moz-transition:all 0.3s ease-out;
  226. transition:all 0.3s ease-out;}
  227. #comments img {
  228. width:auto;
  229. height:auto;
  230. float:center;
  231. margin:9px 0px 6px 0px;
  232. max-width:123px;
  233. max-height:123px;}
  234.  
  235. #genres {
  236. max-width:350px;
  237. text-align:left;}
  238. #genres a {
  239. padding:5px 12px 4px 12px;
  240. font-size:8px;
  241. width:55px;
  242. text-align:center;
  243. margin-bottom:3px;
  244. font-family:tahoma;
  245. text-transform:uppercase;
  246. color:#ffffff;
  247. background-color:#9cb6c6;
  248. display:inline-block;
  249. -webkit-transition:all 0.3s ease-out;
  250. -moz-transition:all 0.3s ease-out;
  251. transition:all 0.3s ease-out;}
  252. #genres a:hover {
  253. background-color:#0dc9ba;
  254. -webkit-transition:all 0.3s ease-out;
  255. -moz-transition:all 0.3s ease-out;
  256. transition:all 0.3s ease-out;}
  257.  
  258. .search input {
  259. background-color:#eaedef;
  260. font-size:8px;
  261. border:0px;
  262. width:130px;
  263. margin-right:-10px;
  264. margin-top:1px;
  265. text-transform:uppercase;
  266. color:#808182;
  267. outline:none;
  268. letter-spacing:1px;
  269. padding:4px 8px;
  270. font-family:calibri, helvetica, arial;}
  271.  
  272. #fade {
  273. display:none;
  274. background:#ffffff;
  275. position:fixed;
  276. left:0px;
  277. top:0px;
  278. width:100%;
  279. height:100%;
  280. opacity:0.8;
  281. z-index:9999999;}
  282.  
  283. .popup_block{
  284. display:none;
  285. background:#ffffff;
  286. padding:60px;
  287. float:left;
  288. position:fixed;
  289. top:49%;
  290. left:50%;
  291. font-size:7px;
  292. font-family:tahoma;
  293. letter-spacing:1px;
  294. text-transform:uppercase;
  295. z-index:99999999;}
  296.  
  297. *html #fade {position:absolute;}
  298. *html .popup_block {position:absolute;}
  299.  
  300. .credit, .credit a {
  301. width:auto;
  302. height:auto;
  303. bottom:15px;
  304. right:15px;
  305. padding:4px;
  306. z-index:1000000;
  307. font-size:7px;
  308. letter-spacing:1px;
  309. color:white;
  310. position:fixed;
  311. text-align:center;
  312. font-family:trebuchet ms;
  313. text-transform:uppercase;
  314. background-color:#3c3c3c;
  315. border:1px solid #3c3c3c;}
  316. .credit a:hover {
  317. color:#3c3c3c;
  318. background-color:white;}
  319.  
  320. #s-m-t-tooltip {
  321. max-width:300px;
  322. padding:3px 4px;
  323. margin:20px 0px 0px 20px;
  324. background-color:#9cb6c6;
  325. font-family:tahoma;
  326. font-size:7px;
  327. color:#ffffff;
  328. letter-spacing:1px;
  329. text-transform:uppercase;
  330. z-index:999999999999;}
  331.  
  332. blockquote {
  333. border-left:2px #6d6c6c solid;
  334. padding-left:5px;
  335. margin:0px 2px 0px 10px}
  336.  
  337. blockquote img {max-width:100%;}
  338.  
  339. b, strong {color:#9cb6c6;}
  340. i, em {color:#0dc9ba;}
  341. p {margin-top:7px; margin-bottom:7px;}
  342.  
  343. </style>
  344. <style type="text/css">{CustomCSS}</style>
  345. </head>
  346.  
  347. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  348. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  349.  
  350. <script>
  351. (function($){
  352. $(document).ready(function(){
  353. $("[title]").style_my_tooltips({
  354. tip_follows_cursor:true,
  355. tip_delay_time:90,
  356. tip_fade_speed:600,
  357. attribute:"title"});});
  358. })(jQuery);
  359. </script>
  360. <body>
  361.  
  362. <div id="sidebar">
  363. <div id="blogtitle"><font color="d2dee5">GizTheater</font> <!-- CHANGE -->
  364. <div class="details-title" style="margin-top:9px;">Here you will find a variety of different hit movies selected from the Gizmos</div> <!-- CHANGE -->
  365. </div>
  366.  
  367. <div class="navigation">
  368. <a href="/">go back</a>
  369. <a href="/ask">Suggestions</a>
  370.  
  371.  
  372. <script type="text/javascript">
  373. jQuery(document).ready(function() {
  374. jQuery(".links").hide();
  375. //toggle the componenet with class msg_body
  376. jQuery(".reveal").click(function()
  377. {jQuery(this).next(".links").fadeToggle(300);
  378. });});
  379. </script>
  380.  
  381. <a class="reveal">filters</a>
  382. <div class="links">
  383. <div class="filters">
  384. <div class="option-set clearfix" data-option-key="filter">
  385. <a href="#filter" data-option-filter="*" class="selected">show all</a>
  386. <a href="#filter" data-option-filter=".favorite">favorites</a>
  387. <a href="#?w=600" rel="popup_name" class="pop">genres</a>
  388. </div></div>
  389. </div></div>
  390.  
  391. <form action="/search" method="get" class="search">
  392. <input type="text" name="q" value="{SearchQuery}" id="sf" placeholder="Search the blog"/>
  393. </form>
  394. </div>
  395.  
  396. <div id="popup_name" class="popup_block">
  397. <div id="filters-title">fliter by genre</div>
  398.  
  399. <div id="genres">
  400. <div class="filters">
  401. <div class="option-set clearfix" data-option-key="filter">
  402.  
  403. <!-- ADD FILTERS HERE FILTERS ARE FOR THE ISOTOPE FILTERING. IF YOU WANT A TEMPLATE TO SHOW UP AS A FAVORITE (SHOW UP WHEN YOU CLICK THE "FAVORITES" LINK) ADD "FAVORITE" AFTER "shows" ON <div id="template" class="shows FILTERS HERE WITHOUT COMMAS"> SO IT WOULD LOOK LIKE THIS <div id="template" class="shows FAVORITE">
  404.  
  405. YOU CAN ADD YOUR ON FILTERS TOO. JUST COPY AND PASTE <a href="#filter" data-option-filter=".FILTER">FILTER NAME</a> BELOW AND NAME THE FILTER (LIKE THIS <a href="#filter" data-option-filter=".FUNNY">FUNNY MOVIES</a>) NOW YOU CAN ADD "FUNNY" ON THE SAME PLACE AS FAVORITE AND THE TEMPLATE WILL SHOW UP WHEN YOU CLICK THE LINK "FUNNY MOVIES". THE TAGS LINE WOULD LOOK LIKE THIS <div id="template" class="shows FAVORITE FUNNY"> YOU CAN USE AS MANY FILTERS AS YOU WANT TO. JUST REMEMBER NOT TO DELETE/CHANGE THE "shows" PART OR THE FILTERING WON'T WORK -->
  406.  
  407. <a href="#filter" data-option-filter=".drama">drama</a> <!-- CHANGE -->
  408. <a href="#filter" data-option-filter=".horror">horror</a> <!-- CHANGE -->
  409. <a href="#filter" data-option-filter=".romance">romance</a> <!-- CHANGE -->
  410. <a href="#filter" data-option-filter=".comedy">comedy</a> <!-- CHANGE -->
  411. <a href="#filter" data-option-filter=".family">family</a> <!-- CHANGE -->
  412. <!-- END OF FILTERS -->
  413. </div></div>
  414. </div>
  415. </div>
  416.  
  417.  
  418. <div id="content" class="clearfix">
  419. <!-- PASTE THE TEMPLATES HERE -->
  420.  
  421.  
  422. <!-- START OF TEMPLATE-->
  423. <div id="template" class="shows favorite drama romance comedy">
  424. <img src="http://www.robshep.com/wp-content/uploads/2014/06/fault-in-our-stars-movie-poster-full-copy.jpg"/>
  425.  
  426. <div id="comments">
  427. <div id="comments-title">my thoughts</div></p>
  428.  
  429. <div style="text-align:center;"><img title="Hazel and Augustus" src="https://33.media.tumblr.com/a0461da402b60d9ea61313457164b9b7/tumblr_n07wux0Ohy1s6jvbvo7_250.gif"/></div>
  430.  
  431. this movie is a must see! if you do decide and see this, make sure you have some tissues or napkins, because you will cry.
  432. </div>
  433.  
  434. <div id="info">
  435. <div id="media-title">
  436. <a href="http://putlocker.is/watch-the-fault-in-our-stars-online-free-putlocker.html">The Fault In Our Stars</a>
  437. <div class="details-title">Directed by: Josh Boone | Based on: The Fault in Our Stars by John Green</div>
  438. </div>
  439.  
  440. <div class="stats"><span class="label1">release date</span>: June 6, 2014</div>
  441. <div class="stats"><span class="label2">genres</span>: Romantic, Drama, Comedy drama</div>
  442. <div class="stats"><span class="label1">length</span>: 125 minutes/133 minutes (extended cut)</div>
  443. <div class="stats"><span class="label2">rating</span>: ★★★★★ </div>
  444.  
  445. <div id="summary">
  446. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"I cannot tell you how thankful I am for our little infinity. I wouldn't trade it for the world. You gave me a forever within the numbered days, and I'm grateful."</span></p>
  447.  
  448. Hazel Grace Lancaster, an intelligent and sarcastic Indianapolis teenager, has terminal thyroid cancer that has spread to her lungs. Believing her to be depressed, Hazel's mother urges her to attend a cancer patients' support group to make friends. During a support meeting, Hazel meets Augustus Waters, a teenager who had lost a leg because of osteosarcoma.</p>
  449.  
  450. After the meeting, Augustus invites Hazel to his house, where they bond. Before she leaves, they agree to read each other's favorite novels. Hazel recommends An Imperial Affliction to Augustus, a novel about a cancer-stricken girl named Anna that parallels Hazel's experience. After finishing the book, Augustus expresses frustration with the novel's abrupt ending. Hazel explains that the novel's mysterious author, Peter van Houten, retreated to Amsterdam following the novel's publication, and has not been heard from since.
  451. </div></div>
  452. </div>
  453. <!-- END OF TEMPLATE-->
  454.  
  455. <!-- START OF TEMPLATE-->
  456. <div id="template" class="shows thriller horror halloween"> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  457. <img src="http://mtv.mtvnimages.com/shared/media/images/acovers/standard/drb600/b675/b67581m4rgi.jpg"/> <!-- CHANGE -->
  458. <!-- PASTE THE IMAGE URL THERE -->
  459.  
  460. <div id="comments">
  461. <div id="comments-title">my thoughts</div></p>
  462.  
  463. <!-- WRITE BETWEEN THIS -->
  464.  
  465. Prepare to be scared from this movie. When I first saw it, I screamed like maybe 5 times.
  466.  
  467. <div style="text-align:center;"><img title="Scary!" src="https://33.media.tumblr.com/e791b05b08217e2bee6f35e00761ab02/tumblr_n808xeENwG1tfyseno1_500.gif"/></div> <!-- CHANGE -->
  468.  
  469. </div>
  470.  
  471. <div id="info">
  472. <div id="media-title">
  473. <a href="http://megashare.info/watch-insidious-online-TWprNU5BPT0">Insidious</a> <!-- CHANGE -->
  474. <div class="details-title">Directed by: James Wan</div> <!-- CHANGE -->
  475. </div>
  476.  
  477. <div class="stats"><span class="label1">Release date</span>: April 1, 2011</div> <!-- CHANGE -->
  478. <div class="stats"><span class="label2">genres</span>: Thriller, Horror</div> <!-- CHANGE -->
  479. <div class="stats"><span class="label1">Length</span>: 102 minutes</div> <!-- CHANGE -->
  480. <div class="stats"><span class="label2">rating</span>: ★★★★</div> <!-- CHANGE -->
  481.  
  482. <div id="summary">
  483. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"It's not the house that is haunted. It's your son."</span></p> <!-- CHANGE -->
  484.  
  485. The Lambert family–parents Renai (Rose Byrne) and Josh (Patrick Wilson), their sons Dalton (Ty Simpkins) and Foster (Andrew Astor), and infant daughter Cali–move into a new home. Shortly afterward, Dalton is drawn to the attic when he hears creaking noises and sees the door open by itself. He falls from a ladder while investigating and sees a figure in the shadows. </p>
  486.  
  487. Hearing his terrified screams, Renai and Josh rush to his aid and declare the attic "off limits" to the children. The next day, Dalton falls into an inexplicable coma.
  488. <!-- AND THIS -->
  489. </div></div>
  490. </div>
  491. <!-- END OF TEMPLATE-->
  492.  
  493. <!-- START OF TEMPLATE-->
  494. <div id="template" class="shows thriller horror halloween"> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  495. <img src="http://www.aceshowbiz.com/images/still/insidious-chapter-2-poster03.jpg"/> <!-- CHANGE -->
  496. <!-- PASTE THE IMAGE URL THERE -->
  497.  
  498. <div id="comments">
  499. <div id="comments-title">my thoughts</div></p>
  500.  
  501. <!-- WRITE BETWEEN THIS -->
  502.  
  503. this sequel is almost as scary as the first movie. as usual, be prepared to get scared and freak out!
  504.  
  505. <div style="text-align:center;"><img title="she's creepy" src="https://33.media.tumblr.com/a0ec006f4b1723cdc65c4b01e24604e9/tumblr_mt8ksuHrJl1ry376eo1_500.gif"/></div> <!-- CHANGE -->
  506.  
  507. </div>
  508.  
  509. <div id="info">
  510. <div id="media-title">
  511. <a href="http://megashare.info/watch-insidious-chapter-2-online-TnpNd053PT0">Insidious: Chapter 2</a> <!-- CHANGE -->
  512. <div class="details-title">Directed by: James Wan</div> <!-- CHANGE -->
  513. </div>
  514.  
  515. <div class="stats"><span class="label1">Release date</span>: September 13, 2013</div> <!-- CHANGE -->
  516. <div class="stats"><span class="label2">genres</span>: Thriller, Horror</div> <!-- CHANGE -->
  517. <div class="stats"><span class="label1">Length</span>: 105 minutes</div> <!-- CHANGE -->
  518. <div class="stats"><span class="label2">rating</span>: ★★★★</div> <!-- CHANGE -->
  519.  
  520. <div id="summary">
  521. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"I know what happened. I went in that place to get our son back and something evil followed me, who killed Elise."</span></p> <!-- CHANGE -->
  522.  
  523. <!-- WRITE BETWEEN THIS -->
  524. In 1986, Carl, a medium, calls his friend Elise to help discover what is haunting Lorraine Lambert's son, Josh. After hypnotizing Josh, Elise attempts to find the location of Josh's "friend", an old woman who appears in photographs of him.</p>
  525.  
  526. After warnings from Josh, she makes her way to his bedroom closet and is scratched on the arm. As a result, Lorraine, Carl and Elise agree that making Josh forget his astral projection abilities is the best thing to do.
  527. <!-- AND THIS -->
  528. </div></div>
  529. </div>
  530. <!-- END OF TEMPLATE-->
  531.  
  532. <!-- START OF TEMPLATE-->
  533. <div id="template" class="shows supernatural thriller horror drama halloween"> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  534. <img src="http://static.rogerebert.com/uploads/movie/movie_poster/the-haunting-in-connecticut-2009/large_2sEhKgyTJ040GhAMDuVlnkBwjmU.jpg"/> <!-- CHANGE -->
  535. <!-- PASTE THE IMAGE URL THERE -->
  536.  
  537. <div id="comments">
  538. <div id="comments-title">my thoughts</div></p>
  539.  
  540. <!-- WRITE BETWEEN THIS -->
  541. Blah
  542.  
  543. <div style="text-align:center;"><img title="Just throwing up some plasma, nbd" src="https://33.media.tumblr.com/d33b0ca7e377be1e4bac6be7854d9b6b/tumblr_nb2ztkYOLq1rf4v2no1_500.gif"/></div> <!-- CHANGE -->
  544.  
  545.  
  546. <!-- AND THIS -->
  547. </div>
  548.  
  549. <div id="info">
  550. <div id="media-title">
  551. <a href="http://megashare.info/watch-the-haunting-in-connecticut-online-TWpBeA">The Haunting in Connecticut</a> <!-- CHANGE -->
  552. <div class="details-title">Directed by: Peter Cornwell</div> <!-- CHANGE -->
  553. </div>
  554.  
  555. <div class="stats"><span class="label1">Release date</span>: March 27, 2009</div> <!-- CHANGE -->
  556. <div class="stats"><span class="label2">genres</span>: Supernatural, Thriller, Horror, Drama</div> <!-- CHANGE -->
  557. <div class="stats"><span class="label1">Length</span>: 92 minutes</div> <!-- CHANGE -->
  558. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  559.  
  560. <div id="summary">
  561. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"One bright day in the middle of the night, two dead boys got up to fight. Back to back they faced each other, drew their swords and shot each other. A deaf policeman heard the noise and came and killed those two dead boys."</span></p> <!-- CHANGE -->
  562.  
  563. <!-- WRITE BETWEEN THIS -->
  564. In 1987, Sara Campbell (Virginia Madsen) is driving her son Matthew (Kyle Gallner) home from the hospital where he has been undergoing cancer treatments and traumas. Sara and her husband Peter (Martin Donovan), a recovering alcoholic, discuss finding a rental house closer to the hospital. </p>
  565.  
  566. On another hospital visit, Sara finds a man putting up a “For Rent” sign in front of a large house. The man is frustrated and offers her the first month free if she will rent it immediately. On the trip home, Matt is in extreme pain, so Sara drives back to the house, where they stay for the night.
  567. <!-- AND THIS -->
  568. </div></div>
  569. </div>
  570. <!-- END OF TEMPLATE-->
  571.  
  572. <!-- START OF TEMPLATE-->
  573. <div id="template" class="shows horror halloween"> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  574. <img src="http://upload.wikimedia.org/wikipedia/en/c/c9/Hocuspocusposter.jpg"/> <!-- CHANGE -->
  575. <!-- PASTE THE IMAGE URL THERE -->
  576.  
  577. <div id="comments">
  578. <div id="comments-title">my thoughts</div></p>
  579.  
  580. <!-- WRITE BETWEEN THIS -->
  581. I used to love this movie! I would always watch it on Disney Channel during their Halloween marathon.
  582.  
  583. <div style="text-align:center;"><img title="two images" src="https://33.media.tumblr.com/01edcc18271b3080369a7cf297909fb7/tumblr_ncyir6mDFc1rpc407o6_400.gif"/> <img title="two images" src="https://31.media.tumblr.com/461a089c05a684855273d201462d5f9e/tumblr_ncyir6mDFc1rpc407o8_400.gif"/></div> <!-- CHANGE -->
  584.  
  585. <!-- AND THIS -->
  586. </div>
  587.  
  588. <div id="info">
  589. <div id="media-title">
  590. <a href="http://megashare.info/watch-hocus-pocus-online-TkRrM09RPT0">Hocus Pocus</a> <!-- CHANGE -->
  591. <div class="details-title">Directed by: Kenny Ortega</div> <!-- CHANGE -->
  592. </div>
  593.  
  594. <div class="stats"><span class="label1">Release date</span>: July 16, 1993</div> <!-- CHANGE -->
  595. <div class="stats"><span class="label2">genres</span>: Family, Science fiction, Comedy, Horror</div> <!-- CHANGE -->
  596. <div class="stats"><span class="label1">Length</span>: 96 minutes</div> <!-- CHANGE -->
  597. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  598.  
  599. <div id="summary">
  600. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"It's a full moon tonight. That's when all the weirdos are out."</span></p> <!-- CHANGE -->
  601.  
  602. <!-- WRITE BETWEEN THIS -->
  603. In 1693, Thackery Binx, a teenage farmer living in Salem, Massachusetts, discovers his little sister Emily has been spirited away by the three Sanderson sisters—Winifred, Mary, and Sarah--who intend to regain their youth by absorbing the life force of children through their witchcraft. Sneaking in the witches’ cottage, Binx’s attempt to save Emily fails when the sisters transform him into an immortal black cat and absorb Emily’s life force, regaining their youth.</p>
  604.  
  605. An angry mob led by the Binx parents capture the sisters and prepare to hang them, but Winifred casts a spell from her book which will resurrect the sisters on All Hallows' Eve when a virgin lights their black-flamed candle. After the sisters die, Binx guards their cottage for the next three hundred years to prevent their return.
  606. <!-- AND THIS -->
  607. </div></div>
  608. </div>
  609. <!-- END OF TEMPLATE-->
  610.  
  611. <!-- START OF TEMPLATE-->
  612. <div id="template" class="shows Horror"> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  613. <img src="http://cdn.bloody-disgusting.com/wp-content/uploads/2013/03/the-conjuring-poster.jpg"/> <!-- CHANGE -->
  614. <!-- PASTE THE IMAGE URL THERE -->
  615.  
  616. <div id="comments">
  617. <div id="comments-title">my thoughts</div></p>
  618.  
  619. <!-- WRITE BETWEEN THIS -->
  620. Your thoughts here. <br> <!-- CHANGE -->
  621. use < /p>'s for line break
  622. <br>and < br>'s for new lines.</p>
  623.  
  624. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  625.  
  626. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  627.  
  628. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  629.  
  630. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  631. <!-- AND THIS -->
  632. </div>
  633.  
  634. <div id="info">
  635. <div id="media-title">
  636. <a href="http://megashare.info/watch-the-conjuring-online-TmpreU1BPT0">The Conjuring</a> <!-- CHANGE -->
  637. <div class="details-title">Directed by: James Wan</div> <!-- CHANGE -->
  638. </div>
  639.  
  640. <div class="stats"><span class="label1">Release date</span>: July 19, 2013</div> <!-- CHANGE -->
  641. <div class="stats"><span class="label2">genres</span>: Horror</div> <!-- CHANGE -->
  642. <div class="stats"><span class="label1">Length</span>: 112 minutes</div> <!-- CHANGE -->
  643. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  644.  
  645. <div id="summary">
  646. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"The devil exists. God exists. And for us, as people, our very destiny hinges on which we decide to follow."</span></p> <!-- CHANGE -->
  647.  
  648. <!-- WRITE BETWEEN THIS -->
  649. In 1968, two young women and a young man are telling Ed and Lorraine Warren about their experiences with a doll called Annabelle they believe to be haunted.</p>
  650.  
  651. In 1971, Roger and Carolyn Perron move into a dilapidated farmhouse in Harrisville, Rhode Island with their five daughters Andrea, Nancy, Christine, Cindy, and April. During the first day, their move goes smoothly, though their dog Sadie refuses to enter the house and one of the daughters finds a boarded up entrance to a cellar.
  652. </div></div>
  653. </div>
  654. <!-- END OF TEMPLATE-->
  655.  
  656. <!-- START OF TEMPLATE-->
  657. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  658. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  659. <!-- PASTE THE IMAGE URL THERE -->
  660.  
  661. <div id="comments">
  662. <div id="comments-title">my thoughts</div></p>
  663.  
  664. <!-- WRITE BETWEEN THIS -->
  665. Your thoughts here. <br> <!-- CHANGE -->
  666. use < /p>'s for line break
  667. <br>and < br>'s for new lines.</p>
  668.  
  669. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  670.  
  671. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  672.  
  673. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  674.  
  675. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  676. <!-- AND THIS -->
  677. </div>
  678.  
  679. <div id="info">
  680. <div id="media-title">
  681. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  682. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  683. </div>
  684.  
  685. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  686. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  687. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  688. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  689.  
  690. <div id="summary">
  691. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  692.  
  693. <!-- WRITE BETWEEN THIS -->
  694. media description here</p> <!-- CHANGE -->
  695.  
  696. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  697.  
  698. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  699. <!-- AND THIS -->
  700. </div></div>
  701. </div>
  702. <!-- END OF TEMPLATE-->
  703.  
  704. <!-- START OF TEMPLATE-->
  705. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  706. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  707. <!-- PASTE THE IMAGE URL THERE -->
  708.  
  709. <div id="comments">
  710. <div id="comments-title">my thoughts</div></p>
  711.  
  712. <!-- WRITE BETWEEN THIS -->
  713. Your thoughts here. <br> <!-- CHANGE -->
  714. use < /p>'s for line break
  715. <br>and < br>'s for new lines.</p>
  716.  
  717. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  718.  
  719. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  720.  
  721. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  722.  
  723. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  724. <!-- AND THIS -->
  725. </div>
  726.  
  727. <div id="info">
  728. <div id="media-title">
  729. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  730. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  731. </div>
  732.  
  733. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  734. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  735. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  736. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  737.  
  738. <div id="summary">
  739. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  740.  
  741. <!-- WRITE BETWEEN THIS -->
  742. media description here</p> <!-- CHANGE -->
  743.  
  744. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  745.  
  746. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  747. <!-- AND THIS -->
  748. </div></div>
  749. </div>
  750. <!-- END OF TEMPLATE-->
  751.  
  752. <!-- START OF TEMPLATE-->
  753. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  754. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  755. <!-- PASTE THE IMAGE URL THERE -->
  756.  
  757. <div id="comments">
  758. <div id="comments-title">my thoughts</div></p>
  759.  
  760. <!-- WRITE BETWEEN THIS -->
  761. Your thoughts here. <br> <!-- CHANGE -->
  762. use < /p>'s for line break
  763. <br>and < br>'s for new lines.</p>
  764.  
  765. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  766.  
  767. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  768.  
  769. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  770.  
  771. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  772. <!-- AND THIS -->
  773. </div>
  774.  
  775. <div id="info">
  776. <div id="media-title">
  777. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  778. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  779. </div>
  780.  
  781. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  782. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  783. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  784. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  785.  
  786. <div id="summary">
  787. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  788.  
  789. <!-- WRITE BETWEEN THIS -->
  790. media description here</p> <!-- CHANGE -->
  791.  
  792. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  793.  
  794. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  795. <!-- AND THIS -->
  796. </div></div>
  797. </div>
  798. <!-- END OF TEMPLATE-->
  799.  
  800. <!-- START OF TEMPLATE-->
  801. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  802. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  803. <!-- PASTE THE IMAGE URL THERE -->
  804.  
  805. <div id="comments">
  806. <div id="comments-title">my thoughts</div></p>
  807.  
  808. <!-- WRITE BETWEEN THIS -->
  809. Your thoughts here. <br> <!-- CHANGE -->
  810. use < /p>'s for line break
  811. <br>and < br>'s for new lines.</p>
  812.  
  813. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  814.  
  815. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  816.  
  817. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  818.  
  819. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  820. <!-- AND THIS -->
  821. </div>
  822.  
  823. <div id="info">
  824. <div id="media-title">
  825. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  826. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  827. </div>
  828.  
  829. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  830. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  831. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  832. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  833.  
  834. <div id="summary">
  835. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  836.  
  837. <!-- WRITE BETWEEN THIS -->
  838. media description here</p> <!-- CHANGE -->
  839.  
  840. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  841.  
  842. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  843. <!-- AND THIS -->
  844. </div></div>
  845. </div>
  846. <!-- END OF TEMPLATE-->
  847.  
  848. <!-- START OF TEMPLATE-->
  849. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  850. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  851. <!-- PASTE THE IMAGE URL THERE -->
  852.  
  853. <div id="comments">
  854. <div id="comments-title">my thoughts</div></p>
  855.  
  856. <!-- WRITE BETWEEN THIS -->
  857. Your thoughts here. <br> <!-- CHANGE -->
  858. use < /p>'s for line break
  859. <br>and < br>'s for new lines.</p>
  860.  
  861. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  862.  
  863. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  864.  
  865. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  866.  
  867. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  868. <!-- AND THIS -->
  869. </div>
  870.  
  871. <div id="info">
  872. <div id="media-title">
  873. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  874. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  875. </div>
  876.  
  877. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  878. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  879. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  880. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  881.  
  882. <div id="summary">
  883. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  884.  
  885. <!-- WRITE BETWEEN THIS -->
  886. media description here</p> <!-- CHANGE -->
  887.  
  888. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  889.  
  890. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  891. <!-- AND THIS -->
  892. </div></div>
  893. </div>
  894. <!-- END OF TEMPLATE-->
  895.  
  896. <!-- START OF TEMPLATE-->
  897. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  898. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  899. <!-- PASTE THE IMAGE URL THERE -->
  900.  
  901. <div id="comments">
  902. <div id="comments-title">my thoughts</div></p>
  903.  
  904. <!-- WRITE BETWEEN THIS -->
  905. Your thoughts here. <br> <!-- CHANGE -->
  906. use < /p>'s for line break
  907. <br>and < br>'s for new lines.</p>
  908.  
  909. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  910.  
  911. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  912.  
  913. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  914.  
  915. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  916. <!-- AND THIS -->
  917. </div>
  918.  
  919. <div id="info">
  920. <div id="media-title">
  921. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  922. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  923. </div>
  924.  
  925. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  926. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  927. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  928. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  929.  
  930. <div id="summary">
  931. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  932.  
  933. <!-- WRITE BETWEEN THIS -->
  934. media description here</p> <!-- CHANGE -->
  935.  
  936. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  937.  
  938. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  939. <!-- AND THIS -->
  940. </div></div>
  941. </div>
  942. <!-- END OF TEMPLATE-->
  943.  
  944. <!-- START OF TEMPLATE-->
  945. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  946. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  947. <!-- PASTE THE IMAGE URL THERE -->
  948.  
  949. <div id="comments">
  950. <div id="comments-title">my thoughts</div></p>
  951.  
  952. <!-- WRITE BETWEEN THIS -->
  953. Your thoughts here. <br> <!-- CHANGE -->
  954. use < /p>'s for line break
  955. <br>and < br>'s for new lines.</p>
  956.  
  957. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  958.  
  959. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  960.  
  961. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  962.  
  963. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  964. <!-- AND THIS -->
  965. </div>
  966.  
  967. <div id="info">
  968. <div id="media-title">
  969. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  970. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  971. </div>
  972.  
  973. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  974. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  975. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  976. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  977.  
  978. <div id="summary">
  979. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  980.  
  981. <!-- WRITE BETWEEN THIS -->
  982. media description here</p> <!-- CHANGE -->
  983.  
  984. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  985.  
  986. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  987. <!-- AND THIS -->
  988. </div></div>
  989. </div>
  990. <!-- END OF TEMPLATE-->
  991.  
  992. <!-- START OF TEMPLATE-->
  993. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  994. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  995. <!-- PASTE THE IMAGE URL THERE -->
  996.  
  997. <div id="comments">
  998. <div id="comments-title">my thoughts</div></p>
  999.  
  1000. <!-- WRITE BETWEEN THIS -->
  1001. Your thoughts here. <br> <!-- CHANGE -->
  1002. use < /p>'s for line break
  1003. <br>and < br>'s for new lines.</p>
  1004.  
  1005. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  1006.  
  1007. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  1008.  
  1009. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  1010.  
  1011. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1012. <!-- AND THIS -->
  1013. </div>
  1014.  
  1015. <div id="info">
  1016. <div id="media-title">
  1017. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  1018. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  1019. </div>
  1020.  
  1021. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  1022. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  1023. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  1024. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  1025.  
  1026. <div id="summary">
  1027. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  1028.  
  1029. <!-- WRITE BETWEEN THIS -->
  1030. media description here</p> <!-- CHANGE -->
  1031.  
  1032. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  1033.  
  1034. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1035. <!-- AND THIS -->
  1036. </div></div>
  1037. </div>
  1038. <!-- END OF TEMPLATE-->
  1039.  
  1040. <!-- START OF TEMPLATE-->
  1041. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  1042. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  1043. <!-- PASTE THE IMAGE URL THERE -->
  1044.  
  1045. <div id="comments">
  1046. <div id="comments-title">my thoughts</div></p>
  1047.  
  1048. <!-- WRITE BETWEEN THIS -->
  1049. Your thoughts here. <br> <!-- CHANGE -->
  1050. use < /p>'s for line break
  1051. <br>and < br>'s for new lines.</p>
  1052.  
  1053. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  1054.  
  1055. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  1056.  
  1057. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  1058.  
  1059. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1060. <!-- AND THIS -->
  1061. </div>
  1062.  
  1063. <div id="info">
  1064. <div id="media-title">
  1065. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  1066. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  1067. </div>
  1068.  
  1069. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  1070. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  1071. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  1072. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  1073.  
  1074. <div id="summary">
  1075. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  1076.  
  1077. <!-- WRITE BETWEEN THIS -->
  1078. media description here</p> <!-- CHANGE -->
  1079.  
  1080. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  1081.  
  1082. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1083. <!-- AND THIS -->
  1084. </div></div>
  1085. </div>
  1086. <!-- END OF TEMPLATE-->
  1087.  
  1088. <!-- START OF TEMPLATE-->
  1089. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  1090. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  1091. <!-- PASTE THE IMAGE URL THERE -->
  1092.  
  1093. <div id="comments">
  1094. <div id="comments-title">my thoughts</div></p>
  1095.  
  1096. <!-- WRITE BETWEEN THIS -->
  1097. Your thoughts here. <br> <!-- CHANGE -->
  1098. use < /p>'s for line break
  1099. <br>and < br>'s for new lines.</p>
  1100.  
  1101. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  1102.  
  1103. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  1104.  
  1105. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  1106.  
  1107. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1108. <!-- AND THIS -->
  1109. </div>
  1110.  
  1111. <div id="info">
  1112. <div id="media-title">
  1113. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  1114. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  1115. </div>
  1116.  
  1117. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  1118. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  1119. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  1120. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  1121.  
  1122. <div id="summary">
  1123. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  1124.  
  1125. <!-- WRITE BETWEEN THIS -->
  1126. media description here</p> <!-- CHANGE -->
  1127.  
  1128. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  1129.  
  1130. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1131. <!-- AND THIS -->
  1132. </div></div>
  1133. </div>
  1134. <!-- END OF TEMPLATE-->
  1135.  
  1136. <!-- START OF TEMPLATE-->
  1137. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  1138. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  1139. <!-- PASTE THE IMAGE URL THERE -->
  1140.  
  1141. <div id="comments">
  1142. <div id="comments-title">my thoughts</div></p>
  1143.  
  1144. <!-- WRITE BETWEEN THIS -->
  1145. Your thoughts here. <br> <!-- CHANGE -->
  1146. use < /p>'s for line break
  1147. <br>and < br>'s for new lines.</p>
  1148.  
  1149. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  1150.  
  1151. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  1152.  
  1153. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  1154.  
  1155. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1156. <!-- AND THIS -->
  1157. </div>
  1158.  
  1159. <div id="info">
  1160. <div id="media-title">
  1161. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  1162. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  1163. </div>
  1164.  
  1165. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  1166. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  1167. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  1168. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  1169.  
  1170. <div id="summary">
  1171. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  1172.  
  1173. <!-- WRITE BETWEEN THIS -->
  1174. media description here</p> <!-- CHANGE -->
  1175.  
  1176. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  1177.  
  1178. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1179. <!-- AND THIS -->
  1180. </div></div>
  1181. </div>
  1182. <!-- END OF TEMPLATE-->
  1183.  
  1184. <!-- START OF TEMPLATE-->
  1185. <div id="template" class="shows "> <!-- CHANGE BUT DO NOT DELETE "shows" OTHERWISE IT DOESN'T WORK PROPERLY -->
  1186. <img src="http://blog.dateiitians.com/wp-content/uploads/2013/10/Coming-Soon.jpg"/> <!-- CHANGE -->
  1187. <!-- PASTE THE IMAGE URL THERE -->
  1188.  
  1189. <div id="comments">
  1190. <div id="comments-title">my thoughts</div></p>
  1191.  
  1192. <!-- WRITE BETWEEN THIS -->
  1193. Your thoughts here. <br> <!-- CHANGE -->
  1194. use < /p>'s for line break
  1195. <br>and < br>'s for new lines.</p>
  1196.  
  1197. <div style="text-align:center;"><img title="two images" src="http://i.imgur.com/DxThHsk.png"/> <img title="two images" src="http://i.imgur.com/DxThHsk.png"/></div> <!-- CHANGE -->
  1198.  
  1199. if you use one image on a line it's max width is 123px and max height is 123px (but you can use smaller one too) and if you use 2 pictures their max widths are 57px and max heights 123px (but i'll recommend using squares so 57px).
  1200.  
  1201. <div style="text-align:center;"><img title="big image" src="http://i.imgur.com/LeweWSb.png"/></div> <!-- CHANGE -->
  1202.  
  1203. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat <i>nulla pariatur</i>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1204. <!-- AND THIS -->
  1205. </div>
  1206.  
  1207. <div id="info">
  1208. <div id="media-title">
  1209. <a href="LINK FOR WIKIPEDIA PAGE">MEDIA TITLE HERE</a> <!-- CHANGE -->
  1210. <div class="details-title">ORIGINAL NAME OR DETAILS HERE</div> <!-- CHANGE -->
  1211. </div>
  1212.  
  1213. <div class="stats"><span class="label1">Release date</span>: DATE HERE</div> <!-- CHANGE -->
  1214. <div class="stats"><span class="label2">genres</span>: GENRES HERE</div> <!-- CHANGE -->
  1215. <div class="stats"><span class="label1">Length</span>: LENGTH HERE</div> <!-- CHANGE -->
  1216. <div class="stats"><span class="label2">rating</span>: ★★★★★</div> <!-- CHANGE -->
  1217.  
  1218. <div id="summary">
  1219. <span style="font-style:italic; color:#d2dee5; font-weight:bold; padding:5px;">"QUOTE OR LINE FROM MEDIA"</span></p> <!-- CHANGE -->
  1220.  
  1221. <!-- WRITE BETWEEN THIS -->
  1222. media description here</p> <!-- CHANGE -->
  1223.  
  1224. Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  1225.  
  1226. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1227. <!-- AND THIS -->
  1228. </div></div>
  1229. </div>
  1230. <!-- END OF TEMPLATE-->
  1231. <!-- END OF TEMPLATES -->
  1232. </div>
  1233.  
  1234.  
  1235.  
  1236. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  1237. <script>
  1238. $(function(){
  1239. var $container = $('#content');
  1240.  
  1241. $container.isotope({
  1242. itemSelector : '.shows'});
  1243.  
  1244. var $optionSets = $('.filters .option-set'),
  1245. $optionLinks = $optionSets.find('a');
  1246.  
  1247. $optionLinks.click(function(){
  1248. var $this = $(this);
  1249. // don't proceed if already selected
  1250. if ( $this.hasClass('selected') ) {
  1251. return false;}
  1252. var $optionSet = $this.parents('.option-set');
  1253. $optionSet.find('.selected').removeClass('selected');
  1254. $this.addClass('selected');
  1255.  
  1256. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  1257. var options = {},
  1258. key = $optionSet.attr('data-option-key'),
  1259. value = $this.attr('data-option-filter');
  1260. // parse 'false' as false boolean
  1261. value = value === 'false' ? false : value;
  1262. options[ key ] = value;
  1263. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  1264. // changes in layout modes need extra logic
  1265. changeLayoutMode( $this, options )
  1266. } else {
  1267. // otherwise, apply new options
  1268. $container.isotope( options );}
  1269. return false;
  1270. });});
  1271. </script>
  1272.  
  1273. <script>
  1274. $(document).ready(function() {
  1275. $('a.pop[href^=#]').click(function() {
  1276. var popID = $(this).attr('rel');
  1277. var popURL = $(this).attr('href');
  1278.  
  1279. var query= popURL.split('?');
  1280. var dim= query[1].split('&');
  1281. var popWidth = dim[0].split('=')[0.5];
  1282.  
  1283. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  1284.  
  1285. var popMargTop = ($('#' + popID).height() + 80) / 2;
  1286. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  1287. $('#' + popID).css({
  1288.  
  1289. 'margin-top' : -popMargTop,
  1290. 'margin-left' : -popMargLeft});
  1291.  
  1292. $('body').append('<div id="fade"></div>');
  1293. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
  1294. return false;});
  1295.  
  1296. $('a.close, #fade').live('click', function() {
  1297. $('#fade , .popup_block').fadeOut(function() {
  1298. $('#fade, a.close').remove();});
  1299. return false;});});
  1300. </script>
  1301.  
  1302. </body>
  1303. </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!