API tools faq
paste
Advertisement
tea-n-candy

page#2: media

tea-n-candy
Apr 14th, 2014
1,449
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.    
  5.         <!--
  6.        
  7.        THEME/PAGE BY   http://tea-n-candy.tumblr.com/
  8.                        http://tnk-s.tumblr.com/
  9.                        
  10.        DO NOT DELETE OR MOVE CREDIT
  11.        DO NOT REDISTRIBUTE
  12.        DO NOT USE AS BASE
  13.        Thank you!
  14.        
  15.        -->
  16.    
  17.         <title>media;</title>
  18.         <link rel="shortcut icon" href="{Favicon}">
  19.         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  20.         <script type="text/javascript" src="http://static.tumblr.com/8wtv1hn/S9Jn4175v/cat.js"></script>
  21.         <style type="text/css">
  22.        
  23.         /* --------- reset --------- */
  24.         body,div,ol,ul,li,pre,p,th,td {
  25.             margin: 0;
  26.             padding: 0;
  27.         }
  28.        
  29.         body {
  30.             background-color: #fff;
  31.             font-family: Helvetica, sans-serif;
  32.             font-size: 14px;
  33.             color: #000;
  34.             text-align: center;
  35.             overflow-y: scroll;
  36.             overflow-x: hidden;
  37.         }
  38.        
  39.         a, a:visited, a:active, a:hover {
  40.             text-decoration: none;
  41.         }
  42.        
  43.         #wrapper {
  44.             margin: 0 auto;
  45.             width: 1170px;
  46.         }
  47.        
  48.         header {
  49.             font-weight: bold;
  50.             text-transform: capitals;
  51.             color: #fff;
  52.             font-size: 24px;
  53.             line-height: 140px;
  54.             padding: 5px;
  55.         }
  56.        
  57.         nav {
  58.             width: 150px;
  59.             height: 100%;
  60.             position: fixed;
  61.             background-color: #000;
  62.             z-index: 1;
  63.            
  64.         }
  65.        
  66.         nav a {
  67.             display: block;
  68.             width: 120px;
  69.             line-height: 28px;
  70.             text-align: left;
  71.             color: #eee;
  72.             transition: 0.3s ease-out;
  73.             padding: 0 5px 0;
  74.             border-bottom: 1px solid #eee;
  75.             margin: 0 10px 0 10px;
  76.             background-color: #000;
  77.         }
  78.        
  79.         nav a:hover {
  80.             color: #555;
  81.             background-color: #fff;
  82.             transition: 0.6s ease-in;
  83.         }
  84.        
  85.         nav a.div {
  86.             border-bottom: 2px solid #fff;
  87.         }
  88.        
  89.         .bot {
  90.             bottom: -1px;
  91.             position: absolute;
  92.             background-color: #000;
  93.             z-index: 1;
  94.         }
  95.        
  96.        
  97.         .bot a {
  98.             line-height: 24px;
  99.         }
  100.        
  101.         nav span {
  102.             display: block;
  103.             width: 150px;
  104.             line-height: 24px;
  105.             text-align: center;
  106.             color: #eee;
  107.             font-style: italic;
  108.         }
  109.        
  110.         section {
  111.             margin-left: 150px;
  112.             float: left;
  113.             width: 1020px;
  114.             height: 100%;
  115.             margin-top: -5px;
  116.         }
  117.        
  118.         .poster {
  119.             float: left;
  120.             margin-left: 5px;
  121.             margin-top: 5px;
  122.             width: 250px;
  123.             height: 250px;
  124.             position: relative;
  125.             background-color: #eee;
  126.         }
  127.        
  128.         .hover {
  129.             opacity: 0;
  130.             width: 240px;
  131.             height: 240px;
  132.             color: #fff;
  133.             margin: 0;
  134.             transition: 0.4s ease-out;
  135.             padding: 5px;
  136.             display: table;
  137.         }
  138.        
  139.         .hover:hover {
  140.             opacity: 1;
  141.             background-color: rgba(0,0,0,0.8);
  142.             transition: 0.4s ease-in;
  143.         }
  144.        
  145.         .top {
  146.             height: 114px;
  147.             width: 240px;
  148.             border-bottom: 1px solid #fff;
  149.             padding-bottom: 5px;
  150.             vertical-align: bottom;
  151.         }
  152.        
  153.         .bottom {
  154.             height: 115px;
  155.             width: 240px;
  156.             padding-top: 5px;
  157.             display: block;
  158.         }
  159.        
  160.         .top, .bottom {
  161.             font-weight: lighter;
  162.             font-family: calibri, sans-serif;
  163.             font-style: italic;
  164.             font-size: 10px;
  165.             letter-spacing: 1px;
  166.             color: #ddd;
  167.         }
  168.        
  169.         .top b, .top strong {
  170.             font-style: normal;
  171.             text-transform: uppercase;
  172.             font-weight: bold;
  173.             color: #fff;
  174.             font-size: 14px;
  175.             display: block;
  176.             margin-top: 1px;
  177.         }
  178.        
  179.         .bottom b, .bottom strong {
  180.             font-weight: bold;
  181.             color: #fff;
  182.         }
  183.        
  184.         .bottom span {
  185.             font-size: 14px;
  186.             letter-spacing: -1px;
  187.             font-style: normal;
  188.             display: block;
  189.             width: 100%;
  190.             text-align: center;
  191.         }
  192.        
  193.         section a {
  194.             color: #fff;
  195.             transition: 0.1s ease-out;
  196.         }
  197.        
  198.         section a:hover {
  199.             color: #02d5ff;
  200.             transition: 0.1s ease-in;
  201.         }
  202.        
  203.         @media screen and (max-height: 600px) {
  204.             header {
  205.                 line-height: 24px;
  206.             }
  207.            
  208.             nav a {
  209.                 font-size: 10px;
  210.                 line-height: 16px;
  211.             }
  212.            
  213.             .bot a {
  214.                 line-height: 14px;
  215.             }
  216.         }
  217.        
  218.         @media screen and (max-width: 1280px) {
  219.             #wrapper {
  220.                 width: 915px;
  221.             }
  222.            
  223.             section {
  224.                 width: 765px;
  225.             }
  226.         }
  227.  
  228.         @media screen and (max-width: 1024px) {
  229.             #wrapper {
  230.                 width: 660px;
  231.             }
  232.            
  233.             section {
  234.                 width: 510px;
  235.             }
  236.         }
  237.  
  238.         @media screen and (max-width: 720px) {
  239.             #wrapper {
  240.                 width: 405px;
  241.             }
  242.            
  243.             section {
  244.                 width: 255px;
  245.             }
  246.         }
  247.        
  248.         </style>
  249.     </head>
  250.  
  251. <body>
  252.     <div id="wrapper">
  253.         <nav>
  254.             <header>media;</header>
  255.            
  256.             <!--    TO ADD A NEW CATEGORIE:
  257.                   Simply make a new link with href="javascript:;"
  258.                   class="cat" and id="xy". Choose a short and
  259.                   self-explanatory name for the id (see examples!)
  260.                  
  261.                   To give a link a 2px underline to serve as a separator
  262.                   add div to the class (see examples!)
  263.                  
  264.                   Add this id to any poster div as class.
  265.                   If you want more than one category on a poster
  266.                   separate the ids with a space (see examples!)
  267.           -->
  268.            
  269.             <a href="javascript:;" class="div" id="all">show all</a>
  270.             <a href="javascript:;" class="cat" id="plus">favourites</a>
  271.             <a href="javascript:;" class="cat div" id="minus">disliked</a>
  272.             <a href="javascript:;" class="cat" id="tv">tv shows</a>
  273.             <a href="javascript:;" class="cat" id="mov">movies</a>
  274.             <a href="javascript:;" class="cat" id="ani">anime</a>
  275.             <a href="javascript:;" class="cat" id="game">games</a>
  276.             <a href="javascript:;" class="cat" id="other">other</a>
  277.             <div class="bot">
  278.                 <a href="/">back</a>
  279.                 <a href="http://www.tumblr.com/dashboard">dash</a>
  280.                 <a href="http://tea-n-candy.tumblr.com/" target="blank">theme</a>
  281.             </div>
  282.         </nav>
  283.         <section>
  284.        
  285.         <!--    ENTRIES GO HERE     -------------------------------------->
  286.        
  287.             <!--    EXAMPLES    ------------------------------------------>
  288.            
  289.             <!--    class= poster for css, add any number of categories
  290.                    background-image: url('') for the image            
  291.                    Images must be 250x250px                            -->
  292.             <div class="poster tv" style="background-image: url('http://blah.com/image.jpg');">
  293.                 <div class="hover">
  294.                     <table border="0" cellspacing="0" cellpadding="0">
  295.                         <tr><td class="top">
  296.                             <!--    some kind of info, can be left out  -->
  297.                             Season 7
  298.                             <!--    title                               -->
  299.                             <b>Supernatural</b>
  300.                         </td></tr>
  301.                         <tr><td class="bottom">
  302.                             <!--    more information                    -->
  303.                             <strong>watched</strong> 13th april 2014
  304.                             <!--    any kind of rating, +/-/stars/..    -->
  305.                             <span></span>
  306.                         </td></tr>
  307.                     </table>
  308.                 </div>
  309.             </div>
  310.            
  311.             <div class="poster ani plus" style="background-image: url('http://blah.com/image.jpg');">
  312.                 <div class="hover">
  313.                     <table border="0" cellspacing="0" cellpadding="0">
  314.                         <tr><td class="top">
  315.                             Season 1
  316.                             <b>Kill La Kill</b>
  317.                         </td></tr>
  318.                         <tr><td class="bottom">
  319.                             <strong>watched</strong> 29th march 2014
  320.                             <span>+</span>
  321.                         </td></tr>
  322.                     </table>
  323.                 </div>
  324.             </div>
  325.            
  326.             <div class="poster other plus" style="background-image: url('http://blah.com/image.jpg');">
  327.                 <div class="hover">
  328.                     <table border="0" cellspacing="0" cellpadding="0">
  329.                         <tr><td class="top">
  330.                             2011
  331.                             <b>Much Ado About Nothing</b>
  332.                         </td></tr>
  333.                         <tr><td class="bottom">
  334.                             <b title="Theater: On Stage Recording">T</b> | <strong>watched</strong> 4th february 2014
  335.                             <span>+</span>
  336.                         </td></tr>
  337.                     </table>
  338.                 </div>
  339.             </div>
  340.            
  341.             <div class="poster mov minus" style="background-image: url('http://blah.com/image.jpg');">
  342.                 <div class="hover">
  343.                     <table border="0" cellspacing="0" cellpadding="0">
  344.                         <tr><td class="top">
  345.                             2013
  346.                             <b>Movie 43</b>
  347.                         </td></tr>
  348.                         <tr><td class="bottom">
  349.                             <strong>watched</strong> 22nd december 2013
  350.                             <span>--</span>
  351.                         </td></tr>
  352.                     </table>
  353.                 </div>
  354.             </div>
  355.            
  356.             <div class="poster mov plus" style="background-image: url('http://blah.com/image.jpg');">
  357.                 <div class="hover">
  358.                     <table border="0" cellspacing="0" cellpadding="0">
  359.                         <tr><td class="top">
  360.                             2011
  361.                             <b>The Decoy Bride</b>
  362.                         </td></tr>
  363.                         <tr><td class="bottom">
  364.                             <strong>watched</strong> 9th november 2013
  365.                             <span>+</span>
  366.                         </td></tr>
  367.                     </table>
  368.                 </div>
  369.             </div>
  370.            
  371.             <div class="poster game plus" style="background-image: url('http://blah.com/image.jpg');">
  372.                 <div class="hover">
  373.                     <table border="0" cellspacing="0" cellpadding="0">
  374.                         <tr><td class="top">
  375.                             2009
  376.                             <b>Persona 4</b>
  377.                         </td></tr>
  378.                         <tr><td class="bottom">
  379.                             <strong>finished True Ending</strong> 12th october 2013
  380.                             <span>+</span>
  381.                         </td></tr>
  382.                     </table>
  383.                 </div>
  384.             </div>
  385.            
  386.         <!--    ENTRIES END HERE     ------------------------------------->
  387.            
  388.         </section>
  389.     </div>
  390. </body>
  391.  
  392. </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!