nonspace

PAGE #04 :: AFTERIMAGE (Compact)

Aug 1st, 2018
335
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 97.16 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!--THEME #4: AFTERIMAGE (Compact) 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.     }
  156.     #gallery-track {
  157.         position: relative;
  158.         width: auto;
  159.         display: -webkit-box;
  160.         display: -moz-box;
  161.         display: -ms-flexbox;
  162.         display: -webkit-flex; /* Safari */
  163.         -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  164.         display: flex;
  165.         flex-wrap: wrap;
  166.         flex-direction: row;
  167.         padding-right: -10px;
  168.         margin: -10px;
  169.         height: auto;
  170.     }
  171.     /*CHARACTER BOXES*/
  172.     .cbox {
  173.         position: relative;
  174.         height: 160px;
  175.         width: 160px;
  176.         flex: 0 0 0px;
  177.         margin: 11px 11.1px;
  178.         -webkit-transition: all 0.5s ease;
  179.         -moz-transition: all 0.5s ease;
  180.         -ms-transition: all 0.5s ease;
  181.         transition: all 0.5s ease;
  182.         -webkit-backface-visibility: hidden;
  183.         backface-visibility: hidden;
  184.     }
  185.     .cbox img {
  186.         height: 160px;
  187.         width: 160px;
  188.         -webkit-filter: grayscale(100%);
  189.         filter: grayscale(100%);
  190.         -webkit-transition: all 1s ease;
  191.         -moz-transition: all 1s ease;
  192.         -ms-transition: all 1s ease;
  193.         transition: all 1s ease;
  194.         -webkit-backface-visibility: hidden;
  195.         backface-visibility: hidden;
  196.     }
  197.    
  198.     /*CHARACTER NAME*/
  199.     .cname {
  200.         position: absolute;
  201.         height: 90px;
  202.         width: 160px;
  203.         right: 0;
  204.         transform: rotate(-90deg) translate(0, -100%);
  205.         transform-origin: 100% 0;
  206.         display: table;
  207.         z-index: 2;
  208.         -webkit-backface-visibility: hidden;
  209.         backface-visibility: hidden;
  210.         -webkit-user-select: none;
  211.         -moz-user-select: none;
  212.         -ms-user-select: none;
  213.         user-select: none;
  214.     }
  215.     .cname span {
  216.         font-family: Helvetica;
  217.         line-height: 78%;
  218.         color: rgba(0, 0, 0, 0.4);
  219.         font-weight: bold;
  220.         text-transform: uppercase;
  221.         display: table-cell;
  222.         vertical-align: bottom;
  223.         /*padding-bottom: 0px; adjust for positioning*/
  224.     }
  225.     .triangle {
  226.         position: absolute;
  227.         width: 0px;
  228.         height: 0px;
  229.         bottom: 0px;
  230.         border-style: solid;
  231.         border-width: 0px 0px 160px 160px;
  232.         border-color: transparent transparent transparent transparent;
  233.         z-index: 1;
  234.         -webkit-transition: all 0.5s ease;
  235.         -moz-transition: all 0.5s ease;
  236.         -ms-transition: all 0.5s ease;
  237.         transition: all 0.5s ease;
  238.         -webkit-user-select: none;
  239.         -moz-user-select: none;
  240.         -ms-user-select: none;
  241.         user-select: none;
  242.         -webkit-backface-visibility: hidden;
  243.         backface-visibility: hidden;
  244.     }
  245.    
  246.    
  247.     /*CONTENT CARD TAB NAVIGATION*/
  248.    
  249.     /*.cfooter {
  250.         position: absolute;
  251.         top: -30px;
  252.         width: 895px;
  253.         height: 17;
  254.         z-index: 2;
  255.         right: 0;
  256.         left: -180;
  257.         text-align: center;
  258.     }
  259.     .cfooter a {
  260.         color: #dbdbdb;
  261.         margin: 0 2px;
  262.     }*/
  263.    
  264.    
  265.     /*CONTENT CARDS*/
  266.    
  267.     .ccard {
  268.         display: none;
  269.         opacity: 0;
  270.         background: rgb(236,237,236);
  271.         width: 100%;
  272.         height: 370px;
  273.         padding: 0;
  274.         vertical-align: top;
  275.         webkit-animation-name: fadeIn;
  276.         -webkit-animation-duration: 0.5s;
  277.         animation-name: fadeIn;
  278.         animation-duration: 0.5s;
  279.     }
  280.     .ccontent {
  281.         position: relative;
  282.         width: 860px;
  283.         height: 340px;
  284.         margin: 15px auto;
  285.         display: none;
  286.         -webkit-transition: all 1s ease;
  287.         -moz-transition: all 1s ease;
  288.         -ms-transition: all 1s ease;
  289.         transition: all 1s ease;
  290.     }
  291.    
  292.    
  293.     /*BIO(1ST) TAB*/
  294.    
  295.     .cbio {
  296.         position: relative;
  297.         width: 650px;
  298.         height: 340px;
  299.     }
  300.     .headline {
  301.         position: relative;
  302.         width: 650px;
  303.         height: 80px;
  304.     }
  305.     .headline p {
  306.         margin: 0;
  307.         color: #7a7a7a;
  308.         font-size: 12px;
  309.         text-align: justify;
  310.         word-wrap: break-word;
  311.         white-space: normal;
  312.         overflow: hidden;
  313.         width: 635px;
  314.     }
  315.     h2 {
  316.         font-family: helvetica;
  317.         font-size: 30px;
  318.         margin: 0;
  319.         font-weight: normal;
  320.     }
  321.     /*first part of title*/
  322.     h2 span {
  323.         font-style: italic;
  324.         font-weight: normal;
  325.         color: #7a7a7a;
  326.     }
  327.     .flavorimg {
  328.         position: absolute;
  329.         bottom: 0;
  330.         right: 3px;
  331.         width: 180px;
  332.         height: 245px;
  333.         background-position: bottom right;
  334.         background-size: 100%;
  335.         background-repeat: no-repeat;
  336.         -webkit-filter: grayscale(100%);
  337.         filter: grayscale(100%);
  338.         -webkit-transition: all 1s ease;
  339.         -moz-transition: all 1s ease;
  340.         -ms-transition: all 1s ease;
  341.         transition: all 1s ease;
  342.     }
  343.     .biocontent {
  344.         position: relative;
  345.         height: 240px;
  346.         font-size: 14px;
  347.         text-align: justify;
  348.         line-height: 145%;
  349.         margin-top: 20px;
  350.         word-wrap: break-word;
  351.         white-space: normal;
  352.         overflow-y: auto;
  353.         overflow-x: hidden;
  354.         width: 635px;
  355.         padding-right: 22px;
  356.     }
  357.     /*GRID LINKS*/
  358.     .clinks {
  359.         display: grid;
  360.         position: absolute;
  361.         right: 0;
  362.         top: 0px;
  363.         height: 80px;
  364.         padding: 5px;
  365.         width: 180px;
  366.         grid-template-rows: repeat(2, 1fr);
  367.         grid-template-columns: repeat(3, 1fr);
  368.         grid-gap: 2px;
  369.     }
  370.     .clinks a {
  371.         display: flex;
  372.         justify-content: center;
  373.         align-items: center;
  374.         font-size: 20px;
  375.         color: #7a7a7a;
  376.         background: #dbdbdb;
  377.         text-decoration: none;
  378.     }
  379.     /*TRAITS*/
  380.     .ctraits {
  381.         height: 320px;
  382.         position: absolute;
  383.         right: 0;
  384.         top: 105px;
  385.         width: 180px;
  386.         font-family: helvetica;
  387.         text-align: left;
  388.         line-height: 130%;
  389.         font-size: 17px;
  390.         padding-right: 5px;
  391.         color: #fff;
  392.     }
  393.     .ctraits span {
  394.         padding: 3px 10px;
  395.     }
  396.     .ctraits p {
  397.         margin: 15px 0px;
  398.     }
  399.    
  400.    
  401.     /*INFO(2ND) TAB*/
  402.    
  403.     .cell1,
  404.     .cell2 {
  405.         height: auto;
  406.         width: 300px;
  407.         padding: 0 0 0 0;
  408.         margin: 0;
  409.         font-size: 14px;
  410.         overflow: hidden;
  411.     }
  412.     .cell1 {
  413.         float: left;
  414.     }
  415.     .cell2 {
  416.         float: right;
  417.     }
  418.     .cell1 ul,
  419.     .cell2 ul {
  420.         margin: 0;
  421.         padding: 0;
  422.     }
  423.     .cell1 li:first-child,
  424.     .cell2 li:first-child {
  425.     margin: 0;
  426.     }
  427.     .cell1 li,
  428.     .cell2 li {
  429.         list-style-type: none;
  430.         text-align: left;
  431.         color: #fff;
  432.         line-height: 180%;
  433.         margin: 5.7px 0 0 0;
  434.         padding-left: 5px;
  435.     }
  436.     .cell1 p,
  437.     .cell2 p {
  438.         padding: 0.3px;
  439.     }
  440.     .cell1 span,
  441.     .cell2 span {
  442.         color: #000;
  443.         background: #ecedec!important;
  444.         line-height: 186%;
  445.         margin: -1px;
  446.         padding: 0px 15px 0px;
  447.         float: right;
  448.     }
  449.    
  450.    
  451.     /*CONNECTIONS(3RD) TAB*/
  452.    
  453.     .con {
  454.         width: 83px;
  455.         height: 83px;
  456.         float: left;
  457.         background-size: 110%;
  458.         background-position: center center;
  459.         -webkit-transition: all 0.5s ease;
  460.         -moz-transition: all 0.5s ease;
  461.         -ms-transition: all 0.5s ease;
  462.         transition: all 0.5s ease;
  463.         margin: 0 1px 2px 1px;
  464.     }
  465.     .navcon {
  466.         position: absolute;
  467.         top: 0px;
  468.         right: 0px;
  469.         height: 340px;
  470.         width: 180px;
  471.         padding-right: 0px;
  472.         overflow-x: hidden;
  473.         overflow-y: auto;
  474.         /*display: grid;
  475.         grid-template-rows: repeat(2, 1fr);
  476.         grid-template-columns: repeat(2, 1fr);
  477.         grid-gap: 2px;*/
  478.     }
  479.     .connections {
  480.         height: 340px;
  481.         margin: 0px 0;
  482.         width: 450px;
  483.         padding-right: 40px;
  484.         overflow-x: hidden;
  485.         overflow-y: auto;
  486.         display: none;
  487.     }
  488.     .connections .cbio {
  489.        padding-right: 30px;
  490.     }
  491.     /*CONNECTION NAME*/
  492.     .connections span {
  493.         font-weight: bold;
  494.         font-size: 14px;
  495.         text-transform: uppercase;
  496.     }
  497.    
  498.    
  499.     /*GROUP SELECTION STYLES*/
  500.    
  501.     footer {
  502.         position: relative;
  503.         margin: 30px 0 0 0;
  504.         padding: 0px;
  505.         width: auto;
  506.         height: 50px;
  507.         background: rgba(255, 255, 255, 0.3);
  508.         -webkit-transition: all 0.5s ease;
  509.         -moz-transition: all 0.5s ease;
  510.         -ms-transition: all 0.5s ease;
  511.         transition: all 0.5s ease;
  512.     }
  513.     #legend {
  514.         position: relative;
  515.         width: auto;
  516.         height: 50px;
  517.         margin: 0 auto;
  518.         text-align: center;
  519.     }
  520.     /*GROUP LINK SQUARES*/
  521.     .square {
  522.         position: relative;
  523.         height: 10px;
  524.         font-size: 9px;
  525.         padding: 5px 5px;
  526.         display: inline-block;
  527.         margin: 15px 5px;
  528.         border-radius: 5px;
  529.         color: #fff;
  530.         font-family: helvetica;
  531.         text-transform: uppercase;
  532.     }
  533.    
  534.    
  535.     /*ACTIVE STYLES*/
  536.    
  537.     /*CONTENT CARD*/
  538.     .ccard.active {
  539.         opacity: 1;
  540.         display: inline-block;
  541.         margin: 0px 0px;
  542.     }
  543.     /*CONTENT CARD INNER TABS*/
  544.     .ccontent.active,
  545.     .connections.active {
  546.         display: block;
  547.     }
  548.     /*CARD CONTENT NAV*/
  549.     .cfooter a.active {
  550.         color: #cccccc;
  551.     }
  552.     /*CBOX IMG & CONNECTIONS NAV*/
  553.    .cbox.active img,
  554.    .con.active {
  555.        -webkit-filter: grayscale(0%);
  556.         filter: grayscale(0%);
  557.     }
  558.    
  559.    
  560.     /*GROUP COLOURS*/
  561.    
  562.     /*LEGEND & TRAITS & INFO DATA*/
  563.    /*GROUP 1*/
  564.    #legend .g1,
  565.    .ctraits.g1 span,
  566.    .cell1.g1 li,
  567.    .cell2.g1 li {
  568.        background: var(--g1);
  569.     }
  570.     /*GROUP 2*/
  571.     #legend .g2,
  572.     .ctraits.g2 span,
  573.     .cell1.g2 li,
  574.     .cell2.g2 li {
  575.         background: var(--g2);
  576.     }
  577.     /*GROUP 3*/
  578.     #legend .g3,
  579.     .ctraits.g3 span,
  580.     .cell1.g3 li,
  581.     .cell2.g3 li {
  582.         background: var(--g3);
  583.     }
  584.     /*GROUP 4*/
  585.     #legend .g4,
  586.     .ctraits.g4 span,
  587.     .cell1.g4 li,
  588.     .cell2.g4 li {
  589.         background: var(--g4);
  590.     }
  591.     /*GROUP 5*/
  592.     #legend .g5,
  593.     .ctraits.g5 span,
  594.     .cell1.g5 li,
  595.     .cell2.g5 li {
  596.         background: var(--g5);
  597.     }
  598.    
  599.     /*TRIANGLE*/
  600.     /*GROUP 1*/
  601.     .triangle.g1 {
  602.         border-color: transparent var(--g1) var(--g1) transparent;
  603.     }
  604.     /*GROUP 2*/
  605.     .triangle.g2 {
  606.         border-color: transparent var(--g2) var(--g2) transparent;
  607.     }
  608.     /*GROUP 3*/
  609.     .triangle.g3 {
  610.         border-color: transparent var(--g3) var(--g3) transparent;
  611.     }
  612.     /*GROUP 4*/
  613.     .triangle.g4 {
  614.         border-color: transparent var(--g4) var(--g4) transparent;
  615.     }
  616.     /*GROUP 5*/
  617.     .triangle.g5 {
  618.         border-color: transparent var(--g5) var(--g5) transparent;
  619.     }
  620.    
  621.     /*HOVER STYLES*/
  622.    
  623.     .triangle:hover,
  624.     .cname:hover,
  625.     .con:hover,
  626.     .cbox:hover > img,
  627.     .square:hover {
  628.         cursor: pointer;
  629.     }
  630.     /*.cbox:hover,
  631.     .cbox:hover img {
  632.         z-index: 3;
  633.         -webkit-transform: scale(1.001);
  634.         -moz-transform: scale(1.01);
  635.         -ms-transform: scale(1.01);
  636.         -o-transform: scale(1.01);
  637.         transform: scale(1.01);
  638.     }
  639.     .cbox:hover .triangle {
  640.         transform: scale(1.01);
  641.         -webkit-transform-origin: 50% 100%;
  642.         -moz-transform-origin: 50% 100%;
  643.         -o-transform-origin: 50% 100%;
  644.         -ms-transform-origin: 50% 100%;
  645.         transform-origin: 45% 0%;
  646.     }*/
  647.     .clinks a i {
  648.         -webkit-transition: all 0.5s ease;
  649.         -moz-transition: all 0.5s ease;
  650.         -ms-transition: all 0.5s ease;
  651.         transition: all 0.5s ease;
  652.     }
  653.     .clinks a:hover i {
  654.         -webkit-transform: scale(1.3);
  655.         -moz-transform: scale(1.3);
  656.         -ms-transform: scale(1.3);
  657.         -o-transform: scale(1.3);
  658.         transform: scale(1.3);
  659.     }
  660.     .con:hover {
  661.         background-size: 100%;
  662.     }
  663.     .cbox:hover > img,
  664.     .flavorimg:hover,
  665.     .con:hover {
  666.         -webkit-filter: grayscale(0%);
  667.         filter: grayscale(0%);
  668.     }
  669.    
  670.    
  671.     /*ANIMATION KEYFRAMES*/
  672.    
  673.     @-webkit-keyframes fadeIn  {
  674.         0% { opacity: 0; }
  675.         20% { opacity: 0; }
  676.         40% { opacity: 0.3; }
  677.         60% { opacity: 0.5; }
  678.         80% { opacity: 0.9; }
  679.         100% { opacity: 1; }
  680.     }
  681.     @keyframes fadeIn {
  682.         0% { opacity: 0; }
  683.         20% { opacity: 0; }
  684.         40% { opacity: 0.3; }
  685.         60% { opacity: 0.5; }
  686.         80% { opacity: 0.9; }
  687.         100% { opacity: 1; }
  688.     }
  689.    
  690.    
  691.     /*SCROLLBAR STYLES*/
  692.    
  693.     ::-webkit-scrollbar {
  694.         width: 5px;
  695.         height: 5px;
  696.     }
  697.     ::-webkit-scrollbar-track {
  698.         border-radius: 1px;
  699.         background-color: #f8f8f8;
  700.     }
  701.     ::-webkit-scrollbar-thumb {
  702.         border-radius: 1px;
  703.         background-color: #ddd;
  704.     }
  705.     article#desctxt::-webkit-scrollbar-track {
  706.         border-radius: 1px;
  707.         background: -webkit-linear-gradient(bottom, #ecedee, #eceeec 100%);
  708.     }
  709.     article#desctxt::-webkit-scrollbar-thumb {
  710.         border-radius: 1px;
  711.         background: -webkit-linear-gradient(top, #ddd, #eee 100%);
  712.         /*background: -webkit-linear-gradient(top, #edeeed, #eceeec 100%);          if transparent*/
  713.     }
  714.     .biocontent::-webkit-scrollbar-track,
  715.     .connections::-webkit-scrollbar-track,
  716.     .navcon::-webkit-scrollbar-track {
  717.         border-radius: 1px;
  718.         width: 10px!important;
  719.         background: -webkit-linear-gradient(bottom, #ecedee, #eceeec 100%);
  720.     }
  721.     .biocontent::-webkit-scrollbar-thumb,
  722.     .connections::-webkit-scrollbar-thumb,
  723.     .navcon::-webkit-scrollbar-thumb {
  724.         border-radius: 1px;
  725.         width: 10px!important;
  726.         background: -webkit-linear-gradient(top, #ddd, #eee 100%);
  727.         /*background: -webkit-linear-gradient(top, #edeeed, #eceeec 100%);          if transparent*/
  728.     }
  729.     </style>
  730. </head>
  731. <body>
  732.  
  733.   <div id="container">
  734.    
  735.     <!--HEADER-->
  736.       <header>
  737.      
  738.         <!--TITLE & LINKS-->
  739.         <article id="desc">
  740.           <h1>afterimage.</h1>
  741.           <span class="sub">sdkjglskjdglsjkglsjglskjdlgjsklj</span>
  742.          
  743.           <!--HEADER LINKS-->
  744.           <!--enter URL for your about page-->
  745.           <nav>
  746.             <a href="/">
  747.                 <i class="fa fa-home" aria-hidden="true"></i>
  748.                 Home</a>
  749.             <a href="/YOURABOUTPAGE">
  750.                 <i class="fa fa-user" aria-hidden="true"></i>
  751.                 About</a>
  752.             <a href="/ask">
  753.                 <i class="fa fa-envelope" aria-hidden="true"></i>
  754.                 Message</a>
  755.             <!--CREDIT, DON'T CHANGE!!!-->
  756.             <a href="https://nonspace.tumblr.com">
  757.                 <i class="fa fa-copyright" aria-hidden="true"></i>
  758.                 NNSPC</a>
  759.           </nav>
  760.         </article>
  761.        
  762.         <!--DESCRIPTION-->
  763.         <article id="desctxt">
  764.             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.            
  765.         </article>
  766.        
  767.       </header>
  768.      
  769.       <footer>
  770.         <div id="legend">
  771.          
  772.           <!--GROUP LEGEND-->
  773.           <!--The 'g#' in the 'square' class sets the color for the group
  774.          (see variables at the top of CSS).
  775.          The data-filter is for sorting on click. You can add several
  776.          groups to a link: group AND group, group OR group etc. You can
  777.          read more here: https://isotope.metafizzy.co/filtering.html-->
  778.           <div class="square" data-filter="*" style="background: #7a7a7a;">               all</div>
  779.           <div class="square g1" data-filter=".g1">group</div>
  780.           <div class="square g2" data-filter=".g2">group</div>
  781.           <div class="square g3" data-filter=".g3">group</div>
  782.           <div class="square g4" data-filter=".g4">group</div>
  783.           <div class="square g5" data-filter=".g5">group</div>
  784.           <!--ADDITIONAL GROUPS
  785.          <div class="square g6" data-filter=".g6">group</div>
  786.          <div class="square g7" data-filter=".g7">group</div>
  787.          <div class="square g8" data-filter=".g8">group</div>
  788.          <div class="square g9" data-filter=".g9">group</div>
  789.          <div class="square g10" data-filter=".g10">group</div>-->
  790.          
  791.         </div><!--legend-->
  792.       </footer>
  793.      
  794.       <!--HOW TO ADD GROUPS-->
  795.       <!--To add a group (g1-g5) you need to add the respective group as a
  796.      second class to the cbox (class="cbox GROUPNUMBER").
  797.      You can add several groups to one card, however, the first group
  798.      determines the card colour.-->
  799.      
  800.       <!--TABS & TAB LINKS-->
  801.       <!--The href attribute in the cbox div is what links you to the
  802.      corresponding ccard (content card).
  803.      You can link to these tabs using the URL
  804.      (http://YOURURL.com/YOURPAGE/#TABNAME) so if you want to change them
  805.      to the character name you need to edit the cbox href and give the
  806.      right ccard div the id.
  807.      
  808.      For example:
  809.      
  810.      Your character's name is Musterman.
  811.      
  812.      In the cbox:
  813.          <div class="cbox g1" href="#MUSTERMAN">
  814.          take note to not leave out the hashtag(#)
  815.      In the ccard:
  816.          <div class="ccard" id="MUSTERMAN">
  817.          
  818.      
  819.      <!--CHARACTER CARDS-->
  820.       <section id="gallery">
  821.         <div id="gallery-track">
  822.      
  823.         <!--CHARACTER ONE-->
  824.        
  825.         <div class="cbox g1" href="#c1">
  826.           <div class="cname">
  827.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  828.            change the opacity of the names in the CSS-->
  829.             <span style="font-size: 45px;">
  830.             FIRST <br />
  831.             LASTN
  832.             </span>
  833.           </div> <!--cname-->
  834.           <div class="triangle"></div>
  835.          
  836.           <img src="http://placehold.it/160x160"></img>
  837.         </div> <!--cbox-->
  838.        
  839.        
  840.         <!--CHARACTER TWO-->
  841.        
  842.         <div class="cbox g2" href="#c2">
  843.           <div class="cname">
  844.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  845.            change the opacity of the names in the CSS-->
  846.             <span style="font-size: 45px;">
  847.             FIRST <br />
  848.             LASTN
  849.             </span>
  850.           </div> <!--cname-->
  851.           <div class="triangle"></div>
  852.          
  853.           <img src="https://placehold.it/160x160"></img>
  854.         </div> <!--cbox-->
  855.        
  856.        
  857.         <!--CHARACTER THREE-->
  858.        
  859.         <div class="cbox g3" href="#c3">
  860.           <div class="cname">
  861.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  862.            change the opacity of the names in the CSS-->
  863.             <span style="font-size: 45px;">
  864.             FIRST <br />
  865.             LASTN
  866.             </span>
  867.           </div> <!--cname-->
  868.           <div class="triangle"></div>
  869.          
  870.           <img src="https://placehold.it/160x160"></img>
  871.         </div> <!--cbox-->
  872.        
  873.        
  874.         <!--CHARACTER FOUR-->
  875.        
  876.         <div class="cbox g4" href="#c4">
  877.           <div class="cname">
  878.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  879.            change the opacity of the names in the CSS-->
  880.             <span style="font-size: 45px;">
  881.             FIRST <br />
  882.             LASTN
  883.             </span>
  884.           </div> <!--cname-->
  885.           <div class="triangle"></div>
  886.          
  887.           <img src="https://placehold.it/160x160"></img>
  888.         </div> <!--cbox-->
  889.    
  890.        
  891.         <!--CHARACTER FIVE-->
  892.        
  893.         <div class="cbox g5" href="#c5">
  894.           <div class="cname">
  895.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  896.            change the opacity of the names in the CSS-->
  897.             <span style="font-size: 45px;">
  898.             FIRST <br />
  899.             LASTN
  900.             </span>
  901.           </div> <!--cname-->
  902.           <div class="triangle"></div>
  903.          
  904.           <img src="https://placehold.it/160x160"></img>
  905.         </div> <!--cbox-->
  906.        
  907.        
  908.         <!--CHARACTER CARDS FIRST ROW-->
  909.        
  910.         <div class="ccard" id="c1">
  911.          
  912.          <div class="ccontent active" id="c1p2">
  913.             <div class="cbio">
  914.                
  915.               <div class="headline">
  916.                 <h2><span class="h2front">the</span>title</h2>
  917.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  918.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  919.                 magna aliqua.
  920.               </div><!--headline-->
  921.            
  922.               <div class="biocontent">
  923.                
  924.                 <!--LEFT DATA-->
  925.                 <ul class="cell1">
  926.                   <li> Full name:  <span> - </span> </li>
  927.                   <li> Nickname:   <span> - </span> </li>
  928.                   <li> Age:        <span> - </span> </li>
  929.                   <li> D.o.B:      <span> - </span> </li>
  930.                   <li> Gender:     <span> - </span> </li>
  931.                   <li> Pronouns:   <span> - </span> </li>
  932.                   <li> Sexuality:  <span> - </span> </li>
  933.                   <li> Species: <span> - </span></li>
  934.                 </ul>
  935.                
  936.                 <!--RIGHT DATA-->
  937.                 <ul class="cell2">
  938.                   <li> Occupation:      <span> - </span> </li>
  939.                   <li> Nationality:     <span> - </span> </li>
  940.                   <li> Residence:       <span> - </span> </li>
  941.                   <li> Education:       <span> - </span> </li>
  942.                   <li> Height:          <span> - </span> </li>
  943.                   <li> Alignment:       <span> - </span> </li>
  944.                   <li> Jung Type:       <span> - </span> </li>
  945.                   <li> Affiliation:     <span> - </span></li>
  946.                 </ul>
  947.                
  948.               </div><!--biocontent-->
  949.              
  950.             </div><!--cbio-->  
  951.            
  952.             <div class="clinks">
  953.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  954.              http://fontawesome.io/icons/-->
  955.               <a href="#">
  956.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  957.               <a href="#">
  958.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  959.               <a href="#">
  960.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  961.               <a href="#">
  962.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  963.               <a href="#">
  964.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  965.               <a href="#">
  966.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  967.             </div><!--clinks-->
  968.            
  969.             <div class="flavorimg" style="background-image:
  970.              url('https://placehold.it/180x245');">
  971.             </div>
  972.            
  973.           </div> <!--ccontent c1p2-->
  974.          
  975.         </div> <!--ccard-->
  976.        
  977.        
  978.         <div class="ccard" id="c2">
  979.        
  980.         <div class="ccontent active" id="c2p2">
  981.             <div class="cbio">
  982.                
  983.               <div class="headline">
  984.                 <h2><span class="h2front">the</span>title</h2>
  985.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  986.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  987.                 magna aliqua.
  988.               </div><!--headline-->
  989.            
  990.               <div class="biocontent">
  991.                
  992.                 <!--LEFT DATA-->
  993.                 <ul class="cell1">
  994.                   <li> Full name:  <span> - </span> </li>
  995.                   <li> Nickname:   <span> - </span> </li>
  996.                   <li> Age:        <span> - </span> </li>
  997.                   <li> D.o.B:      <span> - </span> </li>
  998.                   <li> Gender:     <span> - </span> </li>
  999.                   <li> Pronouns:   <span> - </span> </li>
  1000.                   <li> Sexuality:  <span> - </span> </li>
  1001.                   <li> Species: <span> - </span></li>
  1002.                 </ul>
  1003.                
  1004.                 <!--RIGHT DATA-->
  1005.                 <ul class="cell2">
  1006.                   <li> Occupation:      <span> - </span> </li>
  1007.                   <li> Nationality:     <span> - </span> </li>
  1008.                   <li> Residence:       <span> - </span> </li>
  1009.                   <li> Education:       <span> - </span> </li>
  1010.                   <li> Height:          <span> - </span> </li>
  1011.                   <li> Alignment:       <span> - </span> </li>
  1012.                   <li> Jung Type:       <span> - </span> </li>
  1013.                   <li> Affiliation:     <span> - </span></li>
  1014.                 </ul>
  1015.                
  1016.               </div><!--biocontent-->
  1017.              
  1018.             </div><!--cbio-->
  1019.            
  1020.             <div class="clinks">
  1021.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1022.              http://fontawesome.io/icons/-->
  1023.               <a href="#">
  1024.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1025.               <a href="#">
  1026.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1027.               <a href="#">
  1028.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1029.               <a href="#">
  1030.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1031.               <a href="#">
  1032.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1033.               <a href="#">
  1034.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1035.             </div><!--clinks-->
  1036.            
  1037.             <div class="flavorimg" style="background-image:
  1038.              url('https://placehold.it/180x245');">
  1039.             </div>
  1040.            
  1041.           </div> <!--ccontent c2p2-->
  1042.          
  1043.         </div> <!--ccard-->
  1044.        
  1045.        
  1046.         <div class="ccard" id="c3">
  1047.          
  1048.           <div class="ccontent active" id="c1p2">
  1049.             <div class="cbio">
  1050.                
  1051.               <div class="headline">
  1052.                 <h2><span class="h2front">the</span>title</h2>
  1053.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1054.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1055.                 magna aliqua.
  1056.               </div><!--headline-->
  1057.            
  1058.               <div class="biocontent">
  1059.                
  1060.                 <!--LEFT DATA-->
  1061.                 <ul class="cell1">
  1062.                   <li> Full name:  <span> - </span> </li>
  1063.                   <li> Nickname:   <span> - </span> </li>
  1064.                   <li> Age:        <span> - </span> </li>
  1065.                   <li> D.o.B:      <span> - </span> </li>
  1066.                   <li> Gender:     <span> - </span> </li>
  1067.                   <li> Pronouns:   <span> - </span> </li>
  1068.                   <li> Sexuality:  <span> - </span> </li>
  1069.                   <li> Species: <span> - </span></li>
  1070.                 </ul>
  1071.                
  1072.                 <!--RIGHT DATA-->
  1073.                 <ul class="cell2">
  1074.                   <li> Occupation:      <span> - </span> </li>
  1075.                   <li> Nationality:     <span> - </span> </li>
  1076.                   <li> Residence:       <span> - </span> </li>
  1077.                   <li> Education:       <span> - </span> </li>
  1078.                   <li> Height:          <span> - </span> </li>
  1079.                   <li> Alignment:       <span> - </span> </li>
  1080.                   <li> Jung Type:       <span> - </span> </li>
  1081.                   <li> Affiliation:     <span> - </span></li>
  1082.                 </ul>
  1083.                
  1084.               </div><!--biocontent-->
  1085.              
  1086.             </div><!--cbio-->  
  1087.            
  1088.             <div class="clinks">
  1089.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1090.              http://fontawesome.io/icons/-->
  1091.               <a href="#">
  1092.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1093.               <a href="#">
  1094.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1095.               <a href="#">
  1096.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1097.               <a href="#">
  1098.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1099.               <a href="#">
  1100.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1101.               <a href="#">
  1102.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1103.             </div><!--clinks-->
  1104.            
  1105.             <div class="flavorimg" style="background-image:
  1106.              url('https://placehold.it/180x245');">
  1107.             </div>
  1108.            
  1109.           </div> <!--ccontent c1p2-->
  1110.          
  1111.         </div> <!--ccard-->
  1112.        
  1113.        
  1114.         <div class="ccard" id="c4">
  1115.        
  1116.         <div class="ccontent active" id="c1p2">
  1117.             <div class="cbio">
  1118.                
  1119.               <div class="headline">
  1120.                 <h2><span class="h2front">the</span>title</h2>
  1121.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1122.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1123.                 magna aliqua.
  1124.               </div><!--headline-->
  1125.            
  1126.               <div class="biocontent">
  1127.                
  1128.                 <!--LEFT DATA-->
  1129.                 <ul class="cell1">
  1130.                   <li> Full name:  <span> - </span> </li>
  1131.                   <li> Nickname:   <span> - </span> </li>
  1132.                   <li> Age:        <span> - </span> </li>
  1133.                   <li> D.o.B:      <span> - </span> </li>
  1134.                   <li> Gender:     <span> - </span> </li>
  1135.                   <li> Pronouns:   <span> - </span> </li>
  1136.                   <li> Sexuality:  <span> - </span> </li>
  1137.                   <li> Species: <span> - </span></li>
  1138.                 </ul>
  1139.                
  1140.                 <!--RIGHT DATA-->
  1141.                 <ul class="cell2">
  1142.                   <li> Occupation:      <span> - </span> </li>
  1143.                   <li> Nationality:     <span> - </span> </li>
  1144.                   <li> Residence:       <span> - </span> </li>
  1145.                   <li> Education:       <span> - </span> </li>
  1146.                   <li> Height:          <span> - </span> </li>
  1147.                   <li> Alignment:       <span> - </span> </li>
  1148.                   <li> Jung Type:       <span> - </span> </li>
  1149.                   <li> Affiliation:     <span> - </span></li>
  1150.                 </ul>
  1151.                
  1152.               </div><!--biocontent-->
  1153.              
  1154.             </div><!--cbio-->  
  1155.            
  1156.             <div class="clinks">
  1157.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1158.              http://fontawesome.io/icons/-->
  1159.               <a href="#">
  1160.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1161.               <a href="#">
  1162.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1163.               <a href="#">
  1164.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1165.               <a href="#">
  1166.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1167.               <a href="#">
  1168.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1169.               <a href="#">
  1170.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1171.             </div><!--clinks-->
  1172.            
  1173.             <div class="flavorimg" style="background-image:
  1174.              url('https://placehold.it/180x245');">
  1175.             </div>
  1176.            
  1177.           </div> <!--ccontent c1p2-->
  1178.          
  1179.         </div> <!--ccard-->
  1180.        
  1181.        
  1182.        
  1183.         <div class="ccard" id="c5">
  1184.        
  1185.         <div class="ccontent active" id="c1p2">
  1186.             <div class="cbio">
  1187.                
  1188.               <div class="headline">
  1189.                 <h2><span class="h2front">the</span>title</h2>
  1190.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1191.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1192.                 magna aliqua.
  1193.               </div><!--headline-->
  1194.            
  1195.               <div class="biocontent">
  1196.                
  1197.                 <!--LEFT DATA-->
  1198.                 <ul class="cell1">
  1199.                   <li> Full name:  <span> - </span> </li>
  1200.                   <li> Nickname:   <span> - </span> </li>
  1201.                   <li> Age:        <span> - </span> </li>
  1202.                   <li> D.o.B:      <span> - </span> </li>
  1203.                   <li> Gender:     <span> - </span> </li>
  1204.                   <li> Pronouns:   <span> - </span> </li>
  1205.                   <li> Sexuality:  <span> - </span> </li>
  1206.                   <li> Species: <span> - </span></li>
  1207.                 </ul>
  1208.                
  1209.                 <!--RIGHT DATA-->
  1210.                 <ul class="cell2">
  1211.                   <li> Occupation:      <span> - </span> </li>
  1212.                   <li> Nationality:     <span> - </span> </li>
  1213.                   <li> Residence:       <span> - </span> </li>
  1214.                   <li> Education:       <span> - </span> </li>
  1215.                   <li> Height:          <span> - </span> </li>
  1216.                   <li> Alignment:       <span> - </span> </li>
  1217.                   <li> Jung Type:       <span> - </span> </li>
  1218.                   <li> Affiliation:     <span> - </span></li>
  1219.                 </ul>
  1220.                
  1221.               </div><!--biocontent-->
  1222.              
  1223.             </div><!--cbio-->  
  1224.            
  1225.             <div class="clinks">
  1226.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1227.              http://fontawesome.io/icons/-->
  1228.               <a href="#">
  1229.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1230.               <a href="#">
  1231.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1232.               <a href="#">
  1233.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1234.               <a href="#">
  1235.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1236.               <a href="#">
  1237.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1238.               <a href="#">
  1239.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1240.             </div><!--clinks-->
  1241.            
  1242.             <div class="flavorimg" style="background-image:
  1243.              url('https://placehold.it/180x340');">
  1244.             </div>
  1245.            
  1246.           </div> <!--ccontent c1p2-->
  1247.          
  1248.         </div> <!--ccard-->
  1249.        
  1250.        
  1251.        
  1252.         <!--CHARACTER SIX-->
  1253.        
  1254.         <div class="cbox g2" href="#c6">
  1255.           <div class="cname">
  1256.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1257.            change the opacity of the names in the CSS-->
  1258.             <span style="font-size: 45px;">
  1259.             FIRST <br />
  1260.             LASTN
  1261.             </span>
  1262.           </div> <!--cname-->
  1263.           <div class="triangle"></div>
  1264.          
  1265.           <img src="https://placehold.it/160x160"></img>
  1266.         </div> <!--cbox-->
  1267.        
  1268.        
  1269.         <!--CHARACTER SEVEN-->
  1270.        
  1271.         <div class="cbox g3" href="#c7">
  1272.           <div class="cname">
  1273.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1274.            change the opacity of the names in the CSS-->
  1275.             <span style="font-size: 45px;">
  1276.             FIRST <br />
  1277.             LASTN
  1278.             </span>
  1279.           </div> <!--cname-->
  1280.           <div class="triangle"></div>
  1281.          
  1282.           <img src="https://placehold.it/160x160"></img>
  1283.         </div> <!--cbox-->
  1284.        
  1285.        
  1286.         <!--CHARACTER EIGHT-->
  1287.        
  1288.         <div class="cbox g4" href="#c8">
  1289.           <div class="cname">
  1290.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1291.            change the opacity of the names in the CSS-->
  1292.             <span style="font-size: 45px;">
  1293.             FIRST <br />
  1294.             LASTN
  1295.             </span>
  1296.           </div> <!--cname-->
  1297.           <div class="triangle"></div>
  1298.          
  1299.           <img src="https://placehold.it/160x160"></img>
  1300.         </div> <!--cbox-->
  1301.        
  1302.        
  1303.         <!--CHARACTER NINE-->
  1304.        
  1305.         <div class="cbox g5" href="#c9">
  1306.           <div class="cname">
  1307.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1308.            change the opacity of the names in the CSS-->
  1309.             <span style="font-size: 45px;">
  1310.             FIRST <br />
  1311.             LASTN
  1312.             </span>
  1313.           </div> <!--cname-->
  1314.           <div class="triangle"></div>
  1315.          
  1316.           <img src="https://placehold.it/160x160"></img>
  1317.         </div> <!--cbox-->
  1318.        
  1319.        
  1320.         <!--CHARACTER TEN-->
  1321.        
  1322.         <div class="cbox g2" href="#c10">
  1323.           <div class="cname">
  1324.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1325.            change the opacity of the names in the CSS-->
  1326.             <span style="font-size: 45px;">
  1327.             FIRST <br />
  1328.             LASTN
  1329.             </span>
  1330.           </div> <!--cname-->
  1331.           <div class="triangle"></div>
  1332.          
  1333.           <img src="https://placehold.it/160x160"></img>
  1334.         </div> <!--cbox-->
  1335.        
  1336.        
  1337.         <!--CHARACTER CARD SECOND ROW-->
  1338.        
  1339.         <div class="ccard" id="c6">
  1340.          
  1341.          <div class="ccontent active" id="c1p2">
  1342.             <div class="cbio">
  1343.                
  1344.               <div class="headline">
  1345.                 <h2><span class="h2front">the</span>title</h2>
  1346.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1347.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1348.                 magna aliqua.
  1349.               </div><!--headline-->
  1350.            
  1351.               <div class="biocontent">
  1352.                
  1353.                 <!--LEFT DATA-->
  1354.                 <ul class="cell1">
  1355.                   <li> Full name:  <span> - </span> </li>
  1356.                   <li> Nickname:   <span> - </span> </li>
  1357.                   <li> Age:        <span> - </span> </li>
  1358.                   <li> D.o.B:      <span> - </span> </li>
  1359.                   <li> Gender:     <span> - </span> </li>
  1360.                   <li> Pronouns:   <span> - </span> </li>
  1361.                   <li> Sexuality:  <span> - </span> </li>
  1362.                   <li> Species: <span> - </span></li>
  1363.                 </ul>
  1364.                
  1365.                 <!--RIGHT DATA-->
  1366.                 <ul class="cell2">
  1367.                   <li> Occupation:      <span> - </span> </li>
  1368.                   <li> Nationality:     <span> - </span> </li>
  1369.                   <li> Residence:       <span> - </span> </li>
  1370.                   <li> Education:       <span> - </span> </li>
  1371.                   <li> Height:          <span> - </span> </li>
  1372.                   <li> Alignment:       <span> - </span> </li>
  1373.                   <li> Jung Type:       <span> - </span> </li>
  1374.                   <li> Affiliation:     <span> - </span></li>
  1375.                 </ul>
  1376.                
  1377.               </div><!--biocontent-->
  1378.              
  1379.             </div><!--cbio-->  
  1380.            
  1381.             <div class="clinks">
  1382.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1383.              http://fontawesome.io/icons/-->
  1384.               <a href="#">
  1385.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1386.               <a href="#">
  1387.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1388.               <a href="#">
  1389.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1390.               <a href="#">
  1391.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1392.               <a href="#">
  1393.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1394.               <a href="#">
  1395.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1396.             </div><!--clinks-->
  1397.            
  1398.             <div class="flavorimg" style="background-image:
  1399.              url('https://placehold.it/180x340');">
  1400.             </div>
  1401.            
  1402.           </div> <!--ccontent c1p2-->
  1403.          
  1404.         </div> <!--ccard-->
  1405.        
  1406.        
  1407.         <div class="ccard" id="c7">
  1408.        
  1409.         <div class="ccontent active" id="c2p2">
  1410.             <div class="cbio">
  1411.                
  1412.               <div class="headline">
  1413.                 <h2><span class="h2front">the</span>title</h2>
  1414.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1415.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1416.                 magna aliqua.
  1417.               </div><!--headline-->
  1418.            
  1419.               <div class="biocontent">
  1420.                
  1421.                 <!--LEFT DATA-->
  1422.                 <ul class="cell1">
  1423.                   <li> Full name:  <span> - </span> </li>
  1424.                   <li> Nickname:   <span> - </span> </li>
  1425.                   <li> Age:        <span> - </span> </li>
  1426.                   <li> D.o.B:      <span> - </span> </li>
  1427.                   <li> Gender:     <span> - </span> </li>
  1428.                   <li> Pronouns:   <span> - </span> </li>
  1429.                   <li> Sexuality:  <span> - </span> </li>
  1430.                   <li> Species: <span> - </span></li>
  1431.                 </ul>
  1432.                
  1433.                 <!--RIGHT DATA-->
  1434.                 <ul class="cell2">
  1435.                   <li> Occupation:      <span> - </span> </li>
  1436.                   <li> Nationality:     <span> - </span> </li>
  1437.                   <li> Residence:       <span> - </span> </li>
  1438.                   <li> Education:       <span> - </span> </li>
  1439.                   <li> Height:          <span> - </span> </li>
  1440.                   <li> Alignment:       <span> - </span> </li>
  1441.                   <li> Jung Type:       <span> - </span> </li>
  1442.                   <li> Affiliation:     <span> - </span></li>
  1443.                 </ul>
  1444.                
  1445.               </div><!--biocontent-->
  1446.              
  1447.             </div><!--cbio-->  
  1448.            
  1449.             <div class="clinks">
  1450.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1451.              http://fontawesome.io/icons/-->
  1452.               <a href="#">
  1453.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1454.               <a href="#">
  1455.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1456.               <a href="#">
  1457.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1458.               <a href="#">
  1459.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1460.               <a href="#">
  1461.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1462.               <a href="#">
  1463.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1464.             </div><!--clinks-->
  1465.            
  1466.             <div class="flavorimg" style="background-image:
  1467.              url('https://placehold.it/180x340');">
  1468.             </div>
  1469.            
  1470.           </div> <!--ccontent c2p2-->
  1471.          
  1472.         </div> <!--ccard-->
  1473.        
  1474.        
  1475.         <div class="ccard" id="c8">
  1476.          
  1477.           <div class="ccontent active" id="c1p2">
  1478.             <div class="cbio">
  1479.                
  1480.               <div class="headline">
  1481.                 <h2><span class="h2front">the</span>title</h2>
  1482.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1483.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1484.                 magna aliqua.
  1485.               </div><!--headline-->
  1486.            
  1487.               <div class="biocontent">
  1488.                
  1489.                 <!--LEFT DATA-->
  1490.                 <ul class="cell1">
  1491.                   <li> Full name:  <span> - </span> </li>
  1492.                   <li> Nickname:   <span> - </span> </li>
  1493.                   <li> Age:        <span> - </span> </li>
  1494.                   <li> D.o.B:      <span> - </span> </li>
  1495.                   <li> Gender:     <span> - </span> </li>
  1496.                   <li> Pronouns:   <span> - </span> </li>
  1497.                   <li> Sexuality:  <span> - </span> </li>
  1498.                   <li> Species: <span> - </span></li>
  1499.                 </ul>
  1500.                
  1501.                 <!--RIGHT DATA-->
  1502.                 <ul class="cell2">
  1503.                   <li> Occupation:      <span> - </span> </li>
  1504.                   <li> Nationality:     <span> - </span> </li>
  1505.                   <li> Residence:       <span> - </span> </li>
  1506.                   <li> Education:       <span> - </span> </li>
  1507.                   <li> Height:          <span> - </span> </li>
  1508.                   <li> Alignment:       <span> - </span> </li>
  1509.                   <li> Jung Type:       <span> - </span> </li>
  1510.                   <li> Affiliation:     <span> - </span></li>
  1511.                 </ul>
  1512.                
  1513.               </div><!--biocontent-->
  1514.              
  1515.             </div><!--cbio-->  
  1516.            
  1517.             <div class="clinks">
  1518.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1519.              http://fontawesome.io/icons/-->
  1520.               <a href="#">
  1521.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1522.               <a href="#">
  1523.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1524.               <a href="#">
  1525.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1526.               <a href="#">
  1527.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1528.               <a href="#">
  1529.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1530.               <a href="#">
  1531.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1532.             </div><!--clinks-->
  1533.            
  1534.             <div class="flavorimg" style="background-image:
  1535.              url('https://placehold.it/180x340');">
  1536.             </div>
  1537.            
  1538.           </div> <!--ccontent c1p2-->
  1539.          
  1540.         </div> <!--ccard-->
  1541.        
  1542.        
  1543.         <div class="ccard" id="c9">
  1544.        
  1545.         <div class="ccontent active" id="c1p2">
  1546.             <div class="cbio">
  1547.                
  1548.               <div class="headline">
  1549.                 <h2><span class="h2front">the</span>title</h2>
  1550.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1551.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1552.                 magna aliqua.
  1553.               </div><!--headline-->
  1554.            
  1555.               <div class="biocontent">
  1556.                
  1557.                 <!--LEFT DATA-->
  1558.                 <ul class="cell1">
  1559.                   <li> Full name:  <span> - </span> </li>
  1560.                   <li> Nickname:   <span> - </span> </li>
  1561.                   <li> Age:        <span> - </span> </li>
  1562.                   <li> D.o.B:      <span> - </span> </li>
  1563.                   <li> Gender:     <span> - </span> </li>
  1564.                   <li> Pronouns:   <span> - </span> </li>
  1565.                   <li> Sexuality:  <span> - </span> </li>
  1566.                   <li> Species: <span> - </span></li>
  1567.                 </ul>
  1568.                
  1569.                 <!--RIGHT DATA-->
  1570.                 <ul class="cell2">
  1571.                   <li> Occupation:      <span> - </span> </li>
  1572.                   <li> Nationality:     <span> - </span> </li>
  1573.                   <li> Residence:       <span> - </span> </li>
  1574.                   <li> Education:       <span> - </span> </li>
  1575.                   <li> Height:          <span> - </span> </li>
  1576.                   <li> Alignment:       <span> - </span> </li>
  1577.                   <li> Jung Type:       <span> - </span> </li>
  1578.                   <li> Affiliation:     <span> - </span></li>
  1579.                 </ul>
  1580.                
  1581.               </div><!--biocontent-->
  1582.              
  1583.             </div><!--cbio-->  
  1584.            
  1585.             <div class="clinks">
  1586.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1587.              http://fontawesome.io/icons/-->
  1588.               <a href="#">
  1589.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1590.               <a href="#">
  1591.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1592.               <a href="#">
  1593.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1594.               <a href="#">
  1595.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1596.               <a href="#">
  1597.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1598.               <a href="#">
  1599.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1600.             </div><!--clinks-->
  1601.            
  1602.             <div class="flavorimg" style="background-image:
  1603.              url('https://placehold.it/180x340');">
  1604.             </div>
  1605.            
  1606.           </div> <!--ccontent c1p2-->
  1607.          
  1608.         </div> <!--ccard-->
  1609.        
  1610.        
  1611.        
  1612.         <div class="ccard" id="c10">
  1613.        
  1614.         <div class="ccontent active" id="c1p2">
  1615.             <div class="cbio">
  1616.                
  1617.               <div class="headline">
  1618.                 <h2><span class="h2front">the</span>title</h2>
  1619.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1620.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1621.                 magna aliqua.
  1622.               </div><!--headline-->
  1623.            
  1624.               <div class="biocontent">
  1625.                
  1626.                 <!--LEFT DATA-->
  1627.                 <ul class="cell1">
  1628.                   <li> Full name:  <span> - </span> </li>
  1629.                   <li> Nickname:   <span> - </span> </li>
  1630.                   <li> Age:        <span> - </span> </li>
  1631.                   <li> D.o.B:      <span> - </span> </li>
  1632.                   <li> Gender:     <span> - </span> </li>
  1633.                   <li> Pronouns:   <span> - </span> </li>
  1634.                   <li> Sexuality:  <span> - </span> </li>
  1635.                   <li> Species: <span> - </span></li>
  1636.                 </ul>
  1637.                
  1638.                 <!--RIGHT DATA-->
  1639.                 <ul class="cell2">
  1640.                   <li> Occupation:      <span> - </span> </li>
  1641.                   <li> Nationality:     <span> - </span> </li>
  1642.                   <li> Residence:       <span> - </span> </li>
  1643.                   <li> Education:       <span> - </span> </li>
  1644.                   <li> Height:          <span> - </span> </li>
  1645.                   <li> Alignment:       <span> - </span> </li>
  1646.                   <li> Jung Type:       <span> - </span> </li>
  1647.                   <li> Affiliation:     <span> - </span></li>
  1648.                 </ul>
  1649.                
  1650.               </div><!--biocontent-->
  1651.              
  1652.             </div><!--cbio-->  
  1653.            
  1654.             <div class="clinks">
  1655.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1656.              http://fontawesome.io/icons/-->
  1657.               <a href="#">
  1658.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1659.               <a href="#">
  1660.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1661.               <a href="#">
  1662.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1663.               <a href="#">
  1664.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1665.               <a href="#">
  1666.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1667.               <a href="#">
  1668.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1669.             </div><!--clinks-->
  1670.            
  1671.             <div class="flavorimg" style="background-image:
  1672.              url('https://placehold.it/180x340');">
  1673.             </div>
  1674.            
  1675.           </div> <!--ccontent c1p2-->
  1676.          
  1677.         </div> <!--ccard-->
  1678.        
  1679.        
  1680.        
  1681.        
  1682.          <!--CHARACTER ELEVEN-->
  1683.        
  1684.         <div class="cbox g2" href="#c11">
  1685.           <div class="cname">
  1686.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1687.            change the opacity of the names in the CSS-->
  1688.             <span style="font-size: 45px;">
  1689.             FIRST <br />
  1690.             LASTN
  1691.             </span>
  1692.           </div> <!--cname-->
  1693.           <div class="triangle"></div>
  1694.          
  1695.           <img src="https://placehold.it/160x160"></img>
  1696.         </div> <!--cbox-->
  1697.        
  1698.        
  1699.         <!--CHARACTER TWELVE-->
  1700.        
  1701.         <div class="cbox g3" href="#c12">
  1702.           <div class="cname">
  1703.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1704.            change the opacity of the names in the CSS-->
  1705.             <span style="font-size: 45px;">
  1706.             FIRST <br />
  1707.             LASTN
  1708.             </span>
  1709.           </div> <!--cname-->
  1710.           <div class="triangle"></div>
  1711.          
  1712.           <img src="https://placehold.it/160x160"></img>
  1713.         </div> <!--cbox-->
  1714.        
  1715.        
  1716.         <!--CHARACTER THIRTEEN-->
  1717.        
  1718.         <div class="cbox g4" href="#c13">
  1719.           <div class="cname">
  1720.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1721.            change the opacity of the names in the CSS-->
  1722.             <span style="font-size: 45px;">
  1723.             FIRST <br />
  1724.             LASTN
  1725.             </span>
  1726.           </div> <!--cname-->
  1727.           <div class="triangle"></div>
  1728.          
  1729.           <img src="https://placehold.it/160x160"></img>
  1730.         </div> <!--cbox-->
  1731.        
  1732.        
  1733.         <!--CHARACTER FOURTREEN-->
  1734.        
  1735.         <div class="cbox g5" href="#c14">
  1736.           <div class="cname">
  1737.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1738.            change the opacity of the names in the CSS-->
  1739.             <span style="font-size: 45px;">
  1740.             FIRST <br />
  1741.             LASTN
  1742.             </span>
  1743.           </div> <!--cname-->
  1744.           <div class="triangle"></div>
  1745.          
  1746.           <img src="https://placehold.it/160x160"></img>
  1747.         </div> <!--cbox-->
  1748.        
  1749.        
  1750.         <!--CHARACTER FIFTEEN-->
  1751.        
  1752.         <div class="cbox g2" href="#c15">
  1753.           <div class="cname">
  1754.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1755.            change the opacity of the names in the CSS-->
  1756.             <span style="font-size: 45px;">
  1757.             FIRST <br />
  1758.             LASTN
  1759.             </span>
  1760.           </div> <!--cname-->
  1761.           <div class="triangle"></div>
  1762.          
  1763.           <img src="https://placehold.it/160x160"></img>
  1764.         </div> <!--cbox-->
  1765.        
  1766.        
  1767.         <!--CHARACTER CARD THIRD ROW-->
  1768.        
  1769.         <div class="ccard" id="c11">
  1770.          
  1771.          <div class="ccontent active" id="c1p2">
  1772.             <div class="cbio">
  1773.                
  1774.               <div class="headline">
  1775.                 <h2><span class="h2front">the</span>title</h2>
  1776.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1777.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1778.                 magna aliqua.
  1779.               </div><!--headline-->
  1780.            
  1781.               <div class="biocontent">
  1782.                
  1783.                 <!--LEFT DATA-->
  1784.                 <ul class="cell1">
  1785.                   <li> Full name:  <span> - </span> </li>
  1786.                   <li> Nickname:   <span> - </span> </li>
  1787.                   <li> Age:        <span> - </span> </li>
  1788.                   <li> D.o.B:      <span> - </span> </li>
  1789.                   <li> Gender:     <span> - </span> </li>
  1790.                   <li> Pronouns:   <span> - </span> </li>
  1791.                   <li> Sexuality:  <span> - </span> </li>
  1792.                   <li> Species: <span> - </span></li>
  1793.                 </ul>
  1794.                
  1795.                 <!--RIGHT DATA-->
  1796.                 <ul class="cell2">
  1797.                   <li> Occupation:      <span> - </span> </li>
  1798.                   <li> Nationality:     <span> - </span> </li>
  1799.                   <li> Residence:       <span> - </span> </li>
  1800.                   <li> Education:       <span> - </span> </li>
  1801.                   <li> Height:          <span> - </span> </li>
  1802.                   <li> Alignment:       <span> - </span> </li>
  1803.                   <li> Jung Type:       <span> - </span> </li>
  1804.                   <li> Affiliation:     <span> - </span></li>
  1805.                 </ul>
  1806.                
  1807.               </div><!--biocontent-->
  1808.              
  1809.             </div><!--cbio-->  
  1810.            
  1811.             <div class="clinks">
  1812.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1813.              http://fontawesome.io/icons/-->
  1814.               <a href="#">
  1815.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1816.               <a href="#">
  1817.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1818.               <a href="#">
  1819.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1820.               <a href="#">
  1821.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1822.               <a href="#">
  1823.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1824.               <a href="#">
  1825.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1826.             </div><!--clinks-->
  1827.            
  1828.             <div class="flavorimg" style="background-image:
  1829.              url('https://placehold.it/180x340');">
  1830.             </div>
  1831.            
  1832.           </div> <!--ccontent c1p2-->
  1833.          
  1834.         </div> <!--ccard-->
  1835.        
  1836.        
  1837.         <div class="ccard" id="c12">
  1838.        
  1839.         <div class="ccontent active" id="c2p2">
  1840.             <div class="cbio">
  1841.                
  1842.               <div class="headline">
  1843.                 <h2><span class="h2front">the</span>title</h2>
  1844.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1845.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1846.                 magna aliqua.
  1847.               </div><!--headline-->
  1848.            
  1849.               <div class="biocontent">
  1850.                
  1851.                 <!--LEFT DATA-->
  1852.                 <ul class="cell1">
  1853.                   <li> Full name:  <span> - </span> </li>
  1854.                   <li> Nickname:   <span> - </span> </li>
  1855.                   <li> Age:        <span> - </span> </li>
  1856.                   <li> D.o.B:      <span> - </span> </li>
  1857.                   <li> Gender:     <span> - </span> </li>
  1858.                   <li> Pronouns:   <span> - </span> </li>
  1859.                   <li> Sexuality:  <span> - </span> </li>
  1860.                   <li> Species: <span> - </span></li>
  1861.                 </ul>
  1862.                
  1863.                 <!--RIGHT DATA-->
  1864.                 <ul class="cell2">
  1865.                   <li> Occupation:      <span> - </span> </li>
  1866.                   <li> Nationality:     <span> - </span> </li>
  1867.                   <li> Residence:       <span> - </span> </li>
  1868.                   <li> Education:       <span> - </span> </li>
  1869.                   <li> Height:          <span> - </span> </li>
  1870.                   <li> Alignment:       <span> - </span> </li>
  1871.                   <li> Jung Type:       <span> - </span> </li>
  1872.                   <li> Affiliation:     <span> - </span></li>
  1873.                 </ul>
  1874.                
  1875.               </div><!--biocontent-->
  1876.              
  1877.             </div><!--cbio-->  
  1878.            
  1879.             <div class="clinks">
  1880.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1881.              http://fontawesome.io/icons/-->
  1882.               <a href="#">
  1883.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1884.               <a href="#">
  1885.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1886.               <a href="#">
  1887.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1888.               <a href="#">
  1889.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1890.               <a href="#">
  1891.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1892.               <a href="#">
  1893.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1894.             </div><!--clinks-->
  1895.            
  1896.             <div class="flavorimg" style="background-image:
  1897.              url('https://placehold.it/180x340');">
  1898.             </div>
  1899.            
  1900.           </div> <!--ccontent c2p2-->
  1901.          
  1902.         </div> <!--ccard-->
  1903.        
  1904.        
  1905.         <div class="ccard" id="c13">
  1906.          
  1907.           <div class="ccontent active" id="c1p2">
  1908.             <div class="cbio">
  1909.                
  1910.               <div class="headline">
  1911.                 <h2><span class="h2front">the</span>title</h2>
  1912.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1913.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1914.                 magna aliqua.
  1915.               </div><!--headline-->
  1916.            
  1917.               <div class="biocontent">
  1918.                
  1919.                 <!--LEFT DATA-->
  1920.                 <ul class="cell1">
  1921.                   <li> Full name:  <span> - </span> </li>
  1922.                   <li> Nickname:   <span> - </span> </li>
  1923.                   <li> Age:        <span> - </span> </li>
  1924.                   <li> D.o.B:      <span> - </span> </li>
  1925.                   <li> Gender:     <span> - </span> </li>
  1926.                   <li> Pronouns:   <span> - </span> </li>
  1927.                   <li> Sexuality:  <span> - </span> </li>
  1928.                   <li> Species: <span> - </span></li>
  1929.                 </ul>
  1930.                
  1931.                 <!--RIGHT DATA-->
  1932.                 <ul class="cell2">
  1933.                   <li> Occupation:      <span> - </span> </li>
  1934.                   <li> Nationality:     <span> - </span> </li>
  1935.                   <li> Residence:       <span> - </span> </li>
  1936.                   <li> Education:       <span> - </span> </li>
  1937.                   <li> Height:          <span> - </span> </li>
  1938.                   <li> Alignment:       <span> - </span> </li>
  1939.                   <li> Jung Type:       <span> - </span> </li>
  1940.                   <li> Affiliation:     <span> - </span></li>
  1941.                 </ul>
  1942.                
  1943.               </div><!--biocontent-->
  1944.              
  1945.             </div><!--cbio-->  
  1946.            
  1947.             <div class="clinks">
  1948.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1949.              http://fontawesome.io/icons/-->
  1950.               <a href="#">
  1951.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1952.               <a href="#">
  1953.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1954.               <a href="#">
  1955.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1956.               <a href="#">
  1957.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1958.               <a href="#">
  1959.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1960.               <a href="#">
  1961.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1962.             </div><!--clinks-->
  1963.            
  1964.             <div class="flavorimg" style="background-image:
  1965.              url('https://placehold.it/180x340');">
  1966.             </div>
  1967.            
  1968.           </div> <!--ccontent c1p2-->
  1969.          
  1970.         </div> <!--ccard-->
  1971.        
  1972.        
  1973.         <div class="ccard" id="c14">
  1974.        
  1975.         <div class="ccontent active" id="c1p2">
  1976.             <div class="cbio">
  1977.                
  1978.               <div class="headline">
  1979.                 <h2><span class="h2front">the</span>title</h2>
  1980.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1981.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1982.                 magna aliqua.
  1983.               </div><!--headline-->
  1984.            
  1985.               <div class="biocontent">
  1986.                
  1987.                 <!--LEFT DATA-->
  1988.                 <ul class="cell1">
  1989.                   <li> Full name:  <span> - </span> </li>
  1990.                   <li> Nickname:   <span> - </span> </li>
  1991.                   <li> Age:        <span> - </span> </li>
  1992.                   <li> D.o.B:      <span> - </span> </li>
  1993.                   <li> Gender:     <span> - </span> </li>
  1994.                   <li> Pronouns:   <span> - </span> </li>
  1995.                   <li> Sexuality:  <span> - </span> </li>
  1996.                   <li> Species: <span> - </span></li>
  1997.                 </ul>
  1998.                
  1999.                 <!--RIGHT DATA-->
  2000.                 <ul class="cell2">
  2001.                   <li> Occupation:      <span> - </span> </li>
  2002.                   <li> Nationality:     <span> - </span> </li>
  2003.                   <li> Residence:       <span> - </span> </li>
  2004.                   <li> Education:       <span> - </span> </li>
  2005.                   <li> Height:          <span> - </span> </li>
  2006.                   <li> Alignment:       <span> - </span> </li>
  2007.                   <li> Jung Type:       <span> - </span> </li>
  2008.                   <li> Affiliation:     <span> - </span></li>
  2009.                 </ul>
  2010.                
  2011.               </div><!--biocontent-->
  2012.              
  2013.             </div><!--cbio-->  
  2014.            
  2015.             <div class="clinks">
  2016.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2017.              http://fontawesome.io/icons/-->
  2018.               <a href="#">
  2019.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2020.               <a href="#">
  2021.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2022.               <a href="#">
  2023.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2024.               <a href="#">
  2025.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2026.               <a href="#">
  2027.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2028.               <a href="#">
  2029.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2030.             </div><!--clinks-->
  2031.            
  2032.             <div class="flavorimg" style="background-image:
  2033.              url('https://placehold.it/180x340');">
  2034.             </div>
  2035.            
  2036.           </div> <!--ccontent c1p2-->
  2037.          
  2038.         </div> <!--ccard-->
  2039.        
  2040.        
  2041.        
  2042.         <div class="ccard" id="c15">
  2043.        
  2044.         <div class="ccontent active" id="c1p2">
  2045.             <div class="cbio">
  2046.                
  2047.               <div class="headline">
  2048.                 <h2><span class="h2front">the</span>title</h2>
  2049.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2050.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2051.                 magna aliqua.
  2052.               </div><!--headline-->
  2053.            
  2054.               <div class="biocontent">
  2055.                
  2056.                 <!--LEFT DATA-->
  2057.                 <ul class="cell1">
  2058.                   <li> Full name:  <span> - </span> </li>
  2059.                   <li> Nickname:   <span> - </span> </li>
  2060.                   <li> Age:        <span> - </span> </li>
  2061.                   <li> D.o.B:      <span> - </span> </li>
  2062.                   <li> Gender:     <span> - </span> </li>
  2063.                   <li> Pronouns:   <span> - </span> </li>
  2064.                   <li> Sexuality:  <span> - </span> </li>
  2065.                   <li> Species: <span> - </span></li>
  2066.                 </ul>
  2067.                
  2068.                 <!--RIGHT DATA-->
  2069.                 <ul class="cell2">
  2070.                   <li> Occupation:      <span> - </span> </li>
  2071.                   <li> Nationality:     <span> - </span> </li>
  2072.                   <li> Residence:       <span> - </span> </li>
  2073.                   <li> Education:       <span> - </span> </li>
  2074.                   <li> Height:          <span> - </span> </li>
  2075.                   <li> Alignment:       <span> - </span> </li>
  2076.                   <li> Jung Type:       <span> - </span> </li>
  2077.                   <li> Affiliation:     <span> - </span></li>
  2078.                 </ul>
  2079.                
  2080.               </div><!--biocontent-->
  2081.              
  2082.             </div><!--cbio-->  
  2083.            
  2084.             <div class="clinks">
  2085.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2086.              http://fontawesome.io/icons/-->
  2087.               <a href="#">
  2088.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2089.               <a href="#">
  2090.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2091.               <a href="#">
  2092.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2093.               <a href="#">
  2094.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2095.               <a href="#">
  2096.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2097.               <a href="#">
  2098.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2099.             </div><!--clinks-->
  2100.            
  2101.             <div class="flavorimg" style="background-image:
  2102.              url('https://placehold.it/180x340');">
  2103.             </div>
  2104.            
  2105.           </div> <!--ccontent c1p2-->
  2106.          
  2107.         </div> <!--ccard-->
  2108.        
  2109.        
  2110.        
  2111.        
  2112.          <!--CHARACTER SIXTEEN-->
  2113.        
  2114.         <div class="cbox g2" href="#c16">
  2115.           <div class="cname">
  2116.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  2117.            change the opacity of the names in the CSS-->
  2118.             <span style="font-size: 45px;">
  2119.             FIRST <br />
  2120.             LASTN
  2121.             </span>
  2122.           </div> <!--cname-->
  2123.           <div class="triangle"></div>
  2124.          
  2125.           <img src="https://placehold.it/160x160"></img>
  2126.         </div> <!--cbox-->
  2127.        
  2128.        
  2129.         <!--CHARACTER SEVENTEEN-->
  2130.        
  2131.         <div class="cbox g3" href="#c17">
  2132.           <div class="cname">
  2133.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  2134.            change the opacity of the names in the CSS-->
  2135.             <span style="font-size: 45px;">
  2136.             FIRST <br />
  2137.             LASTN
  2138.             </span>
  2139.           </div> <!--cname-->
  2140.           <div class="triangle"></div>
  2141.          
  2142.           <img src="https://placehold.it/160x160"></img>
  2143.         </div> <!--cbox-->
  2144.        
  2145.        
  2146.         <!--CHARACTER EIGHTTEEN-->
  2147.        
  2148.         <div class="cbox g4" href="#c18">
  2149.           <div class="cname">
  2150.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  2151.            change the opacity of the names in the CSS-->
  2152.             <span style="font-size: 45px;">
  2153.             FIRST <br />
  2154.             LASTN
  2155.             </span>
  2156.           </div> <!--cname-->
  2157.           <div class="triangle"></div>
  2158.          
  2159.           <img src="https://placehold.it/160x160"></img>
  2160.         </div> <!--cbox-->
  2161.        
  2162.        
  2163.         <!--CHARACTER NINETEEN-->
  2164.        
  2165.         <div class="cbox g5" href="#c19">
  2166.           <div class="cname">
  2167.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  2168.            change the opacity of the names in the CSS-->
  2169.             <span style="font-size: 45px;">
  2170.             FIRST <br />
  2171.             LASTN
  2172.             </span>
  2173.           </div> <!--cname-->
  2174.           <div class="triangle"></div>
  2175.  
  2176.           <img src="https://placehold.it/160x160"></img>
  2177.         </div> <!--cbox-->
  2178.        
  2179.        
  2180.         <!--CHARACTER TWENTY-->
  2181.        
  2182.         <div class="cbox g2" href="#c20">
  2183.           <div class="cname">
  2184.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  2185.            change the opacity of the names in the CSS-->
  2186.             <span style="font-size: 45px;">
  2187.             FIRST <br />
  2188.             LASTN
  2189.             </span>
  2190.           </div> <!--cname-->
  2191.           <div class="triangle"></div>
  2192.          
  2193.           <img src="https://placehold.it/160x160"></img>
  2194.         </div> <!--cbox-->
  2195.        
  2196.        
  2197.         <!--CHARACTER CARD SECOND ROW-->
  2198.        
  2199.         <div class="ccard" id="c16">
  2200.          
  2201.          <div class="ccontent active" id="c1p2">
  2202.             <div class="cbio">
  2203.                
  2204.               <div class="headline">
  2205.                 <h2><span class="h2front">the</span>title</h2>
  2206.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2207.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2208.                 magna aliqua.
  2209.               </div><!--headline-->
  2210.            
  2211.               <div class="biocontent">
  2212.                
  2213.                 <!--LEFT DATA-->
  2214.                 <ul class="cell1">
  2215.                   <li> Full name:  <span> - </span> </li>
  2216.                   <li> Nickname:   <span> - </span> </li>
  2217.                   <li> Age:        <span> - </span> </li>
  2218.                   <li> D.o.B:      <span> - </span> </li>
  2219.                   <li> Gender:     <span> - </span> </li>
  2220.                   <li> Pronouns:   <span> - </span> </li>
  2221.                   <li> Sexuality:  <span> - </span> </li>
  2222.                   <li> Species: <span> - </span></li>
  2223.                 </ul>
  2224.                
  2225.                 <!--RIGHT DATA-->
  2226.                 <ul class="cell2">
  2227.                   <li> Occupation:      <span> - </span> </li>
  2228.                   <li> Nationality:     <span> - </span> </li>
  2229.                   <li> Residence:       <span> - </span> </li>
  2230.                   <li> Education:       <span> - </span> </li>
  2231.                   <li> Height:          <span> - </span> </li>
  2232.                   <li> Alignment:       <span> - </span> </li>
  2233.                   <li> Jung Type:       <span> - </span> </li>
  2234.                   <li> Affiliation:     <span> - </span></li>
  2235.                 </ul>
  2236.                
  2237.               </div><!--biocontent-->
  2238.              
  2239.             </div><!--cbio-->  
  2240.            
  2241.             <div class="clinks">
  2242.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2243.              http://fontawesome.io/icons/-->
  2244.               <a href="#">
  2245.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2246.               <a href="#">
  2247.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2248.               <a href="#">
  2249.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2250.               <a href="#">
  2251.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2252.               <a href="#">
  2253.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2254.               <a href="#">
  2255.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2256.             </div><!--clinks-->
  2257.            
  2258.             <div class="flavorimg" style="background-image:
  2259.              url('https://placehold.it/180x340');">
  2260.             </div>
  2261.            
  2262.           </div> <!--ccontent c1p2-->
  2263.          
  2264.         </div> <!--ccard-->
  2265.        
  2266.        
  2267.         <div class="ccard" id="c17">
  2268.        
  2269.         <div class="ccontent active" id="c2p2">
  2270.             <div class="cbio">
  2271.                
  2272.               <div class="headline">
  2273.                 <h2><span class="h2front">the</span>title</h2>
  2274.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2275.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2276.                 magna aliqua.
  2277.               </div><!--headline-->
  2278.            
  2279.               <div class="biocontent">
  2280.                
  2281.                 <!--LEFT DATA-->
  2282.                 <ul class="cell1">
  2283.                   <li> Full name:  <span> - </span> </li>
  2284.                   <li> Nickname:   <span> - </span> </li>
  2285.                   <li> Age:        <span> - </span> </li>
  2286.                   <li> D.o.B:      <span> - </span> </li>
  2287.                   <li> Gender:     <span> - </span> </li>
  2288.                   <li> Pronouns:   <span> - </span> </li>
  2289.                   <li> Sexuality:  <span> - </span> </li>
  2290.                   <li> Species: <span> - </span></li>
  2291.                 </ul>
  2292.                
  2293.                 <!--RIGHT DATA-->
  2294.                 <ul class="cell2">
  2295.                   <li> Occupation:      <span> - </span> </li>
  2296.                   <li> Nationality:     <span> - </span> </li>
  2297.                   <li> Residence:       <span> - </span> </li>
  2298.                   <li> Education:       <span> - </span> </li>
  2299.                   <li> Height:          <span> - </span> </li>
  2300.                   <li> Alignment:       <span> - </span> </li>
  2301.                   <li> Jung Type:       <span> - </span> </li>
  2302.                   <li> Affiliation:     <span> - </span></li>
  2303.                 </ul>
  2304.                
  2305.               </div><!--biocontent-->
  2306.              
  2307.             </div><!--cbio-->  
  2308.            
  2309.             <div class="clinks">
  2310.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2311.              http://fontawesome.io/icons/-->
  2312.               <a href="#">
  2313.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2314.               <a href="#">
  2315.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2316.               <a href="#">
  2317.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2318.               <a href="#">
  2319.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2320.               <a href="#">
  2321.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2322.               <a href="#">
  2323.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2324.             </div><!--clinks-->
  2325.            
  2326.             <div class="flavorimg" style="background-image:
  2327.              url('https://placehold.it/180x340');">
  2328.             </div>
  2329.            
  2330.           </div> <!--ccontent c2p2-->
  2331.          
  2332.         </div> <!--ccard-->
  2333.        
  2334.        
  2335.         <div class="ccard" id="c18">
  2336.          
  2337.           <div class="ccontent active" id="c1p2">
  2338.             <div class="cbio">
  2339.                
  2340.               <div class="headline">
  2341.                 <h2><span class="h2front">the</span>title</h2>
  2342.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2343.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2344.                 magna aliqua.
  2345.               </div><!--headline-->
  2346.            
  2347.               <div class="biocontent">
  2348.                
  2349.                 <!--LEFT DATA-->
  2350.                 <ul class="cell1">
  2351.                   <li> Full name:  <span> - </span> </li>
  2352.                   <li> Nickname:   <span> - </span> </li>
  2353.                   <li> Age:        <span> - </span> </li>
  2354.                   <li> D.o.B:      <span> - </span> </li>
  2355.                   <li> Gender:     <span> - </span> </li>
  2356.                   <li> Pronouns:   <span> - </span> </li>
  2357.                   <li> Sexuality:  <span> - </span> </li>
  2358.                   <li> Species: <span> - </span></li>
  2359.                 </ul>
  2360.                
  2361.                 <!--RIGHT DATA-->
  2362.                 <ul class="cell2">
  2363.                   <li> Occupation:      <span> - </span> </li>
  2364.                   <li> Nationality:     <span> - </span> </li>
  2365.                   <li> Residence:       <span> - </span> </li>
  2366.                   <li> Education:       <span> - </span> </li>
  2367.                   <li> Height:          <span> - </span> </li>
  2368.                   <li> Alignment:       <span> - </span> </li>
  2369.                   <li> Jung Type:       <span> - </span> </li>
  2370.                   <li> Affiliation:     <span> - </span></li>
  2371.                 </ul>
  2372.                
  2373.               </div><!--biocontent-->
  2374.              
  2375.             </div><!--cbio-->  
  2376.            
  2377.             <div class="clinks">
  2378.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2379.              http://fontawesome.io/icons/-->
  2380.               <a href="#">
  2381.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2382.               <a href="#">
  2383.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2384.               <a href="#">
  2385.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2386.               <a href="#">
  2387.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2388.               <a href="#">
  2389.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2390.               <a href="#">
  2391.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2392.             </div><!--clinks-->
  2393.            
  2394.             <div class="flavorimg" style="background-image:
  2395.              url('https://placehold.it/180x340');">
  2396.             </div>
  2397.            
  2398.           </div> <!--ccontent c1p2-->
  2399.          
  2400.         </div> <!--ccard-->
  2401.        
  2402.        
  2403.         <div class="ccard" id="c19">
  2404.        
  2405.         <div class="ccontent active" id="c1p2">
  2406.             <div class="cbio">
  2407.                
  2408.               <div class="headline">
  2409.                 <h2><span class="h2front">the</span>title</h2>
  2410.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2411.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2412.                 magna aliqua.
  2413.               </div><!--headline-->
  2414.            
  2415.               <div class="biocontent">
  2416.                
  2417.                 <!--LEFT DATA-->
  2418.                 <ul class="cell1">
  2419.                   <li> Full name:  <span> - </span> </li>
  2420.                   <li> Nickname:   <span> - </span> </li>
  2421.                   <li> Age:        <span> - </span> </li>
  2422.                   <li> D.o.B:      <span> - </span> </li>
  2423.                   <li> Gender:     <span> - </span> </li>
  2424.                   <li> Pronouns:   <span> - </span> </li>
  2425.                   <li> Sexuality:  <span> - </span> </li>
  2426.                   <li> Species: <span> - </span></li>
  2427.                 </ul>
  2428.                
  2429.                 <!--RIGHT DATA-->
  2430.                 <ul class="cell2">
  2431.                   <li> Occupation:      <span> - </span> </li>
  2432.                   <li> Nationality:     <span> - </span> </li>
  2433.                   <li> Residence:       <span> - </span> </li>
  2434.                   <li> Education:       <span> - </span> </li>
  2435.                   <li> Height:          <span> - </span> </li>
  2436.                   <li> Alignment:       <span> - </span> </li>
  2437.                   <li> Jung Type:       <span> - </span> </li>
  2438.                   <li> Affiliation:     <span> - </span></li>
  2439.                 </ul>
  2440.                
  2441.               </div><!--biocontent-->
  2442.              
  2443.             </div><!--cbio-->  
  2444.            
  2445.             <div class="clinks">
  2446.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2447.              http://fontawesome.io/icons/-->
  2448.               <a href="#">
  2449.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2450.               <a href="#">
  2451.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2452.               <a href="#">
  2453.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2454.               <a href="#">
  2455.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2456.               <a href="#">
  2457.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2458.               <a href="#">
  2459.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2460.             </div><!--clinks-->
  2461.            
  2462.             <div class="flavorimg" style="background-image:
  2463.              url('https://placehold.it/180x340');">
  2464.             </div>
  2465.            
  2466.           </div> <!--ccontent c1p2-->
  2467.          
  2468.         </div> <!--ccard-->
  2469.        
  2470.        
  2471.        
  2472.         <div class="ccard" id="c20">
  2473.        
  2474.         <div class="ccontent active" id="c1p2">
  2475.             <div class="cbio">
  2476.                
  2477.               <div class="headline">
  2478.                 <h2><span class="h2front">the</span>title</h2>
  2479.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2480.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2481.                 magna aliqua.
  2482.               </div><!--headline-->
  2483.            
  2484.               <div class="biocontent">
  2485.                
  2486.                 <!--LEFT DATA-->
  2487.                 <ul class="cell1">
  2488.                   <li> Full name:  <span> - </span> </li>
  2489.                   <li> Nickname:   <span> - </span> </li>
  2490.                   <li> Age:        <span> - </span> </li>
  2491.                   <li> D.o.B:      <span> - </span> </li>
  2492.                   <li> Gender:     <span> - </span> </li>
  2493.                   <li> Pronouns:   <span> - </span> </li>
  2494.                   <li> Sexuality:  <span> - </span> </li>
  2495.                   <li> Species: <span> - </span></li>
  2496.                 </ul>
  2497.                
  2498.                 <!--RIGHT DATA-->
  2499.                 <ul class="cell2">
  2500.                   <li> Occupation:      <span> - </span> </li>
  2501.                   <li> Nationality:     <span> - </span> </li>
  2502.                   <li> Residence:       <span> - </span> </li>
  2503.                   <li> Education:       <span> - </span> </li>
  2504.                   <li> Height:          <span> - </span> </li>
  2505.                   <li> Alignment:       <span> - </span> </li>
  2506.                   <li> Jung Type:       <span> - </span> </li>
  2507.                   <li> Affiliation:     <span> - </span></li>
  2508.                 </ul>
  2509.                
  2510.               </div><!--biocontent-->
  2511.              
  2512.             </div><!--cbio-->  
  2513.            
  2514.             <div class="clinks">
  2515.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2516.              http://fontawesome.io/icons/-->
  2517.               <a href="#">
  2518.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2519.               <a href="#">
  2520.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2521.               <a href="#">
  2522.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2523.               <a href="#">
  2524.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2525.               <a href="#">
  2526.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2527.               <a href="#">
  2528.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2529.             </div><!--clinks-->
  2530.            
  2531.             <div class="flavorimg" style="background-image:
  2532.              url('https://placehold.it/180x340');">
  2533.             </div>
  2534.            
  2535.           </div> <!--ccontent c1p2-->
  2536.          
  2537.         </div> <!--ccard-->
  2538.        
  2539.        
  2540.        </div> <!--gallery-track-->
  2541.       </section>
  2542.      
  2543.      
  2544.     </div><!--container-->
  2545.  
  2546.     <script type="text/javascript">
  2547.    
  2548.     $(document).ready(function() {
  2549.        
  2550.         /*TRIANGLE COLOR*/
  2551.         $('.cbox').each(function() {
  2552.             var groupClass = $(this).attr('class').split(" ")[1];
  2553.  
  2554.             $(this).find('.triangle').addClass(groupClass);
  2555.  
  2556.         });
  2557.        
  2558.  
  2559.  
  2560.         /*CBOX CARDS*/
  2561.         $('.cbox').on('click', function(e) {
  2562.  
  2563.             var currentAttrValue = $(this).attr('href');
  2564.             var groupClass = $(this).attr('class').split(" ")[1];
  2565.  
  2566.             if ($('.ccard' + currentAttrValue).hasClass('active')) {
  2567.                 $('.ccard' + currentAttrValue).removeClass('active');
  2568.                 $(this).removeClass('active');
  2569.             }
  2570.             else {
  2571.                 window.location.hash = $(this).attr('href');
  2572.                 $('.ccard' + currentAttrValue).addClass('active').siblings('.ccard').removeClass('active');
  2573.                 $(this).addClass('active').siblings('.cbox').removeClass('active');
  2574.             }
  2575.  
  2576.             /*TRAIT COLOURS*/
  2577.             $(currentAttrValue).find('.ctraits, .cell1, .cell2').addClass(groupClass);
  2578.  
  2579.         });
  2580.  
  2581.  
  2582.         /*CARD TABS & ACTIVE LINKS*/
  2583.        $('.cfooter a').on('click', function(e) {
  2584.            var currentAttrValue = $(this).attr('href');
  2585.  
  2586.             $('.ccontent' + currentAttrValue).fadeIn(600).siblings('.ccontent').hide();
  2587.             $(this).addClass('active').siblings().removeClass('active');
  2588.  
  2589.             e.preventDefault();
  2590.         });
  2591.        
  2592.        
  2593.         /*CONNECTION TABS*/
  2594.         $('.con').on('click', function(e) {
  2595.             var currentAttrValue = $(this).attr('href');
  2596.  
  2597.             $('.connections' + currentAttrValue).fadeIn(600).siblings('.connections').hide();
  2598.             $(this).addClass('active').siblings().removeClass('active');
  2599.  
  2600.             e.preventDefault();
  2601.          });
  2602.  
  2603.  
  2604.         /*ISOTOPE*/
  2605.         /*NO LAYOUT*/
  2606.         Isotope.Item.prototype._create = function() {
  2607.             // assign id, used for original-order sorting
  2608.             this.id = this.layout.itemGUID++;
  2609.             // transition objects
  2610.             this._transn = {
  2611.                 ingProperties: {},
  2612.                 clean: {},
  2613.                 onEnd: {}
  2614.             };
  2615.             this.sortData = {};
  2616.         };
  2617.  
  2618.         Isotope.prototype.arrange = function(opts) {
  2619.             // set any options pass
  2620.             this.option(opts);
  2621.             this._getIsInstant();
  2622.             // just filter
  2623.             this.filteredItems = this._filter(this.items);
  2624.             // flag for initalized
  2625.             this._isLayoutInited = true;
  2626.         };
  2627.        
  2628.        
  2629.         /*FILTER*/
  2630.         var $grid = $('#gallery-track').isotope({
  2631.             itemSelector: '.cbox',
  2632.             stagger: 30,
  2633.             layoutMode: 'none'
  2634.         });
  2635.  
  2636.         $('.square').on('click', function() {
  2637.             $('.ccard').each(function() {
  2638.                 $(this).removeClass('active');
  2639.             });
  2640.  
  2641.             $('#gallery').animate({
  2642.                 scrollLeft: 0
  2643.             }, 800);
  2644.  
  2645.             var filterValue = $(this).attr('data-filter');
  2646.             $grid.isotope({
  2647.                 filter: filterValue
  2648.             });
  2649.  
  2650.             e.preventDefault();
  2651.         });
  2652.        
  2653.         /*HASH SCRIPT*/
  2654.         var hash = $.trim(window.location.hash);
  2655.         if (hash) {
  2656.             //time out to prevent jumping of div
  2657.             setTimeout(function() {
  2658.                 $('.cbox[href$="' + hash + '"]').trigger('click');
  2659.             }, 800);
  2660.         }
  2661.        
  2662.         /*FIX LEGEND ON SCROLL*/
  2663.        
  2664.         $(function($) {
  2665.             function fixedLegend() {
  2666.                 if ($(window).scrollTop() > 190)
  2667.                     $('footer').css({
  2668.                        'position': 'fixed',
  2669.                        'width': '100%',
  2670.                        'z-index': '3',
  2671.                        'margin': '0 auto',
  2672.                        'left': '0',
  2673.                        'background': 'rgba(255, 255, 255, 0.8)',
  2674.                        'top': '0px'
  2675.                     });
  2676.                    
  2677.                
  2678.                    
  2679.                 else
  2680.                     $('footer').css({
  2681.                        'position': 'relative',
  2682.                        'background': 'rgba(255, 255, 255, 0.3)',
  2683.                        'margin': '30px 0 0 0',
  2684.                        'top': 'auto'
  2685.                     });
  2686.             }
  2687.        
  2688.             $(window).scroll(fixedLegend);
  2689.                 fixedLegend();
  2690.             });
  2691.  
  2692.  
  2693.     }); //DOCUMENT READY
  2694.     </script>
  2695.  </body>
  2696. </html>
Advertisement
Add Comment
Please, Sign In to add comment