API tools faq
paste
marianaihh

04. Contrived

marianaihh
Jul 13th, 2014
2,260
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.92 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-- Theme by @sleepwatersun -->
  6.  
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  8.  
  9. <style>
  10. body{
  11. background-attachment: fixed;
  12. background-position: center right;
  13. font-size: 12px;
  14. font-family; times new roman, serif;
  15. background-image: url(http://static.tumblr.com/zibrynf/k2fn8nyuz/winter_mountains-1280x960.jpg);
  16. }
  17.  
  18. table{
  19. border-collapse: collapse;
  20. }
  21.  
  22. #wrap{
  23. top: 0;
  24. left: 50%;
  25. width: 598px;
  26. height: auto;
  27. margin-left: -300px;
  28. position: absolute;
  29. min-height: 100%;
  30. background: rgba(255,255,255,.2);
  31. border: 1px solid rgba(255,255,255,.5);
  32. }
  33.  
  34. #top{width: 600px; background: #ffffff; height: 5px; position: fixed; z-index: 9999; top: 0; left: 50%; margin-left: -300px;}
  35.  
  36. .media{
  37. width: 500px;
  38. color: #a1a1a1;
  39. padding: 25px;
  40. text-align: center;
  41. background: #ffffff;
  42. margin: 30px auto 70px auto;
  43. }
  44.  
  45. .media td.name{
  46. text-transform: uppercase;
  47. font-weight: 900;
  48. width:125px;
  49. font-size: 16px;
  50. border-right: 1px solid #f8f8f8;
  51. font-family: calibri, helvetica, sans-serif;
  52. }
  53.  
  54. .media td.summary{
  55. font-style: italic;
  56. width: 250px;
  57. border-right: 1px solid #f8f8f8;
  58. }
  59.  
  60. .media td.rating{
  61. width: 100px;
  62. }
  63.  
  64. .media td.three{
  65. padding: 0px 15px 0px 15px;
  66. background: #211927;
  67. }
  68.  
  69. .media td.three a{
  70. display: block;
  71. cursor: pointer;
  72. text-align: center;
  73. color: #ffffff;
  74. margin: 15px 0px 15px 0px;
  75. text-decoration: none;
  76. }
  77.  
  78. .info{
  79. height: 100%;
  80. width: 500px;
  81. left: 50%;
  82. top: 0;
  83. position: fixed;
  84. margin-left: -250px;
  85. display: none;
  86. }
  87.  
  88. .info img{
  89. width: 100px;
  90. height: 100px;
  91. margin: 0px auto;
  92. display: block;
  93. border: 5px solid #ffffff;
  94. border-radius: 100%;
  95. -o-border-radius: 100%;
  96. -moz-border-radius: 100%;
  97. -webkit-border-radius: 100%;
  98. }
  99.  
  100. .info h1{
  101. font-size: 25px;
  102. font-weight: 900;
  103. text-align: center;
  104. color: #ffffff;
  105. text-transform: uppercase;
  106. font-family: Calibri, Helvetica, sans-serif;
  107. margin: 25px auto 0px auto;
  108. }
  109.  
  110. .info p{
  111. font-size: 11px;
  112. margin: 25px 0px 0px 0px;
  113. text-align: center;
  114. color: #a1a1a1;
  115. background: #ffffff;
  116. padding: 25px;
  117. font-style: italic;
  118. font-family: times new roman, serif;
  119. }
  120.  
  121. #infot{
  122. font-size: 11px;
  123. color: #333333;
  124. width: 498px;
  125. margin: 25px auto 0px auto;
  126. }
  127.  
  128. #infot table, #infot th, #infot td{
  129. padding: 5px;
  130. border: 1px solid rgba(255,255,255,.8);
  131. }
  132.  
  133. #infot th{
  134. width: 100px;
  135. font-weight: 100;
  136. text-transform: uppercase;
  137. background: rgba(255,255,255,.5);
  138. }
  139.  
  140. td.ratings{
  141. font-size: 25px;
  142. color: #ffffff;
  143. text-align: center;
  144. font-weight: 900;
  145. }
  146.  
  147. #filters{
  148. bottom: 0;
  149. width: 580px;
  150. left: 50%;
  151. padding: 10px;
  152. margin-left: -300px;
  153. position: fixed;
  154. background: #ffffff;
  155. }
  156.  
  157. #filters a{
  158. margin: 5px;
  159. font-style: italic;
  160. font-size: 11px;
  161. text-decoration: none;
  162. text-align: right;
  163. text-transform: lowercase;
  164. }
  165.  
  166. .filters{
  167. color: #c7c7c7;
  168. display: inline-block;
  169. }
  170.  
  171. .one{
  172. background: #c7c7c7;
  173. color: #ffffff;
  174. padding: 1px 2px 1px 2px;
  175. }
  176.  
  177. .close{
  178. color: #c7c7c7;
  179. display: none;
  180. cursor: pointer;
  181. }
  182.  
  183. .theme{
  184. float: right;
  185. color: #c7c7c7;
  186. }
  187. </style>
  188.  
  189. <script>
  190. $(document).ready(function(){
  191. $(".filters").click(function(e) {
  192. e.preventDefault();
  193. $(".media").not("." + $(this).attr("rel")).hide(500);
  194. $("." + $(this).attr("rel")).show(500);
  195. });
  196.  
  197. $(".more").click(function(e) {
  198. e.preventDefault();
  199. $("." + $(this).attr("rel")).delay(500).fadeIn(500);
  200. $(".media").fadeOut(500);
  201. $(".filters").fadeOut(250);
  202. $(".close").delay(500).fadeIn(250);
  203. });
  204.  
  205. $(".close").click(function(){
  206. $(".info").fadeOut(500);
  207. $(".media").delay(500).fadeIn(500);
  208. $(".filters").fadeIn(250);
  209. $(".close").fadeOut(250);
  210. });
  211. });
  212. </script>
  213. </head>
  214. <body>
  215.  
  216. <!-- Begin media Wrap --><div id="wrap"><div id="top"></div>
  217.  
  218. <!------------------ Media Div ------------------>
  219. <div class="media watchlist"><table><tr>
  220. <!-- Name of media -->
  221. <td class="name">some title</td>
  222. <!-- Short summary of media -->
  223. <td class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  224. <!-- Rate the media -->
  225. <td class="rating">✭✭✭✩✩</td>
  226. <!-- Media related links -->
  227. <td class="three">
  228. <!-- Info pop up link -->
  229. <a rel="I01" class="more" title="more">I</a>
  230. <!-- Media tag link -->
  231. <a href="/tagged/" title="tag">II</a>
  232. <!-- IMBD link -->
  233. <a href="/" title="imbd">III</a>
  234. </td>
  235. </tr></table></div>
  236.  
  237. <table class="info I01"><tr><td>
  238. <!-- Media image -->
  239. <img src="http://static.tumblr.com/zibrynf/gZ7n8kck4/tumblr_n7jeawh9vo1siy7m0o1_400.jpg"/>
  240. <!-- Name of media -->
  241. <h1>some title</h1>
  242. <!-- Summary or review of media -->
  243. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta justo et congue tincidunt. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. </p>
  244. <!-- Info table -->
  245. <table id="infot" cellspacing="10">
  246. <tr>
  247. <th>Episodes</th>
  248. <td> 100</td>
  249.  
  250. <td rowspan="4" class="ratings">✭✭✭✩✩</td>
  251. </tr>
  252. <tr>
  253. <th>status</th>
  254. <td>completed</td>
  255. </tr>
  256. <tr>
  257. <th>genre</th>
  258. <td>???</td>
  259. </tr>
  260. <tr>
  261. <th>rated</th>
  262. <td>mature</td>
  263. </tr>
  264. </table>
  265. </td></tr></table>
  266.  
  267. <!------------------ Media Div ------------------>
  268. <div class="media watched"><table><tr>
  269. <!-- Name of media -->
  270. <td class="name">some title</td>
  271. <!-- Short summary of media -->
  272. <td class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  273. <!-- Rate the media -->
  274. <td class="rating">✭✭✭✩✩</td>
  275. <!-- Media related links -->
  276. <td class="three">
  277. <!-- Info pop up link -->
  278. <a rel="I02" class="more" title="more">I</a>
  279. <!-- Media tag link -->
  280. <a href="/tagged/" title="tag">II</a>
  281. <!-- IMBD link -->
  282. <a href="/" title="imbd">III</a>
  283. </td>
  284. </tr></table></div>
  285.  
  286. <table class="info I02"><tr><td>
  287. <!-- Media image -->
  288. <img src="http://static.tumblr.com/zibrynf/gZ7n8kck4/tumblr_n7jeawh9vo1siy7m0o1_400.jpg"/>
  289. <!-- Name of media -->
  290. <h1>some title</h1>
  291. <!-- Summary or review of media -->
  292. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta justo et congue tincidunt. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. </p>
  293. <!-- Info table -->
  294. <table id="infot" cellspacing="10">
  295. <tr>
  296. <th>Episodes</th>
  297. <td> 100</td>
  298.  
  299. <td rowspan="4" class="ratings">✭✭✭✩✩</td>
  300. </tr>
  301. <tr>
  302. <th>status</th>
  303. <td>completed</td>
  304. </tr>
  305. <tr>
  306. <th>genre</th>
  307. <td>???</td>
  308. </tr>
  309. <tr>
  310. <th>rated</th>
  311. <td>mature</td>
  312. </tr>
  313. </table>
  314. </td></tr></table>
  315.  
  316. <!------------------ Media Div ------------------>
  317. <div class="media watched fav"><table><tr>
  318. <!-- Name of media -->
  319. <td class="name">some title</td>
  320. <!-- Short summary of media -->
  321. <td class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td>
  322. <!-- Rate the media -->
  323. <td class="rating">✭✭✭✩✩</td>
  324. <!-- Media related links -->
  325. <td class="three">
  326. <!-- Info pop up link -->
  327. <a rel="I03" class="more" title="more">I</a>
  328. <!-- Media tag link -->
  329. <a href="/tagged/" title="tag">II</a>
  330. <!-- IMBD link -->
  331. <a href="/" title="imbd">III</a>
  332. </td>
  333. </tr></table></div>
  334.  
  335. <table class="info I03"><tr><td>
  336. <!-- Media image -->
  337. <img src="http://static.tumblr.com/zibrynf/gZ7n8kck4/tumblr_n7jeawh9vo1siy7m0o1_400.jpg"/>
  338. <!-- Name of media -->
  339. <h1>some title</h1>
  340. <!-- Summary or review of media -->
  341. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta justo et congue tincidunt. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. </p>
  342. <!-- Info table -->
  343. <table id="infot" cellspacing="10">
  344. <tr>
  345. <th>Episodes</th>
  346. <td> 100</td>
  347.  
  348. <td rowspan="4" class="ratings">✭✭✭✩✩</td>
  349. </tr>
  350. <tr>
  351. <th>status</th>
  352. <td>completed</td>
  353. </tr>
  354. <tr>
  355. <th>genre</th>
  356. <td>???</td>
  357. </tr>
  358. <tr>
  359. <th>rated</th>
  360. <td>mature</td>
  361. </tr>
  362. </table>
  363. </td></tr></table>
  364.  
  365. <!------------------ Media Div ------------------>
  366. <div class="media watchlist"><table><tr>
  367. <!-- Name of media -->
  368. <td class="name">some title</td>
  369. <!-- Short summary of media -->
  370. <td class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td>
  371. <!-- Rate the media -->
  372. <td class="rating">✭✭✭✩✩</td>
  373. <!-- Media related links -->
  374. <td class="three">
  375. <!-- Info pop up link -->
  376. <a rel="I04" class="more" title="more">I</a>
  377. <!-- Media tag link -->
  378. <a href="/tagged/" title="tag">II</a>
  379. <!-- IMBD link -->
  380. <a href="/" title="imbd">III</a>
  381. </td>
  382. </tr></table></div>
  383.  
  384. <table class="info I04"><tr><td>
  385. <!-- Media image -->
  386. <img src="http://static.tumblr.com/zibrynf/gZ7n8kck4/tumblr_n7jeawh9vo1siy7m0o1_400.jpg"/>
  387. <!-- Name of media -->
  388. <h1>some title</h1>
  389. <!-- Summary or review of media -->
  390. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta justo et congue tincidunt. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. </p>
  391. <!-- Info table -->
  392. <table id="infot" cellspacing="10">
  393. <tr>
  394. <th>Episodes</th>
  395. <td> 100</td>
  396.  
  397. <td rowspan="4" class="ratings">✭✭✭✩✩</td>
  398. </tr>
  399. <tr>
  400. <th>status</th>
  401. <td>completed</td>
  402. </tr>
  403. <tr>
  404. <th>genre</th>
  405. <td>???</td>
  406. </tr>
  407. <tr>
  408. <th>rated</th>
  409. <td>mature</td>
  410. </tr>
  411. </table>
  412. </td></tr></table>
  413.  
  414. <!------------------ Media Div ------------------>
  415. <div class="media watched"><table><tr>
  416. <!-- Name of media -->
  417. <td class="name">some title</td>
  418. <!-- Short summary of media -->
  419. <td class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  420. <!-- Rate the media -->
  421. <td class="rating">✭✭✭✩✩</td>
  422. <!-- Media related links -->
  423. <td class="three">
  424. <!-- Info pop up link -->
  425. <a rel="I05" class="more" title="more">I</a>
  426. <!-- Media tag link -->
  427. <a href="/tagged/" title="tag">II</a>
  428. <!-- IMBD link -->
  429. <a href="/" title="imbd">III</a>
  430. </td>
  431. </tr></table></div>
  432.  
  433. <table class="info I05"><tr><td>
  434. <!-- Media image -->
  435. <img src="http://static.tumblr.com/zibrynf/gZ7n8kck4/tumblr_n7jeawh9vo1siy7m0o1_400.jpg"/>
  436. <!-- Name of media -->
  437. <h1>some title</h1>
  438. <!-- Summary or review of media -->
  439. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta justo et congue tincidunt. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. </p>
  440. <!-- Info table -->
  441. <table id="infot" cellspacing="10">
  442. <tr>
  443. <th>Episodes</th>
  444. <td> 100</td>
  445.  
  446. <td rowspan="4" class="ratings">✭✭✭✩✩</td>
  447. </tr>
  448. <tr>
  449. <th>status</th>
  450. <td>completed</td>
  451. </tr>
  452. <tr>
  453. <th>genre</th>
  454. <td>???</td>
  455. </tr>
  456. <tr>
  457. <th>rated</th>
  458. <td>mature</td>
  459. </tr>
  460. </table>
  461. </td></tr></table>
  462.  
  463. </div> <!-- End media Wrap -->
  464.  
  465. <div id="filters">
  466. <a href="/" class="one">home</a>
  467. <a href="/ask" class="one">message</a>
  468. <a href="/submit" class="one">suggest</a>
  469.  
  470. <a href="#" rel="watchlist" class="filters">Watchlist</a>
  471. <a href="#" rel="fav" class="filters">Favorites</a> <a href="#" rel="watched" class="filters">watched</a>
  472. <a href="#" rel="media" class="filters">All</a>
  473.  
  474. <a class="close">close</a>
  475.  
  476. <a href="http://swsthemes.tumblr.com" class="theme">sws</a>
  477. </div>
  478. </body>
  479. </html>
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!