nonspace

PAGE #04 :: AFTERIMAGE (Light)

Aug 1st, 2018
247
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 28.10 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!--THEME #4: AFTERIMAGE (Light) by @nonspace.
  4.  Don't steal.
  5.  Don't claim as your own.
  6.  Don't use as base code.
  7.  Editing for personal use is fine!-->
  8.  
  9. <html>
  10.  
  11. <head>
  12.  
  13.     <title>{Title}</title>
  14.     <link rel="icon" type="image/png" href="{Favicon}">
  15.  
  16.     <!--FONTS-->
  17.     <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128|Libre+Barcode+39+Text" rel="stylesheet">
  18.  
  19.     <link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i&amp;subset=cyrillic,greek,hebrew,latin-ext,vietnamese" rel="stylesheet">
  20.  
  21.     <!--FONT AWESOME ICONS-->
  22.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  23.  
  24.     <!--JQUERY-->
  25.     <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  26.     <!--ISOTOPE PLUGIN https://isotope.metafizzy.co/ (for filtering)-->
  27.     <script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>
  28.  
  29.  
  30.     <style type="text/css">
  31.     /*SET GROUP COLORS*/
  32.     /*This is where you can set the colours for every group. These will  
  33.       apply to:
  34.         the triangles on the front card
  35.         info card: traits & character data background
  36.        the group legend at the bottom
  37.        
  38.    /*WANT MORE GROUPS/COLOURS?*/
  39.    /*This will require a bit of knowledge of mostly CSS. You can add more
  40.      variables as seen below. You'll also have to add these variables to
  41.      the respective style groups at the bottom of the style, there's a
  42.      headline. If you're having trouble with this let me know!*/
  43.    
  44.    :root {
  45.        /*GROUP 1*/
  46.        --g1: #ff9600;
  47.         /*GROUP 2*/
  48.         --g2: #f7136f;
  49.         /*GROUP 3*/
  50.         --g3: #ff9600;
  51.         /*GROUP 4*/
  52.         --g4: #247677;
  53.         /*GROUP 5*/
  54.         --g5: #ff9600;
  55.        
  56.         /*ADDITIONAL COLOURS
  57.         --g6: #ff9600;
  58.         --g7: #ff9600;
  59.         --g8: #ff9600;
  60.         --g9: #ff9600;
  61.         --g10: #ff9600;*/
  62.     }
  63.     html,
  64.     body {
  65.         padding: 0px;
  66.         margin: 0px;
  67.         font-family: 'Arimo', Helvetica, sans-serif;
  68.         min-height: 100%;
  69.     }
  70.     body {
  71.         overflow: auto;
  72.         background: -webkit-linear-gradient(left top, #f1f1f1, #d6d9d6);
  73.         /* For Safari 5.1 to 6.0 */
  74.        
  75.         background: -o-linear-gradient(bottom right, #f1f1f1, #d6d9d6);
  76.         /* For Opera 11.1 to 12.0 */
  77.        
  78.         background: -moz-linear-gradient(bottom right, #f1f1f1, #d6d9d6);
  79.         /* For Firefox 3.6 to 15 */
  80.        
  81.         background: linear-gradient(to bottom right, #f1f1f1, #d6d9d6);
  82.         /* Standard syntax */
  83.     }
  84.     #container {
  85.         position: relative;
  86.         margin: 5% auto;
  87.         width: 891px;
  88.         height: auto;
  89.         vertical-align: center;
  90.     }
  91.    
  92.    
  93.     /*HEADER*/
  94.    
  95.     header {
  96.         margin: 0px;
  97.         position: relative;
  98.         height: 150px;
  99.         background: rgba(255, 255, 255, 0.3);
  100.     }
  101.     h1 {
  102.         font-family: Helvetica, sans-serif;
  103.         font-size: 50px;
  104.         margin: 10px 0px;
  105.     }
  106.     header .sub {
  107.         font-size: 30px;
  108.         font-family: 'Libre Barcode 128';
  109.     }
  110.     article#desc {
  111.         float: left;
  112.         height: 100%;
  113.         width: auto;
  114.         left: 0;
  115.         right: 0;
  116.         margin: 0px auto;
  117.         text-align: left;
  118.         padding-left: 20px;
  119.     }
  120.     /*LINKS*/
  121.     nav a {
  122.         font-family: 'Helvetica';
  123.         text-decoration: none;
  124.         text-transform: uppercase;
  125.         font-size: 11px;
  126.         padding: 0 15px;
  127.         color: #000;
  128.     }
  129.     nav a:first-child {
  130.         padding-left: 0px;
  131.     }
  132.     article#desctxt {
  133.         float: right;
  134.         width: 450px;
  135.         max-height: 96px;
  136.         margin: 25px 17px;
  137.         padding-right: 15px;
  138.         text-align: justify;
  139.         line-height: 140%;
  140.         font-size: 12px;
  141.         overflow-y: scroll;
  142.     }
  143.     article#desctxt b {
  144.         text-transform: uppercase;
  145.     }
  146.    
  147.     /*CHARACTER CARD GALLERY*/
  148.     #gallery {
  149.         position: relative;
  150.         padding: 45px 0px 20px;
  151.         overflow-x: hidden;
  152.         overflow-y: hidden;
  153.         height: auto;
  154.         margin: 0px 0px 25px 0px;
  155.         text-align: justify;
  156.     }
  157.     #gallery-track {
  158.         position: relative;
  159.         width: auto;
  160.         display: -webkit-flex; /* Safari */
  161.         -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  162.         display: flex;
  163.         flex-wrap: wrap;
  164.         flex-direction: row;
  165.         padding-right: -10px;
  166.         margin: -10px;
  167.         height: auto;
  168.     }
  169.     /*CHARACTER BOXES*/
  170.     .cbox {
  171.         position: relative;
  172.         height: 160px;
  173.         width: 160px;
  174.         flex: 0 0 0px;
  175.         margin: 11px 11.1px;
  176.         -webkit-transition: all 1s ease;
  177.         -moz-transition: all 1s ease;
  178.         -ms-transition: all 1s ease;
  179.         transition: all 1s ease;
  180.     }
  181.     .cbox img {
  182.         height: 160px;
  183.         width: 160px;
  184.         -webkit-filter: grayscale(100%);
  185.         filter: grayscale(100%);
  186.         -webkit-transition: all 1s ease;
  187.         -moz-transition: all 1s ease;
  188.         -ms-transition: all 1s ease;
  189.         transition: all 1s ease;
  190.         -webkit-backface-visibility: hidden;
  191.         backface-visibility: hidden;
  192.     }
  193.     .cbox {}
  194.     /*CHARACTER NAME*/
  195.     .cname {
  196.         position: absolute;
  197.         height: 90px;
  198.         width: 160px;
  199.         right: 0;
  200.         transform: rotate(-90deg) translate(0, -100%);
  201.         transform-origin: 100% 0;
  202.         display: table;
  203.         z-index: 2;
  204.         -webkit-backface-visibility: hidden;
  205.         backface-visibility: hidden;
  206.         -webkit-user-select: none;
  207.         -moz-user-select: none;
  208.         -ms-user-select: none;
  209.         user-select: none;
  210.     }
  211.     .cname span {
  212.         font-family: Helvetica;
  213.         line-height: 78%;
  214.         color: rgba(0, 0, 0, 0.4);
  215.         font-weight: bold;
  216.         text-transform: uppercase;
  217.         display: table-cell;
  218.         vertical-align: bottom;
  219.         /*padding-bottom: 0px; adjust for positioning*/
  220.     }
  221.     .triangle {
  222.         position: absolute;
  223.         width: 0px;
  224.         height: 0px;
  225.         bottom: 0px;
  226.         border-style: solid;
  227.         border-width: 0px 0px 160px 160px;
  228.         border-color: transparent transparent transparent transparent;
  229.         z-index: 1;
  230.         -webkit-transition: all 1s ease;
  231.         -moz-transition: all 1s ease;
  232.         -ms-transition: all 1s ease;
  233.         transition: all 1s ease;
  234.         -webkit-user-select: none;
  235.         -moz-user-select: none;
  236.         -ms-user-select: none;
  237.         user-select: none;
  238.         -webkit-backface-visibility: hidden;
  239.         backface-visibility: hidden;
  240.     }
  241.    
  242.     /*GROUP SELECTION STYLES*/
  243.    
  244.     footer {
  245.         position: relative;
  246.         margin: 30px 0 0 0;
  247.         padding: 0px;
  248.         width: auto;
  249.         height: 50px;
  250.         background: rgba(255, 255, 255, 0.3);
  251.     }
  252.     #legend {
  253.         position: relative;
  254.         width: auto;
  255.         height: 50px;
  256.         margin: 0 auto;
  257.         text-align: center;
  258.     }
  259.     /*GROUP LINK SQUARES*/
  260.     .square {
  261.         position: relative;
  262.         height: 10px;
  263.         font-size: 9px;
  264.         padding: 5px 5px;
  265.         display: inline-block;
  266.         margin: 15px 5px;
  267.         border-radius: 5px;
  268.         color: #fff;
  269.         font-family: helvetica;
  270.         text-transform: uppercase;
  271.     }
  272.    
  273.     /*GROUP COLOURS*/
  274.    
  275.     /*LEGEND & TRAITS & INFO DATA*/
  276.    /*GROUP 1*/
  277.    #legend .g1,
  278.    .ctraits.g1 span,
  279.    .cell1.g1 li,
  280.    .cell2.g1 li {
  281.        background: var(--g1);
  282.     }
  283.     /*GROUP 2*/
  284.     #legend .g2,
  285.     .ctraits.g2 span,
  286.     .cell1.g2 li,
  287.     .cell2.g2 li {
  288.         background: var(--g2);
  289.     }
  290.     /*GROUP 3*/
  291.     #legend .g3,
  292.     .ctraits.g3 span,
  293.     .cell1.g3 li,
  294.     .cell2.g3 li {
  295.         background: var(--g3);
  296.     }
  297.     /*GROUP 4*/
  298.     #legend .g4,
  299.     .ctraits.g4 span,
  300.     .cell1.g4 li,
  301.     .cell2.g4 li {
  302.         background: var(--g4);
  303.     }
  304.     /*GROUP 5*/
  305.     #legend .g5,
  306.     .ctraits.g5 span,
  307.     .cell1.g5 li,
  308.     .cell2.g5 li {
  309.         background: var(--g5);
  310.     }
  311.    
  312.     /*TRIANGLE*/
  313.     /*GROUP 1*/
  314.     .triangle.g1 {
  315.         border-color: transparent /*var(--g1) var(--g1)*/ transparent;
  316.     }
  317.     /*GROUP 2*/
  318.     .triangle.g2 {
  319.         border-color: transparent /*var(--g2) var(--g2)*/ transparent;
  320.     }
  321.     /*GROUP 3*/
  322.     .triangle.g3 {
  323.         border-color: transparent /*var(--g3) var(--g3)*/ transparent;
  324.     }
  325.     /*GROUP 4*/
  326.     .triangle.g4 {
  327.         border-color: transparent /*var(--g4) var(--g4)*/ transparent;
  328.     }
  329.     /*GROUP 5*/
  330.     .triangle.g5 {
  331.         border-color: transparent /*var(--g5) var(--g5)*/ transparent;
  332.     }
  333.    
  334.    
  335.     /*HOVER STYLES*/
  336.    
  337.     #legend:hover {
  338.         cursor: pointer;
  339.     }
  340.     .cbox:hover > img {
  341.         -webkit-filter: grayscale(0%);
  342.         filter: grayscale(0%);
  343.     }
  344.    
  345.    
  346.     /*SCROLLBAR STYLES*/
  347.    
  348.     ::-webkit-scrollbar {
  349.         width: 5px;
  350.         height: 5px;
  351.     }
  352.     ::-webkit-scrollbar-track {
  353.         border-radius: 1px;
  354.         background-color: #f8f8f8;
  355.     }
  356.     ::-webkit-scrollbar-thumb {
  357.         border-radius: 1px;
  358.         background-color: #ddd;
  359.     }
  360.     article#desctxt::-webkit-scrollbar-track {
  361.         border-radius: 1px;
  362.         background: -webkit-linear-gradient(bottom, #ecedee, #eceeec 100%);
  363.     }
  364.     article#desctxt::-webkit-scrollbar-thumb {
  365.         border-radius: 1px;
  366.         background: -webkit-linear-gradient(top, #ddd, #eee 100%);
  367.         /*background: -webkit-linear-gradient(top, #edeeed, #eceeec 100%);          if transparent*/
  368.     }
  369.    
  370.     </style>
  371. </head>
  372. <body>
  373.  
  374.   <div id="container">
  375.    
  376.     <!--HEADER-->
  377.       <header>
  378.      
  379.         <!--TITLE & LINKS-->
  380.         <article id="desc">
  381.           <h1>afterimage.</h1>
  382.           <span class="sub">sdkjglskjdglsjkglsjglskjdlgjsklj</span>
  383.          
  384.           <!--HEADER LINKS-->
  385.           <!--enter URL for your about page-->
  386.           <nav>
  387.             <a href="/">
  388.                 <i class="fa fa-home" aria-hidden="true"></i>
  389.                 Home</a>
  390.             <a href="/YOURABOUTPAGE">
  391.                 <i class="fa fa-user" aria-hidden="true"></i>
  392.                 About</a>
  393.             <a href="/ask">
  394.                 <i class="fa fa-envelope" aria-hidden="true"></i>
  395.                 Message</a>
  396.             <!--CREDIT, DON'T CHANGE!!!-->
  397.             <a href="https://nonspace.tumblr.com">
  398.                 <i class="fa fa-copyright" aria-hidden="true"></i>
  399.                 NNSPC</a>
  400.           </nav>
  401.         </article>
  402.        
  403.         <!--DESCRIPTION-->
  404.         <article id="desctxt">
  405.             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <b>dolore magna</b> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.            
  406.         </article>
  407.        
  408.       </header>
  409.      
  410.       <footer>
  411.         <div id="legend">
  412.          
  413.           <!--GROUP LEGEND-->
  414.           <!--The 'g#' in the 'square' class sets the color for the group
  415.          (see variables at the top of CSS).
  416.          The data-filter is for sorting on click. You can add several
  417.          groups to a link: group AND group, group OR group etc. You can
  418.          read more here: https://isotope.metafizzy.co/filtering.html-->
  419.           <div class="square" data-filter="*" style="background: #7a7a7a;">               all</div>
  420.           <div class="square g1" data-filter=".g1">group</div>
  421.           <div class="square g2" data-filter=".g2">group</div>
  422.           <div class="square g3" data-filter=".g3">group</div>
  423.           <div class="square g4" data-filter=".g4">group</div>
  424.           <div class="square g5" data-filter=".g5">group</div>
  425.           <!--ADDITIONAL GROUPS
  426.          <div class="square g6" data-filter=".g6">group</div>
  427.          <div class="square g7" data-filter=".g7">group</div>
  428.          <div class="square g8" data-filter=".g8">group</div>
  429.          <div class="square g9" data-filter=".g9">group</div>
  430.          <div class="square g10" data-filter=".g10">group</div>-->
  431.          
  432.         </div><!--legend-->
  433.       </footer>
  434.      
  435.       <!--HOW TO ADD GROUPS-->
  436.       <!--To add a group (g1-g5) you need to add the respective group as a
  437.      second class to the cbox (class="cbox GROUPNUMBER").
  438.      You can add several groups to one card, however, the first group
  439.      determines the card colour.-->
  440.          
  441.      
  442.       <!--CHARACTER BOXES-->
  443.       <section id="gallery">
  444.         <div id="gallery-track">
  445.      
  446.         <!--CHARACTER ONE-->
  447.        
  448.         <div class="cbox g1" href="#c1">
  449.           <div class="cname">
  450.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  451.            change the opacity of the names in the CSS-->
  452.             <span style="font-size: 45px;">
  453.             FIRST <br />
  454.             LASTN
  455.             </span>
  456.           </div> <!--cname-->
  457.           <div class="triangle"></div>
  458.          
  459.           <img src="https://placehold.it/160x160"></img>
  460.         </div> <!--cbox-->
  461.        
  462.        
  463.         <!--CHARACTER TWO-->
  464.        
  465.         <div class="cbox g2" href="#c2">
  466.           <div class="cname">
  467.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  468.            change the opacity of the names in the CSS-->
  469.             <span style="font-size: 45px;">
  470.             FIRST <br />
  471.             LASTN
  472.             </span>
  473.           </div> <!--cname-->
  474.           <div class="triangle"></div>
  475.          
  476.           <img src="https://placehold.it/160x160"></img>
  477.         </div> <!--cbox-->
  478.        
  479.        
  480.         <!--CHARACTER THREE-->
  481.        
  482.         <div class="cbox g3" href="#c3">
  483.           <div class="cname">
  484.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  485.            change the opacity of the names in the CSS-->
  486.             <span style="font-size: 45px;">
  487.             FIRST <br />
  488.             LASTN
  489.             </span>
  490.           </div> <!--cname-->
  491.           <div class="triangle"></div>
  492.          
  493.           <img src="https://placehold.it/160x160"></img>
  494.         </div> <!--cbox-->
  495.        
  496.        
  497.         <!--CHARACTER FOUR-->
  498.        
  499.         <div class="cbox g4" href="#c4">
  500.           <div class="cname">
  501.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  502.            change the opacity of the names in the CSS-->
  503.             <span style="font-size: 45px;">
  504.             FIRST <br />
  505.             LASTN
  506.             </span>
  507.           </div> <!--cname-->
  508.           <div class="triangle"></div>
  509.          
  510.           <img src="https://placehold.it/160x160"></img>
  511.         </div> <!--cbox-->
  512.    
  513.        
  514.         <!--CHARACTER FIVE-->
  515.        
  516.         <div class="cbox g5" href="#c5">
  517.           <div class="cname">
  518.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  519.            change the opacity of the names in the CSS-->
  520.             <span style="font-size: 45px;">
  521.             FIRST <br />
  522.             LASTN
  523.             </span>
  524.           </div> <!--cname-->
  525.           <div class="triangle"></div>
  526.          
  527.           <img src="https://placehold.it/160x160"></img>
  528.         </div> <!--cbox-->
  529.        
  530.        
  531.        
  532.         <!--CHARACTER SIX-->
  533.        
  534.         <div class="cbox g2" href="#c6">
  535.           <div class="cname">
  536.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  537.            change the opacity of the names in the CSS-->
  538.             <span style="font-size: 45px;">
  539.             FIRST <br />
  540.             LASTN
  541.             </span>
  542.           </div> <!--cname-->
  543.           <div class="triangle"></div>
  544.          
  545.           <img src="https://placehold.it/160x160"></img>
  546.         </div> <!--cbox-->
  547.        
  548.        
  549.         <!--CHARACTER SEVEN-->
  550.        
  551.         <div class="cbox g3" href="#c7">
  552.           <div class="cname">
  553.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  554.            change the opacity of the names in the CSS-->
  555.             <span style="font-size: 45px;">
  556.             FIRST <br />
  557.             LASTN
  558.             </span>
  559.           </div> <!--cname-->
  560.           <div class="triangle"></div>
  561.          
  562.           <img src="https://placehold.it/160x160"></img>
  563.         </div> <!--cbox-->
  564.        
  565.        
  566.         <!--CHARACTER EIGHT-->
  567.        
  568.         <div class="cbox g4" href="#c8">
  569.           <div class="cname">
  570.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  571.            change the opacity of the names in the CSS-->
  572.             <span style="font-size: 45px;">
  573.             FIRST <br />
  574.             LASTN
  575.             </span>
  576.           </div> <!--cname-->
  577.           <div class="triangle"></div>
  578.          
  579.           <img src="https://placehold.it/160x160"></img>
  580.         </div> <!--cbox-->
  581.        
  582.        
  583.         <!--CHARACTER NINE-->
  584.        
  585.         <div class="cbox g5" href="#c9">
  586.           <div class="cname">
  587.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  588.            change the opacity of the names in the CSS-->
  589.             <span style="font-size: 45px;">
  590.             FIRST <br />
  591.             LASTN
  592.             </span>
  593.           </div> <!--cname-->
  594.           <div class="triangle"></div>
  595.          
  596.           <img src="https://placehold.it/160x160"></img>
  597.         </div> <!--cbox-->
  598.        
  599.        
  600.         <!--CHARACTER TEN-->
  601.        
  602.         <div class="cbox g2" href="#c10">
  603.           <div class="cname">
  604.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  605.            change the opacity of the names in the CSS-->
  606.             <span style="font-size: 45px;">
  607.             FIRST <br />
  608.             LASTN
  609.             </span>
  610.           </div> <!--cname-->
  611.           <div class="triangle"></div>
  612.          
  613.           <img src="https://placehold.it/160x160"></img>
  614.         </div> <!--cbox-->
  615.        
  616.        
  617.        
  618.          <!--CHARACTER ELEVEN-->
  619.        
  620.         <div class="cbox g2" href="#c11">
  621.           <div class="cname">
  622.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  623.            change the opacity of the names in the CSS-->
  624.             <span style="font-size: 45px;">
  625.             FIRST <br />
  626.             LASTN
  627.             </span>
  628.           </div> <!--cname-->
  629.           <div class="triangle"></div>
  630.          
  631.           <img src="https://placehold.it/160x160"></img>
  632.         </div> <!--cbox-->
  633.        
  634.        
  635.         <!--CHARACTER TWELVE-->
  636.        
  637.         <div class="cbox g3" href="#c12">
  638.           <div class="cname">
  639.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  640.            change the opacity of the names in the CSS-->
  641.             <span style="font-size: 45px;">
  642.             FIRST <br />
  643.             LASTN
  644.             </span>
  645.           </div> <!--cname-->
  646.           <div class="triangle"></div>
  647.          
  648.           <img src="https://placehold.it/160x160"></img>
  649.         </div> <!--cbox-->
  650.        
  651.        
  652.         <!--CHARACTER THIRTEEN-->
  653.        
  654.         <div class="cbox g4" href="#c13">
  655.           <div class="cname">
  656.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  657.            change the opacity of the names in the CSS-->
  658.             <span style="font-size: 45px;">
  659.             FIRST <br />
  660.             LASTN
  661.             </span>
  662.           </div> <!--cname-->
  663.           <div class="triangle"></div>
  664.          
  665.           <img src="https://placehold.it/160x160"></img>
  666.         </div> <!--cbox-->
  667.        
  668.        
  669.         <!--CHARACTER FOURTREEN-->
  670.        
  671.         <div class="cbox g5" href="#c14">
  672.           <div class="cname">
  673.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  674.            change the opacity of the names in the CSS-->
  675.             <span style="font-size: 45px;">
  676.             FIRST <br />
  677.             LASTN
  678.             </span>
  679.           </div> <!--cname-->
  680.           <div class="triangle"></div>
  681.          
  682.           <img src="https://placehold.it/160x160"></img>
  683.         </div> <!--cbox-->
  684.        
  685.        
  686.         <!--CHARACTER FIFTEEN-->
  687.        
  688.         <div class="cbox g2" href="#c15">
  689.           <div class="cname">
  690.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  691.            change the opacity of the names in the CSS-->
  692.             <span style="font-size: 45px;">
  693.             FIRST <br />
  694.             LASTN
  695.             </span>
  696.           </div> <!--cname-->
  697.           <div class="triangle"></div>
  698.          
  699.           <img src="https://placehold.it/160x160"></img>
  700.         </div> <!--cbox-->
  701.        
  702.        
  703.        
  704.          <!--CHARACTER SIXTEEN-->
  705.        
  706.         <div class="cbox g2" href="#c16">
  707.           <div class="cname">
  708.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  709.            change the opacity of the names in the CSS-->
  710.             <span style="font-size: 45px;">
  711.             FIRST <br />
  712.             LASTN
  713.             </span>
  714.           </div> <!--cname-->
  715.           <div class="triangle"></div>
  716.          
  717.           <img src="https://placehold.it/160x160"></img>
  718.         </div> <!--cbox-->
  719.        
  720.        
  721.         <!--CHARACTER SEVENTEEN-->
  722.        
  723.         <div class="cbox g3" href="#c17">
  724.           <div class="cname">
  725.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  726.            change the opacity of the names in the CSS-->
  727.             <span style="font-size: 45px;">
  728.             FIRST <br />
  729.             LASTN
  730.             </span>
  731.           </div> <!--cname-->
  732.           <div class="triangle"></div>
  733.          
  734.           <img src="https://placehold.it/160x160"></img>
  735.         </div> <!--cbox-->
  736.        
  737.        
  738.         <!--CHARACTER EIGHTTEEN-->
  739.        
  740.         <div class="cbox g4" href="#c18">
  741.           <div class="cname">
  742.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  743.            change the opacity of the names in the CSS-->
  744.             <span style="font-size: 45px;">
  745.             FIRST <br />
  746.             LASTN
  747.             </span>
  748.           </div> <!--cname-->
  749.           <div class="triangle"></div>
  750.          
  751.           <img src="https://placehold.it/160x160"></img>
  752.         </div> <!--cbox-->
  753.        
  754.        
  755.         <!--CHARACTER NINETEEN-->
  756.        
  757.         <div class="cbox g5" href="#c19">
  758.           <div class="cname">
  759.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  760.            change the opacity of the names in the CSS-->
  761.             <span style="font-size: 45px;">
  762.             FIRST <br />
  763.             LASTN
  764.             </span>
  765.           </div> <!--cname-->
  766.           <div class="triangle"></div>
  767.  
  768.           <img src="https://placehold.it/160x160"></img>
  769.         </div> <!--cbox-->
  770.        
  771.        
  772.         <!--CHARACTER TWENTY-->
  773.        
  774.         <div class="cbox g2" href="#c20">
  775.           <div class="cname">
  776.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  777.            change the opacity of the names in the CSS-->
  778.             <span style="font-size: 45px;">
  779.             FIRST <br />
  780.             LASTN
  781.             </span>
  782.           </div> <!--cname-->
  783.           <div class="triangle"></div>
  784.          
  785.           <img src="https://placehold.it/160x160"></img>
  786.         </div> <!--cbox-->
  787.        
  788.    
  789.        
  790.        </div> <!--gallery-track-->
  791.       </section>
  792.      
  793.      
  794.     </div><!--container-->
  795.  
  796.     <script type="text/javascript">
  797.    
  798.     $(document).ready(function() {
  799.        
  800.         /*TRIANGLE COLOR*/
  801.         $('.cbox').each(function() {
  802.             var groupClass = $(this).attr('class').split(" ")[1];
  803.  
  804.             $(this).find('.triangle').addClass(groupClass);
  805.  
  806.         });
  807.  
  808.  
  809.         /*ISOTOPE*/
  810.         /*NO LAYOUT*/
  811.         Isotope.Item.prototype._create = function() {
  812.             // assign id, used for original-order sorting
  813.             this.id = this.layout.itemGUID++;
  814.             // transition objects
  815.             this._transn = {
  816.                 ingProperties: {},
  817.                 clean: {},
  818.                 onEnd: {}
  819.             };
  820.             this.sortData = {};
  821.         };
  822.  
  823.         Isotope.prototype.arrange = function(opts) {
  824.             // set any options pass
  825.             this.option(opts);
  826.             this._getIsInstant();
  827.             // just filter
  828.             this.filteredItems = this._filter(this.items);
  829.             // flag for initalized
  830.             this._isLayoutInited = true;
  831.         };
  832.        
  833.        
  834.         /*FILTER*/
  835.         var $grid = $('#gallery-track').isotope({
  836.             itemSelector: '.cbox',
  837.             stagger: 30,
  838.             layoutMode: 'none'
  839.         });
  840.  
  841.         $('.square').on('click', function() {
  842.             $('.ccard').each(function() {
  843.                 $(this).removeClass('active');
  844.             });
  845.  
  846.             $('#gallery').animate({
  847.                 scrollLeft: 0
  848.             }, 800);
  849.  
  850.             var filterValue = $(this).attr('data-filter');
  851.             $grid.isotope({
  852.                 filter: filterValue
  853.             });
  854.  
  855.             e.preventDefault();
  856.         });
  857.        
  858.          /*FIX LEGEND ON SCROLL*/
  859.        
  860.         $(function($) {
  861.             function fixedLegend() {
  862.                 if ($(window).scrollTop() > 190)
  863.                     $('footer').css({
  864.                        'position': 'fixed',
  865.                        'width': '100%',
  866.                        'z-index': '3',
  867.                        'margin': '0 auto',
  868.                        'left': '0',
  869.                        'background': 'rgba(255, 255, 255, 0.8)',
  870.                        'top': '0px'
  871.                     });
  872.                    
  873.                
  874.                    
  875.                 else
  876.                     $('footer').css({
  877.                        'position': 'relative',
  878.                        'background': 'rgba(255, 255, 255, 0.3)',
  879.                        'margin': '30px 0 0 0',
  880.                        'top': 'auto'
  881.                     });
  882.             }
  883.        
  884.             $(window).scroll(fixedLegend);
  885.                 fixedLegend();
  886.             });
  887.  
  888.  
  889.     }); //DOCUMENT READY
  890.     </script>
  891.  </body>
  892. </html>
Advertisement
Add Comment
Please, Sign In to add comment