API tools faq
paste
dansmilth

Movie Table

dansmilth
Feb 27th, 2016
1,169
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.01 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!-----------
  5.  
  6. MOVIE TABLE by mattdraddario
  7.  
  8. :> ------------>
  9.  
  10. <title>Movies</title>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  14.  
  15. <link href='https://fonts.googleapis.com/css?family=Quicksand:400,700,300' rel='stylesheet' type='text/css'>
  16.  
  17. <script type="text/javascript">
  18. WebFontConfig = {
  19. google: { families: [ 'Quicksand:400,700,300:latin' ] }
  20. };
  21. (function() {
  22. var wf = document.createElement('script');
  23. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  24. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  25. wf.type = 'text/javascript';
  26. wf.async = 'true';
  27. var s = document.getElementsByTagName('script')[0];
  28. s.parentNode.insertBefore(wf, s);
  29. })(); </script>
  30.  
  31.  
  32. <style type="text/css">
  33.  
  34. body {
  35. font-family:'quicksand', sans-serif;
  36. font-size:12px;
  37. background:#f8f8f8; /**this is the color of the bg.*/
  38.  
  39. }
  40.  
  41. a {
  42. color:#676767; /**this is the color of the links.*/
  43. text-decoration:none;
  44. }
  45.  
  46. ::-webkit-scrollbar {
  47. background-color: black;
  48. height:8px;
  49. width:2px
  50. }
  51.  
  52. ::-webkit-scrollbar-thumb:vertical {
  53. background-color:white;
  54. height:50px
  55. }
  56.  
  57. ::-webkit-scrollbar-thumb:horizontal {
  58. background-color:black;
  59. height:8px!important
  60. }
  61.  
  62.  
  63. .topbar {
  64. width:1100px;
  65. padding:35px 0px 40px 0px;
  66. background:#ffffff;
  67. font-family:'Quicksand', sans-serif;
  68. }
  69.  
  70.  
  71.  
  72. .links a {
  73. text-transform:uppercase;
  74. font-size:12px;
  75. letter-spacing:1px;
  76. font-weight:bold;
  77. color:#e89e8c;
  78. padding:20px;
  79. }
  80.  
  81. .links a:hover {
  82. color:black;
  83. }
  84.  
  85.  
  86. .title {
  87. float:left;
  88. text-align:left;
  89. width:255px;
  90. background:#e89e8c;
  91. padding:30px 30px 30px 0px;
  92. margin-top:-35px;
  93. text-transform:uppercase;
  94. font-weight:600;
  95. color:white;
  96. font-size:15px;
  97. text-align:right;
  98. }
  99.  
  100. .subtitle {
  101. font-size:10px;
  102. margin-right:5px;
  103. }
  104.  
  105.  
  106. .container {
  107. width:1080px;
  108. margin-top:10px;
  109.  
  110.  
  111. }
  112.  
  113. .content {
  114. margin:30px;
  115. overflow:hidden;
  116. width:200px;
  117. float:left;
  118. box-shadow:0px 3px 10px rgba(0,0,0,.15);
  119.  
  120.  
  121.  
  122. }
  123.  
  124. .content img {
  125. display:block;
  126. width:200px;
  127. height:300px;
  128. }
  129.  
  130. .note {
  131. float:left;
  132. text-align:left;
  133. width:20px;
  134. background:#e89e8c;
  135. padding:10px 15px 10px 10px;
  136. margin-top:0px;
  137. text-transform:uppercase;
  138. font-weight:600;
  139. color:white;
  140. font-size:12px;
  141. text-align:right;
  142. margin-top:20px;
  143. margin-left:10px;
  144. }
  145.  
  146. .movie {
  147. text-transform:uppercase;
  148. font-size:12px;
  149. letter-spacing:1px;
  150. font-weight:bold;
  151. color:#e89e8c;
  152. padding:10px;
  153. text-align:center;
  154. margin-top:15px;
  155. }
  156.  
  157. .info {
  158. position:absolute;
  159. z-index:1;
  160. width:180px;
  161. height:280px;
  162. padding:10px;
  163. margin-top:-300px;
  164. color:white; /*this is the color of the text of the info on your categories.*/
  165. opacity:0;
  166. font-weight:bold;
  167.  
  168. }
  169.  
  170. .info:hover {
  171. -webkit-transition: all 0.5s ease-in;
  172. -moz-transition: all 0.5s ease-in;
  173. -o-transition: all 0.5s ease-in;
  174. opacity:1;
  175. width:180px;
  176. height:280px;
  177. padding:10px;
  178. background:URL("http://static.tumblr.com/ododrup/HNsnqf2wp/hover.png");
  179.  
  180. }
  181.  
  182. .info .title {
  183. opacity:1;
  184. font-family:'roboto', sans-serif;
  185. font-size:20px;
  186. text-transform:uppercase;
  187. margin-top:40px;
  188. font-weight:bold;
  189.  
  190. }
  191.  
  192. .desc {
  193. margin-top:0px;
  194. width:150px;
  195. text-align:left;
  196. font-size:11px;
  197. line-height:150%;
  198. letter-spacing:1px;
  199. text-align:justify;
  200. height:180px;
  201. max-height:180px;
  202. overflow-y:scroll;
  203. padding:10px;
  204. }
  205.  
  206. .view {
  207. text-transform:uppercase;
  208. font-family:'robot', sans-serif;
  209. font-size:15px;
  210. font-weight:bold;
  211. padding:5px;
  212. width:50px;
  213.  
  214. }
  215.  
  216.  
  217.  
  218. .view a {
  219. color:white; /*this is the color of the words of the view button.*/
  220. }
  221.  
  222. .view a:hover {
  223. color:black;
  224. -webkit-transition: all 0.5s ease-in;
  225. -moz-transition: all 0.5s ease-in;
  226. -o-transition: all 0.5s ease-in;
  227. padding:5;
  228. background:white;
  229.  
  230. }
  231.  
  232. /*----------CREDIT---------*/
  233.  
  234. .credit {
  235. font-size:10px;
  236. position:fixed;
  237. font-weight:bold;
  238. bottom:5px;
  239. right:15px;
  240. z-index:10;
  241. text-align:right;
  242. letter-spacing:1px;
  243. padding:2px;
  244. }
  245.  
  246. .credit a {
  247. color:{color:links};
  248. text-decoration:none;
  249. }
  250.  
  251. .credit a:hover {
  252. color:{color:links hover};
  253. text-decoration:none;
  254. }
  255.  
  256.  
  257. </style>
  258. </head>
  259.  
  260. <body>
  261.  
  262. <div class="credit">
  263. <a title="theme" href="http://mattdraddario.tumblr.com/" target="_blank">MD</a></div>
  264.  
  265.  
  266. <center><div class="topbar">
  267.  
  268. <div class="title">Film table <br><div class="subtitle">movies</div></div>
  269.  
  270.  
  271. <div class="links">
  272. <a href="/">home</a>
  273. <a href="/ask">Inbox</a>
  274. <a href="http://tumblr.com">dashboard</a>
  275.  
  276.  
  277. </div>
  278.  
  279. </div></center>
  280.  
  281.  
  282. <center><div class="container">
  283.  
  284. <!-- COPY AND PASTE THIS CODE EVERYTIME YOU WANT A NEW CATEGORY
  285.  
  286. <div class="content">
  287. <img src="http://static.tumblr.com/zy3qjic/oQOo37v1h/tmr.png">
  288. <div class="info">
  289. <div class="note">8/10</div><div class="movie">The Maze Runner</div>
  290. <div class="desc">Thomas is deposited in a community of boys after his memory is erased, soon learning they're all trapped in a maze that will require him to join forces with fellow "runners" for a shot at escape.</div><br><br>
  291. </div>
  292. </div>
  293.  
  294. -->
  295.  
  296.  
  297.  
  298. <div class="content">
  299. <img src="http://static.tumblr.com/zy3qjic/oQOo37v1h/tmr.png">
  300. <div class="info">
  301. <div class="note">8/10</div><div class="movie">The Maze Runner</div>
  302. <div class="desc">Thomas is deposited in a community of boys after his memory is erased, soon learning they're all trapped in a maze that will require him to join forces with fellow "runners" for a shot at escape.</div><br><br>
  303. </div>
  304. </div>
  305.  
  306.  
  307.  
  308. <div class="content">
  309. <img src="http://static.tumblr.com/zy3qjic/wzTo37wa8/tst.png">
  310. <div class="info">
  311. <div class="note">6/10</div><div class="movie">The Scorch Trials</div>
  312. <div class="desc">After having escaped the Maze, the Gladers now face a new set of challenges on the open roads of a desolate landscape filled with unimaginable obstacles.</div><br><br>
  313. </div>
  314. </div>
  315.  
  316. <div class="content">
  317. <img src="http://static.tumblr.com/zy3qjic/aI3o37wam/titanic.png">
  318. <div class="info">
  319. <div class="note">10/10</div><div class="movie">Titanic</div>
  320. <div class="desc">A seventeen-year-old aristocrat falls in love with a kind, but poor artist aboard the luxurious, ill-fated R.M.S. Titanic.</div><br><br>
  321. </div>
  322. </div>
  323. <div class="content">
  324. <img src="http://static.tumblr.com/zy3qjic/8gVo37wm9/wows.png">
  325. <div class="info">
  326. <div class="note">8/10</div><div class="movie">The Wolf Of Wall Street</div>
  327. <div class="desc">Based on the true story of Jordan Belfort, from his rise to a wealthy stock-broker living the high life to his fall involving crime, corruption and the federal government.</div><br><br>
  328. </div>
  329. </div>
  330.  
  331.  
  332. <!-- STARTING FROM HERE -->
  333. <div class="content">
  334. <img src="http://static.tumblr.com/zy3qjic/kNqo37wqb/deadpool.png">
  335. <div class="info">
  336. <div class="note">1/10</div><div class="movie">Deadpool</div>
  337. <div class="desc">A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool.</div><br><br>
  338. </div>
  339. </div>
  340. <!-- ENDING HERE -->
  341.  
  342.  
  343. <div class="content">
  344. <img src="http://static.tumblr.com/zy3qjic/cGko37ww9/tlk.png">
  345. <div class="info">
  346. <div class="note">10/10</div><div class="movie">The Lion King</div>
  347. <div class="desc">Lion cub and future king Simba searches for his identity. His eagerness to please others and penchant for testing his boundaries sometimes gets him into trouble.</div><br><br>
  348. </div>
  349. </div>
  350.  
  351. <div class="content">
  352. <img src="http://static.tumblr.com/zy3qjic/Bs0o37wwm/clueless.png">
  353. <div class="info">
  354. <div class="note">8/10</div><div class="movie">Clueless</div>
  355. <div class="desc">A rich high school student tries to boost a new pupil's popularity, but reckons without affairs of the heart getting in the way.</div><br><br>
  356. </div>
  357. </div>
  358.  
  359.  
  360.  
  361.  
  362. </div></center>
  363.  
  364.  
  365.  
  366. </body>
  367. </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!