API tools faq
paste
Advertisement
rasperries

film/book page

rasperries
Jan 7th, 2021
1,479
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.03 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" class="no-js">
  3. <head>
  4.  
  5. <!-------------------------------------------------------------------------
  6.  
  7. HOW TO INSTALL: https://maraudersmaps.tumblr.com/taskbox#9
  8.  
  9. HOW TO ADD MORE FILMS: https://maraudersmaps-themesupport.tumblr.com/guide_filmtable_01#01
  10.  
  11. CUSTOMIZATION GUIDE: https://maraudersmaps-themesupport.tumblr.com/guide_filmtable_01#02
  12.  
  13. -------------------------------------------------------------------------->
  14.  
  15. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  16.  
  17. <link href='https://fonts.googleapis.com/css?family=Kreon:300,400,700' rel='stylesheet' type='text/css'>
  18. <script src="//use.edgefonts.net/source-serif-pro;lato.js"></script>
  19.  
  20. <title>
  21. {Title}
  22. </title>
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25. {block:Description}
  26. <meta name="description" content="{MetaDescription}" />
  27. {/block:Description}
  28.  
  29.  
  30. <style type='text/css'>
  31.  
  32. /***************** SCROLLBAR ********************/
  33.  
  34. ::-webkit-scrollbar-thumb:vertical {
  35. border-left:2px solid #f8f8f8;
  36. border-right:2px solid #f8f8f8;
  37. border-top:0;
  38. border-bottom:0;
  39. background-color:#999;
  40. height: 7px;
  41. }
  42. ::-webkit-scrollbar-thumb:horizontal {
  43. background-color:#0a0a0a;
  44. height:7px!important;
  45. border-top:2px solid #f8f8f8;
  46. border-bottom:2px solid #f8f8f8;
  47. border-left:0;
  48. border-right:0;
  49. }
  50. ::-webkit-scrollbar {
  51. background-color:#f8f8f8;
  52. height:7px;
  53. width:7px;
  54. }
  55.  
  56. /***************** GENERAL *******************/
  57.  
  58. body{
  59. background-color:#fff;
  60. color:#000;
  61. font-family:lato;
  62. font-size:10px;
  63. background-attachment:fixed;
  64. background-repeat:repeat;
  65. text-align:justify;
  66. }
  67.  
  68. .content{
  69. width:1065px;
  70. margin:auto;
  71. background:#trans;
  72. margin-top:150px;
  73. }
  74.  
  75.  
  76. /******************* GRID STRUCTURE *********************/
  77.  
  78. .film-grid{
  79. max-width:1065px;
  80. padding:0;
  81. margin:0;
  82. position:relative;
  83. background:#trans;
  84. list-style-type:none;
  85. }
  86.  
  87. .film-grid .film{
  88. margin:0px 4px 5px 3px;
  89. display:inline-block;
  90. width:204px;
  91. height:281px;
  92. position:relative;
  93. z-index:1;
  94. }
  95.  
  96. .film-grid .film img{
  97. width:180px;
  98. max-height:257px;
  99. margin:0;
  100. padding:0;
  101. border:0;
  102. }
  103.  
  104.  
  105. /******************** GRID ITEMS CONTENT *********************/
  106. .onclickstuff{
  107. max-height:257px;
  108. overflow:hidden;
  109. position:absolute;
  110. z-index:1;
  111. padding:12px;
  112. background-color:#ffffff;
  113. -webkit-transition:opacity 0.4s ease-in-out 0s, margin 0.3s ease-out 0s;
  114. transition:opacity 0.4s ease-in-out 0s, margin 0.3s ease-out 0s;
  115. -moz-transition:opacity 0.4s ease-in-out 0s, margin 0.3s ease-out 0s;
  116. -o-transition:opacity 0.4s ease-in-out 0s, margin 0.3s ease-out 0s;
  117. -webkit-backface-visibility: hidden;
  118. -moz-backface-visibility: hidden;
  119. -ms-backface-visibility: hidden;
  120. -webkit-box-shadow: 1px 1px 5px rgba(200, 200, 200, 0.85);
  121. -moz-box-shadow:1px 1px 5px rgba(200, 200, 200, 0.85);
  122. box-shadow:1px 1px 5px rgba(200, 200, 200, 0.85);
  123. }
  124.  
  125. .onclickstuff .description{
  126. height:0px;
  127. width:0px;
  128. opacity:0;
  129. padding:0;
  130. margin:0;
  131. float:right;
  132. -webkit-transition:all 0.3s ease-in;
  133. transition:all 0.3s ease-in;
  134. -moz-transition:all 0.3s ease-in;
  135. -o-transition:all 0.3s ease-in;
  136. -webkit-backface-visibility: hidden;
  137. -moz-backface-visibility: hidden;
  138. -ms-backface-visibility: hidden;
  139. }
  140.  
  141. .onclickstuff.scaleup{
  142. position:absolute;
  143. width:400px;
  144. -webkit-transition:all 0.5s ease-in-out 0s;
  145. -moz-transition:all 0.5s ease-in-out 0s;
  146. -o-transition:all 0.5s ease-in-out 0s;
  147. transition:all 0.5s ease-in-out 0s;
  148. -webkit-backface-visibility: hidden;
  149. -moz-backface-visibility: hidden;
  150. -ms-backface-visibility: hidden;
  151. margin-left:-98px;
  152. }
  153.  
  154. .onclickstuff.scaleup .description{
  155. opacity:1;
  156. width:206px;
  157. -webkit-transition:all 0.3s ease-in 0.4s;
  158. -moz-transition:all 0.3s ease-in 0.4s;
  159. -o-transition:all 0.3s ease-in 0.4s;
  160. transition:all 0.3s ease-in 0.4s;
  161. -webkit-backface-visibility: hidden;
  162. -moz-backface-visibility: hidden;
  163. -ms-backface-visibility: hidden;
  164. background-color::#trans;
  165. margin-left:0px;
  166. text-align:center;
  167. position:relative;
  168. }
  169.  
  170. .onclickstuff.hide{
  171. position:absolute;
  172. -webkit-transition:all 0.5s ease-in 0s;
  173. -moz-transition:all 0.5s ease-in 0s;
  174. -o-transition:all 0.5s ease-in 0s;
  175. transition:all 0.5s ease-in 0s;
  176. -webkit-backface-visibility: hidden;
  177. -moz-backface-visibility: hidden;
  178. -ms-backface-visibility: hidden;
  179. opacity:0.1;
  180. }
  181.  
  182.  
  183.  
  184. .onclickstuff.hide .description{
  185. width:0;
  186. height:0;
  187. opacity:0;
  188. -webkit-transition:all 0.2s ease-in 0s;
  189. -moz-transition:all 0.2s ease-in 0s;
  190. -o-transition:all 0.2s ease-in 0s;
  191. transition:all 0.2s ease-in 0s;
  192. -moz-backface-visibility: hidden;
  193. -webkit-backface-visibility: hidden;
  194. -ms-backface-visibility: hidden;
  195. }
  196.  
  197.  
  198. /********************* FILM INFORMATION *************************/
  199.  
  200.  
  201.  
  202. .onclickstuff .description .filmdata, .onclickstuff .description h1, .onclickstuff .description div, .onclickstuff .description span{
  203. opacity:0;
  204. -webkit-transition:all 0s ease-in 0s;
  205. transition:all 0s ease-in 0s;
  206. -o-transition:all 0s ease-in 0s;
  207. -moz-transition:all 0s ease-in 0s;
  208. }
  209.  
  210. .onclickstuff.scaleup .description .filmdata, .onclickstuff.scaleup .description h1, .onclickstuff.scaleup .description div, .onclickstuff.scaleup .description span {
  211. display:block;
  212. opacity:1;
  213. -webkit-transition:all 0.3s ease-in 0.55s;
  214. -o-transition:all 0.3s ease-in 0.55s;
  215. -moz-transition:all 0.3s ease-in 0.6s;
  216. transition:all 0.3s ease-in 0.55s;
  217. }
  218.  
  219.  
  220. .description h1{
  221. margin:0px;
  222. padding:0px 0px 3px 0px;
  223. font:11px lato;
  224. font-weight:bold;
  225. color:#666;
  226. text-transform:uppercase;
  227. border-bottom:1px solid #ccc;
  228. width:100%;
  229. line-height:14px;
  230. letter-spacing:2px;
  231. }
  232.  
  233. .description .filmdata{
  234. font:10px lato;
  235. letter-spacing:0.25px;
  236. max-height:193px;
  237. overflow-y:auto;
  238. background:#trans;
  239. -webkit-transition:0s;
  240. -moz-transition:0s;
  241. -o-transition:0s;
  242. transition:0s;
  243. color:#999;
  244. margin-top:5px;
  245. line-height:13px;
  246. text-align:justify;
  247. padding-right:4px;
  248. display:block;
  249. margin-bottom:4px;
  250. }
  251.  
  252. .description .filmdata p{
  253. margin:2px 0px;
  254. }
  255.  
  256. .filmdata em{
  257. letter-spacing:1px;
  258. margin-right:3px;
  259. line-height:8px;
  260. color:#666;
  261. font-weight:;
  262. }
  263.  
  264. .dateandtype{
  265. text-align:left;
  266. font:9px lato;
  267. letter-spacing:1px;
  268. display:block;
  269. color:#999;
  270. font-style:italic;
  271. }
  272.  
  273.  
  274.  
  275. /******************** STAR RATING *********************/
  276.  
  277. .stars{
  278. width:100%;
  279. padding-top:4px;
  280. border-top:1px solid #ccc;
  281. position:absolute;
  282. top:218px;
  283. z-index:1000;
  284. background:#fff;
  285. }
  286.  
  287. .zero, .half, .one, .oneandahalf, .two, .twoandahalf, .three, .threeandahalf, .four, .fourandahalf, .five{
  288. width:50px;
  289. height:10px;
  290. margin:auto;
  291. position:relative;
  292. z-index:4;
  293. }
  294.  
  295. .zero{
  296. background-image:url(https://static.tumblr.com/2lqtwbf/Xblmr8qqi/zero.png);
  297. }
  298. .half{
  299. background-image:url(https://static.tumblr.com/2lqtwbf/D5kmr8qsi/half.png);
  300. }
  301. .one{
  302. background-image:url(https://static.tumblr.com/2lqtwbf/Do8mr8qtz/one.png);
  303. }
  304. .oneandahalf{
  305. background-image:url(https://static.tumblr.com/2lqtwbf/eo5mr8quh/oneandahalf.png);
  306. }
  307. .two{
  308. background-image:url(https://static.tumblr.com/2lqtwbf/sxGmr8r3m/two.png);
  309. }
  310. .twoandahalf{
  311. background-image:url(https://static.tumblr.com/2lqtwbf/P5umr8r7v/twoandahalf.png);
  312. }
  313. .three{
  314. background-image:url(https://static.tumblr.com/2lqtwbf/GW6mr8r8d/three.png);
  315. }
  316. .threeandahalf{
  317. background-image:url(https://static.tumblr.com/2lqtwbf/z5Smr8rfo/threeandahalf.png);
  318. }
  319. .four{
  320. background-image:url(https://static.tumblr.com/2lqtwbf/DFrmr8rjw/four.png);
  321. }
  322. .fourandahalf{
  323. background-image:url(https://static.tumblr.com/2lqtwbf/7vYmr8rna/fourandahalf.png);
  324. }
  325. .five{
  326. background-image:url(https://static.tumblr.com/2lqtwbf/Wwtmr8roq/five.png);
  327. }
  328.  
  329. /********************* HEADER **********************/
  330.  
  331. header {
  332. text-align: justify;
  333. padding:0;
  334. background: #fafafa;
  335. color: #666;
  336. width:100%;
  337. height:130px;
  338. position:fixed;
  339. top:0;
  340. left:0;
  341. font-family:lato;
  342. font-weight:lighter;
  343. z-index:10000000;
  344. }
  345.  
  346.  
  347. header::after {
  348. content: '';
  349. display: inline-block;
  350. width: 100%;
  351. }
  352.  
  353. header > div,
  354. header nav,
  355. header div h1 {
  356. display: inline-block;
  357. vertical-align: middle;
  358. margin:0;
  359. padding:0;
  360. }
  361.  
  362. header > div {
  363. width: 50%;
  364. height: 100%;
  365. text-align: left;
  366. }
  367.  
  368. header > div::before {
  369. content: '';
  370. display: inline-block;
  371. vertical-align: middle;
  372. height: 100%;
  373. }
  374.  
  375. header div h1{
  376. text-transform:uppercase;
  377. letter-spacing:10px;
  378. font-size:25px;
  379. margin-left:22%;
  380. font-weight:normal;
  381. }
  382.  
  383. header nav{
  384. font-size:9px;
  385. text-transform:uppercase;
  386. font-family:lato;
  387. margin-right:10%;
  388. letter-spacing:2px;
  389. }
  390. header nav a{
  391. margin-right:15px;
  392. padding:10px 0px;
  393. border-top:0px solid #0a0a0a;
  394. border-bottom:2px solid #f2f2f2;
  395. -webkit-transition:all 0.5s ease-in-out;
  396. -o-transition:all 0.5s ease-in-out;
  397. -moz-transition:all 0.5s ease-in-out;
  398. transition:all 0.5s ease-in-out;
  399. text-decoration:none;
  400. color:#888;
  401. }
  402.  
  403. header nav a:hover{
  404. padding:4px 0px;
  405. border-color:#888;
  406. }
  407.  
  408. header div h1 span{
  409. font-size:8px;
  410. font-weight:300;
  411. line-height:8px;
  412. display:block;
  413. letter-spacing:2px;
  414. }
  415.  
  416.  
  417. @media screen and (max-width:766px){
  418. header > div,
  419. header > div h1,
  420. header nav {
  421. height: auto;
  422. width: auto;
  423. display: block;
  424. text-align: center;
  425. margin:10px 0px!important;
  426. }
  427.  
  428. .content, .film-grid{
  429. width:auto;
  430. max-width:638px;
  431. margin:auto;
  432. }
  433.  
  434. .content{
  435. margin-top:150px;
  436. }
  437. }
  438.  
  439. @media screen and (min-width:767px) and (max-width:950px){
  440. header > div,
  441. header > div h1,
  442. header nav {
  443. height: auto;
  444. width: auto;
  445. display: block;
  446. text-align: center;
  447. margin:10px 0px!important;
  448. }
  449.  
  450. .content, .film-grid{
  451. width:auto;
  452. max-width:851px;
  453. margin:auto;
  454. }
  455.  
  456. .content{
  457. margin-top:150px;
  458. }
  459. }
  460.  
  461. </style>
  462.  
  463. <!------------------------ SCRIPTS ------------------------->
  464.  
  465. <script src="https://code.jquery.com/jquery-latest.js">
  466. </script>
  467. <script type="text/javascript">
  468. $(window).load(function(){
  469. $('.film').click(function () {
  470. var $t = $(this);
  471. $t.siblings().css("z-index", 1);
  472. if ($t.css("z-index") == 1)
  473. $t.css("z-index", 2).find('.onclickstuff').addClass('scaleup').removeClass('hide'),
  474. $t.siblings().find('.onclickstuff').addClass('hide').removeClass('scaleup');
  475. else
  476. $t.css("z-index", 1).find('.onclickstuff.scaleup').removeClass('scaleup').removeClass('hide'),
  477. $t.siblings().find('.hide').removeClass('hide'),
  478. $t.siblings().find('.scaleup').removeClass('scaleup');
  479. }
  480. );
  481. }
  482. );
  483. </script>
  484. </head>
  485.  
  486. <body>
  487. <div class="content">
  488.  
  489.  
  490. <!------------------------- HEADER ----------------------------->
  491. <header>
  492. <div>
  493. <h1>
  494. films watched in 2021 <!-------- CHANGE YOUR TITLE ---------->
  495. <span>
  496. Click on the poster to see the film's info. <!----- CHANGE YOUR DESCRIPTION/LEGEND/INSTRUCTIONS ---->
  497. </span>
  498. </h1>
  499. </div>
  500. <nav> <!----------------- NAVIGATION LINKS ------------------>
  501. <a href="/">
  502. back home
  503. </a>
  504. <a href="/ask">
  505. Suggest a movie
  506. </a>
  507. <a href="https://tumblr.com/">
  508. Dashboard
  509. </a>
  510. <a href="https://maraudersmaps.tumblr.com">
  511.  
  512. </a>
  513. </nav>
  514. </header>
  515.  
  516.  
  517.  
  518.  
  519. <ul class="film-grid">
  520.  
  521.  
  522. <!---------------------- START FILM 02 ----------------------------------->
  523.  
  524. <li class="film">
  525. <div class="onclickstuff">
  526.  
  527. <img src="https://i.pinimg.com/736x/59/86/7b/59867bc808c60388b570f3162eef4bae.jpg"> <!-------- FILM POSTER GOES HERE ------->
  528.  
  529. <div class="description">
  530.  
  531. <h1>
  532. Les Miserables <!---- FILM'S TITLE -->
  533. </h1>
  534. <div class="dateandtype">
  535. Jan 6 <!---- DATE YOU WATCHED IT ON --->
  536. <span style="float:right;">
  537. netflix <!---- REWATCH / THEATER / ETCETERA. THIS IS OPTIONAL--->
  538. </span>
  539. </div>
  540.  
  541. <div class="filmdata"> <!----- YOU CAN BASICALLY WRITE WHATEVER YOU WANT INSIDE THIS TAG (SUMMARIES, REVIEWS, TRIVIA, ETCETERA). IT CAN BE AS LONG AS YOU WANT---->
  542. <p>
  543. <em>Summary:</em> <!-----KEEP THE PARAGRAPH TITLES BETWEEN <EM></EM> TAGS------->
  544. In 19th-century France, Jean Valjean, who for decades has been hunted by the ruthless policeman Javert after breaking parole, agrees to care for a factory worker's daughter. The decision changes their lives forever.
  545. </p>
  546.  
  547. <p>
  548. <em>Genre:</em>
  549. Drama | Musical | Based on Literature
  550. </p>
  551.  
  552. <p>
  553. <em>Director:</em>
  554. Tom Hooper
  555. </p>
  556.  
  557. <p>
  558. <em>Starring:</em>
  559. Hugh Jackman, Russell Crowe, Anne Hathaway
  560. </p>
  561.  
  562.  
  563. </div>
  564.  
  565. <div class="stars">
  566. <div class="four"></div> <!--- WRITE YOUR RATING FROM ZERO TO FIVE BETWEEN THE "". YOU CAN USE HALF FULL STARS TOO, JUST WRITE THE RATING ALL TOGETHER (E.G: "HALF", "ONEANDAHALF", "TWOANDAHALF")--->
  567. </div>
  568. </div>
  569. </li>
  570. <!-------------------------- END FILM 02 --------------------------------->
  571.  
  572.  
  573.  
  574.  
  575. <!---------------------- START FILM 01 ----------------------------------->
  576.  
  577. <li class="film">
  578. <div class="onclickstuff">
  579.  
  580. <img src="https://64.media.tumblr.com/tumblr_m9ayj8byHK1rs1ef6o1_640.jpg"> <!-------- FILM POSTER GOES HERE ------->
  581.  
  582. <div class="description">
  583.  
  584. <h1>
  585. Erin Brockovich <!---- FILM'S TITLE -->
  586. </h1>
  587. <div class="dateandtype">
  588. Jan 5 <!---- DATE YOU WATCHED IT ON --->
  589. <span style="float:right;">
  590. amazon prime <!---- REWATCH / THEATER / ETCETERA. THIS IS OPTIONAL--->
  591. </span>
  592. </div>
  593.  
  594. <div class="filmdata"> <!----- YOU CAN BASICALLY WRITE WHATEVER YOU WANT INSIDE THIS TAG (SUMMARIES, REVIEWS, TRIVIA, ETCETERA). IT CAN BE AS LONG AS YOU WANT---->
  595. <p>
  596. <em>Summary:</em> <!-----KEEP THE PARAGRAPH TITLES BETWEEN <EM></EM> TAGS------->
  597. An unemployed single mother becomes a legal assistant and almost single-handedly brings down a California power company accused of polluting a city's water supply.
  598. </p>
  599.  
  600. <p>
  601. <em>Genre:</em>
  602. Drama | Biography
  603. </p>
  604.  
  605. <p>
  606. <em>Director:</em>
  607. Steven Soderbergh
  608. </p>
  609.  
  610. <p>
  611. <em>Starring:</em>
  612. Julia Roberts, Albert Finney, David Brisbin
  613. </p>
  614. </div>
  615.  
  616. <div class="stars">
  617. <div class="fourandahalf"><br></div> <!--- WRITE YOUR RATING FROM ZERO TO FIVE BETWEEN THE "". YOU CAN USE HALF FULL STARS TOO, JUST WRITE THE RATING ALL TOGETHER (E.G: "HALF", "ONEANDAHALF", "TWOANDAHALF")--->
  618. </div>
  619. </div>
  620. </li>
  621. <!-------------------------- END FILM 01 --------------------------------->
  622.  
  623.  
  624.  
  625.  
  626.  
  627.  
  628.  
  629.  
  630.  
  631.  
  632.  
  633.  
  634.  
  635.  
  636.  
  637.  
  638.  
  639. </ul>
  640. </div>
  641. </body>
  642. </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!