API tools faq
paste
Notlikeamovie

film table 01

Notlikeamovie
Aug 11th, 2013
14,393
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.67 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: http://maraudersmaps.tumblr.com/taskbox#9
  8.  
  9. HOW TO ADD MORE FILMS: http://maraudersmaps-themesupport.tumblr.com/guide_filmtable_01#01
  10.  
  11. CUSTOMIZATION GUIDE: http://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='http://fonts.googleapis.com/css?family=Kreon:300,400,700' rel='stylesheet' type='text/css'>
  18.    
  19.     <title>
  20.       {Title}
  21.     </title>
  22.     <link rel="shortcut icon" href="{Favicon}">
  23.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.     {block:Description}
  25.     <meta name="description" content="{MetaDescription}" />
  26.     {/block:Description}
  27.    
  28.    
  29.     <style type='text/css'>
  30.      
  31.     /***************** SCROLLBAR ********************/
  32.  
  33.       ::-webkit-scrollbar-thumb:vertical {
  34.         border-left:2px solid #f8f8f8;
  35.         border-right:2px solid #f8f8f8;
  36.         border-top:0;
  37.         border-bottom:0;
  38.         background-color:#0a0a0a;
  39.         height: 7px;
  40.       }
  41.       ::-webkit-scrollbar-thumb:horizontal {
  42.         background-color:#0a0a0a;
  43.         height:7px!important;
  44.         border-top:2px solid #f8f8f8;
  45.         border-bottom:2px solid #f8f8f8;
  46.         border-left:0;
  47.         border-right:0;
  48.       }
  49.       ::-webkit-scrollbar {
  50.         background-color:#f8f8f8;
  51.         height:7px;
  52.         width:7px;
  53.       }
  54.      
  55.     /***************** GENERAL *******************/
  56.      
  57.       body{
  58.         background-color:#f8f8f8;
  59.         color:#000;
  60.         font-family:calibri;
  61.         font-size:10px;
  62.         background-attachment:fixed;
  63.         background-repeat:repeat;
  64.         text-align:justify;
  65.       }
  66.      
  67.       .content{
  68.         width:1065px;
  69.         margin:auto;
  70.         background:#trans;
  71.         margin-top:150px;
  72.       }
  73.      
  74.    
  75.     /******************* GRID STRUCTURE *********************/
  76.      
  77.       .film-grid{
  78.         max-width:1065px;
  79.         padding:0;
  80.         margin:0;
  81.         position:relative;
  82.         background:#trans;
  83.         list-style-type:none;
  84.       }
  85.      
  86.       .film-grid .film{
  87.         margin:0px 4px 5px 3px;
  88.         display:inline-block;
  89.         width:204px;
  90.         height:281px;
  91.         position:relative;
  92.         z-index:1;
  93.       }
  94.      
  95.       .film-grid .film img{
  96.         width:180px;
  97.         max-height:257px;
  98.         margin:0;
  99.         padding:0;
  100.         border:0;
  101.       }
  102.      
  103.      
  104.     /******************** GRID ITEMS CONTENT *********************/
  105.       .onclickstuff{
  106.         max-height:257px;
  107.         overflow:hidden;
  108.         position:absolute;
  109.         z-index:1;
  110.         padding:12px;
  111.         background-color:#ffffff;
  112.         -webkit-transition:opacity 0.4s ease-in-out 0s, margin 0.3s ease-out 0s;
  113.         transition:opacity 0.4s ease-in-out 0s, margin 0.3s ease-out 0s;
  114.         -moz-transition:opacity 0.4s ease-in-out 0s, margin 0.3s ease-out 0s;
  115.         -o-transition:opacity 0.4s ease-in-out 0s, margin 0.3s ease-out 0s;
  116.         -webkit-backface-visibility: hidden;
  117.         -moz-backface-visibility: hidden;
  118.         -ms-backface-visibility: hidden;
  119.         -webkit-box-shadow: 1px 1px 5px rgba(200, 200, 200, 0.85);
  120.         -moz-box-shadow:1px 1px 5px rgba(200, 200, 200, 0.85);
  121.         box-shadow:1px 1px 5px rgba(200, 200, 200, 0.85);
  122.       }
  123.      
  124.       .onclickstuff .description{
  125.         height:0px;
  126.         width:0px;
  127.         opacity:0;
  128.         padding:0;
  129.         margin:0;
  130.         float:right;
  131.         -webkit-transition:all 0.3s ease-in;
  132.         transition:all 0.3s ease-in;
  133.         -moz-transition:all 0.3s ease-in;
  134.         -o-transition:all 0.3s ease-in;
  135.         -webkit-backface-visibility: hidden;
  136.         -moz-backface-visibility: hidden;
  137.         -ms-backface-visibility: hidden;
  138.       }
  139.      
  140.       .onclickstuff.scaleup{
  141.         position:absolute;        
  142.         width:400px;
  143.         -webkit-transition:all 0.5s ease-in-out 0s;
  144.         -moz-transition:all 0.5s ease-in-out 0s;
  145.         -o-transition:all 0.5s ease-in-out 0s;
  146.         transition:all 0.5s ease-in-out 0s;
  147.         -webkit-backface-visibility: hidden;
  148.         -moz-backface-visibility: hidden;
  149.         -ms-backface-visibility: hidden;
  150.         margin-left:-98px;
  151.       }
  152.      
  153.       .onclickstuff.scaleup .description{
  154.         opacity:1;
  155.         width:206px;
  156.         -webkit-transition:all 0.3s ease-in 0.4s;
  157.         -moz-transition:all 0.3s ease-in 0.4s;
  158.         -o-transition:all 0.3s ease-in 0.4s;
  159.         transition:all 0.3s ease-in 0.4s;
  160.         -webkit-backface-visibility: hidden;
  161.         -moz-backface-visibility: hidden;
  162.         -ms-backface-visibility: hidden;
  163.         background-color::#trans;
  164.         margin-left:0px;
  165.         text-align:center;
  166.         position:relative;
  167.       }
  168.      
  169.       .onclickstuff.hide{
  170.         position:absolute;
  171.         -webkit-transition:all 0.5s ease-in 0s;
  172.         -moz-transition:all 0.5s ease-in 0s;
  173.         -o-transition:all 0.5s ease-in 0s;
  174.         transition:all 0.5s ease-in 0s;
  175.         -webkit-backface-visibility: hidden;
  176.         -moz-backface-visibility: hidden;
  177.         -ms-backface-visibility: hidden;
  178.         opacity:0.1;
  179.       }
  180.      
  181.      
  182.      
  183.       .onclickstuff.hide .description{
  184.         width:0;
  185.         height:0;
  186.         opacity:0;
  187.         -webkit-transition:all 0.2s ease-in 0s;
  188.         -moz-transition:all 0.2s ease-in 0s;
  189.         -o-transition:all 0.2s ease-in 0s;
  190.         transition:all 0.2s ease-in 0s;
  191.         -moz-backface-visibility: hidden;
  192.         -webkit-backface-visibility: hidden;
  193.         -ms-backface-visibility: hidden;
  194.       }
  195.      
  196.      
  197.       /********************* FILM INFORMATION *************************/
  198.      
  199.      
  200.      
  201.       .onclickstuff .description .filmdata, .onclickstuff .description h1, .onclickstuff .description div, .onclickstuff .description span{
  202.         opacity:0;
  203.         -webkit-transition:all 0s ease-in 0s;
  204.         transition:all 0s ease-in 0s;
  205.         -o-transition:all 0s ease-in 0s;
  206.         -moz-transition:all 0s ease-in 0s;
  207.       }
  208.      
  209.       .onclickstuff.scaleup .description .filmdata, .onclickstuff.scaleup .description h1, .onclickstuff.scaleup .description div, .onclickstuff.scaleup .description span {
  210.         display:block;
  211.         opacity:1;
  212.         -webkit-transition:all 0.3s ease-in 0.55s;
  213.         -o-transition:all 0.3s ease-in 0.55s;
  214.         -moz-transition:all 0.3s ease-in 0.6s;
  215.         transition:all 0.3s ease-in 0.55s;
  216.       }
  217.      
  218.      
  219.       .description h1{
  220.         margin:0px;
  221.         padding:0px 0px 3px 0px;
  222.         font:14px kreon;
  223.         font-weight:300;
  224.         color:#999;
  225.         text-transform:uppercase;
  226.         border-bottom:1px solid #ccc;
  227.         width:100%;
  228.         line-height:14px;
  229.         letter-spacing:1px;
  230.       }
  231.      
  232.       .description .filmdata{
  233.         font:10px calibri;
  234.         letter-spacing:0px;
  235.         max-height:193px;
  236.         overflow-y:auto;
  237.         background:#trans;
  238.         -webkit-transition:0s;
  239.         -moz-transition:0s;
  240.         -o-transition:0s;
  241.         transition:0s;
  242.         color:#999;
  243.         margin-top:5px;
  244.         line-height:13px;
  245.         text-align:justify;
  246.         padding-right:4px;
  247.         display:block;
  248.         margin-bottom:4px;
  249.       }
  250.      
  251.       .description .filmdata p{
  252.         margin:2px 0px;
  253.       }    
  254.      
  255.       .filmdata em{
  256.         letter-spacing:1px;
  257.         margin-right:3px;
  258.         line-height:8px;
  259.         color:#666;
  260.         font-weight:bold;
  261.       }
  262.      
  263.       .dateandtype{
  264.         text-align:left;
  265.         font:8px calibri;
  266.         letter-spacing:1px;
  267.         display:block;
  268.         color:#999;
  269.         font-style:italic;
  270.       }
  271.      
  272.      
  273.      
  274.     /******************** STAR RATING *********************/
  275.      
  276.       .stars{
  277.         width:100%;
  278.         padding-top:4px;
  279.         border-top:1px solid #ccc;
  280.         position:absolute;
  281.         top:242px;
  282.         z-index:1000;
  283.         background:#fff;
  284.       }
  285.      
  286.       .zero, .half, .one, .oneandahalf, .two, .twoandahalf, .three, .threeandahalf, .four, .fourandahalf, .five{
  287.         width:50px;
  288.         height:10px;
  289.         margin:auto;
  290.         position:relative;
  291.         z-index:4;
  292.       }
  293.      
  294.       .zero{
  295.         background-image:url(http://static.tumblr.com/2lqtwbf/Xblmr8qqi/zero.png);
  296.       }
  297.       .half{
  298.         background-image:url(http://static.tumblr.com/2lqtwbf/D5kmr8qsi/half.png);
  299.       }
  300.       .one{
  301.         background-image:url(http://static.tumblr.com/2lqtwbf/Do8mr8qtz/one.png);
  302.       }
  303.       .oneandahalf{
  304.         background-image:url(http://static.tumblr.com/2lqtwbf/eo5mr8quh/oneandahalf.png);
  305.       }
  306.       .two{
  307.         background-image:url(http://static.tumblr.com/2lqtwbf/sxGmr8r3m/two.png);
  308.       }
  309.       .twoandahalf{
  310.         background-image:url(http://static.tumblr.com/2lqtwbf/P5umr8r7v/twoandahalf.png);
  311.       }
  312.       .three{
  313.         background-image:url(http://static.tumblr.com/2lqtwbf/GW6mr8r8d/three.png);
  314.       }
  315.       .threeandahalf{
  316.         background-image:url(http://static.tumblr.com/2lqtwbf/z5Smr8rfo/threeandahalf.png);
  317.       }
  318.       .four{
  319.         background-image:url(http://static.tumblr.com/2lqtwbf/DFrmr8rjw/four.png);
  320.       }
  321.       .fourandahalf{
  322.         background-image:url(http://static.tumblr.com/2lqtwbf/7vYmr8rna/fourandahalf.png);
  323.       }
  324.       .five{
  325.         background-image:url(http://static.tumblr.com/2lqtwbf/Wwtmr8roq/five.png);
  326.       }
  327.      
  328.     /********************* HEADER **********************/
  329.      
  330.       header {
  331.         text-align: justify;
  332.         padding:0;
  333.         background: #0a0a0a;
  334.         color: #fff;
  335.         width:100%;
  336.         height:130px;
  337.         position:fixed;
  338.         top:0;
  339.         left:0;
  340.         font-family:kreon;
  341.         font-weight:300;
  342.         z-index:10000000;
  343.       }
  344.      
  345.      
  346.       header::after {
  347.         content: '';
  348.         display: inline-block;
  349.         width: 100%;
  350.       }
  351.      
  352.       header > div,
  353.       header nav,
  354.       header div h1 {
  355.         display: inline-block;
  356.         vertical-align: middle;
  357.         margin:0;
  358.         padding:0;
  359.       }
  360.      
  361.       header > div {
  362.         width: 50%;
  363.         height: 100%;
  364.         text-align: left;
  365.       }
  366.      
  367.       header > div::before {
  368.         content: '';
  369.         display: inline-block;
  370.         vertical-align: middle;
  371.         height: 100%;
  372.       }
  373.      
  374.       header div h1{
  375.         text-transform:uppercase;
  376.         letter-spacing:1px;
  377.         font-size:30px;
  378.         margin-left:22%;
  379.       }
  380.      
  381.       header nav{
  382.         font-size:13px;
  383.         text-transform:uppercase;
  384.         margin-right:10%;
  385.       }
  386.       header nav a{
  387.         margin-right:15px;
  388.         padding:10px 0px;
  389.         border-top:0px solid #0a0a0a;
  390.         border-bottom:4px solid #0a0a0a;
  391.         -webkit-transition:all 0.5s ease-in-out;
  392.         -o-transition:all 0.5s ease-in-out;
  393.         -moz-transition:all 0.5s ease-in-out;
  394.         transition:all 0.5s ease-in-out;
  395.         text-decoration:none;
  396.         color:#fff;
  397.       }
  398.      
  399.       header nav a:hover{
  400.         padding:4px 0px;
  401.         border-color:#fff;
  402.       }
  403.      
  404.       header div h1 span{
  405.         font-size:8px;
  406.         font-weight:300;
  407.         line-height:8px;
  408.         display:block;
  409.         letter-spacing:2px;
  410.       }
  411.      
  412.      
  413.       @media screen and (max-width:766px){        
  414.         header > div,
  415.         header > div h1,
  416.         header nav {
  417.           height: auto;
  418.           width: auto;
  419.           display: block;
  420.           text-align: center;
  421.           margin:10px 0px!important;
  422.         }
  423.        
  424.         .content, .film-grid{
  425.           width:auto;
  426.           max-width:638px;
  427.           margin:auto;
  428.         }
  429.        
  430.         .content{
  431.         margin-top:150px;
  432.         }        
  433.     }
  434.  
  435.     @media screen and (min-width:767px) and (max-width:950px){
  436.         header > div,
  437.         header > div h1,
  438.         header nav {
  439.             height: auto;
  440.             width: auto;
  441.             display: block;
  442.             text-align: center;
  443.             margin:10px 0px!important;
  444.             }
  445.    
  446.         .content, .film-grid{
  447.             width:auto;
  448.             max-width:851px;
  449.             margin:auto;
  450.         }
  451.    
  452.         .content{
  453.             margin-top:150px;
  454.         }
  455.     }
  456.  
  457.   </style>
  458.  
  459.   <!------------------------ SCRIPTS ------------------------->
  460.  
  461.   <script src="http://code.jquery.com/jquery-latest.js">
  462.   </script>
  463.   <script type="text/javascript">
  464.     $(window).load(function(){
  465.       $('.film').click(function () {
  466.         var $t = $(this);
  467.         $t.siblings().css("z-index", 1);
  468.         if ($t.css("z-index") == 1)
  469.           $t.css("z-index", 2).find('.onclickstuff').addClass('scaleup').removeClass('hide'),
  470.             $t.siblings().find('.onclickstuff').addClass('hide').removeClass('scaleup');
  471.         else
  472.           $t.css("z-index", 1).find('.onclickstuff.scaleup').removeClass('scaleup').removeClass('hide'),
  473.             $t.siblings().find('.hide').removeClass('hide'),
  474.               $t.siblings().find('.scaleup').removeClass('scaleup');
  475.       }
  476.                       );
  477.     }
  478.                   );
  479.   </script>
  480.   </head>
  481.  
  482.   <body>
  483.     <div class="content">
  484.    
  485.    
  486.     <!------------------------- HEADER ----------------------------->
  487.       <header>
  488.         <div>
  489.           <h1>
  490.             films watched in 2013    <!-------- CHANGE YOUR TITLE ---------->
  491.             <span>
  492.               Click on the poster to see the film's info. <!----- CHANGE YOUR DESCRIPTION/LEGEND/INSTRUCTIONS ---->
  493.             </span>
  494.           </h1>
  495.         </div>
  496.         <nav>    <!----------------- NAVIGATION LINKS ------------------>
  497.           <a href="/">
  498.             back home
  499.           </a>
  500.           <a href="/ask">
  501.             Suggest a movie
  502.           </a>
  503.           <a href="http://tumblr.com/">
  504.             Dashboard
  505.           </a>
  506.           <a href="http://maraudersmaps.tumblr.com">
  507.             credit
  508.           </a>
  509.         </nav>
  510.       </header>
  511.      
  512.      
  513.      
  514.      
  515.       <ul class="film-grid">
  516.        
  517.         <!---------------------- START FILM 00 ----------------------------------->
  518.        
  519.         <li class="film">
  520.           <div class="onclickstuff">
  521.            
  522.             <img src="http://static.tumblr.com/2lqtwbf/3z2mrfihx/monstersuniversity.jpg"> <!-------- FILM POSTER GOES HERE ------->
  523.            
  524.         <div class="description">
  525.              
  526.               <h1>
  527.                 monsters university     <!----  FILM'S TITLE -->
  528.               </h1>
  529.               <div class="dateandtype">
  530.                 27/06                    <!---- DATE YOU WATCHED IT ON --->
  531.                 <span style="float:right;">
  532.                   watched in theater      <!---- REWATCH / THEATER / ETCETERA. THIS IS OPTIONAL--->
  533.                 </span>
  534.               </div>
  535.              
  536.               <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---->
  537.                 <p>
  538.                   <em>Summary:</em> <!-----KEEP THE PARAGRAPH TITLES BETWEEN <EM></EM> TAGS------->
  539.                   A look at the relationship between Mike and Sulley during their days at Monsters University -- when they weren't necessarily the best of friends.
  540.                 </p>
  541.                
  542.                 <p>
  543.                   <em>Genre:</em>
  544.                    Animation | Adventure | Comedy
  545.                 </p>
  546.                
  547.                 <p>
  548.                   <em>Director:</em>
  549.                   Dan Scanlon
  550.                 </p>
  551.                
  552.                 <p>
  553.                   <em>Starred by:</em>
  554.                   Billy Crystal, John Goodman, Steve Buscemi.
  555.                 </p>
  556.                
  557.                
  558.               </div>
  559.              
  560.               <div class="stars">
  561.                 <div class="threeandahalf"></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")--->
  562.               </div>
  563.             </div>
  564.           </li>
  565.           <!-------------------------- END FILM 00 --------------------------------->
  566.          
  567.          
  568.              
  569.              
  570.              
  571.              
  572.              
  573.              
  574.              
  575.              
  576.              
  577.              
  578.              
  579.              
  580.              
  581.              
  582.              
  583.              
  584.               </ul>
  585.            </div>
  586.         </body>
  587. </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!