nonspace

PAGE #04 :: AFTERIMAGE

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