API tools faq
paste
southcodes

movie page #1 'fantasma'

southcodes
Oct 6th, 2020 (edited)
351
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.74 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - movie page #1 'fantasma' by skye southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/inbox
  6.    
  7.     - normalize css by https://github.com/necolas
  8.     - fonts by google
  9.     - honeybee icons by https://honeybee.suiomi.com/
  10.     - ghost png by Good Ware https://www.flaticon.com/free-icon/ghost_2432928?term=ghost&page=1&position=8
  11.     - corner pumpkin by https://extasisthemes.com/post/631259127540219905/a-goodies-pack-by-extasisthemes-iron-man-bubble
  12.     - filtering by https://isotope.metafizzy.co/ + no layout mode: https://github.com/metafizzy/isotope/issues/675#issuecomment-40675160
  13.  
  14.  -->
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18.     <title>{title}</title>
  19.    
  20.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21.  
  22.     <link rel="shortcut icon" href="{favicon}">
  23.     <meta name="description" content="{MetaDescription}"/>
  24.  
  25.     <!-- fonts -->
  26.     <link href="https://fonts.googleapis.com/css2?family=Nosifer&family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700" rel="stylesheet">
  27.  
  28.     <!-- normalize -->
  29.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  30.    
  31.     <!-- honeybee icons -->
  32. <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css" >
  33.  
  34. <style>
  35. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  36. .tmblr-iframe:hover {opacity:.8;}
  37.  
  38. ::-webkit-scrollbar-thumb:vertical {border-right:2px solid orange;}
  39. ::-webkit-scrollbar {width:6px}
  40. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  41.  
  42. pre {font-family:consolas;
  43.     white-space: pre-wrap;       /* css-3 */
  44.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  45.     white-space: -pre-wrap;      /* Opera 4- */
  46.     white-space: -o-pre-wrap;    /* Opera 7 */
  47.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  48.  
  49. body, figure{margin:0;padding:0}
  50. html{font: 14px 'Open Sans', sans-serif;}
  51. body {font-size:14px;color:#fafafa;background:#000000;}
  52. a {text-decoration: none;color:orange;word-break:break-word;}
  53. a:hover {color:orangered;}
  54. blockquote {margin:0;padding:0;}
  55. img {max-width:100%;height: auto;display: block;margin: .7rem 0}
  56. hr {border:0;border-top:1px solid #aaa;margin:0;}
  57.  
  58. /*  header  */
  59.  
  60. header {
  61.     margin:4rem auto;
  62.     position:relative
  63. }
  64.  
  65. h1 {
  66.     font:400 3rem 'Nosifer', cursive;
  67.     text-align: center;
  68.     margin-bottom:2rem;
  69.     letter-spacing: .8rem;
  70. }
  71.  
  72. #ghost-line {
  73.     position:absolute;
  74.     z-index:-1;
  75.     top:5rem;right:3rem;left:3rem;
  76.     border-color:orange}
  77.  
  78. figure.ghost {
  79.     position:relative;
  80.     width:100%}
  81. img.ghost {
  82.     width:10rem;
  83.     background:#000;
  84.     margin:auto;
  85.     display:block;
  86. }
  87.  
  88. #description {
  89.     width:90vw;
  90.     max-width: 40rem;
  91.     margin:4rem auto;
  92.     background:rgba(225,225,225,.3);
  93.     border:1px solid orange;
  94.     padding:2rem 4rem;
  95.     text-align:center;
  96.     box-sizing: border-box;
  97.     line-height: 180%;
  98.     letter-spacing: .03rem;
  99. }
  100.  
  101. /*  nav  */
  102.  
  103. #navi ul,#navi li {list-style-type:none;margin:0;padding:0;}
  104. #navi li {display:inline-block;margin:1rem 2rem}
  105. #navi {
  106.     font-size:1.3rem;
  107.     letter-spacing: .03rem;
  108.     text-transform: uppercase;
  109.     font-weight: 600;
  110.     text-align: center;
  111. }
  112.  
  113. /* filters */
  114.  
  115. #filters {
  116.     width:18rem;
  117.     max-width:28%;
  118.     float:left;
  119.     margin: 4rem 0 5rem 2rem;
  120.     text-align: right;
  121.     font-size:.9rem
  122. }
  123. #filters-title {
  124.     padding:2rem 1rem;
  125.     margin:0;
  126.     background:orange;
  127.     color:#000;
  128.     text-transform: uppercase;
  129.     text-align: right;  
  130. }
  131. #filters-title div{
  132.     padding-bottom:.5rem;
  133.     border-bottom:2px solid black}
  134.  
  135. #filters-wrapper {
  136.     background:rgba(225,225,225,.4);
  137.     border:1px solid orange;
  138. }
  139.  
  140. .filters-group-title {
  141.     background:black;
  142.     padding:1rem;
  143.     margin:0;
  144.     color:orange;
  145.     text-transform: uppercase;
  146.     letter-spacing: .19rem;
  147. }
  148.  
  149. .th-bat-o {
  150.     margin-right:1rem;
  151.     font-size: 1.6rem;
  152. }
  153.  
  154. .button-group .button {
  155.     display:block;
  156.     background:transparent;
  157.     border:0;
  158.     outline:0;
  159.     width:100%;
  160.     text-align: right;
  161.     padding:.8rem;
  162.     text-transform: uppercase;
  163.     letter-spacing: .03rem;
  164.     color:black;
  165.     font-weight: 700;
  166. }
  167.  
  168. .is-checked {
  169.     background:orange!important;
  170.     color:black;
  171.     font-weight:800!important
  172. }
  173.  
  174.  
  175. /* main */
  176.  
  177. main {
  178.     width:calc(100% - 21rem);
  179.     display:flex;
  180.     flex-flow: row wrap;
  181.     justify-content:space-around;
  182.     min-height:100vh;
  183.     margin-bottom: 13rem;
  184.     float:right;
  185. }
  186.  
  187. .movie {
  188.     width:100%;
  189.     max-width: 30rem;
  190.     height:23rem;
  191.     margin: 4rem auto;
  192.     display:flex;
  193.     flex-flow: row wrap;
  194.     transition: .4s ease-in-out;
  195. }
  196.  
  197. .movie-status {
  198.     width:100%;
  199.     background:black;
  200.     border:2px solid orange;
  201.     text-transform: uppercase;
  202.     letter-spacing: .08rem;
  203.     font-weight: 700;
  204.     padding:1rem;
  205.     color:orange;
  206.     text-align: center;
  207.     font-size: 1.2rem;
  208. }
  209.  
  210. figure.movie-image {
  211.     width:50%;
  212.     height:100%;
  213.     position:relative
  214. }
  215. img.movie-image {
  216.     width:100%;
  217.     height:100%;
  218.     object-fit: cover;
  219.     display:block;margin:0
  220. }
  221.  
  222. .movie-inside{
  223.     position:absolute;
  224.     bottom:0;
  225.     left:0;right:0;
  226.     background:rgba(0, 0, 0,.6);
  227.     padding:1rem;
  228.     border-top:2px solid orange;
  229. }
  230.  
  231. .movie-name {
  232.     margin:0 0 .5rem;
  233.     color:orange;
  234.     text-align: center;
  235.     font:700 1.3rem 'Open Sans', sans-serif;
  236.     text-transform: uppercase;
  237.     letter-spacing: .05rem;
  238.     text-shadow: 3px 3px black;
  239.     /* -webkit-text-stroke: .5px rgb(51, 51, 51); */
  240. }
  241.  
  242. .movie-pumkpinks {
  243.     display:flex;
  244.     justify-content: space-around;
  245.     font-size:1.5rem;
  246. }
  247.  
  248. .one-pumpkins .th:nth-of-type(1),
  249. .two-pumpkins .th:nth-of-type(-n+2),
  250. .three-pumpkins .th:nth-of-type(-n+3),
  251. .four-pumpkins .th:nth-of-type(-n+4),
  252. .five-pumpkins .th:nth-of-type(-n+5)
  253. {
  254.     color:orange;
  255. }
  256.  
  257.  
  258. .movie-info {
  259.     vertical-align: top;
  260.     width:50%;
  261.     height: 100%;
  262.     background:rgba(225,225,225,.1);
  263.     border:1px solid orange;
  264.     border-left:0;
  265.     box-sizing: border-box;
  266.     overflow: auto;
  267. }
  268.  
  269. .detail-name {
  270.     padding:.5rem;
  271.     background:orange;
  272.     text-transform: uppercase;
  273.     color:black;
  274.     font-weight: 700;
  275.     text-align: center;
  276.     letter-spacing: .04rem;
  277. }
  278. .detail-info {
  279.     font-size:.95rem ;
  280.     padding:1.2rem;
  281. }
  282.  
  283. footer  {}
  284.  
  285. #pumpkin-wrapper {
  286.     bottom: 2rem;
  287.     height: 115px;
  288.     position: fixed;
  289.     right: 2rem;
  290.     width: 150px;
  291.     z-index: 1;
  292.     }
  293.      
  294.     #pumpkin {
  295.     height: 115px;
  296.     position: absolute;
  297.     width: 150px;
  298.     }
  299.      
  300.     .pumpkin-stalk {
  301.     background: #94a789;
  302.     border-radius: 100px;
  303.     height: 20px;
  304.     margin-left: 70px;
  305.     position: absolute;
  306.     width: 10px;
  307.     }
  308.      
  309.     .pumpkin-curve-one {
  310.     background: #f18d4f;
  311.     border-radius: 100px;
  312.     height: 100px;
  313.     margin-top: 15px;
  314.     position: absolute;
  315.     width: 100px;
  316.     }
  317.      
  318.     .pumpkin-curve-two {
  319.     background: #fe9554;
  320.     border-radius: 100px;
  321.     height: 100px;
  322.     margin-left: 25px;
  323.     margin-top: 15px;
  324.     position: absolute;
  325.     width: 100px;
  326.     }
  327.      
  328.     .pumpkin-curve-three {
  329.     background: #f18d4f;
  330.     border-radius: 100px;
  331.     height: 100px;
  332.     margin-left: 50px;
  333.     margin-top: 15px;
  334.     position: absolute;
  335.     width: 100px;
  336.     }
  337.      
  338.     .pumpkin-nose {
  339.     border-left: 10px solid transparent;
  340.     border-right: 10px solid transparent;
  341.     border-top: 15px solid #400c18;
  342.     margin-left: 65px;
  343.     margin-top: 45px;
  344.     position: absolute;
  345.     }
  346.      
  347.     .pumpkin-mouth {
  348.     border-left: 25px solid transparent;
  349.     border-right: 25px solid transparent;
  350.     border-top: 25px solid #400c18;
  351.     height: 0px;
  352.     margin-left: 15px;
  353.     margin-top: 70px;
  354.     position: absolute;
  355.     width: 75px;
  356.     }
  357.      
  358.     .pumpkin-tooth-one {
  359.     background: #f18d4f;
  360.     height: 15px;
  361.     margin-left: 45px;
  362.     margin-top: 70px;
  363.     position: absolute;
  364.     width: 15px;
  365.     z-index: 1;
  366.     }
  367.      
  368.     .pumpkin-tooth-two {
  369.     background: #f18d4f;
  370.     height: 15px;
  371.     margin-left: 95px;
  372.     margin-top: 80px;
  373.     position: absolute;
  374.     width: 15px;
  375.     z-index: 1;
  376.     }
  377.      
  378.     .pumpkin-eye-left {
  379.     border-bottom: 10px solid #400c18;
  380.     border-left: 10px solid #400c18;
  381.     border-right: 10px solid transparent;
  382.     border-top: 10px solid transparent;
  383.     margin-left: 35px;
  384.     margin-top: 35px;
  385.     position: absolute;
  386.     }
  387.      
  388.     .pumpkin-eye-right {
  389.     border-bottom: 10px solid #400c18;
  390.     border-left: 10px solid transparent;
  391.     border-right: 10px solid #400c18;
  392.     border-top: 10px solid transparent;
  393.     margin-left: 95px;
  394.     margin-top: 35px;
  395.     position: absolute;
  396.     }
  397.      
  398.  
  399. /* MEDIA */
  400.  
  401. @media only screen and (min-width:0px) and (max-width:700px) {
  402.  
  403.     main {
  404.         width:calc(100% - 37%);
  405.     }
  406. }
  407.  
  408. </style>
  409.  
  410.    
  411. </head>
  412. <body>
  413.  
  414. <header>
  415.  
  416.     <h1>
  417.         title
  418.     </h1>
  419.  
  420.    
  421.     <figure class="ghost"><hr id="ghost-line"><img class="ghost" src="https://static.tumblr.com/p5i0ib5/7Vlqht132/ghost.png"/></figure>
  422.  
  423.     <article id="description">
  424.         description
  425.     </article>
  426.  
  427.     <nav id="navi"><ul>
  428.         <!-- links -->
  429.         <li><a href="/">mansion entry</a></li>
  430.         <li><a href="/ask">bloody letters</a></li>
  431.         <li><a href="link">bats</a></li>
  432.     </ul></nav>
  433.  
  434. </header>
  435.  
  436. <!--
  437.     please refer to this tutorial if you're not familiar with combined filters: https://magnusthemes.tumblr.com/post/171696773190/isotope-combination-filtering
  438.  
  439.    if you have any questions shoot me an ask https://southcodes.tumblr.com/inbox
  440. -->
  441.  
  442. <div id="filters">
  443.    
  444.    <h2 id="filters-title"><div>
  445.  
  446.        filters
  447.  
  448.    </div></h2>
  449.  
  450. <div id="filters-wrapper">
  451.  
  452.    <!-- start filter group -->
  453.  
  454.    <h3 class="filters-group-title"><i class="th th-bat-o"></i>score</h3>
  455.    
  456.    <div class="button-group" data-filter-group="score">
  457.        
  458.        <button class="button is-checked" data-filter="">
  459.            all
  460.        </button>
  461.        <button class="button" data-filter=".one-pumpkins">
  462.            one pumpkings
  463.        </button>
  464.        <button class="button" data-filter=".two-pumpkins">
  465.            two pumpkins
  466.        </button>
  467.        <button class="button" data-filter=".three-pumpkins">
  468.            three pumpkins
  469.        </button>
  470.        <button class="button" data-filter=".four-pumpkins">
  471.            four pumpkins
  472.        </button>
  473.        <button class="button" data-filter=".five-pumpkins">
  474.            five pumpkins
  475.        </button>
  476.  
  477.    </div>    
  478.  
  479.    <!-- end filter group -->
  480.  
  481.  
  482.    <!-- start filter group -->
  483.  
  484.    <h3 class="filters-group-title"><i class="th th-bat-o"></i> status</h3>
  485.  
  486.    <div class="button-group" data-filter-group="status">
  487.        
  488.        <button class="button is-checked" data-filter="">
  489.            all
  490.        </button>
  491.        <button class="button" data-filter=".watching">
  492.            watching
  493.        </button>
  494.        <button class="button" data-filter=".finished">
  495.            finished
  496.        </button>
  497.        <button class="button" data-filter=".hiatus">
  498.            on hiatus
  499.        </button>
  500.  
  501.    </div>
  502.    
  503.    <!-- end filter group -->
  504.    
  505.    <!-- start filter group -->
  506.  
  507.    <h3 class="filters-group-title"><i class="th th-bat-o"></i> genre</h3>
  508.  
  509.    <div class="button-group" data-filter-group="genre">
  510.        
  511.        <button class="button is-checked" data-filter="">
  512.            all
  513.        </button>
  514.        <button class="button" data-filter=".horror">
  515.            horror
  516.        </button>
  517.        <button class="button" data-filter=".thriller">
  518.            thriller
  519.        </button>
  520.        <button class="button" data-filter=".suspense">
  521.            suspense
  522.        </button>
  523.  
  524.    </div>
  525.    
  526.    <!-- end filter group -->
  527.    
  528.    
  529.  
  530. </div><!-- filters wrapper end -->
  531.  
  532. </div><!--filters end-->
  533.  
  534. <main>
  535.  
  536.    <!-- don't forget to add the corresping class for the scores! (.one-pumpkins / .two-pumpkins / .three-pumpkins / etc)  -->
  537.  
  538. <article class="movie two-pumpkins one">
  539.  
  540.     <div class="movie-status">status</div>
  541.    
  542.     <figure class="movie-image"><img src="MOVIE IMG URL" class="movie-image" />
  543.        <div class="movie-inside">
  544.            
  545.             <h2 class="movie-name"><a href="movie link">
  546.                 movie name
  547.             </a></h2>
  548.        
  549.             <div class="movie-pumkpinks">
  550.                 <div class="th th-pumpkin"></div>
  551.                 <div class="th th-pumpkin"></div>
  552.                 <div class="th th-pumpkin"></div>
  553.                 <div class="th th-pumpkin"></div>
  554.                 <div class="th th-pumpkin"></div>
  555.             </div>
  556.        </div>
  557.    </figure>
  558.  
  559. <div class="movie-info">
  560.  
  561.     <div class="detail-name">title</div>
  562.     <div class="detail-info">info</div>
  563.  
  564.     <div class="detail-name">title</div>
  565.     <div class="detail-info">info</div>
  566.  
  567.     <div class="detail-name">title</div>
  568.     <div class="detail-info">info</div>
  569.  
  570.  
  571. </div>
  572.  
  573. </article>
  574.  
  575.  
  576.  
  577.  
  578. </main>
  579. <footer>
  580.  
  581. <div id="pumpkin-wrapper"><div id="pumpkin"><div class="pumpkin-stalk"></div><div class="pumpkin-curve-one"></div><div class="pumpkin-curve-three"></div><div class="pumpkin-curve-two"></div><div class="pumpkin-eye-left"></div><div class="pumpkin-eye-right"></div><div class="pumpkin-nose"></div><div class="pumpkin-mouth"></div><div class="pumpkin-tooth-one"></div><div class="pumpkin-tooth-two"></div></div></div>
  582.  
  583. </footer>
  584.  
  585. <!-- DO NOT TOUCH-->
  586. <a style="position:fixed;z-index:999999999;bottom:1.3rem;right:1.25rem;font-size:15px;line-height:14px;height:14px;padding:3px;color:#555;text-align:center;letter-spacing:.7px" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">sc</a>
  587.  
  588. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  589. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
  590. <script>
  591. $(document).ready( function() {
  592.  // init Isotope
  593.  var $grid = $('main').isotope({
  594.     itemSelector: '.movie',
  595.     fitWidth: true,
  596.  });
  597.  
  598.  // store filter for each group
  599.  var filters = {};
  600.  
  601.  $('#filters').on( 'click', '.button', function() {
  602.    var $this = $(this);
  603.    // get group key
  604.    var $buttonGroup = $this.parents('.button-group');
  605.    var filterGroup = $buttonGroup.attr('data-filter-group');
  606.    // set filter for group
  607.    filters[ filterGroup ] = $this.attr('data-filter');
  608.    // combine filters
  609.    var filterValue = concatValues( filters );
  610.    // set filter for Isotope
  611.    $grid.isotope({ filter: filterValue });
  612.  });
  613.  
  614.  // change is-checked class on buttons
  615.  $('.button-group').each( function( i, buttonGroup ) {
  616.    var $buttonGroup = $( buttonGroup );
  617.    $buttonGroup.on( 'click', 'button', function() {
  618.      $buttonGroup.find('.is-checked').removeClass('is-checked');
  619.      $( this ).addClass('is-checked');
  620.    });
  621.  });
  622.  
  623. });
  624. // flatten object by concatting values
  625. function concatValues( obj ) {
  626.  var value = '';
  627.  for ( var prop in obj ) {
  628.    value += obj[ prop ];
  629.  }
  630.  return value;
  631. };
  632.  
  633. Isotope.Item.prototype._create = function() {
  634.   // assign id, used for original-order sorting
  635.   this.id = this.layout.itemGUID++;
  636.   // transition objects
  637.   this._transn = {
  638.     ingProperties: {},
  639.     clean: {},
  640.     onEnd: {}
  641.   };
  642.   this.sortData = {};
  643. };
  644.  
  645. Isotope.prototype.arrange = function( opts ) {
  646.   // set any options pass
  647.   this.option( opts );
  648.   this._getIsInstant();
  649.   // just filter
  650.   this.filteredItems = this._filter( this.items );
  651.   // flag for initalized
  652.   this._isLayoutInited = true;
  653. };
  654.  
  655. </script>
  656. </body>
  657. </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!