API tools faq
paste
nonspace

PAGE #09 :: VOID-N

nonspace
Feb 2nd, 2019
518
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 15.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--VOID-n (Page #09) by @nonspace.      
  4.    Find more of my work at https://nonspace.tumblr.com  
  5.  
  6.    Don't steal.  
  7.    Don't claim as your own.
  8.    Don't use as base code.
  9.    Editing for personal use is fine!
  10.  
  11.    Need help? Have a look at this themes FAQ:
  12.    https://nonspace.tumblr.com/tagged/theme-help:+void-n
  13.    Or my general FAQ: https://nonspace.tumblr.com/help/support
  14.  
  15.    If you find any bugs please report them to me.
  16.    -->
  17.  
  18. <html>
  19.   <head>
  20.     <meta charset="utf-8">
  21.     <meta name="viewport" content="width=device-width">
  22.     <title>{Title}</title>
  23.     <link rel="icon" type="image/png" href="{Favicon}">
  24.  
  25.     <!--FONTS-->
  26.     <link href="https://fonts.googleapis.com/css?family=Open Sans|Chivo:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  27.  
  28.     <!--FONT AWESOME-->
  29.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  30.  
  31.     <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  32.  
  33.     <!--jQUERY-->
  34.     <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  35.     <script src="https://www.dl.dropboxusercontent.com/s/2ob91mnz4zil9lq/scrollTop.js"></script>
  36.  
  37.     <!--ISOTOPE PLUGIN https://isotope.metafizzy.co/ (for filtering)-->
  38.     <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  39.  
  40.     <noscript>
  41.       <style type="text/css">
  42.         #copyright {display: block;}
  43.       </style>
  44.     </noscript>
  45.  
  46.   <style>
  47.   /*SETTINGS & COLORS */
  48. :root {
  49.  /*color*/
  50.  --color-text: #222;
  51.   --color-accent: #F36752;
  52.   --color-accent-text: #fff;
  53.   --color-background: #f7f7f7;
  54.   --color-description: #eee;
  55.  
  56.   /*settings*/
  57.   --display-filters: flex; /*none (off), flex (on)*/
  58. }
  59.  
  60. /*GENERAL */
  61. * {
  62.   box-sizing: border-box;
  63.   padding: 0;
  64.   margin: 0;
  65.   -webkit-font-smoothing: antialiased;
  66.   -moz-osx-font-smoothing: grayscale;
  67.   text-rendering: optimizeLegibility;
  68. }
  69.  
  70. body,html {
  71.   color: var(--color-text);
  72.   background: var(--color-background);
  73. }
  74.  
  75. a, #menu i, .col a, .heading i {
  76.   transition: all 0.5s ease;
  77. }
  78.  
  79. #menu > i:hover {
  80.   -webkit-transform: rotate(-90deg);
  81.   -moz-transform: rotate(-90deg);
  82.   -ms-transform: rotate(-90deg);
  83.   -o-transform: rotate(-90deg);
  84. }
  85.  
  86. .heading > i:hover {
  87.   -webkit-transform: rotate(-90deg);
  88.   -moz-transform: rotate(-90deg);
  89.   -ms-transform: rotate(-90deg);
  90.   -o-transform: rotate(-90deg);
  91. }
  92.  
  93. a {
  94.   text-decoration: none;
  95. }
  96.  
  97. li {
  98.   list-style-type: none;
  99. }
  100.  
  101. /*LAYOUT */
  102. #wrapper {
  103.   width: 100vw;
  104.   height: auto;
  105.   font-family: "Open Sans", sans-serif;
  106.   font-size: 16px;
  107. }
  108.  
  109. /*header*/
  110. header {
  111.   position: fixed;
  112.   top: 0;
  113.   width: 100%;
  114.   display: flex;
  115.   flex-direction: column;
  116.   border-bottom: 15px solid var(--color-background);
  117.   z-index: 1;
  118. }
  119.  
  120. /*top menu bar*/
  121. #menu {
  122.   background: var(--color-accent);
  123. }
  124.  
  125. #menu, #menu a, #filter-nav, #filter-nav a {
  126.   display: flex;
  127.   align-items: center;
  128.   height: 50px;
  129. }
  130.  
  131. #filter-nav {
  132.   display: var(--display-filters);
  133. }
  134.  
  135. #menu a, #filter-nav a {
  136.   padding: 0 25px;
  137.   color: var(--color-accent-text);
  138.   font-family: "Chivo";
  139.   font-size: 14px;
  140.   text-transform: uppercase;
  141. }
  142.  
  143. #menu a:hover {
  144.   background: rgba(172, 172, 172, 0.3);
  145. }
  146.  
  147. #social {
  148.   width: auto;
  149.   display: flex;
  150.   justify-self: flex-end;
  151.   margin-left: auto;
  152.   background: var(--color-description);
  153. }
  154.  
  155. #social a.tiles {
  156.   padding: 0;
  157. }
  158.  
  159. /*description*/
  160.  
  161. #desc {
  162.   height: auto;
  163.   min-height: 150px;
  164.   width: 100%;
  165.   background: var(--color-description);
  166.   padding: 40px;
  167.   display: flex;
  168. }
  169.  
  170. #desc h1 {
  171.   font-size: 28px;
  172.   padding: 0 40px 0 0;
  173. }
  174.  
  175. /*filter navigation*/
  176. #filter-nav {
  177.   background: var(--color-accent-text);
  178. }
  179.  
  180. #filter-nav a {
  181.   color: var(--color-accent);
  182.   flex: 1;
  183. }
  184.  
  185. #filter-nav a:nth-of-type(2n - 1) {
  186.   background: rgba(172,172,172,0.2);
  187. }
  188. #filter-nav a:nth-of-type(2n) {
  189.   background: rgba(172,172,172,0.1);
  190. }
  191.  
  192. /*ICON TILE STYLE*/
  193. .tiles, .fab, .far, .fas, .th {
  194.   display: flex;
  195.   align-items: center;
  196.   height: 50px;
  197.   width: 50px;
  198.   background: var(--color-accent-text);
  199.   justify-content: center;
  200.   flex-direction: row;
  201.   font-size: 20px;
  202.   color: var(--color-accent);
  203. }
  204.  
  205. .tiles i {
  206.   color: var(--color-accent);
  207.   font-size: 20px;
  208. }
  209.  
  210. #social :nth-of-type(2n - 1) {
  211.   background: rgba(172,172,172,0.05);
  212. }
  213.  
  214. /*MAIN*/
  215. main {
  216.   display: flex;
  217.   flex-direction: row;
  218.   width: 100%;
  219.   flex-wrap: wrap;
  220.   height: auto;
  221. }
  222.  
  223.  
  224.  
  225. /*item box*/
  226. main .col {
  227.   flex: 1;
  228.   min-width: 250px;
  229.   flex: 1 0 25%;
  230.   height: auto;
  231. }
  232.  
  233. main .col:nth-of-type(2n-1) {background: rgba(172,172,172,0.1);}
  234. main .col:nth-of-type(2n-1) li {background: var(--color-background);}
  235.  
  236. .heading {
  237.   display: flex;
  238.   align-items: center;
  239.   background: rgba(172,172,172,0.2);
  240. }
  241.  
  242. .heading .fab, .heading .far, .heading .fas, .heading .th {
  243.   color: var(--color-accent-text);
  244.   background: var(--color-accent);
  245. }
  246.  
  247. .heading h2 {
  248.   padding: 0 25px;
  249.   color: var(--color-accent);
  250.   font-family: 'Chivo';
  251.   text-transform: uppercase;
  252.   font-size: 16px;
  253.   font-weight: normal;
  254. }
  255.  
  256. main .col ul {
  257.   padding: 50px;
  258. }
  259.  
  260. main .col li {
  261.   margin: 5px 0;
  262.  
  263. }
  264.  
  265. main .col li {
  266.   background: rgba(172,172,172,0.1);
  267. }
  268.  
  269. main .col li a {
  270.   color: var(--color-text);
  271.   display: block;
  272.   padding: 10px 20px;
  273. }
  274.  
  275. main .col li a:hover {
  276.   color: var(--color-accent-text);
  277.   background: var(--color-accent);
  278. }
  279.  
  280. #nnspc, #copyright {
  281.     position: fixed !important;
  282.     bottom: 50px;
  283. }
  284.  
  285. #copyright {
  286.   display: none;
  287. }
  288.  
  289.   </style>
  290.  
  291.   </head>
  292.   <body>
  293.     <div id='wrapper'>
  294.       <header>
  295.         <div id='menu'>
  296.           <i class='far fa-moon'></i>
  297.           <a href='/' title='Home'>Home</a>
  298.           <a href='/' title='Message'>Message</a>
  299.           <div id='social'>
  300.             <a class='tiles' href='/' title='Twitter'>
  301.               <i class='fab fa-twitter'></i>
  302.             </a>
  303.             <a class='tiles' href='/' title='Instagram'>
  304.               <i class='fab fa-instagram'></i>
  305.             </a>
  306.             <a class='tiles' href='/' title='Pinterest'>
  307.               <i class='fab fa-pinterest-p'></i>
  308.             </a>
  309.           </div>
  310.         </div>
  311.         <div id='desc'>
  312.           <h1>Navigation</h1>
  313.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.
  314.         </div>
  315.         <div id="filter-nav">
  316.           <a href='#' data-filter='*' title='All'>All</a>
  317.           <a href='#' data-filter='.f1' title='Filter One'>Filter One</a>
  318.           <a href='#' data-filter='.f2' title='Filter Two'>Filter Two</a>
  319.           <a href='#' data-filter='.f3' title='Filter Three'>Filter Three</a>
  320.           <a href='#' data-filter='.f4' title='Filter Four'>Filter Four</a>
  321.           <a href='#' data-filter='.f5' title='Filter Five'>Filter Five</a>
  322.         </div>
  323.       </header>
  324.       <main>
  325.  
  326.           <div class='col f1'>
  327.             <div class='heading'>
  328.               <i class='fas fa-user'></i>
  329.               <h2>headline</h2>
  330.             </div>
  331.             <ul>
  332.               <li><a href="/">Link One</a></li>
  333.               <li><a href="/">Link Two</a></li>
  334.               <li><a href="/">Link Three</a></li>
  335.               <li><a href="/">Link Four</a></li>
  336.               <li><a href="/">Link Five</a></li>
  337.               <li><a href="/">Link Six</a></li>
  338.             </ul>
  339.           </div>
  340.           <div class='col f2'>
  341.             <div class='heading'>
  342.               <i class='fas fa-user tiles'></i>
  343.               <h2>headline</h2>
  344.             </div>
  345.             <ul>
  346.               <li><a href="/">Link One</a></li>
  347.               <li><a href="/">Link Two</a></li>
  348.               <li><a href="/">Link Three</a></li>
  349.               <li><a href="/">Link Four</a></li>
  350.               <li><a href="/">Link Five</a></li>
  351.               <li><a href="/">Link Six</a></li>
  352.             </ul>
  353.           </div>
  354.           <div class='col f3'>
  355.             <div class='heading'>
  356.               <i class='fas fa-user tiles'></i>
  357.               <h2>headline</h2>
  358.             </div>
  359.             <ul>
  360.               <li><a href="/">Link One</a></li>
  361.               <li><a href="/">Link Two</a></li>
  362.               <li><a href="/">Link Three</a></li>
  363.               <li><a href="/">Link Four</a></li>
  364.               <li><a href="/">Link Five</a></li>
  365.               <li><a href="/">Link Six</a></li>
  366.             </ul>
  367.           </div>
  368.           <div class='col f4'>
  369.             <div class='heading'>
  370.               <i class='fas fa-user tiles'></i>
  371.               <h2>headline</h2>
  372.             </div>
  373.             <ul>
  374.               <li><a href="/">Link One</a></li>
  375.               <li><a href="/">Link Two</a></li>
  376.               <li><a href="/">Link Three</a></li>
  377.               <li><a href="/">Link Four</a></li>
  378.               <li><a href="/">Link Five</a></li>
  379.               <li><a href="/">Link Six</a></li>
  380.             </ul>
  381.           </div>
  382.  
  383.  
  384.           <div class='col f5'>
  385.             <div class='heading'>
  386.               <i class='fas fa-user tiles'></i>
  387.               <h2>headline</h2>
  388.             </div>
  389.             <ul>
  390.               <li><a href="/">Link One</a></li>
  391.               <li><a href="/">Link Two</a></li>
  392.               <li><a href="/">Link Three</a></li>
  393.               <li><a href="/">Link Four</a></li>
  394.               <li><a href="/">Link Five</a></li>
  395.               <li><a href="/">Link Six</a></li>
  396.             </ul>
  397.           </div>
  398.           <div class='col f1'>
  399.             <div class='heading'>
  400.               <i class='fas fa-user tiles'></i>
  401.               <h2>headline</h2>
  402.             </div>
  403.             <ul>
  404.               <li><a href="/">Link One</a></li>
  405.               <li><a href="/">Link Two</a></li>
  406.               <li><a href="/">Link Three</a></li>
  407.               <li><a href="/">Link Four</a></li>
  408.               <li><a href="/">Link Five</a></li>
  409.               <li><a href="/">Link Six</a></li>
  410.             </ul>
  411.           </div>
  412.           <div class='col f2'>
  413.             <div class='heading'>
  414.               <i class='fas fa-user tiles'></i>
  415.               <h2>headline</h2>
  416.             </div>
  417.             <ul>
  418.               <li><a href="/">Link One</a></li>
  419.               <li><a href="/">Link Two</a></li>
  420.               <li><a href="/">Link Three</a></li>
  421.               <li><a href="/">Link Four</a></li>
  422.               <li><a href="/">Link Five</a></li>
  423.               <li><a href="/">Link Six</a></li>
  424.             </ul>
  425.           </div>
  426.           <div class='col f2'>
  427.             <div class='heading'>
  428.               <i class='fas fa-user tiles'></i>
  429.               <h2>headline</h2>
  430.             </div>
  431.             <ul>
  432.               <li><a href="/">Link One</a></li>
  433.               <li><a href="/">Link Two</a></li>
  434.               <li><a href="/">Link Three</a></li>
  435.               <li><a href="/">Link Four</a></li>
  436.               <li><a href="/">Link Five</a></li>
  437.               <li><a href="/">Link Six</a></li>
  438.             </ul>
  439.           </div>
  440.  
  441.  
  442.           <div class='col f1'>
  443.             <div class='heading'>
  444.               <i class='fas fa-user tiles'></i>
  445.               <h2>headline</h2>
  446.             </div>
  447.             <ul>
  448.               <li><a href="/">Link One</a></li>
  449.               <li><a href="/">Link Two</a></li>
  450.               <li><a href="/">Link Three</a></li>
  451.               <li><a href="/">Link Four</a></li>
  452.               <li><a href="/">Link Five</a></li>
  453.               <li><a href="/">Link Six</a></li>
  454.             </ul>
  455.           </div>
  456.           <div class='col f3'>
  457.             <div class='heading'>
  458.               <i class='fas fa-user tiles'></i>
  459.               <h2>headline</h2>
  460.             </div>
  461.             <ul>
  462.               <li><a href="/">Link One</a></li>
  463.               <li><a href="/">Link Two</a></li>
  464.               <li><a href="/">Link Three</a></li>
  465.               <li><a href="/">Link Four</a></li>
  466.               <li><a href="/">Link Five</a></li>
  467.               <li><a href="/">Link Six</a></li>
  468.             </ul>
  469.           </div>
  470.           <div class='col f4'>
  471.             <div class='heading'>
  472.               <i class='fas fa-user tiles'></i>
  473.               <h2>headline</h2>
  474.             </div>
  475.             <ul>
  476.               <li><a href="/">Link One</a></li>
  477.               <li><a href="/">Link Two</a></li>
  478.               <li><a href="/">Link Three</a></li>
  479.               <li><a href="/">Link Four</a></li>
  480.               <li><a href="/">Link Five</a></li>
  481.               <li><a href="/">Link Six</a></li>
  482.             </ul>
  483.           </div>
  484.           <div class='col f1'>
  485.             <div class='heading'>
  486.               <i class='fas fa-user tiles'></i>
  487.               <h2>headline</h2>
  488.             </div>
  489.             <ul>
  490.               <li><a href="/">Link One</a></li>
  491.               <li><a href="/">Link Two</a></li>
  492.               <li><a href="/">Link Three</a></li>
  493.               <li><a href="/">Link Four</a></li>
  494.               <li><a href="/">Link Five</a></li>
  495.               <li><a href="/">Link Six</a></li>
  496.             </ul>
  497.           </div>
  498.  
  499.       </main>
  500.     </div>
  501.  
  502.     <div id="copyright" style="position: fixed; bottom: 0; right: 0; padding: 10px; background: var(--color-accent); z-index: 8;"><a style="font-family: helvetica; font-weight: bold; letter-spacing: -1px; color: var(--color-accent-text);" href="https://nonspace.tumblr.com">nonspace.</a></div>
  503.  
  504.     <script>
  505.       /*ISOTOPE*/
  506.       /*NO LAYOUT*/
  507.       Isotope.Item.prototype._create = function() {
  508.       // assign id, used for original-order sorting
  509.         this.id = this.layout.itemGUID++;
  510.         // transition objects
  511.         this._transn = {
  512.           ingProperties: {},
  513.           clean: {},
  514.           onEnd: {}
  515.         };
  516.         this.sortData = {};
  517.       };
  518.  
  519.       Isotope.prototype.arrange = function(opts) {
  520.         // set any options pass
  521.         this.option(opts);
  522.         this._getIsInstant();
  523.         // just filter
  524.         this.filteredItems = this._filter(this.items);
  525.         // flag for initalized
  526.         this._isLayoutInited = true;
  527.       };
  528.  
  529.  
  530.       /*FILTER*/
  531.       var $grid = $('main').isotope({
  532.         itemSelector: '.col',
  533.         stagger: 30,
  534.         layoutMode: 'none'
  535.       });
  536.  
  537.       $('#filter-nav a').on('click', function() {
  538.         var filterValue = $(this).attr('data-filter');
  539.         $grid.isotope({
  540.           filter: filterValue
  541.         });
  542.         e.preventDefault();
  543.       });
  544.  
  545.       function calcMainMargin() {
  546.         var headerHeight = $('header').outerHeight();
  547.  
  548.         $('main').css({
  549.           'margin-top' : headerHeight,
  550.         })
  551.       }
  552.  
  553.       calcMainMargin();
  554.  
  555.       $(window).resize(function() {
  556.         calcMainMargin();
  557.       });
  558.  
  559.       if (typeof window.iExist == 'undefined') {
  560.         $('#copyright').css({
  561.           'display' : 'block',
  562.         });
  563.       }
  564.     </script>
  565.   </body>
  566. </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!