nonspace

PAGE #04 :: AFTERIMAGE (Master)

Aug 1st, 2018
593
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 235.53 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!--THEME #4: AFTERIMAGE (Master) 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.     /*CHARACTER CARD GALLERY*/
  149.     #gallery {
  150.         position: relative;
  151.         padding: 45px 0px 20px;
  152.         overflow-x: hidden;
  153.         overflow-y: hidden;
  154.         height: auto;
  155.         margin: 0px 0px 25px 0px;
  156.         text-align: justify;
  157.     }
  158.     #gallery-track {
  159.         position: relative;
  160.         width: auto;
  161.         display: -webkit-flex; /* Safari */
  162.         -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  163.         display: flex;
  164.         flex-wrap: wrap;
  165.         flex-direction: row;
  166.         padding-right: -10px;
  167.         margin: -10px;
  168.         height: auto;
  169.     }
  170.     /*CHARACTER BOXES*/
  171.     .cbox {
  172.         position: relative;
  173.         height: 160px;
  174.         width: 160px;
  175.         flex: 0 0 0px;
  176.         margin: 11px 11.1px;
  177.         -webkit-transition: all 1s ease;
  178.         -moz-transition: all 1s ease;
  179.         -ms-transition: all 1s ease;
  180.         transition: all 1s ease;
  181.     }
  182.     .cbox img {
  183.         height: 160px;
  184.         width: 160px;
  185.         -webkit-filter: grayscale(100%);
  186.         filter: grayscale(100%);
  187.         -webkit-transition: all 1s ease;
  188.         -moz-transition: all 1s ease;
  189.         -ms-transition: all 1s ease;
  190.         transition: all 1s ease;
  191.         -webkit-backface-visibility: hidden;
  192.         backface-visibility: hidden;
  193.     }
  194.     .cbox {}
  195.     /*CHARACTER NAME*/
  196.     .cname {
  197.         position: absolute;
  198.         height: 90px;
  199.         width: 160px;
  200.         right: 0;
  201.         transform: rotate(-90deg) translate(0, -100%);
  202.         transform-origin: 100% 0;
  203.         display: table;
  204.         z-index: 2;
  205.         -webkit-backface-visibility: hidden;
  206.         backface-visibility: hidden;
  207.         -webkit-user-select: none;
  208.         -moz-user-select: none;
  209.         -ms-user-select: none;
  210.         user-select: none;
  211.     }
  212.     .cname span {
  213.         font-family: Helvetica;
  214.         line-height: 78%;
  215.         color: rgba(0, 0, 0, 0.4);
  216.         font-weight: bold;
  217.         text-transform: uppercase;
  218.         display: table-cell;
  219.         vertical-align: bottom;
  220.         /*padding-bottom: 0px; adjust for positioning*/
  221.     }
  222.     .triangle {
  223.         position: absolute;
  224.         width: 0px;
  225.         height: 0px;
  226.         bottom: 0px;
  227.         border-style: solid;
  228.         border-width: 0px 0px 160px 160px;
  229.         border-color: transparent transparent transparent transparent;
  230.         z-index: 1;
  231.         -webkit-transition: all 1s ease;
  232.         -moz-transition: all 1s ease;
  233.         -ms-transition: all 1s ease;
  234.         transition: all 1s ease;
  235.         -webkit-user-select: none;
  236.         -moz-user-select: none;
  237.         -ms-user-select: none;
  238.         user-select: none;
  239.         -webkit-backface-visibility: hidden;
  240.         backface-visibility: hidden;
  241.     }
  242.    
  243.    
  244.     /*CONTENT CARD TAB NAVIGATION*/
  245.    
  246.     .cfooter {
  247.         top: 30px;
  248.         width: 895px;
  249.         height: 17;
  250.         z-index: 2;
  251.         right: 0;
  252.         left: -180;
  253.         text-align: center;
  254.         margin: 15px 0 0 0;
  255.     }
  256.     .cfooter a {
  257.         color: #dbdbdb;
  258.         margin: 0 2px;
  259.     }
  260.    
  261.    
  262.     /*CONTENT CARDS*/
  263.    
  264.     .ccard {
  265.         display: none;
  266.         opacity: 0;
  267.         background: rgb(236,237,236);
  268.         width: 100%;
  269.         height: 390px;
  270.         padding: 0;
  271.         vertical-align: top;
  272.         webkit-animation-name: fadeIn;
  273.         -webkit-animation-duration: 0.5s;
  274.         animation-name: fadeIn;
  275.         animation-duration: 0.5s;
  276.     }
  277.     .ccontent {
  278.         position: relative;
  279.         width: 860px;
  280.         height: 340px;
  281.         margin: 0px auto;
  282.         display: none;
  283.         -webkit-transition: all 1s ease;
  284.         -moz-transition: all 1s ease;
  285.         -ms-transition: all 1s ease;
  286.         transition: all 1s ease;
  287.     }
  288.    
  289.    
  290.     /*BIO(1ST) TAB*/
  291.    
  292.     .cbio {
  293.         position: relative;
  294.         width: 650px;
  295.         height: 340px;
  296.     }
  297.     .headline {
  298.         position: relative;
  299.         width: 650px;
  300.         height: 80px;
  301.     }
  302.     .headline p {
  303.         margin: 0;
  304.         color: #7a7a7a;
  305.         font-size: 12px;
  306.         text-align: justify;
  307.         word-wrap: break-word;
  308.         white-space: normal;
  309.         overflow: hidden;
  310.         width: 635px;
  311.     }
  312.     h2 {
  313.         font-family: helvetica;
  314.         font-size: 30px;
  315.         margin: 0;
  316.         font-weight: normal;
  317.     }
  318.     /*first part of title*/
  319.     h2 span {
  320.         font-style: italic;
  321.         font-weight: normal;
  322.         color: #7a7a7a;
  323.     }
  324.     .flavorimg {
  325.         position: absolute;
  326.         bottom: 0;
  327.         right: 3px;
  328.         width: 180px;
  329.         height: 340px;
  330.         background-position: bottom right;
  331.         background-size: 100%;
  332.         background-repeat: no-repeat;
  333.         -webkit-filter: grayscale(100%);
  334.         filter: grayscale(100%);
  335.         -webkit-transition: all 1s ease;
  336.         -moz-transition: all 1s ease;
  337.         -ms-transition: all 1s ease;
  338.         transition: all 1s ease;
  339.     }
  340.     .biocontent {
  341.         position: relative;
  342.         height: 240px;
  343.         font-size: 14px;
  344.         text-align: justify;
  345.         line-height: 145%;
  346.         margin-top: 20px;
  347.         word-wrap: break-word;
  348.         white-space: normal;
  349.         overflow-y: auto;
  350.         overflow-x: hidden;
  351.         width: 635px;
  352.         padding-right: 22px;
  353.     }
  354.     /*GRID LINKS*/
  355.     .clinks {
  356.         display: grid;
  357.         position: absolute;
  358.         right: 0;
  359.         top: 0px;
  360.         height: 80px;
  361.         padding: 5px;
  362.         width: 180px;
  363.         grid-template-rows: repeat(2, 1fr);
  364.         grid-template-columns: repeat(3, 1fr);
  365.         grid-gap: 2px;
  366.     }
  367.     .clinks a {
  368.         display: flex;
  369.         justify-content: center;
  370.         align-items: center;
  371.         font-size: 20px;
  372.         color: #7a7a7a;
  373.         background: #dbdbdb;
  374.         text-decoration: none;
  375.     }
  376.     /*TRAITS*/
  377.     .ctraits {
  378.         height: 320px;
  379.         position: absolute;
  380.         right: 0;
  381.         top: 105px;
  382.         width: 180px;
  383.         font-family: helvetica;
  384.         text-align: left;
  385.         line-height: 130%;
  386.         font-size: 17px;
  387.         padding-right: 5px;
  388.         color: #fff;
  389.     }
  390.     .ctraits span {
  391.         padding: 3px 10px;
  392.     }
  393.     .ctraits p {
  394.         margin: 15px 0px;
  395.     }
  396.    
  397.    
  398.     /*INFO(2ND) TAB*/
  399.    
  400.     .cell1,
  401.     .cell2 {
  402.         height: auto;
  403.         width: 300px;
  404.         padding: 0 0 0 0;
  405.         margin: 0;
  406.         font-size: 14px;
  407.         overflow: hidden;
  408.     }
  409.     .cell1 {
  410.         float: left;
  411.     }
  412.     .cell2 {
  413.         float: right;
  414.     }
  415.     .cell1 ul,
  416.     .cell2 ul {
  417.         margin: 0;
  418.         padding: 0;
  419.     }
  420.     .cell1 li:first-child,
  421.     .cell2 li:first-child {
  422.     margin: 0;
  423.     }
  424.     .cell1 li,
  425.     .cell2 li {
  426.         list-style-type: none;
  427.         text-align: left;
  428.         color: #fff;
  429.         line-height: 180%;
  430.         margin: 5.7px 0 0 0;
  431.         padding-left: 5px;
  432.     }
  433.     .cell1 p,
  434.     .cell2 p {
  435.         padding: 0.3px;
  436.     }
  437.     .cell1 span,
  438.     .cell2 span {
  439.         color: #000;
  440.         background: #ecedec!important;
  441.         line-height: 186%;
  442.         margin: -1px;
  443.         padding: 0px 15px 0px;
  444.         float: right;
  445.     }
  446.    
  447.    
  448.     /*CONNECTIONS(3RD) TAB*/
  449.    
  450.     .con {
  451.         width: 83px;
  452.         height: 83px;
  453.         float: left;
  454.         background-size: 110%;
  455.         background-position: center center;
  456.         -webkit-transition: all 0.5s ease;
  457.         -moz-transition: all 0.5s ease;
  458.         -ms-transition: all 0.5s ease;
  459.         transition: all 0.5s ease;
  460.         margin: 0 1px 2px 1px;
  461.     }
  462.     .navcon {
  463.         position: absolute;
  464.         top: 0px;
  465.         right: 0px;
  466.         height: 340px;
  467.         width: 180px;
  468.         padding-right: 0px;
  469.         overflow-x: hidden;
  470.         overflow-y: auto;
  471.         /*display: grid;
  472.         grid-template-rows: repeat(2, 1fr);
  473.         grid-template-columns: repeat(2, 1fr);
  474.         grid-gap: 2px;*/
  475.     }
  476.     .connections {
  477.         height: 340px;
  478.         margin: 0px 0;
  479.         width: 630px;
  480.         padding-right: 40px;
  481.         overflow-x: hidden;
  482.         overflow-y: auto;
  483.         display: none;
  484.     }
  485.     .connections .cbio {
  486.        padding-right: 30px;
  487.     }
  488.     /*CONNECTION NAME*/
  489.     .connections span {
  490.         font-weight: bold;
  491.         font-size: 14px;
  492.         text-transform: uppercase;
  493.     }
  494.    
  495.    
  496.     /*GROUP SELECTION STYLES*/
  497.    
  498.     footer {
  499.         position: relative;
  500.         margin: 30px 0 0 0;
  501.         padding: 0px;
  502.         width: auto;
  503.         height: 50px;
  504.         background: rgba(255, 255, 255, 0.3);
  505.     }
  506.     #legend {
  507.         position: relative;
  508.         width: auto;
  509.         height: 50px;
  510.         margin: 0 auto;
  511.         text-align: center;
  512.     }
  513.     /*GROUP LINK SQUARES*/
  514.     .square {
  515.         position: relative;
  516.         height: 10px;
  517.         font-size: 9px;
  518.         padding: 5px 5px;
  519.         display: inline-block;
  520.         margin: 15px 5px;
  521.         border-radius: 5px;
  522.         color: #fff;
  523.         font-family: helvetica;
  524.         text-transform: uppercase;
  525.     }
  526.    
  527.    
  528.     /*ACTIVE STYLES*/
  529.  
  530.     /*CONTENT CARD*/
  531.     .ccard.active {
  532.         opacity: 1;
  533.         display: inline-block;
  534.         margin: 0px 0px;
  535.     }
  536.     /*CONTENT CARD INNER TABS*/
  537.     .ccontent.active,
  538.     .connections.active {
  539.         display: block;
  540.     }
  541.     /*CARD CONTENT NAV*/
  542.     .cfooter a.active {
  543.         color: #cccccc;
  544.     }
  545.     /*CBOX & CONNECTIONS NAV*/
  546.    .cbox.active img,
  547.    .con.active {
  548.        -webkit-filter: grayscale(0%);
  549.         filter: grayscale(0%);
  550.     }
  551.    
  552.    
  553.     /*GROUP COLOURS*/
  554.    
  555.     /*LEGEND & TRAITS & INFO DATA*/
  556.    /*GROUP 1*/
  557.    #legend .g1,
  558.    .ctraits.g1 span,
  559.    .cell1.g1 li,
  560.    .cell2.g1 li {
  561.        background: var(--g1);
  562.     }
  563.     /*GROUP 2*/
  564.     #legend .g2,
  565.     .ctraits.g2 span,
  566.     .cell1.g2 li,
  567.     .cell2.g2 li {
  568.         background: var(--g2);
  569.     }
  570.     /*GROUP 3*/
  571.     #legend .g3,
  572.     .ctraits.g3 span,
  573.     .cell1.g3 li,
  574.     .cell2.g3 li {
  575.         background: var(--g3);
  576.     }
  577.     /*GROUP 4*/
  578.     #legend .g4,
  579.     .ctraits.g4 span,
  580.     .cell1.g4 li,
  581.     .cell2.g4 li {
  582.         background: var(--g4);
  583.     }
  584.     /*GROUP 5*/
  585.     #legend .g5,
  586.     .ctraits.g5 span,
  587.     .cell1.g5 li,
  588.     .cell2.g5 li {
  589.         background: var(--g5);
  590.     }
  591.    
  592.     /*TRIANGLE*/
  593.     /*GROUP 1*/
  594.     .triangle.g1 {
  595.         border-color: transparent var(--g1) var(--g1) transparent;
  596.     }
  597.     /*GROUP 2*/
  598.     .triangle.g2 {
  599.         border-color: transparent var(--g2) var(--g2) transparent;
  600.     }
  601.     /*GROUP 3*/
  602.     .triangle.g3 {
  603.         border-color: transparent var(--g3) var(--g3) transparent;
  604.     }
  605.     /*GROUP 4*/
  606.     .triangle.g4 {
  607.         border-color: transparent var(--g4) var(--g4) transparent;
  608.     }
  609.     /*GROUP 5*/
  610.     .triangle.g5 {
  611.         border-color: transparent var(--g5) var(--g5) transparent;
  612.     }
  613.    
  614.    
  615.     /*HOVER STYLES*/
  616.    
  617.     .triangle:hover,
  618.     .cname:hover,
  619.     .con:hover,
  620.     .cbox:hover > img,
  621.     .square:hover {
  622.         cursor: pointer;
  623.     }
  624.     .cbox:hover,
  625.     .cbox:hover img {
  626.         z-index: 3;
  627.         -webkit-transform: scale(1.05);
  628.         -moz-transform: scale(1.05);
  629.         -ms-transform: scale(1.05);
  630.         -o-transform: scale(1.05);
  631.         transform: scale(1.05);
  632.     }
  633.     .cbox:hover .triangle {
  634.         transform: scale(1.05);
  635.         -webkit-transform-origin: 50% 100%;
  636.         -moz-transform-origin: 50% 100%;
  637.         -o-transform-origin: 50% 100%;
  638.         -ms-transform-origin: 50% 100%;
  639.         transform-origin: 45% 0%;
  640.     }
  641.     .clinks a i {
  642.         -webkit-transition: all 0.5s ease;
  643.         -moz-transition: all 0.5s ease;
  644.         -ms-transition: all 0.5s ease;
  645.         transition: all 0.5s ease;
  646.     }
  647.     .clinks a:hover i {
  648.         -webkit-transform: scale(1.3);
  649.         -moz-transform: scale(1.3);
  650.         -ms-transform: scale(1.3);
  651.         -o-transform: scale(1.3);
  652.         transform: scale(1.3);
  653.     }
  654.     .con:hover {
  655.         background-size: 100%;
  656.     }
  657.     .cbox:hover > img,
  658.     .flavorimg:hover,
  659.     .con:hover {
  660.         -webkit-filter: grayscale(0%);
  661.         filter: grayscale(0%);
  662.     }
  663.    
  664.    
  665.     /*ANIMATION KEYFRAMES*/
  666.    
  667.     @-webkit-keyframes fadeIn  {
  668.         0% { opacity: 0; }
  669.         20% { opacity: 0; }
  670.         40% { opacity: 0.3; }
  671.         60% { opacity: 0.5; }
  672.         80% { opacity: 0.9; }
  673.         100% { opacity: 1; }
  674.     }
  675.     @keyframes fadeIn {
  676.         0% { opacity: 0; }
  677.         20% { opacity: 0; }
  678.         40% { opacity: 0.3; }
  679.         60% { opacity: 0.5; }
  680.         80% { opacity: 0.9; }
  681.         100% { opacity: 1; }
  682.     }
  683.    
  684.    
  685.     /*SCROLLBAR STYLES*/
  686.    
  687.     ::-webkit-scrollbar {
  688.         width: 5px;
  689.         height: 5px;
  690.     }
  691.     ::-webkit-scrollbar-track {
  692.         border-radius: 1px;
  693.         background-color: #f8f8f8;
  694.     }
  695.     ::-webkit-scrollbar-thumb {
  696.         border-radius: 1px;
  697.         background-color: #ddd;
  698.     }
  699.     article#desctxt::-webkit-scrollbar-track {
  700.         border-radius: 1px;
  701.         background: -webkit-linear-gradient(bottom, #ecedee, #eceeec 100%);
  702.     }
  703.     article#desctxt::-webkit-scrollbar-thumb {
  704.         border-radius: 1px;
  705.         background: -webkit-linear-gradient(top, #ddd, #eee 100%);
  706.         /*background: -webkit-linear-gradient(top, #edeeed, #eceeec 100%);          if transparent*/
  707.     }
  708.     .biocontent::-webkit-scrollbar-track,
  709.     .connections::-webkit-scrollbar-track,
  710.     .navcon::-webkit-scrollbar-track {
  711.         border-radius: 1px;
  712.         width: 10px!important;
  713.         background: -webkit-linear-gradient(bottom, #ecedee, #eceeec 100%);
  714.     }
  715.     .biocontent::-webkit-scrollbar-thumb,
  716.     .connections::-webkit-scrollbar-thumb,
  717.     .navcon::-webkit-scrollbar-thumb {
  718.         border-radius: 1px;
  719.         width: 10px!important;
  720.         background: -webkit-linear-gradient(top, #ddd, #eee 100%);
  721.         /*background: -webkit-linear-gradient(top, #edeeed, #eceeec 100%);          if transparent*/
  722.     }
  723.     </style>
  724. </head>
  725. <body>
  726.  
  727.   <div id="container">
  728.    
  729.     <!--HEADER-->
  730.       <header>
  731.      
  732.         <!--TITLE & LINKS-->
  733.         <article id="desc">
  734.           <h1>afterimage.</h1>
  735.           <span class="sub">sdkjglskjdglsjkglsjglskjdlgjsklj</span>
  736.          
  737.           <!--HEADER LINKS-->
  738.           <!--enter URL for your about page-->
  739.           <nav>
  740.             <a href="/">
  741.                 <i class="fa fa-home" aria-hidden="true"></i>
  742.                 Home</a>
  743.             <a href="/YOURABOUTPAGE">
  744.                 <i class="fa fa-user" aria-hidden="true"></i>
  745.                 About</a>
  746.             <a href="/ask">
  747.                 <i class="fa fa-envelope" aria-hidden="true"></i>
  748.                 Message</a>
  749.             <!--CREDIT, DON'T CHANGE!!!-->
  750.             <a href="https://nonspace.tumblr.com">
  751.                 <i class="fa fa-copyright" aria-hidden="true"></i>
  752.                 NNSPC</a>
  753.           </nav>
  754.         </article>
  755.        
  756.         <!--DESCRIPTION-->
  757.         <article id="desctxt">
  758.             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.            
  759.         </article>
  760.        
  761.       </header>
  762.      
  763.       <footer>
  764.         <div id="legend">
  765.          
  766.           <!--GROUP LEGEND-->
  767.           <!--The 'g#' in the 'square' class sets the color for the group
  768.          (see variables at the top of CSS).
  769.          The data-filter is for sorting on click. You can add several
  770.          groups to a link: group AND group, group OR group etc. You can
  771.          read more here: https://isotope.metafizzy.co/filtering.html
  772.          Adding multiple filters: https://nonspace.tumblr.com/post/166045257594/hi-im-using-your-page-theme-after-image-and-i -->
  773.  
  774.           <div class="square" data-filter="*" style="background: #7a7a7a;">               all</div>
  775.           <div class="square g1" data-filter=".g1">group</div>
  776.           <div class="square g2" data-filter=".g2">group</div>
  777.           <div class="square g3" data-filter=".g3">group</div>
  778.           <div class="square g4" data-filter=".g4">group</div>
  779.           <div class="square g5" data-filter=".g5">group</div>
  780.           <!--ADDITIONAL GROUPS
  781.          <div class="square g6" data-filter=".g6">group</div>
  782.          <div class="square g7" data-filter=".g7">group</div>
  783.          <div class="square g8" data-filter=".g8">group</div>
  784.          <div class="square g9" data-filter=".g9">group</div>
  785.          <div class="square g10" data-filter=".g10">group</div>-->
  786.          
  787.         </div><!--legend-->
  788.       </footer>
  789.      
  790.       <!--HOW TO ADD GROUPS-->
  791.       <!--To add a group (g1-g5) you need to add the respective group as a
  792.      second class to the cbox (class="cbox GROUPNUMBER").
  793.      You can add several groups to one card, however, the first group
  794.      determines the card colour.-->
  795.      
  796.       <!--TABS & TAB LINKS-->
  797.       <!--The href attribute in the cbox div is what links you to the
  798.      corresponding ccard (content card).
  799.      You can link to these tabs using the URL
  800.      (http://YOURURL.com/YOURPAGE/#TABNAME) so if you want to change them
  801.      to the character name you need to edit the cbox href and give the
  802.      right ccard div the id.
  803.      
  804.      For example:
  805.      
  806.      Your character's name is Musterman.
  807.      
  808.      In the cbox:
  809.          <div class="cbox g1" href="#MUSTERMAN">
  810.          take note to not leave out the hashtag(#)
  811.      In the ccard:
  812.          <div class="ccard" id="MUSTERMAN">
  813.          
  814.      
  815.      <!--CHARACTER CARDS-->
  816.       <section id="gallery">
  817.         <div id="gallery-track">
  818.      
  819.         <!--CHARACTER ONE-->
  820.        
  821.         <div class="cbox g1" href="#c1">
  822.           <div class="cname">
  823.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  824.            change the opacity of the names in the CSS-->
  825.             <span style="font-size: 45px;">
  826.             FIRST <br />
  827.             LASTN
  828.             </span>
  829.           </div> <!--cname-->
  830.           <div class="triangle"></div>
  831.          
  832.           <img src="https://placehold.it/160x160"></img>
  833.         </div> <!--cbox-->
  834.        
  835.        
  836.         <!--CHARACTER TWO-->
  837.        
  838.         <div class="cbox g2" href="#c2">
  839.           <div class="cname">
  840.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  841.            change the opacity of the names in the CSS-->
  842.             <span style="font-size: 45px;">
  843.             FIRST <br />
  844.             LASTN
  845.             </span>
  846.           </div> <!--cname-->
  847.           <div class="triangle"></div>
  848.          
  849.           <img src="https://placehold.it/160x160"></img>
  850.         </div> <!--cbox-->
  851.        
  852.        
  853.         <!--CHARACTER THREE-->
  854.        
  855.         <div class="cbox g3" href="#c3">
  856.           <div class="cname">
  857.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  858.            change the opacity of the names in the CSS-->
  859.             <span style="font-size: 45px;">
  860.             FIRST <br />
  861.             LASTN
  862.             </span>
  863.           </div> <!--cname-->
  864.           <div class="triangle"></div>
  865.          
  866.           <img src="https://placehold.it/160x160"></img>
  867.         </div> <!--cbox-->
  868.        
  869.        
  870.         <!--CHARACTER FOUR-->
  871.        
  872.         <div class="cbox g4" href="#c4">
  873.           <div class="cname">
  874.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  875.            change the opacity of the names in the CSS-->
  876.             <span style="font-size: 45px;">
  877.             FIRST <br />
  878.             LASTN
  879.             </span>
  880.           </div> <!--cname-->
  881.           <div class="triangle"></div>
  882.          
  883.           <img src="https://placehold.it/160x160"></img>
  884.         </div> <!--cbox-->
  885.    
  886.        
  887.         <!--CHARACTER FIVE-->
  888.        
  889.         <div class="cbox g5" href="#c5">
  890.           <div class="cname">
  891.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  892.            change the opacity of the names in the CSS-->
  893.             <span style="font-size: 45px;">
  894.             FIRST <br />
  895.             LASTN
  896.             </span>
  897.           </div> <!--cname-->
  898.           <div class="triangle"></div>
  899.          
  900.           <img src="https://placehold.it/160x160"></img>
  901.         </div> <!--cbox-->
  902.        
  903.        
  904.         <!--CHARACTER CARDS FIRST ROW-->
  905.        
  906.         <!--CCARD ONE-->
  907.        
  908.         <div class="ccard" id="c1">
  909.          
  910.           <!--INNER TAB NAVIGATION-->
  911.           <div class="cfooter">
  912.             <a href="#c1p1" class="active">
  913.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  914.             <a href="#c1p2">
  915.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  916.             <a href="#c1p3">
  917.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  918.           </div>
  919.          
  920.           <div class="ccontent active" id="c1p1">
  921.             <div class="cbio">
  922.                
  923.               <div class="headline">
  924.                 <h2><span class="h2front">short</span>bio</h2>
  925.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  926.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  927.                 magna aliqua.
  928.               </div><!--headline-->
  929.            
  930.               <div class="biocontent">
  931.                 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
  932.               </div><!--biocontent-->
  933.              
  934.             </div><!--cbio-->  
  935.            
  936.             <div class="clinks">
  937.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  938.              http://fontawesome.io/icons/-->
  939.               <a href="#">
  940.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  941.               <a href="#">
  942.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  943.               <a href="#">
  944.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  945.               <a href="#">
  946.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  947.               <a href="#">
  948.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  949.               <a href="#">
  950.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  951.             </div><!--clinks-->
  952.            
  953.             <div class="ctraits">
  954.             <!--span is needed for the style-->
  955.               <span>+ responsible</span><p />
  956.               <span>+ smart</span><p />
  957.               <span>+ adventurous</span><p />
  958.               <br />
  959.               <span>- aggressive</span><p />
  960.               <span>- petty</span><p />
  961.               <span>- lazy</span><p />
  962.             </div><!--ctraits-->
  963.            
  964.           </div><!--ccontent-->
  965.          
  966.           <!--PAGE 2-->
  967.           <div class="ccontent" id="c1p2">
  968.             <div class="cbio">
  969.                
  970.               <div class="headline">
  971.                 <h2><span class="h2front">the</span>title</h2>
  972.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  973.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  974.                 magna aliqua.
  975.               </div><!--headline-->
  976.            
  977.               <div class="biocontent">
  978.                
  979.                 <!--LEFT DATA-->
  980.                 <ul class="cell1">
  981.                   <li> Full name:  <span> - </span> </li>
  982.                   <li> Nickname:   <span> - </span> </li>
  983.                   <li> Age:        <span> - </span> </li>
  984.                   <li> D.o.B:      <span> - </span> </li>
  985.                   <li> Gender:     <span> - </span> </li>
  986.                   <li> Pronouns:   <span> - </span> </li>
  987.                   <li> Sexuality:  <span> - </span> </li>
  988.                   <li> Species: <span> - </span></li>
  989.                 </ul>
  990.                
  991.                 <!--RIGHT DATA-->
  992.                 <ul class="cell2">
  993.                   <li> Occupation:      <span> - </span> </li>
  994.                   <li> Nationality:     <span> - </span> </li>
  995.                   <li> Residence:       <span> - </span> </li>
  996.                   <li> Education:       <span> - </span> </li>
  997.                   <li> Height:          <span> - </span> </li>
  998.                   <li> Alignment:       <span> - </span> </li>
  999.                   <li> Jung Type:       <span> - </span> </li>
  1000.                   <li> Affiliation:     <span> - </span></li>
  1001.                 </ul>
  1002.                
  1003.               </div><!--biocontent-->
  1004.              
  1005.             </div><!--cbio-->  
  1006.            
  1007.             <!--You can put another picture of your character or a flavour
  1008.            picture or whatever you like. Dimensions are: 165x340-->
  1009.             <div class="flavorimg" style="background-image:
  1010.              url('https://placehold.it/165x340');">
  1011.             </div>
  1012.            
  1013.           </div> <!--ccontent c1p2-->
  1014.          
  1015.           <!--PAGE 3-->
  1016.           <div class="ccontent" id="c1p3">
  1017.            
  1018.              <!--CONNECTION IMAGES/NAVIGATION-->
  1019.              <div class="navcon">
  1020.                 <div class="con" href="#c1con1" style="background-image:
  1021.                    url('http://placehold.it/83x83');"></div>
  1022.                 <div  class="con" href="#c1con2" style="background-image:
  1023.                    url('http://placehold.it/83x83');"></div>
  1024.                 <div class="con" href="#c1con3" style="background-image:
  1025.                    url('http://placehold.it/83x83');"></div>
  1026.                 <div class="con" href="#c1con4" style="background-image:
  1027.                    url('http://placehold.it/83x83');"></div>
  1028.                 <div class="con" href="#c1con5" style="background-image:
  1029.                    url('http://placehold.it/83x83');"></div>
  1030.                 <div class="con" href="#c1con6" style="background-image:
  1031.                    url('http://placehold.it/83x83');"></div>
  1032.                 <div class="con" href="#c1con7" style="background-image:
  1033.                    url('http://placehold.it/83x83');"></div>
  1034.                 <div class="con" href="#c1con8" style="background-image:
  1035.                    url('http://placehold.it/83x83');"></div>
  1036.              </div>
  1037.            
  1038.              <div class="cbio">
  1039.                <div class="headline">
  1040.                  <h2><span class="h2front">social</span>connections</h2>
  1041.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1042.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  1043.                  magna aliqua.
  1044.                </div><!--headline-->
  1045.              
  1046.                <div class="biocontent">
  1047.                
  1048.                  <div class="connections active" id="c1con1">
  1049.                    <span>CONNECTION NAME :: </span>
  1050.                    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.
  1051.                  </div><!--connections-->
  1052.                
  1053.                  <!--ADD CONNECTION INFO-->
  1054.                  <!--Add as many connection info text fields as you like. If
  1055.                 you need less than 12, remove them from the navigation  
  1056.                 above as well. To add new info:
  1057.                     copy the follow div .connections
  1058.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  1059.                     c# = card number, con# = connection number.
  1060.                
  1061.                 Make sure only the first connection div has the class
  1062.                 'active' see above.    
  1063.                 You can also change these to names but then you need to
  1064.                 edit the 'href' in the navigation (.clinks .navcon) as well
  1065.                 .-->
  1066.                
  1067.                  <div class="connections" id="c1con2">
  1068.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  1069.                  </div>
  1070.            
  1071.                </div><!--biocontent-->
  1072.              </div><!--cbio-->
  1073.           </div> <!--ccontent c1p3-->    
  1074.          
  1075.         </div> <!--ccard-->
  1076.        
  1077.        
  1078.         <!--CCARD TWO-->
  1079.        
  1080.         <div class="ccard" id="c2">
  1081.          
  1082.           <!--INNER TAB NAVIGATION-->
  1083.           <div class="cfooter">
  1084.             <a href="#c2p1" class="active">
  1085.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1086.             <a href="#c2p2">
  1087.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1088.             <a href="#c2p3">
  1089.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1090.           </div>
  1091.          
  1092.           <div class="ccontent active" id="c2p1">
  1093.             <div class="cbio">
  1094.                
  1095.               <div class="headline">
  1096.                 <h2><span class="h2front">short</span>bio</h2>
  1097.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1098.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1099.                 magna aliqua.
  1100.               </div><!--headline-->
  1101.            
  1102.               <div class="biocontent">
  1103.                 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
  1104.               </div><!--biocontent-->
  1105.              
  1106.             </div><!--cbio-->  
  1107.            
  1108.             <div class="clinks">
  1109.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1110.              http://fontawesome.io/icons/-->
  1111.               <a href="#">
  1112.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1113.               <a href="#">
  1114.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1115.               <a href="#">
  1116.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1117.               <a href="#">
  1118.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1119.               <a href="#">
  1120.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1121.               <a href="#">
  1122.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1123.             </div><!--clinks-->
  1124.            
  1125.             <div class="ctraits">
  1126.             <!--span is needed for the style-->
  1127.               <span>+ positive trait</span><p />
  1128.               <span>+ positive trait</span><p />
  1129.               <span>+ positive trait</span><p />
  1130.               <br />
  1131.               <span>- negative trait</span><p />
  1132.               <span>- negative trait</span><p />
  1133.               <span>- negative trait</span><p />
  1134.             </div><!--ctraits-->
  1135.            
  1136.           </div><!--ccontent-->
  1137.          
  1138.           <!--PAGE 2-->
  1139.           <div class="ccontent" id="c2p2">
  1140.             <div class="cbio">
  1141.                
  1142.               <div class="headline">
  1143.                 <h2><span class="h2front">the</span>title</h2>
  1144.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1145.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1146.                 magna aliqua.
  1147.               </div><!--headline-->
  1148.            
  1149.               <div class="biocontent">
  1150.                
  1151.                 <!--LEFT DATA-->
  1152.                 <ul class="cell1">
  1153.                   <li> Full name:  <span> - </span> </li>
  1154.                   <li> Nickname:   <span> - </span> </li>
  1155.                   <li> Age:        <span> - </span> </li>
  1156.                   <li> D.o.B:      <span> - </span> </li>
  1157.                   <li> Gender:     <span> - </span> </li>
  1158.                   <li> Pronouns:   <span> - </span> </li>
  1159.                   <li> Sexuality:  <span> - </span> </li>
  1160.                   <li> Species:    <span> - </span></li>
  1161.                 </ul>
  1162.                
  1163.                 <!--RIGHT DATA-->
  1164.                 <ul class="cell2">
  1165.                   <li> Occupation:      <span> - </span> </li>
  1166.                   <li> Nationality:     <span> - </span> </li>
  1167.                   <li> Residence:       <span> - </span> </li>
  1168.                   <li> Education:       <span> - </span> </li>
  1169.                   <li> Height:          <span> - </span> </li>
  1170.                   <li> Alignment:       <span> - </span> </li>
  1171.                   <li> Jung Type:       <span> - </span> </li>
  1172.                   <li> Affiliation:     <span> - </span></li>
  1173.                 </ul>
  1174.                
  1175.               </div><!--biocontent-->
  1176.              
  1177.             </div><!--cbio-->  
  1178.            
  1179.             <!--You can put another picture of your character or a flavour
  1180.            picture or whatever you like. Dimensions are: 165x340-->
  1181.             <div class="flavorimg" style="background-image:
  1182.              url('https://placehold.it/165x340');">
  1183.             </div>
  1184.            
  1185.           </div> <!--ccontent-->
  1186.          
  1187.           <!--PAGE 3-->
  1188.           <div class="ccontent" id="c2p3">
  1189.            
  1190.              <!--CONNECTION IMAGES/NAVIGATION-->
  1191.              <div class="navcon">
  1192.                 <div class="con" href="#c2con1" style="background-image:
  1193.                    url('http://placehold.it/84x84');"></div>
  1194.                 <div  class="con" href="#c2con2" style="background-image:
  1195.                    url('http://placehold.it/84x84');"></div>
  1196.                 <div class="con" href="#c2con3" style="background-image:
  1197.                    url('http://placehold.it/84x84');"></div>
  1198.                 <div class="con" href="#c2con4" style="background-image:
  1199.                    url('http://placehold.it/84x84');"></div>
  1200.                 <div class="con" href="#c2con5" style="background-image:
  1201.                    url('http://placehold.it/84x84');"></div>
  1202.                 <div class="con" href="#c2con6" style="background-image:
  1203.                    url('http://placehold.it/84x84');"></div>
  1204.                 <div class="con" href="#c2con7" style="background-image:
  1205.                    url('http://placehold.it/50x50');"></div>
  1206.                 <div class="con" href="#c2con8" style="background-image:
  1207.                    url('http://placehold.it/50x50');"></div>    
  1208.              </div>
  1209.            
  1210.              <div class="cbio">
  1211.                <div class="headline">
  1212.                  <h2><span class="h2front">social</span>connections</h2>
  1213.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1214.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  1215.                  magna aliqua.
  1216.                </div><!--headline-->
  1217.              
  1218.                <div class="biocontent">
  1219.                
  1220.                  <div class="connections active" id="c2con1">
  1221.                    <span>Connection name :: </span>
  1222.                    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.
  1223.                  </div><!--connections-->
  1224.                
  1225.                  <!--ADD CONNECTION INFO-->
  1226.                  <!--Add as many connection info text fields as you like. If
  1227.                 you need less than 12, remove them from the navigation  
  1228.                 above as well. To add new info:
  1229.                     copy the follow div .connections
  1230.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  1231.                     c# = card number, con# = connection number.
  1232.                
  1233.                 Make sure only the first connection div has the class
  1234.                 'active' see above.    
  1235.                 You can also change these to names but then you need to
  1236.                 edit the 'href' in the navigation (.clinks .navcon) as well
  1237.                 .-->
  1238.                
  1239.                  <div class="connections" id="c2con2">
  1240.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  1241.                  </div>
  1242.            
  1243.                </div><!--biocontent-->
  1244.              </div><!--cbio-->
  1245.           </div> <!--ccontent-->    
  1246.          
  1247.         </div> <!--ccard-->
  1248.        
  1249.        
  1250.         <!--CCARD THREE-->
  1251.        
  1252.         <div class="ccard" id="c3">
  1253.          
  1254.           <!--INNER TAB NAVIGATION-->
  1255.           <div class="cfooter">
  1256.             <a href="#c3p1" class="active">
  1257.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1258.             <a href="#c3p2">
  1259.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1260.             <a href="#c3p3">
  1261.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1262.           </div>
  1263.          
  1264.           <div class="ccontent active" id="c3p1">
  1265.             <div class="cbio">
  1266.                
  1267.               <div class="headline">
  1268.                 <h2><span class="h2front">short</span>bio</h2>
  1269.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1270.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1271.                 magna aliqua.
  1272.               </div><!--headline-->
  1273.            
  1274.               <div class="biocontent">
  1275.                 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
  1276.               </div><!--biocontent-->
  1277.              
  1278.             </div><!--cbio-->  
  1279.            
  1280.             <div class="clinks">
  1281.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1282.              http://fontawesome.io/icons/-->
  1283.               <a href="#">
  1284.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1285.               <a href="#">
  1286.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1287.               <a href="#">
  1288.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1289.               <a href="#">
  1290.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1291.               <a href="#">
  1292.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1293.               <a href="#">
  1294.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1295.             </div><!--clinks-->
  1296.            
  1297.             <div class="ctraits">
  1298.             <!--span is needed for the style-->
  1299.               <span>+ positive trait</span><p />
  1300.               <span>+ positive trait</span><p />
  1301.               <span>+ positive trait</span><p />
  1302.               <br />
  1303.               <span>- negative trait</span><p />
  1304.               <span>- negative trait</span><p />
  1305.               <span>- negative trait</span><p />
  1306.             </div><!--ctraits-->
  1307.            
  1308.           </div><!--ccontent-->
  1309.          
  1310.           <!--PAGE 2-->
  1311.           <div class="ccontent" id="c3p2">
  1312.             <div class="cbio">
  1313.                
  1314.               <div class="headline">
  1315.                 <h2><span class="h2front">the</span>title</h2>
  1316.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1317.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1318.                 magna aliqua.
  1319.               </div><!--headline-->
  1320.            
  1321.               <div class="biocontent">
  1322.                
  1323.                 <!--LEFT DATA-->
  1324.                 <ul class="cell1">
  1325.                   <li> Full name:  <span> - </span> </li>
  1326.                   <li> Nickname:   <span> - </span> </li>
  1327.                   <li> Age:        <span> - </span> </li>
  1328.                   <li> D.o.B:      <span> - </span> </li>
  1329.                   <li> Gender:     <span> - </span> </li>
  1330.                   <li> Pronouns:   <span> - </span> </li>
  1331.                   <li> Sexuality:  <span> - </span> </li>
  1332.                   <li> Species:    <span> - </span></li>
  1333.                 </ul>
  1334.                
  1335.                 <!--RIGHT DATA-->
  1336.                 <ul class="cell2">
  1337.                   <li> Occupation:      <span> - </span> </li>
  1338.                   <li> Nationality:     <span> - </span> </li>
  1339.                   <li> Residence:       <span> - </span> </li>
  1340.                   <li> Education:       <span> - </span> </li>
  1341.                   <li> Height:          <span> - </span> </li>
  1342.                   <li> Alignment:       <span> - </span> </li>
  1343.                   <li> Jung Type:       <span> - </span> </li>
  1344.                   <li> Affiliation:     <span> - </span></li>
  1345.                 </ul>
  1346.                
  1347.               </div><!--biocontent-->
  1348.              
  1349.             </div><!--cbio-->  
  1350.            
  1351.             <!--You can put another picture of your character or a flavour
  1352.            picture or whatever you like. Dimensions are: 165x340-->
  1353.             <div class="flavorimg" style="background-image:
  1354.              url('https://placehold.it/165x340');">
  1355.             </div>
  1356.            
  1357.           </div> <!--ccontent-->
  1358.          
  1359.           <!--PAGE 3-->
  1360.           <div class="ccontent" id="c3p3">
  1361.            
  1362.              <!--CONNECTION IMAGES/NAVIGATION-->
  1363.              <div class="navcon">
  1364.                 <div class="con" href="#c3con1" style="background-image:
  1365.                    url('http://placehold.it/84x84');"></div>
  1366.                 <div  class="con" href="#c3con2" style="background-image:
  1367.                    url('http://placehold.it/84x84');"></div>
  1368.                 <div class="con" href="#c3con3" style="background-image:
  1369.                    url('http://placehold.it/84x84');"></div>
  1370.                 <div class="con" href="#c3con4" style="background-image:
  1371.                    url('http://placehold.it/84x84');"></div>
  1372.                 <div class="con" href="#c3con5" style="background-image:
  1373.                    url('http://placehold.it/84x84');"></div>
  1374.                 <div class="con" href="#c3con6" style="background-image:
  1375.                    url('http://placehold.it/84x84');"></div>
  1376.                 <div class="con" href="#c3con7" style="background-image:
  1377.                    url('http://placehold.it/50x50');"></div>
  1378.                 <div class="con" href="#c3con8" style="background-image:
  1379.                    url('http://placehold.it/50x50');"></div>
  1380.              </div>
  1381.            
  1382.              <div class="cbio">
  1383.                <div class="headline">
  1384.                  <h2><span class="h2front">social</span>connections</h2>
  1385.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1386.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  1387.                  magna aliqua.
  1388.                </div><!--headline-->
  1389.              
  1390.                <div class="biocontent">
  1391.                
  1392.                  <div class="connections active" id="c3con1">
  1393.                    <span>Connection name :: </span>
  1394.                    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.
  1395.                  </div><!--connections-->
  1396.                
  1397.                  <!--ADD CONNECTION INFO-->
  1398.                  <!--Add as many connection info text fields as you like. If
  1399.                 you need less than 12, remove them from the navigation  
  1400.                 above as well. To add new info:
  1401.                     copy the follow div .connections
  1402.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  1403.                     c# = card number, con# = connection number.
  1404.                
  1405.                 Make sure only the first connection div has the class
  1406.                 'active' see above.    
  1407.                 You can also change these to names but then you need to
  1408.                 edit the 'href' in the navigation (.clinks .navcon) as well
  1409.                 .-->
  1410.                
  1411.                  <div class="connections" id="c3con2">
  1412.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  1413.                  </div>
  1414.            
  1415.                </div><!--biocontent-->
  1416.              </div><!--cbio-->
  1417.           </div> <!--ccontent-->    
  1418.          
  1419.         </div> <!--ccard-->
  1420.        
  1421.        
  1422.        
  1423.        
  1424.         <!--CCARD FOUR-->
  1425.        
  1426.         <div class="ccard" id="c4">
  1427.          
  1428.           <!--INNER TAB NAVIGATION-->
  1429.           <div class="cfooter">
  1430.             <a href="#c4p1" class="active">
  1431.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1432.             <a href="#c4p2">
  1433.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1434.             <a href="#c4p3">
  1435.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1436.           </div>
  1437.          
  1438.           <div class="ccontent active" id="c4p1">
  1439.             <div class="cbio">
  1440.                
  1441.               <div class="headline">
  1442.                 <h2><span class="h2front">short</span>bio</h2>
  1443.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1444.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1445.                 magna aliqua.
  1446.               </div><!--headline-->
  1447.            
  1448.               <div class="biocontent">
  1449.                 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
  1450.               </div><!--biocontent-->
  1451.              
  1452.             </div><!--cbio-->  
  1453.            
  1454.             <div class="clinks">
  1455.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1456.              http://fontawesome.io/icons/-->
  1457.               <a href="#">
  1458.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1459.               <a href="#">
  1460.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1461.               <a href="#">
  1462.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1463.               <a href="#">
  1464.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1465.               <a href="#">
  1466.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1467.               <a href="#">
  1468.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1469.             </div><!--clinks-->
  1470.            
  1471.             <div class="ctraits">
  1472.             <!--span is needed for the style-->
  1473.               <span>+ positive trait</span><p />
  1474.               <span>+ positive trait</span><p />
  1475.               <span>+ positive trait</span><p />
  1476.               <br />
  1477.               <span>- negative trait</span><p />
  1478.               <span>- negative trait</span><p />
  1479.               <span>- negative trait</span><p />
  1480.             </div><!--ctraits-->
  1481.            
  1482.           </div><!--ccontent-->
  1483.          
  1484.           <!--PAGE 2-->
  1485.           <div class="ccontent" id="c4p2">
  1486.             <div class="cbio">
  1487.                
  1488.               <div class="headline">
  1489.                 <h2><span class="h2front">the</span>title</h2>
  1490.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1491.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1492.                 magna aliqua.
  1493.               </div><!--headline-->
  1494.            
  1495.               <div class="biocontent">
  1496.                
  1497.                 <!--LEFT DATA-->
  1498.                 <ul class="cell1">
  1499.                   <li> Full name:  <span> - </span> </li>
  1500.                   <li> Nickname:   <span> - </span> </li>
  1501.                   <li> Age:        <span> - </span> </li>
  1502.                   <li> D.o.B:      <span> - </span> </li>
  1503.                   <li> Gender:     <span> - </span> </li>
  1504.                   <li> Pronouns:   <span> - </span> </li>
  1505.                   <li> Sexuality:  <span> - </span> </li>
  1506.                   <li> Species: <span> - </span></li>
  1507.                 </ul>
  1508.                
  1509.                 <!--RIGHT DATA-->
  1510.                 <ul class="cell2">
  1511.                   <li> Occupation:      <span> - </span> </li>
  1512.                   <li> Nationality:     <span> - </span> </li>
  1513.                   <li> Residence:       <span> - </span> </li>
  1514.                   <li> Education:       <span> - </span> </li>
  1515.                   <li> Height:          <span> - </span> </li>
  1516.                   <li> Alignment:       <span> - </span> </li>
  1517.                   <li> Jung Type:       <span> - </span> </li>
  1518.                   <li> Affiliation:     <span> - </span></li>
  1519.                 </ul>
  1520.                
  1521.               </div><!--biocontent-->
  1522.              
  1523.             </div><!--cbio-->  
  1524.            
  1525.             <!--You can put another picture of your character or a flavour
  1526.            picture or whatever you like. Dimensions are: 165x340-->
  1527.             <div class="flavorimg" style="background-image:
  1528.              url('https://placehold.it/165x340');">
  1529.             </div>
  1530.            
  1531.           </div> <!--ccontent-->
  1532.          
  1533.           <!--PAGE 3-->
  1534.           <div class="ccontent" id="c4p3">
  1535.            
  1536.              <!--CONNECTION IMAGES/NAVIGATION-->
  1537.              <div class="navcon">
  1538.                 <div class="con" href="#c4con1" style="background-image:
  1539.                    url('http://placehold.it/84x84');"></div>
  1540.                 <div  class="con" href="#c4con2" style="background-image:
  1541.                    url('http://placehold.it/84x84');"></div>
  1542.                 <div class="con" href="#c4con3" style="background-image:
  1543.                    url('http://placehold.it/84x84');"></div>
  1544.                 <div class="con" href="#c4con4" style="background-image:
  1545.                    url('http://placehold.it/84x84');"></div>
  1546.                 <div class="con" href="#c4con5" style="background-image:
  1547.                    url('http://placehold.it/84x84');"></div>
  1548.                 <div class="con" href="#c4con6" style="background-image:
  1549.                    url('http://placehold.it/84x84');"></div>
  1550.                 <div class="con" href="#c4con7" style="background-image:
  1551.                    url('http://placehold.it/50x50');"></div>
  1552.                 <div class="con" href="#c4con8" style="background-image:
  1553.                    url('http://placehold.it/50x50');"></div>
  1554.              </div>
  1555.            
  1556.              <div class="cbio">
  1557.                <div class="headline">
  1558.                  <h2><span class="h2front">social</span>connections</h2>
  1559.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1560.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  1561.                  magna aliqua.
  1562.                </div><!--headline-->
  1563.              
  1564.                <div class="biocontent">
  1565.                
  1566.                  <div class="connections active" id="c4con1">
  1567.                    <span>Connection name :: </span>
  1568.                    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.
  1569.                  </div><!--connections-->
  1570.                
  1571.                  <!--ADD CONNECTION INFO-->
  1572.                  <!--Add as many connection info text fields as you like. If
  1573.                 you need less than 12, remove them from the navigation  
  1574.                 above as well. To add new info:
  1575.                     copy the follow div .connections
  1576.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  1577.                     c# = card number, con# = connection number.
  1578.                
  1579.                 Make sure only the first connection div has the class
  1580.                 'active' see above.    
  1581.                 You can also change these to names but then you need to
  1582.                 edit the 'href' in the navigation (.clinks .navcon) as well
  1583.                 .-->
  1584.                
  1585.                  <div class="connections" id="c4con2">
  1586.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  1587.                  </div>
  1588.            
  1589.                </div><!--biocontent-->
  1590.              </div><!--cbio-->
  1591.           </div> <!--ccontent-->    
  1592.          
  1593.         </div> <!--ccard-->
  1594.        
  1595.        
  1596.         <!--CCARD FIVE-->
  1597.        
  1598.         <div class="ccard" id="c5">
  1599.          
  1600.           <!--INNER TAB NAVIGATION-->
  1601.           <div class="cfooter">
  1602.             <a href="#c5p1" class="active">
  1603.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1604.             <a href="#c5p2">
  1605.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1606.             <a href="#c5p3">
  1607.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1608.           </div>
  1609.          
  1610.           <div class="ccontent active" id="c5p1">
  1611.             <div class="cbio">
  1612.                
  1613.               <div class="headline">
  1614.                 <h2><span class="h2front">short</span>bio</h2>
  1615.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1616.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1617.                 magna aliqua.
  1618.               </div><!--headline-->
  1619.            
  1620.               <div class="biocontent">
  1621.                 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
  1622.               </div><!--biocontent-->
  1623.              
  1624.             </div><!--cbio-->  
  1625.            
  1626.             <div class="clinks">
  1627.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1628.              http://fontawesome.io/icons/-->
  1629.               <a href="#">
  1630.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1631.               <a href="#">
  1632.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1633.               <a href="#">
  1634.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1635.               <a href="#">
  1636.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1637.               <a href="#">
  1638.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1639.               <a href="#">
  1640.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1641.             </div><!--clinks-->
  1642.            
  1643.             <div class="ctraits">
  1644.             <!--span is needed for the style-->
  1645.               <span>+ positive trait</span><p />
  1646.               <span>+ positive trait</span><p />
  1647.               <span>+ positive trait</span><p />
  1648.               <br />
  1649.               <span>- negative trait</span><p />
  1650.               <span>- negative trait</span><p />
  1651.               <span>- negative trait</span><p />
  1652.             </div><!--ctraits-->
  1653.            
  1654.           </div><!--ccontent-->
  1655.          
  1656.           <!--PAGE 2-->
  1657.           <div class="ccontent" id="c5p2">
  1658.             <div class="cbio">
  1659.                
  1660.               <div class="headline">
  1661.                 <h2><span class="h2front">the</span>title</h2>
  1662.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1663.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1664.                 magna aliqua.
  1665.               </div><!--headline-->
  1666.            
  1667.               <div class="biocontent">
  1668.                
  1669.                 <!--LEFT DATA-->
  1670.                 <ul class="cell1">
  1671.                   <li> Full name:  <span> - </span> </li>
  1672.                   <li> Nickname:   <span> - </span> </li>
  1673.                   <li> Age:        <span> - </span> </li>
  1674.                   <li> D.o.B:      <span> - </span> </li>
  1675.                   <li> Gender:     <span> - </span> </li>
  1676.                   <li> Pronouns:   <span> - </span> </li>
  1677.                   <li> Sexuality:  <span> - </span> </li>
  1678.                   <li> Species: <span> - </span></li>
  1679.                 </ul>
  1680.                
  1681.                 <!--RIGHT DATA-->
  1682.                 <ul class="cell2">
  1683.                   <li> Occupation:      <span> - </span> </li>
  1684.                   <li> Nationality:     <span> - </span> </li>
  1685.                   <li> Residence:       <span> - </span> </li>
  1686.                   <li> Education:       <span> - </span> </li>
  1687.                   <li> Height:          <span> - </span> </li>
  1688.                   <li> Alignment:       <span> - </span> </li>
  1689.                   <li> Jung Type:       <span> - </span> </li>
  1690.                   <li> Affiliation:     <span> - </span></li>
  1691.                 </ul>
  1692.                
  1693.               </div><!--biocontent-->
  1694.              
  1695.             </div><!--cbio-->  
  1696.            
  1697.             <!--You can put another picture of your character or a flavour
  1698.            picture or whatever you like. Dimensions are: 165x340-->
  1699.             <div class="flavorimg" style="background-image:
  1700.              url('https://placehold.it/165x340');">
  1701.             </div>
  1702.            
  1703.           </div> <!--ccontent-->
  1704.          
  1705.           <!--PAGE 3-->
  1706.           <div class="ccontent" id="c5p3">
  1707.            
  1708.              <!--CONNECTION IMAGES/NAVIGATION-->
  1709.              <div class="navcon">
  1710.                 <div class="con" href="#c4con1" style="background-image:
  1711.                    url('http://placehold.it/84x84');"></div>
  1712.                 <div  class="con" href="#c4con2" style="background-image:
  1713.                    url('http://placehold.it/84x84');"></div>
  1714.                 <div class="con" href="#c4con3" style="background-image:
  1715.                    url('http://placehold.it/84x84');"></div>
  1716.                 <div class="con" href="#c4con4" style="background-image:
  1717.                    url('http://placehold.it/84x84');"></div>
  1718.                 <div class="con" href="#c4con5" style="background-image:
  1719.                    url('http://placehold.it/84x84');"></div>
  1720.                 <div class="con" href="#c4con6" style="background-image:
  1721.                    url('http://placehold.it/84x84');"></div>
  1722.                 <div class="con" href="#c4con7" style="background-image:
  1723.                    url('http://placehold.it/50x50');"></div>
  1724.                 <div class="con" href="#c4con8" style="background-image:
  1725.                    url('http://placehold.it/50x50');"></div>
  1726.              </div>
  1727.            
  1728.              <div class="cbio">
  1729.                <div class="headline">
  1730.                  <h2><span class="h2front">social</span>connections</h2>
  1731.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1732.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  1733.                  magna aliqua.
  1734.                </div><!--headline-->
  1735.              
  1736.                <div class="biocontent">
  1737.                
  1738.                  <div class="connections active" id="c5con1">
  1739.                    <span>Connection name :: </span>
  1740.                    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.
  1741.                  </div><!--connections-->
  1742.                
  1743.                  <!--ADD CONNECTION INFO-->
  1744.                  <!--Add as many connection info text fields as you like. If
  1745.                 you need less than 12, remove them from the navigation  
  1746.                 above as well. To add new info:
  1747.                     copy the follow div .connections
  1748.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  1749.                     c# = card number, con# = connection number.
  1750.                
  1751.                 Make sure only the first connection div has the class
  1752.                 'active' see above.    
  1753.                 You can also change these to names but then you need to
  1754.                 edit the 'href' in the navigation (.clinks .navcon) as well
  1755.                 .-->
  1756.                
  1757.                  <div class="connections" id="c5con2">
  1758.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  1759.                  </div>
  1760.            
  1761.                </div><!--biocontent-->
  1762.              </div><!--cbio-->
  1763.           </div> <!--ccontent-->    
  1764.          
  1765.         </div> <!--ccard-->
  1766.        
  1767.        
  1768.        
  1769.         <!--CHARACTER SIX-->
  1770.        
  1771.         <div class="cbox g2" href="#c6">
  1772.           <div class="cname">
  1773.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1774.            change the opacity of the names in the CSS-->
  1775.             <span style="font-size: 45px;">
  1776.             FIRST <br />
  1777.             LASTN
  1778.             </span>
  1779.           </div> <!--cname-->
  1780.           <div class="triangle"></div>
  1781.          
  1782.           <img src="https://placehold.it/160x160"></img>
  1783.         </div> <!--cbox-->
  1784.        
  1785.        
  1786.         <!--CHARACTER SEVEN-->
  1787.        
  1788.         <div class="cbox g3" href="#c7">
  1789.           <div class="cname">
  1790.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1791.            change the opacity of the names in the CSS-->
  1792.             <span style="font-size: 45px;">
  1793.             FIRST <br />
  1794.             LASTN
  1795.             </span>
  1796.           </div> <!--cname-->
  1797.           <div class="triangle"></div>
  1798.          
  1799.           <img src="https://placehold.it/160x160"></img>
  1800.         </div> <!--cbox-->
  1801.        
  1802.        
  1803.         <!--CHARACTER EIGHT-->
  1804.        
  1805.         <div class="cbox g4" href="#c8">
  1806.           <div class="cname">
  1807.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1808.            change the opacity of the names in the CSS-->
  1809.             <span style="font-size: 45px;">
  1810.             FIRST <br />
  1811.             LASTN
  1812.             </span>
  1813.           </div> <!--cname-->
  1814.           <div class="triangle"></div>
  1815.          
  1816.           <img src="https://placehold.it/160x160"></img>
  1817.         </div> <!--cbox-->
  1818.        
  1819.        
  1820.         <!--CHARACTER NINE-->
  1821.        
  1822.         <div class="cbox g5" href="#c9">
  1823.           <div class="cname">
  1824.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1825.            change the opacity of the names in the CSS-->
  1826.             <span style="font-size: 45px;">
  1827.             FIRST <br />
  1828.             LASTN
  1829.             </span>
  1830.           </div> <!--cname-->
  1831.           <div class="triangle"></div>
  1832.          
  1833.           <img src="https://placehold.it/160x160"></img>
  1834.         </div> <!--cbox-->
  1835.        
  1836.        
  1837.         <!--CHARACTER TEN-->
  1838.        
  1839.         <div class="cbox g2" href="#c10">
  1840.           <div class="cname">
  1841.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  1842.            change the opacity of the names in the CSS-->
  1843.             <span style="font-size: 45px;">
  1844.             FIRST <br />
  1845.             LASTN
  1846.             </span>
  1847.           </div> <!--cname-->
  1848.           <div class="triangle"></div>
  1849.          
  1850.           <img src="https://placehold.it/160x160"></img>
  1851.         </div> <!--cbox-->
  1852.        
  1853.        
  1854.         <!--CHARACTER CARD SECOND ROW-->
  1855.        
  1856.         <!--CCARD SIX-->
  1857.        
  1858.        <div class="ccard" id="c6">
  1859.          
  1860.           <!--INNER TAB NAVIGATION-->
  1861.           <div class="cfooter">
  1862.             <a href="#c6p1" class="active">
  1863.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1864.             <a href="#c6p2">
  1865.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1866.             <a href="#c6p3">
  1867.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  1868.           </div>
  1869.          
  1870.           <div class="ccontent active" id="c6p1">
  1871.             <div class="cbio">
  1872.                
  1873.               <div class="headline">
  1874.                 <h2><span class="h2front">short</span>bio</h2>
  1875.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1876.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1877.                 magna aliqua.
  1878.               </div><!--headline-->
  1879.            
  1880.               <div class="biocontent">
  1881.                 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
  1882.               </div><!--biocontent-->
  1883.              
  1884.             </div><!--cbio-->  
  1885.            
  1886.             <div class="clinks">
  1887.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  1888.              http://fontawesome.io/icons/-->
  1889.               <a href="#">
  1890.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1891.               <a href="#">
  1892.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  1893.               <a href="#">
  1894.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1895.               <a href="#">
  1896.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1897.               <a href="#">
  1898.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  1899.               <a href="#">
  1900.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1901.             </div><!--clinks-->
  1902.            
  1903.             <div class="ctraits">
  1904.             <!--span is needed for the style-->
  1905.               <span>+ positive trait</span><p />
  1906.               <span>+ positive trait</span><p />
  1907.               <span>+ positive trait</span><p />
  1908.               <br />
  1909.               <span>- negative trait</span><p />
  1910.               <span>- negative trait</span><p />
  1911.               <span>- negative trait</span><p />
  1912.             </div><!--ctraits-->
  1913.            
  1914.           </div><!--ccontent-->
  1915.          
  1916.           <!--PAGE 2-->
  1917.           <div class="ccontent" id="c6p2">
  1918.             <div class="cbio">
  1919.                
  1920.               <div class="headline">
  1921.                 <h2><span class="h2front">the</span>title</h2>
  1922.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1923.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  1924.                 magna aliqua.
  1925.               </div><!--headline-->
  1926.            
  1927.               <div class="biocontent">
  1928.                
  1929.                 <!--LEFT DATA-->
  1930.                 <ul class="cell1">
  1931.                   <li> Full name:  <span> - </span> </li>
  1932.                   <li> Nickname:   <span> - </span> </li>
  1933.                   <li> Age:        <span> - </span> </li>
  1934.                   <li> D.o.B:      <span> - </span> </li>
  1935.                   <li> Gender:     <span> - </span> </li>
  1936.                   <li> Pronouns:   <span> - </span> </li>
  1937.                   <li> Sexuality:  <span> - </span> </li>
  1938.                   <li> Species: <span> - </span></li>
  1939.                 </ul>
  1940.                
  1941.                 <!--RIGHT DATA-->
  1942.                 <ul class="cell2">
  1943.                   <li> Occupation:      <span> - </span> </li>
  1944.                   <li> Nationality:     <span> - </span> </li>
  1945.                   <li> Residence:       <span> - </span> </li>
  1946.                   <li> Education:       <span> - </span> </li>
  1947.                   <li> Height:          <span> - </span> </li>
  1948.                   <li> Alignment:       <span> - </span> </li>
  1949.                   <li> Jung Type:       <span> - </span> </li>
  1950.                   <li> Affiliation:     <span> - </span></li>
  1951.                 </ul>
  1952.                
  1953.               </div><!--biocontent-->
  1954.              
  1955.             </div><!--cbio-->  
  1956.            
  1957.             <!--You can put another picture of your character or a flavour
  1958.            picture or whatever you like. Dimensions are: 165x340-->
  1959.             <div class="flavorimg" style="background-image:
  1960.              url('https://placehold.it/165x340');">
  1961.             </div>
  1962.            
  1963.           </div> <!--ccontent-->
  1964.          
  1965.           <!--PAGE 3-->
  1966.           <div class="ccontent" id="c6p3">
  1967.            
  1968.              <!--CONNECTION IMAGES/NAVIGATION-->
  1969.              <div class="navcon">
  1970.                 <div class="con" href="#c6con1" style="background-image:
  1971.                    url('http://placehold.it/84x84');"></div>
  1972.                 <div  class="con" href="#c6con2" style="background-image:
  1973.                    url('http://placehold.it/84x84');"></div>
  1974.                 <div class="con" href="#c6con3" style="background-image:
  1975.                    url('http://placehold.it/84x84');"></div>
  1976.                 <div class="con" href="#c6con4" style="background-image:
  1977.                    url('http://placehold.it/84x84');"></div>
  1978.                 <div class="con" href="#c6con5" style="background-image:
  1979.                    url('http://placehold.it/84x84');"></div>
  1980.                 <div class="con" href="#c6con6" style="background-image:
  1981.                    url('http://placehold.it/84x84');"></div>
  1982.                 <div class="con" href="#c6con7" style="background-image:
  1983.                    url('http://placehold.it/50x50');"></div>
  1984.                 <div class="con" href="#c6con8" style="background-image:
  1985.                    url('http://placehold.it/50x50');"></div>
  1986.              </div>
  1987.            
  1988.              <div class="cbio">
  1989.                <div class="headline">
  1990.                  <h2><span class="h2front">social</span>connections</h2>
  1991.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1992.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  1993.                  magna aliqua.
  1994.                </div><!--headline-->
  1995.              
  1996.                <div class="biocontent">
  1997.                
  1998.                  <div class="connections active" id="c6con1">
  1999.                    <span>Connection name :: </span>
  2000.                    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.
  2001.                  </div><!--connections-->
  2002.                
  2003.                  <!--ADD CONNECTION INFO-->
  2004.                  <!--Add as many connection info text fields as you like. If
  2005.                 you need less than 12, remove them from the navigation  
  2006.                 above as well. To add new info:
  2007.                     copy the follow div .connections
  2008.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  2009.                     c# = card number, con# = connection number.
  2010.                
  2011.                 Make sure only the first connection div has the class
  2012.                 'active' see above.    
  2013.                 You can also change these to names but then you need to
  2014.                 edit the 'href' in the navigation (.clinks .navcon) as well
  2015.                 .-->
  2016.                
  2017.                  <div class="connections" id="c6con2">
  2018.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  2019.                  </div>
  2020.            
  2021.                </div><!--biocontent-->
  2022.              </div><!--cbio-->
  2023.           </div> <!--ccontent-->    
  2024.          
  2025.         </div> <!--ccard-->
  2026.        
  2027.        
  2028.         <!--CCARD SEVEN-->
  2029.        
  2030.        
  2031.         <div class="ccard" id="c7">
  2032.          
  2033.           <!--INNER TAB NAVIGATION-->
  2034.           <div class="cfooter">
  2035.             <a href="#c7p1" class="active">
  2036.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2037.             <a href="#c7p2">
  2038.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2039.             <a href="#c7p3">
  2040.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2041.           </div>
  2042.          
  2043.           <div class="ccontent active" id="c7p1">
  2044.             <div class="cbio">
  2045.                
  2046.               <div class="headline">
  2047.                 <h2><span class="h2front">short</span>bio</h2>
  2048.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2049.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2050.                 magna aliqua.
  2051.               </div><!--headline-->
  2052.            
  2053.               <div class="biocontent">
  2054.                 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
  2055.               </div><!--biocontent-->
  2056.              
  2057.             </div><!--cbio-->  
  2058.            
  2059.             <div class="clinks">
  2060.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2061.              http://fontawesome.io/icons/-->
  2062.               <a href="#">
  2063.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2064.               <a href="#">
  2065.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2066.               <a href="#">
  2067.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2068.               <a href="#">
  2069.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2070.               <a href="#">
  2071.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2072.               <a href="#">
  2073.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2074.             </div><!--clinks-->
  2075.            
  2076.             <div class="ctraits">
  2077.             <!--span is needed for the style-->
  2078.               <span>+ positive trait</span><p />
  2079.               <span>+ positive trait</span><p />
  2080.               <span>+ positive trait</span><p />
  2081.               <br />
  2082.               <span>- negative trait</span><p />
  2083.               <span>- negative trait</span><p />
  2084.               <span>- negative trait</span><p />
  2085.             </div><!--ctraits-->
  2086.            
  2087.           </div><!--ccontent-->
  2088.          
  2089.           <!--PAGE 2-->
  2090.           <div class="ccontent" id="c7p2">
  2091.             <div class="cbio">
  2092.                
  2093.               <div class="headline">
  2094.                 <h2><span class="h2front">the</span>title</h2>
  2095.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2096.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2097.                 magna aliqua.
  2098.               </div><!--headline-->
  2099.            
  2100.               <div class="biocontent">
  2101.                
  2102.                 <!--LEFT DATA-->
  2103.                 <ul class="cell1">
  2104.                   <li> Full name:  <span> - </span> </li>
  2105.                   <li> Nickname:   <span> - </span> </li>
  2106.                   <li> Age:        <span> - </span> </li>
  2107.                   <li> D.o.B:      <span> - </span> </li>
  2108.                   <li> Gender:     <span> - </span> </li>
  2109.                   <li> Pronouns:   <span> - </span> </li>
  2110.                   <li> Sexuality:  <span> - </span> </li>
  2111.                   <li> Species: <span> - </span></li>
  2112.                 </ul>
  2113.                
  2114.                 <!--RIGHT DATA-->
  2115.                 <ul class="cell2">
  2116.                   <li> Occupation:      <span> - </span> </li>
  2117.                   <li> Nationality:     <span> - </span> </li>
  2118.                   <li> Residence:       <span> - </span> </li>
  2119.                   <li> Education:       <span> - </span> </li>
  2120.                   <li> Height:          <span> - </span> </li>
  2121.                   <li> Alignment:       <span> - </span> </li>
  2122.                   <li> Jung Type:       <span> - </span> </li>
  2123.                   <li> Affiliation:     <span> - </span></li>
  2124.                 </ul>
  2125.                
  2126.               </div><!--biocontent-->
  2127.              
  2128.             </div><!--cbio-->  
  2129.            
  2130.             <!--You can put another picture of your character or a flavour
  2131.            picture or whatever you like. Dimensions are: 165x340-->
  2132.             <div class="flavorimg" style="background-image:
  2133.              url('https://placehold.it/165x340');">
  2134.             </div>
  2135.            
  2136.           </div> <!--ccontent-->
  2137.          
  2138.           <!--PAGE 3-->
  2139.           <div class="ccontent" id="c7p3">
  2140.            
  2141.              <!--CONNECTION IMAGES/NAVIGATION-->
  2142.              <div class="navcon">
  2143.                 <div class="con" href="#c7con1" style="background-image:
  2144.                    url('http://placehold.it/84x84');"></div>
  2145.                 <div  class="con" href="#c7con2" style="background-image:
  2146.                    url('http://placehold.it/84x84');"></div>
  2147.                 <div class="con" href="#c7con3" style="background-image:
  2148.                    url('http://placehold.it/84x84');"></div>
  2149.                 <div class="con" href="#c7con4" style="background-image:
  2150.                    url('http://placehold.it/84x84');"></div>
  2151.                 <div class="con" href="#c7con5" style="background-image:
  2152.                    url('http://placehold.it/84x84');"></div>
  2153.                 <div class="con" href="#c7con6" style="background-image:
  2154.                    url('http://placehold.it/84x84');"></div>
  2155.                 <div class="con" href="#c7con7" style="background-image:
  2156.                    url('http://placehold.it/50x50');"></div>
  2157.                 <div class="con" href="#c7con8" style="background-image:
  2158.                    url('http://placehold.it/50x50');"></div>
  2159.              </div>
  2160.            
  2161.              <div class="cbio">
  2162.                <div class="headline">
  2163.                  <h2><span class="h2front">social</span>connections</h2>
  2164.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2165.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  2166.                  magna aliqua.
  2167.                </div><!--headline-->
  2168.              
  2169.                <div class="biocontent">
  2170.                
  2171.                  <div class="connections active" id="c7con1">
  2172.                    <span>Connection name :: </span>
  2173.                    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.
  2174.                  </div><!--connections-->
  2175.                
  2176.                  <!--ADD CONNECTION INFO-->
  2177.                  <!--Add as many connection info text fields as you like. If
  2178.                 you need less than 12, remove them from the navigation  
  2179.                 above as well. To add new info:
  2180.                     copy the follow div .connections
  2181.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  2182.                     c# = card number, con# = connection number.
  2183.                
  2184.                 Make sure only the first connection div has the class
  2185.                 'active' see above.    
  2186.                 You can also change these to names but then you need to
  2187.                 edit the 'href' in the navigation (.clinks .navcon) as well
  2188.                 .-->
  2189.                
  2190.                  <div class="connections" id="c7con2">
  2191.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  2192.                  </div>
  2193.            
  2194.                </div><!--biocontent-->
  2195.              </div><!--cbio-->
  2196.           </div> <!--ccontent-->    
  2197.          
  2198.         </div> <!--ccard-->
  2199.        
  2200.        
  2201.         <!--CCARD EIGHT-->
  2202.        
  2203.          <div class="ccard" id="c8">
  2204.          
  2205.           <!--INNER TAB NAVIGATION-->
  2206.           <div class="cfooter">
  2207.             <a href="#c8p1" class="active">
  2208.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2209.             <a href="#c8p2">
  2210.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2211.             <a href="#c8p3">
  2212.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2213.           </div>
  2214.          
  2215.           <div class="ccontent active" id="c8p1">
  2216.             <div class="cbio">
  2217.                
  2218.               <div class="headline">
  2219.                 <h2><span class="h2front">short</span>bio</h2>
  2220.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2221.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2222.                 magna aliqua.
  2223.               </div><!--headline-->
  2224.            
  2225.               <div class="biocontent">
  2226.                 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
  2227.               </div><!--biocontent-->
  2228.              
  2229.             </div><!--cbio-->  
  2230.            
  2231.             <div class="clinks">
  2232.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2233.              http://fontawesome.io/icons/-->
  2234.               <a href="#">
  2235.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2236.               <a href="#">
  2237.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2238.               <a href="#">
  2239.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2240.               <a href="#">
  2241.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2242.               <a href="#">
  2243.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2244.               <a href="#">
  2245.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2246.             </div><!--clinks-->
  2247.            
  2248.             <div class="ctraits">
  2249.             <!--span is needed for the style-->
  2250.               <span>+ positive trait</span><p />
  2251.               <span>+ positive trait</span><p />
  2252.               <span>+ positive trait</span><p />
  2253.               <br />
  2254.               <span>- negative trait</span><p />
  2255.               <span>- negative trait</span><p />
  2256.               <span>- negative trait</span><p />
  2257.             </div><!--ctraits-->
  2258.            
  2259.           </div><!--ccontent-->
  2260.          
  2261.           <!--PAGE 2-->
  2262.           <div class="ccontent" id="c8p2">
  2263.             <div class="cbio">
  2264.                
  2265.               <div class="headline">
  2266.                 <h2><span class="h2front">the</span>title</h2>
  2267.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2268.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2269.                 magna aliqua.
  2270.               </div><!--headline-->
  2271.            
  2272.               <div class="biocontent">
  2273.                
  2274.                 <!--LEFT DATA-->
  2275.                 <ul class="cell1">
  2276.                   <li> Full name:  <span> - </span> </li>
  2277.                   <li> Nickname:   <span> - </span> </li>
  2278.                   <li> Age:        <span> - </span> </li>
  2279.                   <li> D.o.B:      <span> - </span> </li>
  2280.                   <li> Gender:     <span> - </span> </li>
  2281.                   <li> Pronouns:   <span> - </span> </li>
  2282.                   <li> Sexuality:  <span> - </span> </li>
  2283.                   <li> Species: <span> - </span></li>
  2284.                 </ul>
  2285.                
  2286.                 <!--RIGHT DATA-->
  2287.                 <ul class="cell2">
  2288.                   <li> Occupation:      <span> - </span> </li>
  2289.                   <li> Nationality:     <span> - </span> </li>
  2290.                   <li> Residence:       <span> - </span> </li>
  2291.                   <li> Education:       <span> - </span> </li>
  2292.                   <li> Height:          <span> - </span> </li>
  2293.                   <li> Alignment:       <span> - </span> </li>
  2294.                   <li> Jung Type:       <span> - </span> </li>
  2295.                   <li> Affiliation:     <span> - </span></li>
  2296.                 </ul>
  2297.                
  2298.               </div><!--biocontent-->
  2299.              
  2300.             </div><!--cbio-->  
  2301.            
  2302.             <!--You can put another picture of your character or a flavour
  2303.            picture or whatever you like. Dimensions are: 165x340-->
  2304.             <div class="flavorimg" style="background-image:
  2305.              url('https://placehold.it/165x340');">
  2306.             </div>
  2307.            
  2308.           </div> <!--ccontent-->
  2309.          
  2310.           <!--PAGE 3-->
  2311.           <div class="ccontent" id="c8p3">
  2312.            
  2313.              <!--CONNECTION IMAGES/NAVIGATION-->
  2314.              <div class="navcon">
  2315.                 <div class="con" href="#c8con1" style="background-image:
  2316.                    url('http://placehold.it/84x84');"></div>
  2317.                 <div  class="con" href="#c8con2" style="background-image:
  2318.                    url('http://placehold.it/84x84');"></div>
  2319.                 <div class="con" href="#c8con3" style="background-image:
  2320.                    url('http://placehold.it/84x84');"></div>
  2321.                 <div class="con" href="#c8con4" style="background-image:
  2322.                    url('http://placehold.it/84x84');"></div>
  2323.                 <div class="con" href="#c8con5" style="background-image:
  2324.                    url('http://placehold.it/84x84');"></div>
  2325.                 <div class="con" href="#c8con6" style="background-image:
  2326.                    url('http://placehold.it/84x84');"></div>
  2327.                 <div class="con" href="#c8con7" style="background-image:
  2328.                    url('http://placehold.it/50x50');"></div>
  2329.                 <div class="con" href="#c8con8" style="background-image:
  2330.                    url('http://placehold.it/50x50');"></div>
  2331.              </div>
  2332.            
  2333.              <div class="cbio">
  2334.                <div class="headline">
  2335.                  <h2><span class="h2front">social</span>connections</h2>
  2336.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2337.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  2338.                  magna aliqua.
  2339.                </div><!--headline-->
  2340.              
  2341.                <div class="biocontent">
  2342.                
  2343.                  <div class="connections active" id="c8con1">
  2344.                    <span>Connection name :: </span>
  2345.                    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.
  2346.                  </div><!--connections-->
  2347.                
  2348.                  <!--ADD CONNECTION INFO-->
  2349.                  <!--Add as many connection info text fields as you like. If
  2350.                 you need less than 12, remove them from the navigation  
  2351.                 above as well. To add new info:
  2352.                     copy the follow div .connections
  2353.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  2354.                     c# = card number, con# = connection number.
  2355.                
  2356.                 Make sure only the first connection div has the class
  2357.                 'active' see above.    
  2358.                 You can also change these to names but then you need to
  2359.                 edit the 'href' in the navigation (.clinks .navcon) as well
  2360.                 .-->
  2361.                
  2362.                  <div class="connections" id="c8con2">
  2363.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  2364.                  </div>
  2365.            
  2366.                </div><!--biocontent-->
  2367.              </div><!--cbio-->
  2368.           </div> <!--ccontent-->    
  2369.          
  2370.         </div> <!--ccard-->
  2371.        
  2372.        
  2373.         <!--CCARD NINE-->
  2374.        
  2375.         <div class="ccard" id="c9">
  2376.          
  2377.           <!--INNER TAB NAVIGATION-->
  2378.           <div class="cfooter">
  2379.             <a href="#c9p1" class="active">
  2380.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2381.             <a href="#c9p2">
  2382.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2383.             <a href="#c9p3">
  2384.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2385.           </div>
  2386.          
  2387.           <div class="ccontent active" id="c9p1">
  2388.             <div class="cbio">
  2389.                
  2390.               <div class="headline">
  2391.                 <h2><span class="h2front">short</span>bio</h2>
  2392.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2393.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2394.                 magna aliqua.
  2395.               </div><!--headline-->
  2396.            
  2397.               <div class="biocontent">
  2398.                 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
  2399.               </div><!--biocontent-->
  2400.              
  2401.             </div><!--cbio-->  
  2402.            
  2403.             <div class="clinks">
  2404.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2405.              http://fontawesome.io/icons/-->
  2406.               <a href="#">
  2407.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2408.               <a href="#">
  2409.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2410.               <a href="#">
  2411.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2412.               <a href="#">
  2413.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2414.               <a href="#">
  2415.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2416.               <a href="#">
  2417.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2418.             </div><!--clinks-->
  2419.            
  2420.             <div class="ctraits">
  2421.             <!--span is needed for the style-->
  2422.               <span>+ positive trait</span><p />
  2423.               <span>+ positive trait</span><p />
  2424.               <span>+ positive trait</span><p />
  2425.               <br />
  2426.               <span>- negative trait</span><p />
  2427.               <span>- negative trait</span><p />
  2428.               <span>- negative trait</span><p />
  2429.             </div><!--ctraits-->
  2430.            
  2431.           </div><!--ccontent-->
  2432.          
  2433.           <!--PAGE 2-->
  2434.           <div class="ccontent" id="c9p2">
  2435.             <div class="cbio">
  2436.                
  2437.               <div class="headline">
  2438.                 <h2><span class="h2front">the</span>title</h2>
  2439.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2440.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2441.                 magna aliqua.
  2442.               </div><!--headline-->
  2443.            
  2444.               <div class="biocontent">
  2445.                
  2446.                 <!--LEFT DATA-->
  2447.                 <ul class="cell1">
  2448.                   <li> Full name:  <span> - </span> </li>
  2449.                   <li> Nickname:   <span> - </span> </li>
  2450.                   <li> Age:        <span> - </span> </li>
  2451.                   <li> D.o.B:      <span> - </span> </li>
  2452.                   <li> Gender:     <span> - </span> </li>
  2453.                   <li> Pronouns:   <span> - </span> </li>
  2454.                   <li> Sexuality:  <span> - </span> </li>
  2455.                   <li> Species: <span> - </span></li>
  2456.                 </ul>
  2457.                
  2458.                 <!--RIGHT DATA-->
  2459.                 <ul class="cell2">
  2460.                   <li> Occupation:      <span> - </span> </li>
  2461.                   <li> Nationality:     <span> - </span> </li>
  2462.                   <li> Residence:       <span> - </span> </li>
  2463.                   <li> Education:       <span> - </span> </li>
  2464.                   <li> Height:          <span> - </span> </li>
  2465.                   <li> Alignment:       <span> - </span> </li>
  2466.                   <li> Jung Type:       <span> - </span> </li>
  2467.                   <li> Affiliation:     <span> - </span></li>
  2468.                 </ul>
  2469.                
  2470.               </div><!--biocontent-->
  2471.              
  2472.             </div><!--cbio-->  
  2473.            
  2474.             <!--You can put another picture of your character or a flavour
  2475.            picture or whatever you like. Dimensions are: 165x340-->
  2476.             <div class="flavorimg" style="background-image:
  2477.              url('https://placehold.it/165x340');">
  2478.             </div>
  2479.            
  2480.           </div> <!--ccontent-->
  2481.          
  2482.           <!--PAGE 3-->
  2483.           <div class="ccontent" id="c9p3">
  2484.            
  2485.              <!--CONNECTION IMAGES/NAVIGATION-->
  2486.              <div class="navcon">
  2487.                 <div class="con" href="#c9con1" style="background-image:
  2488.                    url('http://placehold.it/84x84');"></div>
  2489.                 <div  class="con" href="#c9con2" style="background-image:
  2490.                    url('http://placehold.it/84x84');"></div>
  2491.                 <div class="con" href="#c9con3" style="background-image:
  2492.                    url('http://placehold.it/84x84');"></div>
  2493.                 <div class="con" href="#c9con4" style="background-image:
  2494.                    url('http://placehold.it/84x84');"></div>
  2495.                 <div class="con" href="#c9con5" style="background-image:
  2496.                    url('http://placehold.it/84x84');"></div>
  2497.                 <div class="con" href="#c9con6" style="background-image:
  2498.                    url('http://placehold.it/84x84');"></div>
  2499.                 <div class="con" href="#c9con7" style="background-image:
  2500.                    url('http://placehold.it/50x50');"></div>
  2501.                 <div class="con" href="#c9con8" style="background-image:
  2502.                    url('http://placehold.it/50x50');"></div>
  2503.              </div>
  2504.            
  2505.              <div class="cbio">
  2506.                <div class="headline">
  2507.                  <h2><span class="h2front">social</span>connections</h2>
  2508.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2509.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  2510.                  magna aliqua.
  2511.                </div><!--headline-->
  2512.              
  2513.                <div class="biocontent">
  2514.                
  2515.                  <div class="connections active" id="c9con1">
  2516.                    <span>Connection name :: </span>
  2517.                    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.
  2518.                  </div><!--connections-->
  2519.                
  2520.                  <!--ADD CONNECTION INFO-->
  2521.                  <!--Add as many connection info text fields as you like. If
  2522.                 you need less than 12, remove them from the navigation  
  2523.                 above as well. To add new info:
  2524.                     copy the follow div .connections
  2525.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  2526.                     c# = card number, con# = connection number.
  2527.                
  2528.                 Make sure only the first connection div has the class
  2529.                 'active' see above.    
  2530.                 You can also change these to names but then you need to
  2531.                 edit the 'href' in the navigation (.clinks .navcon) as well
  2532.                 .-->
  2533.                
  2534.                  <div class="connections" id="c9con2">
  2535.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  2536.                  </div>
  2537.            
  2538.                </div><!--biocontent-->
  2539.              </div><!--cbio-->
  2540.           </div> <!--ccontent-->    
  2541.          
  2542.         </div> <!--ccard-->
  2543.        
  2544.        
  2545.         <!--CCARD TEN-->
  2546.        
  2547.         <div class="ccard" id="c10">
  2548.          
  2549.           <!--INNER TAB NAVIGATION-->
  2550.           <div class="cfooter">
  2551.             <a href="#c10p1" class="active">
  2552.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2553.             <a href="#c10p2">
  2554.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2555.             <a href="#c10p3">
  2556.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2557.           </div>
  2558.          
  2559.           <div class="ccontent active" id="c10p1">
  2560.             <div class="cbio">
  2561.                
  2562.               <div class="headline">
  2563.                 <h2><span class="h2front">short</span>bio</h2>
  2564.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2565.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2566.                 magna aliqua.
  2567.               </div><!--headline-->
  2568.            
  2569.               <div class="biocontent">
  2570.                 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
  2571.               </div><!--biocontent-->
  2572.              
  2573.             </div><!--cbio-->  
  2574.            
  2575.             <div class="clinks">
  2576.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2577.              http://fontawesome.io/icons/-->
  2578.               <a href="#">
  2579.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2580.               <a href="#">
  2581.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2582.               <a href="#">
  2583.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2584.               <a href="#">
  2585.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2586.               <a href="#">
  2587.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2588.               <a href="#">
  2589.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2590.             </div><!--clinks-->
  2591.            
  2592.             <div class="ctraits">
  2593.             <!--span is needed for the style-->
  2594.               <span>+ positive trait</span><p />
  2595.               <span>+ positive trait</span><p />
  2596.               <span>+ positive trait</span><p />
  2597.               <br />
  2598.               <span>- negative trait</span><p />
  2599.               <span>- negative trait</span><p />
  2600.               <span>- negative trait</span><p />
  2601.             </div><!--ctraits-->
  2602.            
  2603.           </div><!--ccontent-->
  2604.          
  2605.           <!--PAGE 2-->
  2606.           <div class="ccontent" id="c10p2">
  2607.             <div class="cbio">
  2608.                
  2609.               <div class="headline">
  2610.                 <h2><span class="h2front">the</span>title</h2>
  2611.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2612.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2613.                 magna aliqua.
  2614.               </div><!--headline-->
  2615.            
  2616.               <div class="biocontent">
  2617.                
  2618.                 <!--LEFT DATA-->
  2619.                 <ul class="cell1">
  2620.                   <li> Full name:  <span> - </span> </li>
  2621.                   <li> Nickname:   <span> - </span> </li>
  2622.                   <li> Age:        <span> - </span> </li>
  2623.                   <li> D.o.B:      <span> - </span> </li>
  2624.                   <li> Gender:     <span> - </span> </li>
  2625.                   <li> Pronouns:   <span> - </span> </li>
  2626.                   <li> Sexuality:  <span> - </span> </li>
  2627.                   <li> Species: <span> - </span></li>
  2628.                 </ul>
  2629.                
  2630.                 <!--RIGHT DATA-->
  2631.                 <ul class="cell2">
  2632.                   <li> Occupation:      <span> - </span> </li>
  2633.                   <li> Nationality:     <span> - </span> </li>
  2634.                   <li> Residence:       <span> - </span> </li>
  2635.                   <li> Education:       <span> - </span> </li>
  2636.                   <li> Height:          <span> - </span> </li>
  2637.                   <li> Alignment:       <span> - </span> </li>
  2638.                   <li> Jung Type:       <span> - </span> </li>
  2639.                   <li> Affiliation:     <span> - </span></li>
  2640.                 </ul>
  2641.                
  2642.               </div><!--biocontent-->
  2643.              
  2644.             </div><!--cbio-->  
  2645.            
  2646.             <!--You can put another picture of your character or a flavour
  2647.            picture or whatever you like. Dimensions are: 165x340-->
  2648.             <div class="flavorimg" style="background-image:
  2649.              url('https://placehold.it/165x340');">
  2650.             </div>
  2651.            
  2652.           </div> <!--ccontent-->
  2653.          
  2654.           <!--PAGE 3-->
  2655.           <div class="ccontent" id="c10p3">
  2656.            
  2657.              <!--CONNECTION IMAGES/NAVIGATION-->
  2658.              <div class="navcon">
  2659.                 <div class="con" href="#c10con1" style="background-image:
  2660.                    url('http://placehold.it/84x84');"></div>
  2661.                 <div  class="con" href="#c10con2" style="background-image:
  2662.                    url('http://placehold.it/84x84');"></div>
  2663.                 <div class="con" href="#c10con3" style="background-image:
  2664.                    url('http://placehold.it/84x84');"></div>
  2665.                 <div class="con" href="#c10con4" style="background-image:
  2666.                    url('http://placehold.it/84x84');"></div>
  2667.                 <div class="con" href="#c10con5" style="background-image:
  2668.                    url('http://placehold.it/84x84');"></div>
  2669.                 <div class="con" href="#c10con6" style="background-image:
  2670.                    url('http://placehold.it/84x84');"></div>
  2671.                 <div class="con" href="#c10con7" style="background-image:
  2672.                    url('http://placehold.it/50x50');"></div>
  2673.                 <div class="con" href="#c10con8" style="background-image:
  2674.                    url('http://placehold.it/50x50');"></div>
  2675.              </div>
  2676.            
  2677.              <div class="cbio">
  2678.                <div class="headline">
  2679.                  <h2><span class="h2front">social</span>connections</h2>
  2680.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2681.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  2682.                  magna aliqua.
  2683.                </div><!--headline-->
  2684.              
  2685.                <div class="biocontent">
  2686.                
  2687.                  <div class="connections active" id="c10con1">
  2688.                    <span>Connection name :: </span>
  2689.                    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.
  2690.                  </div><!--connections-->
  2691.                
  2692.                  <!--ADD CONNECTION INFO-->
  2693.                  <!--Add as many connection info text fields as you like. If
  2694.                 you need less than 12, remove them from the navigation  
  2695.                 above as well. To add new info:
  2696.                     copy the follow div .connections
  2697.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  2698.                     c# = card number, con# = connection number.
  2699.                
  2700.                 Make sure only the first connection div has the class
  2701.                 'active' see above.    
  2702.                 You can also change these to names but then you need to
  2703.                 edit the 'href' in the navigation (.clinks .navcon) as well
  2704.                 .-->
  2705.                
  2706.                  <div class="connections" id="c10con2">
  2707.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  2708.                  </div>
  2709.            
  2710.                </div><!--biocontent-->
  2711.              </div><!--cbio-->
  2712.           </div> <!--ccontent-->    
  2713.          
  2714.         </div> <!--ccard-->
  2715.        
  2716.        
  2717.        
  2718.        
  2719.          <!--CHARACTER ELEVEN-->
  2720.        
  2721.         <div class="cbox g2" href="#c11">
  2722.           <div class="cname">
  2723.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  2724.            change the opacity of the names in the CSS-->
  2725.             <span style="font-size: 45px;">
  2726.             FIRST <br />
  2727.             LASTN
  2728.             </span>
  2729.           </div> <!--cname-->
  2730.           <div class="triangle"></div>
  2731.          
  2732.           <img src="https://placehold.it/160x160"></img>
  2733.         </div> <!--cbox-->
  2734.        
  2735.        
  2736.         <!--CHARACTER TWELVE-->
  2737.        
  2738.         <div class="cbox g3" href="#c12">
  2739.           <div class="cname">
  2740.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  2741.            change the opacity of the names in the CSS-->
  2742.             <span style="font-size: 45px;">
  2743.             FIRST <br />
  2744.             LASTN
  2745.             </span>
  2746.           </div> <!--cname-->
  2747.           <div class="triangle"></div>
  2748.          
  2749.           <img src="https://placehold.it/160x160"></img>
  2750.         </div> <!--cbox-->
  2751.        
  2752.        
  2753.         <!--CHARACTER THIRTEEN-->
  2754.        
  2755.         <div class="cbox g4" href="#c13">
  2756.           <div class="cname">
  2757.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  2758.            change the opacity of the names in the CSS-->
  2759.             <span style="font-size: 45px;">
  2760.             FIRST <br />
  2761.             LASTN
  2762.             </span>
  2763.           </div> <!--cname-->
  2764.           <div class="triangle"></div>
  2765.          
  2766.           <img src="https://placehold.it/160x160"></img>
  2767.         </div> <!--cbox-->
  2768.        
  2769.        
  2770.         <!--CHARACTER FOURTREEN-->
  2771.        
  2772.         <div class="cbox g5" href="#c14">
  2773.           <div class="cname">
  2774.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  2775.            change the opacity of the names in the CSS-->
  2776.             <span style="font-size: 45px;">
  2777.             FIRST <br />
  2778.             LASTN
  2779.             </span>
  2780.           </div> <!--cname-->
  2781.           <div class="triangle"></div>
  2782.          
  2783.           <img src="https://placehold.it/160x160"></img>
  2784.         </div> <!--cbox-->
  2785.        
  2786.        
  2787.         <!--CHARACTER FIFTEEN-->
  2788.        
  2789.         <div class="cbox g2" href="#c15">
  2790.           <div class="cname">
  2791.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  2792.            change the opacity of the names in the CSS-->
  2793.             <span style="font-size: 45px;">
  2794.             FIRST <br />
  2795.             LASTN
  2796.             </span>
  2797.           </div> <!--cname-->
  2798.           <div class="triangle"></div>
  2799.          
  2800.           <img src="https://placehold.it/160x160"></img>
  2801.         </div> <!--cbox-->
  2802.        
  2803.        
  2804.         <!--CHARACTER CARD THIRD ROW-->
  2805.        
  2806.         <!--CCARD ELEVEN-->
  2807.        
  2808.         <div class="ccard" id="c11">
  2809.          
  2810.           <!--INNER TAB NAVIGATION-->
  2811.           <div class="cfooter">
  2812.             <a href="#c11p1" class="active">
  2813.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2814.             <a href="#c11p2">
  2815.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2816.             <a href="#c11p3">
  2817.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2818.           </div>
  2819.          
  2820.           <div class="ccontent active" id="c11p1">
  2821.             <div class="cbio">
  2822.                
  2823.               <div class="headline">
  2824.                 <h2><span class="h2front">short</span>bio</h2>
  2825.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2826.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2827.                 magna aliqua.
  2828.               </div><!--headline-->
  2829.            
  2830.               <div class="biocontent">
  2831.                 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
  2832.               </div><!--biocontent-->
  2833.              
  2834.             </div><!--cbio-->  
  2835.            
  2836.             <div class="clinks">
  2837.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  2838.              http://fontawesome.io/icons/-->
  2839.               <a href="#">
  2840.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2841.               <a href="#">
  2842.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  2843.               <a href="#">
  2844.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2845.               <a href="#">
  2846.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2847.               <a href="#">
  2848.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  2849.               <a href="#">
  2850.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2851.             </div><!--clinks-->
  2852.            
  2853.             <div class="ctraits">
  2854.             <!--span is needed for the style-->
  2855.               <span>+ positive trait</span><p />
  2856.               <span>+ positive trait</span><p />
  2857.               <span>+ positive trait</span><p />
  2858.               <br />
  2859.               <span>- negative trait</span><p />
  2860.               <span>- negative trait</span><p />
  2861.               <span>- negative trait</span><p />
  2862.             </div><!--ctraits-->
  2863.            
  2864.           </div><!--ccontent-->
  2865.          
  2866.           <!--PAGE 2-->
  2867.           <div class="ccontent" id="c11p2">
  2868.             <div class="cbio">
  2869.                
  2870.               <div class="headline">
  2871.                 <h2><span class="h2front">the</span>title</h2>
  2872.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2873.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2874.                 magna aliqua.
  2875.               </div><!--headline-->
  2876.            
  2877.               <div class="biocontent">
  2878.                
  2879.                 <!--LEFT DATA-->
  2880.                 <ul class="cell1">
  2881.                   <li> Full name:  <span> - </span> </li>
  2882.                   <li> Nickname:   <span> - </span> </li>
  2883.                   <li> Age:        <span> - </span> </li>
  2884.                   <li> D.o.B:      <span> - </span> </li>
  2885.                   <li> Gender:     <span> - </span> </li>
  2886.                   <li> Pronouns:   <span> - </span> </li>
  2887.                   <li> Sexuality:  <span> - </span> </li>
  2888.                   <li> Species: <span> - </span></li>
  2889.                 </ul>
  2890.                
  2891.                 <!--RIGHT DATA-->
  2892.                 <ul class="cell2">
  2893.                   <li> Occupation:      <span> - </span> </li>
  2894.                   <li> Nationality:     <span> - </span> </li>
  2895.                   <li> Residence:       <span> - </span> </li>
  2896.                   <li> Education:       <span> - </span> </li>
  2897.                   <li> Height:          <span> - </span> </li>
  2898.                   <li> Alignment:       <span> - </span> </li>
  2899.                   <li> Jung Type:       <span> - </span> </li>
  2900.                   <li> Affiliation:     <span> - </span></li>
  2901.                 </ul>
  2902.                
  2903.               </div><!--biocontent-->
  2904.              
  2905.             </div><!--cbio-->  
  2906.            
  2907.             <!--You can put another picture of your character or a flavour
  2908.            picture or whatever you like. Dimensions are: 165x340-->
  2909.             <div class="flavorimg" style="background-image:
  2910.              url('https://placehold.it/165x340');">
  2911.             </div>
  2912.            
  2913.           </div> <!--ccontent-->
  2914.          
  2915.           <!--PAGE 3-->
  2916.           <div class="ccontent" id="c11p3">
  2917.            
  2918.              <!--CONNECTION IMAGES/NAVIGATION-->
  2919.              <div class="navcon">
  2920.                 <div class="con" href="#c11con1" style="background-image:
  2921.                    url('http://placehold.it/84x84');"></div>
  2922.                 <div  class="con" href="#c11con2" style="background-image:
  2923.                    url('http://placehold.it/84x84');"></div>
  2924.                 <div class="con" href="#c11con3" style="background-image:
  2925.                    url('http://placehold.it/84x84');"></div>
  2926.                 <div class="con" href="#c11con4" style="background-image:
  2927.                    url('http://placehold.it/84x84');"></div>
  2928.                 <div class="con" href="#c11con5" style="background-image:
  2929.                    url('http://placehold.it/84x84');"></div>
  2930.                 <div class="con" href="#c11con6" style="background-image:
  2931.                    url('http://placehold.it/84x84');"></div>
  2932.                 <div class="con" href="#c11con7" style="background-image:
  2933.                    url('http://placehold.it/50x50');"></div>
  2934.                 <div class="con" href="#c11con8" style="background-image:
  2935.                    url('http://placehold.it/50x50');"></div>
  2936.              </div>
  2937.            
  2938.              <div class="cbio">
  2939.                <div class="headline">
  2940.                  <h2><span class="h2front">social</span>connections</h2>
  2941.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2942.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  2943.                  magna aliqua.
  2944.                </div><!--headline-->
  2945.              
  2946.                <div class="biocontent">
  2947.                
  2948.                  <div class="connections active" id="c11con1">
  2949.                    <span>Connection name :: </span>
  2950.                    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.
  2951.                  </div><!--connections-->
  2952.                
  2953.                  <!--ADD CONNECTION INFO-->
  2954.                  <!--Add as many connection info text fields as you like. If
  2955.                 you need less than 12, remove them from the navigation  
  2956.                 above as well. To add new info:
  2957.                     copy the follow div .connections
  2958.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  2959.                     c# = card number, con# = connection number.
  2960.                
  2961.                 Make sure only the first connection div has the class
  2962.                 'active' see above.    
  2963.                 You can also change these to names but then you need to
  2964.                 edit the 'href' in the navigation (.clinks .navcon) as well
  2965.                 .-->
  2966.                
  2967.                  <div class="connections" id="c11con2">
  2968.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  2969.                  </div>
  2970.            
  2971.                </div><!--biocontent-->
  2972.              </div><!--cbio-->
  2973.           </div> <!--ccontent-->    
  2974.          
  2975.         </div> <!--ccard-->
  2976.        
  2977.        
  2978.         <!--CCARD TWELVE-->
  2979.        
  2980.         <div class="ccard" id="c12">
  2981.          
  2982.           <!--INNER TAB NAVIGATION-->
  2983.           <div class="cfooter">
  2984.             <a href="#c12p1" class="active">
  2985.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2986.             <a href="#c12p2">
  2987.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2988.             <a href="#c12p3">
  2989.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  2990.           </div>
  2991.          
  2992.           <div class="ccontent active" id="c12p1">
  2993.             <div class="cbio">
  2994.                
  2995.               <div class="headline">
  2996.                 <h2><span class="h2front">short</span>bio</h2>
  2997.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2998.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  2999.                 magna aliqua.
  3000.               </div><!--headline-->
  3001.            
  3002.               <div class="biocontent">
  3003.                 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
  3004.               </div><!--biocontent-->
  3005.              
  3006.             </div><!--cbio-->  
  3007.            
  3008.             <div class="clinks">
  3009.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  3010.              http://fontawesome.io/icons/-->
  3011.               <a href="#">
  3012.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  3013.               <a href="#">
  3014.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  3015.               <a href="#">
  3016.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  3017.               <a href="#">
  3018.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  3019.               <a href="#">
  3020.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  3021.               <a href="#">
  3022.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  3023.             </div><!--clinks-->
  3024.            
  3025.             <div class="ctraits">
  3026.             <!--span is needed for the style-->
  3027.               <span>+ positive trait</span><p />
  3028.               <span>+ positive trait</span><p />
  3029.               <span>+ positive trait</span><p />
  3030.               <br />
  3031.               <span>- negative trait</span><p />
  3032.               <span>- negative trait</span><p />
  3033.               <span>- negative trait</span><p />
  3034.             </div><!--ctraits-->
  3035.            
  3036.           </div><!--ccontent-->
  3037.          
  3038.           <!--PAGE 2-->
  3039.           <div class="ccontent" id="c12p2">
  3040.             <div class="cbio">
  3041.                
  3042.               <div class="headline">
  3043.                 <h2><span class="h2front">the</span>title</h2>
  3044.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3045.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  3046.                 magna aliqua.
  3047.               </div><!--headline-->
  3048.            
  3049.               <div class="biocontent">
  3050.                
  3051.                 <!--LEFT DATA-->
  3052.                 <ul class="cell1">
  3053.                   <li> Full name:  <span> - </span> </li>
  3054.                   <li> Nickname:   <span> - </span> </li>
  3055.                   <li> Age:        <span> - </span> </li>
  3056.                   <li> D.o.B:      <span> - </span> </li>
  3057.                   <li> Gender:     <span> - </span> </li>
  3058.                   <li> Pronouns:   <span> - </span> </li>
  3059.                   <li> Sexuality:  <span> - </span> </li>
  3060.                   <li> Species: <span> - </span></li>
  3061.                 </ul>
  3062.                
  3063.                 <!--RIGHT DATA-->
  3064.                 <ul class="cell2">
  3065.                   <li> Occupation:      <span> - </span> </li>
  3066.                   <li> Nationality:     <span> - </span> </li>
  3067.                   <li> Residence:       <span> - </span> </li>
  3068.                   <li> Education:       <span> - </span> </li>
  3069.                   <li> Height:          <span> - </span> </li>
  3070.                   <li> Alignment:       <span> - </span> </li>
  3071.                   <li> Jung Type:       <span> - </span> </li>
  3072.                   <li> Affiliation:     <span> - </span></li>
  3073.                 </ul>
  3074.                
  3075.               </div><!--biocontent-->
  3076.              
  3077.             </div><!--cbio-->  
  3078.            
  3079.             <!--You can put another picture of your character or a flavour
  3080.            picture or whatever you like. Dimensions are: 165x340-->
  3081.             <div class="flavorimg" style="background-image:
  3082.              url('https://placehold.it/165x340');">
  3083.             </div>
  3084.            
  3085.           </div> <!--ccontent-->
  3086.          
  3087.           <!--PAGE 3-->
  3088.           <div class="ccontent" id="c12p3">
  3089.            
  3090.              <!--CONNECTION IMAGES/NAVIGATION-->
  3091.              <div class="navcon">
  3092.                 <div class="con" href="#c12con1" style="background-image:
  3093.                    url('http://placehold.it/84x84');"></div>
  3094.                 <div  class="con" href="#c12con2" style="background-image:
  3095.                    url('http://placehold.it/84x84');"></div>
  3096.                 <div class="con" href="#c12con3" style="background-image:
  3097.                    url('http://placehold.it/84x84');"></div>
  3098.                 <div class="con" href="#c12con4" style="background-image:
  3099.                    url('http://placehold.it/84x84');"></div>
  3100.                 <div class="con" href="#c12con5" style="background-image:
  3101.                    url('http://placehold.it/84x84');"></div>
  3102.                 <div class="con" href="#c12con6" style="background-image:
  3103.                    url('http://placehold.it/84x84');"></div>
  3104.                 <div class="con" href="#c12con7" style="background-image:
  3105.                    url('http://placehold.it/50x50');"></div>
  3106.                 <div class="con" href="#c12con8" style="background-image:
  3107.                    url('http://placehold.it/50x50');"></div>
  3108.              </div>
  3109.            
  3110.              <div class="cbio">
  3111.                <div class="headline">
  3112.                  <h2><span class="h2front">social</span>connections</h2>
  3113.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3114.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  3115.                  magna aliqua.
  3116.                </div><!--headline-->
  3117.              
  3118.                <div class="biocontent">
  3119.                
  3120.                  <div class="connections active" id="c12con1">
  3121.                    <span>Connection name :: </span>
  3122.                    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.
  3123.                  </div><!--connections-->
  3124.                
  3125.                  <!--ADD CONNECTION INFO-->
  3126.                  <!--Add as many connection info text fields as you like. If
  3127.                 you need less than 12, remove them from the navigation  
  3128.                 above as well. To add new info:
  3129.                     copy the follow div .connections
  3130.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  3131.                     c# = card number, con# = connection number.
  3132.                
  3133.                 Make sure only the first connection div has the class
  3134.                 'active' see above.    
  3135.                 You can also change these to names but then you need to
  3136.                 edit the 'href' in the navigation (.clinks .navcon) as well
  3137.                 .-->
  3138.                
  3139.                  <div class="connections" id="c12con2">
  3140.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  3141.                  </div>
  3142.            
  3143.                </div><!--biocontent-->
  3144.              </div><!--cbio-->
  3145.           </div> <!--ccontent-->    
  3146.          
  3147.         </div> <!--ccard-->
  3148.        
  3149.        
  3150.         <!--CCARD THIRTEEN-->
  3151.        
  3152.         <div class="ccard" id="c13">
  3153.          
  3154.           <!--INNER TAB NAVIGATION-->
  3155.           <div class="cfooter">
  3156.             <a href="#c13p1" class="active">
  3157.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3158.             <a href="#c13p2">
  3159.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3160.             <a href="#c13p3">
  3161.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3162.           </div>
  3163.          
  3164.           <div class="ccontent active" id="c13p1">
  3165.             <div class="cbio">
  3166.                
  3167.               <div class="headline">
  3168.                 <h2><span class="h2front">short</span>bio</h2>
  3169.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3170.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  3171.                 magna aliqua.
  3172.               </div><!--headline-->
  3173.            
  3174.               <div class="biocontent">
  3175.                 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
  3176.               </div><!--biocontent-->
  3177.              
  3178.             </div><!--cbio-->  
  3179.            
  3180.             <div class="clinks">
  3181.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  3182.              http://fontawesome.io/icons/-->
  3183.               <a href="#">
  3184.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  3185.               <a href="#">
  3186.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  3187.               <a href="#">
  3188.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  3189.               <a href="#">
  3190.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  3191.               <a href="#">
  3192.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  3193.               <a href="#">
  3194.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  3195.             </div><!--clinks-->
  3196.            
  3197.             <div class="ctraits">
  3198.             <!--span is needed for the style-->
  3199.               <span>+ positive trait</span><p />
  3200.               <span>+ positive trait</span><p />
  3201.               <span>+ positive trait</span><p />
  3202.               <br />
  3203.               <span>- negative trait</span><p />
  3204.               <span>- negative trait</span><p />
  3205.               <span>- negative trait</span><p />
  3206.             </div><!--ctraits-->
  3207.            
  3208.           </div><!--ccontent-->
  3209.          
  3210.           <!--PAGE 2-->
  3211.           <div class="ccontent" id="c13p2">
  3212.             <div class="cbio">
  3213.                
  3214.               <div class="headline">
  3215.                 <h2><span class="h2front">the</span>title</h2>
  3216.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3217.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  3218.                 magna aliqua.
  3219.               </div><!--headline-->
  3220.            
  3221.               <div class="biocontent">
  3222.                
  3223.                 <!--LEFT DATA-->
  3224.                 <ul class="cell1">
  3225.                   <li> Full name:  <span> - </span> </li>
  3226.                   <li> Nickname:   <span> - </span> </li>
  3227.                   <li> Age:        <span> - </span> </li>
  3228.                   <li> D.o.B:      <span> - </span> </li>
  3229.                   <li> Gender:     <span> - </span> </li>
  3230.                   <li> Pronouns:   <span> - </span> </li>
  3231.                   <li> Sexuality:  <span> - </span> </li>
  3232.                   <li> Species: <span> - </span></li>
  3233.                 </ul>
  3234.                
  3235.                 <!--RIGHT DATA-->
  3236.                 <ul class="cell2">
  3237.                   <li> Occupation:      <span> - </span> </li>
  3238.                   <li> Nationality:     <span> - </span> </li>
  3239.                   <li> Residence:       <span> - </span> </li>
  3240.                   <li> Education:       <span> - </span> </li>
  3241.                   <li> Height:          <span> - </span> </li>
  3242.                   <li> Alignment:       <span> - </span> </li>
  3243.                   <li> Jung Type:       <span> - </span> </li>
  3244.                   <li> Affiliation:     <span> - </span></li>
  3245.                 </ul>
  3246.                
  3247.               </div><!--biocontent-->
  3248.              
  3249.             </div><!--cbio-->  
  3250.            
  3251.             <!--You can put another picture of your character or a flavour
  3252.            picture or whatever you like. Dimensions are: 165x340-->
  3253.             <div class="flavorimg" style="background-image:
  3254.              url('https://placehold.it/165x340');">
  3255.             </div>
  3256.            
  3257.           </div> <!--ccontent-->
  3258.          
  3259.           <!--PAGE 3-->
  3260.           <div class="ccontent" id="c13p3">
  3261.            
  3262.              <!--CONNECTION IMAGES/NAVIGATION-->
  3263.              <div class="navcon">
  3264.                 <div class="con" href="#c13con1" style="background-image:
  3265.                    url('http://placehold.it/84x84');"></div>
  3266.                 <div  class="con" href="#c13con2" style="background-image:
  3267.                    url('http://placehold.it/84x84');"></div>
  3268.                 <div class="con" href="#c13con3" style="background-image:
  3269.                    url('http://placehold.it/84x84');"></div>
  3270.                 <div class="con" href="#c13con4" style="background-image:
  3271.                    url('http://placehold.it/84x84');"></div>
  3272.                 <div class="con" href="#c13con5" style="background-image:
  3273.                    url('http://placehold.it/84x84');"></div>
  3274.                 <div class="con" href="#c13con6" style="background-image:
  3275.                    url('http://placehold.it/84x84');"></div>
  3276.                 <div class="con" href="#c13con7" style="background-image:
  3277.                    url('http://placehold.it/50x50');"></div>
  3278.                 <div class="con" href="#c13con8" style="background-image:
  3279.                    url('http://placehold.it/50x50');"></div>
  3280.              </div>
  3281.            
  3282.              <div class="cbio">
  3283.                <div class="headline">
  3284.                  <h2><span class="h2front">social</span>connections</h2>
  3285.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3286.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  3287.                  magna aliqua.
  3288.                </div><!--headline-->
  3289.              
  3290.                <div class="biocontent">
  3291.                
  3292.                  <div class="connections active" id="c13con1">
  3293.                    <span>Connection name :: </span>
  3294.                    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.
  3295.                  </div><!--connections-->
  3296.                
  3297.                  <!--ADD CONNECTION INFO-->
  3298.                  <!--Add as many connection info text fields as you like. If
  3299.                 you need less than 13, remove them from the navigation  
  3300.                 above as well. To add new info:
  3301.                     copy the follow div .connections
  3302.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  3303.                     c# = card number, con# = connection number.
  3304.                
  3305.                 Make sure only the first connection div has the class
  3306.                 'active' see above.    
  3307.                 You can also change these to names but then you need to
  3308.                 edit the 'href' in the navigation (.clinks .navcon) as well
  3309.                 .-->
  3310.                
  3311.                  <div class="connections" id="c13con2">
  3312.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  3313.                  </div>
  3314.            
  3315.                </div><!--biocontent-->
  3316.              </div><!--cbio-->
  3317.           </div> <!--ccontent-->    
  3318.          
  3319.         </div> <!--ccard-->
  3320.        
  3321.        
  3322.         <!--CCARD FOURTEEN-->
  3323.        
  3324.         <div class="ccard" id="c14">
  3325.          
  3326.           <!--INNER TAB NAVIGATION-->
  3327.           <div class="cfooter">
  3328.             <a href="#c14p1" class="active">
  3329.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3330.             <a href="#c14p2">
  3331.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3332.             <a href="#c14p3">
  3333.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3334.           </div>
  3335.          
  3336.           <div class="ccontent active" id="c14p1">
  3337.             <div class="cbio">
  3338.                
  3339.               <div class="headline">
  3340.                 <h2><span class="h2front">short</span>bio</h2>
  3341.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3342.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  3343.                 magna aliqua.
  3344.               </div><!--headline-->
  3345.            
  3346.               <div class="biocontent">
  3347.                 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
  3348.               </div><!--biocontent-->
  3349.              
  3350.             </div><!--cbio-->  
  3351.            
  3352.             <div class="clinks">
  3353.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  3354.              http://fontawesome.io/icons/-->
  3355.               <a href="#">
  3356.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  3357.               <a href="#">
  3358.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  3359.               <a href="#">
  3360.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  3361.               <a href="#">
  3362.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  3363.               <a href="#">
  3364.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  3365.               <a href="#">
  3366.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  3367.             </div><!--clinks-->
  3368.            
  3369.             <div class="ctraits">
  3370.             <!--span is needed for the style-->
  3371.               <span>+ positive trait</span><p />
  3372.               <span>+ positive trait</span><p />
  3373.               <span>+ positive trait</span><p />
  3374.               <br />
  3375.               <span>- negative trait</span><p />
  3376.               <span>- negative trait</span><p />
  3377.               <span>- negative trait</span><p />
  3378.             </div><!--ctraits-->
  3379.            
  3380.           </div><!--ccontent-->
  3381.          
  3382.           <!--PAGE 2-->
  3383.           <div class="ccontent" id="c14p2">
  3384.             <div class="cbio">
  3385.                
  3386.               <div class="headline">
  3387.                 <h2><span class="h2front">the</span>title</h2>
  3388.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3389.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  3390.                 magna aliqua.
  3391.               </div><!--headline-->
  3392.            
  3393.               <div class="biocontent">
  3394.                
  3395.                 <!--LEFT DATA-->
  3396.                 <ul class="cell1">
  3397.                   <li> Full name:  <span> - </span> </li>
  3398.                   <li> Nickname:   <span> - </span> </li>
  3399.                   <li> Age:        <span> - </span> </li>
  3400.                   <li> D.o.B:      <span> - </span> </li>
  3401.                   <li> Gender:     <span> - </span> </li>
  3402.                   <li> Pronouns:   <span> - </span> </li>
  3403.                   <li> Sexuality:  <span> - </span> </li>
  3404.                   <li> Species: <span> - </span></li>
  3405.                 </ul>
  3406.                
  3407.                 <!--RIGHT DATA-->
  3408.                 <ul class="cell2">
  3409.                   <li> Occupation:      <span> - </span> </li>
  3410.                   <li> Nationality:     <span> - </span> </li>
  3411.                   <li> Residence:       <span> - </span> </li>
  3412.                   <li> Education:       <span> - </span> </li>
  3413.                   <li> Height:          <span> - </span> </li>
  3414.                   <li> Alignment:       <span> - </span> </li>
  3415.                   <li> Jung Type:       <span> - </span> </li>
  3416.                   <li> Affiliation:     <span> - </span></li>
  3417.                 </ul>
  3418.                
  3419.               </div><!--biocontent-->
  3420.              
  3421.             </div><!--cbio-->  
  3422.            
  3423.             <!--You can put another picture of your character or a flavour
  3424.            picture or whatever you like. Dimensions are: 165x340-->
  3425.             <div class="flavorimg" style="background-image:
  3426.              url('https://placehold.it/165x340');">
  3427.             </div>
  3428.            
  3429.           </div> <!--ccontent-->
  3430.          
  3431.           <!--PAGE 3-->
  3432.           <div class="ccontent" id="c14p3">
  3433.            
  3434.              <!--CONNECTION IMAGES/NAVIGATION-->
  3435.              <div class="navcon">
  3436.                 <div class="con" href="#c14con1" style="background-image:
  3437.                    url('http://placehold.it/84x84');"></div>
  3438.                 <div  class="con" href="#c14con2" style="background-image:
  3439.                    url('http://placehold.it/84x84');"></div>
  3440.                 <div class="con" href="#c14con3" style="background-image:
  3441.                    url('http://placehold.it/84x84');"></div>
  3442.                 <div class="con" href="#c14con4" style="background-image:
  3443.                    url('http://placehold.it/84x84');"></div>
  3444.                 <div class="con" href="#c14con5" style="background-image:
  3445.                    url('http://placehold.it/84x84');"></div>
  3446.                 <div class="con" href="#c14con6" style="background-image:
  3447.                    url('http://placehold.it/84x84');"></div>
  3448.                 <div class="con" href="#c14con7" style="background-image:
  3449.                    url('http://placehold.it/50x50');"></div>
  3450.                 <div class="con" href="#c14con8" style="background-image:
  3451.                    url('http://placehold.it/50x50');"></div>
  3452.              </div>
  3453.            
  3454.              <div class="cbio">
  3455.                <div class="headline">
  3456.                  <h2><span class="h2front">social</span>connections</h2>
  3457.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3458.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  3459.                  magna aliqua.
  3460.                </div><!--headline-->
  3461.              
  3462.                <div class="biocontent">
  3463.                
  3464.                  <div class="connections active" id="c14con1">
  3465.                    <span>Connection name :: </span>
  3466.                    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.
  3467.                  </div><!--connections-->
  3468.                
  3469.                  <!--ADD CONNECTION INFO-->
  3470.                  <!--Add as many connection info text fields as you like. If
  3471.                 you need less than 14, remove them from the navigation  
  3472.                 above as well. To add new info:
  3473.                     copy the follow div .connections
  3474.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  3475.                     c# = card number, con# = connection number.
  3476.                
  3477.                 Make sure only the first connection div has the class
  3478.                 'active' see above.    
  3479.                 You can also change these to names but then you need to
  3480.                 edit the 'href' in the navigation (.clinks .navcon) as well
  3481.                 .-->
  3482.                
  3483.                  <div class="connections" id="c14con2">
  3484.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  3485.                  </div>
  3486.            
  3487.                </div><!--biocontent-->
  3488.              </div><!--cbio-->
  3489.           </div> <!--ccontent-->    
  3490.          
  3491.         </div> <!--ccard-->
  3492.        
  3493.        
  3494.        
  3495.         <!--CCARD FIFTEEN-->
  3496.        
  3497.         <div class="ccard" id="c15">
  3498.          
  3499.           <!--INNER TAB NAVIGATION-->
  3500.           <div class="cfooter">
  3501.             <a href="#c15p1" class="active">
  3502.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3503.             <a href="#c15p2">
  3504.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3505.             <a href="#c15p3">
  3506.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3507.           </div>
  3508.          
  3509.           <div class="ccontent active" id="c15p1">
  3510.             <div class="cbio">
  3511.                
  3512.               <div class="headline">
  3513.                 <h2><span class="h2front">short</span>bio</h2>
  3514.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3515.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  3516.                 magna aliqua.
  3517.               </div><!--headline-->
  3518.            
  3519.               <div class="biocontent">
  3520.                 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
  3521.               </div><!--biocontent-->
  3522.              
  3523.             </div><!--cbio-->  
  3524.            
  3525.             <div class="clinks">
  3526.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  3527.              http://fontawesome.io/icons/-->
  3528.               <a href="#">
  3529.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  3530.               <a href="#">
  3531.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  3532.               <a href="#">
  3533.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  3534.               <a href="#">
  3535.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  3536.               <a href="#">
  3537.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  3538.               <a href="#">
  3539.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  3540.             </div><!--clinks-->
  3541.            
  3542.             <div class="ctraits">
  3543.             <!--span is needed for the style-->
  3544.               <span>+ positive trait</span><p />
  3545.               <span>+ positive trait</span><p />
  3546.               <span>+ positive trait</span><p />
  3547.               <br />
  3548.               <span>- negative trait</span><p />
  3549.               <span>- negative trait</span><p />
  3550.               <span>- negative trait</span><p />
  3551.             </div><!--ctraits-->
  3552.            
  3553.           </div><!--ccontent-->
  3554.          
  3555.           <!--PAGE 2-->
  3556.           <div class="ccontent" id="c15p2">
  3557.             <div class="cbio">
  3558.                
  3559.               <div class="headline">
  3560.                 <h2><span class="h2front">the</span>title</h2>
  3561.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3562.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  3563.                 magna aliqua.
  3564.               </div><!--headline-->
  3565.            
  3566.               <div class="biocontent">
  3567.                
  3568.                 <!--LEFT DATA-->
  3569.                 <ul class="cell1">
  3570.                   <li> Full name:  <span> - </span> </li>
  3571.                   <li> Nickname:   <span> - </span> </li>
  3572.                   <li> Age:        <span> - </span> </li>
  3573.                   <li> D.o.B:      <span> - </span> </li>
  3574.                   <li> Gender:     <span> - </span> </li>
  3575.                   <li> Pronouns:   <span> - </span> </li>
  3576.                   <li> Sexuality:  <span> - </span> </li>
  3577.                   <li> Species: <span> - </span></li>
  3578.                 </ul>
  3579.                
  3580.                 <!--RIGHT DATA-->
  3581.                 <ul class="cell2">
  3582.                   <li> Occupation:      <span> - </span> </li>
  3583.                   <li> Nationality:     <span> - </span> </li>
  3584.                   <li> Residence:       <span> - </span> </li>
  3585.                   <li> Education:       <span> - </span> </li>
  3586.                   <li> Height:          <span> - </span> </li>
  3587.                   <li> Alignment:       <span> - </span> </li>
  3588.                   <li> Jung Type:       <span> - </span> </li>
  3589.                   <li> Affiliation:     <span> - </span></li>
  3590.                 </ul>
  3591.                
  3592.               </div><!--biocontent-->
  3593.              
  3594.             </div><!--cbio-->  
  3595.            
  3596.             <!--You can put another picture of your character or a flavour
  3597.            picture or whatever you like. Dimensions are: 165x340-->
  3598.             <div class="flavorimg" style="background-image:
  3599.              url('https://placehold.it/165x340');">
  3600.             </div>
  3601.            
  3602.           </div> <!--ccontent-->
  3603.          
  3604.           <!--PAGE 3-->
  3605.           <div class="ccontent" id="c15p3">
  3606.            
  3607.              <!--CONNECTION IMAGES/NAVIGATION-->
  3608.              <div class="navcon">
  3609.                 <div class="con" href="#c15con1" style="background-image:
  3610.                    url('http://placehold.it/84x84');"></div>
  3611.                 <div  class="con" href="#c15con2" style="background-image:
  3612.                    url('http://placehold.it/84x84');"></div>
  3613.                 <div class="con" href="#c15con3" style="background-image:
  3614.                    url('http://placehold.it/84x84');"></div>
  3615.                 <div class="con" href="#c15con4" style="background-image:
  3616.                    url('http://placehold.it/84x84');"></div>
  3617.                 <div class="con" href="#c15con5" style="background-image:
  3618.                    url('http://placehold.it/84x84');"></div>
  3619.                 <div class="con" href="#c15con6" style="background-image:
  3620.                    url('http://placehold.it/84x84');"></div>
  3621.                 <div class="con" href="#c15con7" style="background-image:
  3622.                    url('http://placehold.it/50x50');"></div>
  3623.                 <div class="con" href="#c15con8" style="background-image:
  3624.                    url('http://placehold.it/50x50');"></div>
  3625.              </div>
  3626.            
  3627.              <div class="cbio">
  3628.                <div class="headline">
  3629.                  <h2><span class="h2front">social</span>connections</h2>
  3630.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3631.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  3632.                  magna aliqua.
  3633.                </div><!--headline-->
  3634.              
  3635.                <div class="biocontent">
  3636.                
  3637.                  <div class="connections active" id="c15con1">
  3638.                    <span>Connection name :: </span>
  3639.                    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.
  3640.                  </div><!--connections-->
  3641.                
  3642.                  <!--ADD CONNECTION INFO-->
  3643.                  <!--Add as many connection info text fields as you like. If
  3644.                 you need less than 15, remove them from the navigation  
  3645.                 above as well. To add new info:
  3646.                     copy the follow div .connections
  3647.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  3648.                     c# = card number, con# = connection number.
  3649.                
  3650.                 Make sure only the first connection div has the class
  3651.                 'active' see above.    
  3652.                 You can also change these to names but then you need to
  3653.                 edit the 'href' in the navigation (.clinks .navcon) as well
  3654.                 .-->
  3655.                
  3656.                  <div class="connections" id="c15con2">
  3657.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  3658.                  </div>
  3659.            
  3660.                </div><!--biocontent-->
  3661.              </div><!--cbio-->
  3662.           </div> <!--ccontent-->    
  3663.          
  3664.         </div> <!--ccard-->
  3665.        
  3666.        
  3667.        
  3668.        
  3669.          <!--CHARACTER SIXTEEN-->
  3670.        
  3671.         <div class="cbox g2" href="#c16">
  3672.           <div class="cname">
  3673.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  3674.            change the opacity of the names in the CSS-->
  3675.             <span style="font-size: 45px;">
  3676.             FIRST <br />
  3677.             LASTN
  3678.             </span>
  3679.           </div> <!--cname-->
  3680.           <div class="triangle"></div>
  3681.          
  3682.           <img src="https://placehold.it/160x160"></img>
  3683.         </div> <!--cbox-->
  3684.        
  3685.        
  3686.         <!--CHARACTER SEVENTEEN-->
  3687.        
  3688.         <div class="cbox g3" href="#c17">
  3689.           <div class="cname">
  3690.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  3691.            change the opacity of the names in the CSS-->
  3692.             <span style="font-size: 45px;">
  3693.             FIRST <br />
  3694.             LASTN
  3695.             </span>
  3696.           </div> <!--cname-->
  3697.           <div class="triangle"></div>
  3698.          
  3699.           <img src="https://placehold.it/160x160"></img>
  3700.         </div> <!--cbox-->
  3701.        
  3702.        
  3703.         <!--CHARACTER EIGHTTEEN-->
  3704.        
  3705.         <div class="cbox g4" href="#c18">
  3706.           <div class="cname">
  3707.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  3708.            change the opacity of the names in the CSS-->
  3709.             <span style="font-size: 45px;">
  3710.             FIRST <br />
  3711.             LASTN
  3712.             </span>
  3713.           </div> <!--cname-->
  3714.           <div class="triangle"></div>
  3715.          
  3716.           <img src="https://placehold.it/160x160"></img>
  3717.         </div> <!--cbox-->
  3718.        
  3719.        
  3720.         <!--CHARACTER NINETEEN-->
  3721.        
  3722.         <div class="cbox g5" href="#c19">
  3723.           <div class="cname">
  3724.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  3725.            change the opacity of the names in the CSS-->
  3726.             <span style="font-size: 45px;">
  3727.             FIRST <br />
  3728.             LASTN
  3729.             </span>
  3730.           </div> <!--cname-->
  3731.           <div class="triangle"></div>
  3732.  
  3733.           <img src="https://placehold.it/160x160"></img>
  3734.         </div> <!--cbox-->
  3735.        
  3736.        
  3737.         <!--CHARACTER TWENTY-->
  3738.        
  3739.         <div class="cbox g2" href="#c20">
  3740.           <div class="cname">
  3741.             <!--You will have to adjust the font-size for every character               name manually, depending on how long their name is. You can
  3742.            change the opacity of the names in the CSS-->
  3743.             <span style="font-size: 45px;">
  3744.             FIRST <br />
  3745.             LASTN
  3746.             </span>
  3747.           </div> <!--cname-->
  3748.           <div class="triangle"></div>
  3749.          
  3750.           <img src="https://placehold.it/160x160"></img>
  3751.         </div> <!--cbox-->
  3752.        
  3753.        
  3754.         <!--CHARACTER CARD FOURTH ROW-->
  3755.        
  3756.         <!--CHARACTER SIXTEEN-->
  3757.        
  3758.         <div class="ccard" id="c16">
  3759.          
  3760.           <!--INNER TAB NAVIGATION-->
  3761.           <div class="cfooter">
  3762.             <a href="#c16p1" class="active">
  3763.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3764.             <a href="#c16p2">
  3765.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3766.             <a href="#c16p3">
  3767.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3768.           </div>
  3769.          
  3770.           <div class="ccontent active" id="c16p1">
  3771.             <div class="cbio">
  3772.                
  3773.               <div class="headline">
  3774.                 <h2><span class="h2front">short</span>bio</h2>
  3775.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3776.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  3777.                 magna aliqua.
  3778.               </div><!--headline-->
  3779.            
  3780.               <div class="biocontent">
  3781.                 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
  3782.               </div><!--biocontent-->
  3783.              
  3784.             </div><!--cbio-->  
  3785.            
  3786.             <div class="clinks">
  3787.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  3788.              http://fontawesome.io/icons/-->
  3789.               <a href="#">
  3790.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  3791.               <a href="#">
  3792.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  3793.               <a href="#">
  3794.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  3795.               <a href="#">
  3796.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  3797.               <a href="#">
  3798.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  3799.               <a href="#">
  3800.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  3801.             </div><!--clinks-->
  3802.            
  3803.             <div class="ctraits">
  3804.             <!--span is needed for the style-->
  3805.               <span>+ positive trait</span><p />
  3806.               <span>+ positive trait</span><p />
  3807.               <span>+ positive trait</span><p />
  3808.               <br />
  3809.               <span>- negative trait</span><p />
  3810.               <span>- negative trait</span><p />
  3811.               <span>- negative trait</span><p />
  3812.             </div><!--ctraits-->
  3813.            
  3814.           </div><!--ccontent-->
  3815.          
  3816.           <!--PAGE 2-->
  3817.           <div class="ccontent" id="c16p2">
  3818.             <div class="cbio">
  3819.                
  3820.               <div class="headline">
  3821.                 <h2><span class="h2front">the</span>title</h2>
  3822.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3823.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  3824.                 magna aliqua.
  3825.               </div><!--headline-->
  3826.            
  3827.               <div class="biocontent">
  3828.                
  3829.                 <!--LEFT DATA-->
  3830.                 <ul class="cell1">
  3831.                   <li> Full name:  <span> - </span> </li>
  3832.                   <li> Nickname:   <span> - </span> </li>
  3833.                   <li> Age:        <span> - </span> </li>
  3834.                   <li> D.o.B:      <span> - </span> </li>
  3835.                   <li> Gender:     <span> - </span> </li>
  3836.                   <li> Pronouns:   <span> - </span> </li>
  3837.                   <li> Sexuality:  <span> - </span> </li>
  3838.                   <li> Species: <span> - </span></li>
  3839.                 </ul>
  3840.                
  3841.                 <!--RIGHT DATA-->
  3842.                 <ul class="cell2">
  3843.                   <li> Occupation:      <span> - </span> </li>
  3844.                   <li> Nationality:     <span> - </span> </li>
  3845.                   <li> Residence:       <span> - </span> </li>
  3846.                   <li> Education:       <span> - </span> </li>
  3847.                   <li> Height:          <span> - </span> </li>
  3848.                   <li> Alignment:       <span> - </span> </li>
  3849.                   <li> Jung Type:       <span> - </span> </li>
  3850.                   <li> Affiliation:     <span> - </span></li>
  3851.                 </ul>
  3852.                
  3853.               </div><!--biocontent-->
  3854.              
  3855.             </div><!--cbio-->  
  3856.            
  3857.             <!--You can put another picture of your character or a flavour
  3858.            picture or whatever you like. Dimensions are: 165x340-->
  3859.             <div class="flavorimg" style="background-image:
  3860.              url('https://placehold.it/165x340');">
  3861.             </div>
  3862.            
  3863.           </div> <!--ccontent-->
  3864.          
  3865.           <!--PAGE 3-->
  3866.           <div class="ccontent" id="c16p3">
  3867.            
  3868.              <!--CONNECTION IMAGES/NAVIGATION-->
  3869.              <div class="navcon">
  3870.                 <div class="con" href="#c16con1" style="background-image:
  3871.                    url('http://placehold.it/84x84');"></div>
  3872.                 <div  class="con" href="#c16con2" style="background-image:
  3873.                    url('http://placehold.it/84x84');"></div>
  3874.                 <div class="con" href="#c16con3" style="background-image:
  3875.                    url('http://placehold.it/84x84');"></div>
  3876.                 <div class="con" href="#c16con4" style="background-image:
  3877.                    url('http://placehold.it/84x84');"></div>
  3878.                 <div class="con" href="#c16con5" style="background-image:
  3879.                    url('http://placehold.it/84x84');"></div>
  3880.                 <div class="con" href="#c16con6" style="background-image:
  3881.                    url('http://placehold.it/84x84');"></div>
  3882.                 <div class="con" href="#c16con7" style="background-image:
  3883.                    url('http://placehold.it/50x50');"></div>
  3884.                 <div class="con" href="#c16con8" style="background-image:
  3885.                    url('http://placehold.it/50x50');"></div>
  3886.              </div>
  3887.            
  3888.              <div class="cbio">
  3889.                <div class="headline">
  3890.                  <h2><span class="h2front">social</span>connections</h2>
  3891.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3892.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  3893.                  magna aliqua.
  3894.                </div><!--headline-->
  3895.              
  3896.                <div class="biocontent">
  3897.                
  3898.                  <div class="connections active" id="c16con1">
  3899.                    <span>Connection name :: </span>
  3900.                    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.
  3901.                  </div><!--connections-->
  3902.                
  3903.                  <!--ADD CONNECTION INFO-->
  3904.                  <!--Add as many connection info text fields as you like. If
  3905.                 you need less than 16, remove them from the navigation  
  3906.                 above as well. To add new info:
  3907.                     copy the follow div .connections
  3908.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  3909.                     c# = card number, con# = connection number.
  3910.                
  3911.                 Make sure only the first connection div has the class
  3912.                 'active' see above.    
  3913.                 You can also change these to names but then you need to
  3914.                 edit the 'href' in the navigation (.clinks .navcon) as well
  3915.                 .-->
  3916.                
  3917.                  <div class="connections" id="c16con2">
  3918.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  3919.                  </div>
  3920.            
  3921.                </div><!--biocontent-->
  3922.              </div><!--cbio-->
  3923.           </div> <!--ccontent-->    
  3924.          
  3925.         </div> <!--ccard-->
  3926.        
  3927.        
  3928.        
  3929.         <!--CCARD SEVENTEEN-->
  3930.        
  3931.         <div class="ccard" id="c17">
  3932.          
  3933.           <!--INNER TAB NAVIGATION-->
  3934.           <div class="cfooter">
  3935.             <a href="#c17p1" class="active">
  3936.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3937.             <a href="#c17p2">
  3938.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3939.             <a href="#c17p3">
  3940.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  3941.           </div>
  3942.          
  3943.           <div class="ccontent active" id="c17p1">
  3944.             <div class="cbio">
  3945.                
  3946.               <div class="headline">
  3947.                 <h2><span class="h2front">short</span>bio</h2>
  3948.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3949.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  3950.                 magna aliqua.
  3951.               </div><!--headline-->
  3952.            
  3953.               <div class="biocontent">
  3954.                 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
  3955.               </div><!--biocontent-->
  3956.              
  3957.             </div><!--cbio-->  
  3958.            
  3959.             <div class="clinks">
  3960.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  3961.              http://fontawesome.io/icons/-->
  3962.               <a href="#">
  3963.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  3964.               <a href="#">
  3965.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  3966.               <a href="#">
  3967.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  3968.               <a href="#">
  3969.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  3970.               <a href="#">
  3971.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  3972.               <a href="#">
  3973.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  3974.             </div><!--clinks-->
  3975.            
  3976.             <div class="ctraits">
  3977.             <!--span is needed for the style-->
  3978.               <span>+ positive trait</span><p />
  3979.               <span>+ positive trait</span><p />
  3980.               <span>+ positive trait</span><p />
  3981.               <br />
  3982.               <span>- negative trait</span><p />
  3983.               <span>- negative trait</span><p />
  3984.               <span>- negative trait</span><p />
  3985.             </div><!--ctraits-->
  3986.            
  3987.           </div><!--ccontent-->
  3988.          
  3989.           <!--PAGE 2-->
  3990.           <div class="ccontent" id="c17p2">
  3991.             <div class="cbio">
  3992.                
  3993.               <div class="headline">
  3994.                 <h2><span class="h2front">the</span>title</h2>
  3995.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  3996.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  3997.                 magna aliqua.
  3998.               </div><!--headline-->
  3999.            
  4000.               <div class="biocontent">
  4001.                
  4002.                 <!--LEFT DATA-->
  4003.                 <ul class="cell1">
  4004.                   <li> Full name:  <span> - </span> </li>
  4005.                   <li> Nickname:   <span> - </span> </li>
  4006.                   <li> Age:        <span> - </span> </li>
  4007.                   <li> D.o.B:      <span> - </span> </li>
  4008.                   <li> Gender:     <span> - </span> </li>
  4009.                   <li> Pronouns:   <span> - </span> </li>
  4010.                   <li> Sexuality:  <span> - </span> </li>
  4011.                   <li> Species: <span> - </span></li>
  4012.                 </ul>
  4013.                
  4014.                 <!--RIGHT DATA-->
  4015.                 <ul class="cell2">
  4016.                   <li> Occupation:      <span> - </span> </li>
  4017.                   <li> Nationality:     <span> - </span> </li>
  4018.                   <li> Residence:       <span> - </span> </li>
  4019.                   <li> Education:       <span> - </span> </li>
  4020.                   <li> Height:          <span> - </span> </li>
  4021.                   <li> Alignment:       <span> - </span> </li>
  4022.                   <li> Jung Type:       <span> - </span> </li>
  4023.                   <li> Affiliation:     <span> - </span></li>
  4024.                 </ul>
  4025.                
  4026.               </div><!--biocontent-->
  4027.              
  4028.             </div><!--cbio-->  
  4029.            
  4030.             <!--You can put another picture of your character or a flavour
  4031.            picture or whatever you like. Dimensions are: 175x340-->
  4032.             <div class="flavorimg" style="background-image:
  4033.              url('https://placehold.it/175x340');">
  4034.             </div>
  4035.            
  4036.           </div> <!--ccontent-->
  4037.          
  4038.           <!--PAGE 3-->
  4039.           <div class="ccontent" id="c17p3">
  4040.            
  4041.              <!--CONNECTION IMAGES/NAVIGATION-->
  4042.              <div class="navcon">
  4043.                 <div class="con" href="#c17con1" style="background-image:
  4044.                    url('http://placehold.it/84x84');"></div>
  4045.                 <div  class="con" href="#c17con2" style="background-image:
  4046.                    url('http://placehold.it/84x84');"></div>
  4047.                 <div class="con" href="#c17con3" style="background-image:
  4048.                    url('http://placehold.it/84x84');"></div>
  4049.                 <div class="con" href="#c17con4" style="background-image:
  4050.                    url('http://placehold.it/84x84');"></div>
  4051.                 <div class="con" href="#c17con5" style="background-image:
  4052.                    url('http://placehold.it/84x84');"></div>
  4053.                 <div class="con" href="#c17con6" style="background-image:
  4054.                    url('http://placehold.it/84x84');"></div>
  4055.                 <div class="con" href="#c17con7" style="background-image:
  4056.                    url('http://placehold.it/50x50');"></div>
  4057.                 <div class="con" href="#c17con8" style="background-image:
  4058.                    url('http://placehold.it/50x50');"></div>
  4059.              </div>
  4060.            
  4061.              <div class="cbio">
  4062.                <div class="headline">
  4063.                  <h2><span class="h2front">social</span>connections</h2>
  4064.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  4065.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  4066.                  magna aliqua.
  4067.                </div><!--headline-->
  4068.              
  4069.                <div class="biocontent">
  4070.                
  4071.                  <div class="connections active" id="c17con1">
  4072.                    <span>Connection name :: </span>
  4073.                    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.
  4074.                  </div><!--connections-->
  4075.                
  4076.                  <!--ADD CONNECTION INFO-->
  4077.                  <!--Add as many connection info text fields as you like. If
  4078.                 you need less than 17, remove them from the navigation  
  4079.                 above as well. To add new info:
  4080.                     copy the follow div .connections
  4081.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  4082.                     c# = card number, con# = connection number.
  4083.                
  4084.                 Make sure only the first connection div has the class
  4085.                 'active' see above.    
  4086.                 You can also change these to names but then you need to
  4087.                 edit the 'href' in the navigation (.clinks .navcon) as well
  4088.                 .-->
  4089.                
  4090.                  <div class="connections" id="c17con2">
  4091.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  4092.                  </div>
  4093.            
  4094.                </div><!--biocontent-->
  4095.              </div><!--cbio-->
  4096.           </div> <!--ccontent-->    
  4097.          
  4098.         </div> <!--ccard-->
  4099.        
  4100.        
  4101.        
  4102.         <!--CCARD EIGHTEEN-->
  4103.        
  4104.         <div class="ccard" id="c18">
  4105.          
  4106.           <!--INNER TAB NAVIGATION-->
  4107.           <div class="cfooter">
  4108.             <a href="#c18p1" class="active">
  4109.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  4110.             <a href="#c18p2">
  4111.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  4112.             <a href="#c18p3">
  4113.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  4114.           </div>
  4115.          
  4116.           <div class="ccontent active" id="c18p1">
  4117.             <div class="cbio">
  4118.                
  4119.               <div class="headline">
  4120.                 <h2><span class="h2front">short</span>bio</h2>
  4121.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  4122.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  4123.                 magna aliqua.
  4124.               </div><!--headline-->
  4125.            
  4126.               <div class="biocontent">
  4127.                 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
  4128.               </div><!--biocontent-->
  4129.              
  4130.             </div><!--cbio-->  
  4131.            
  4132.             <div class="clinks">
  4133.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  4134.              http://fontawesome.io/icons/-->
  4135.               <a href="#">
  4136.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  4137.               <a href="#">
  4138.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  4139.               <a href="#">
  4140.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  4141.               <a href="#">
  4142.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  4143.               <a href="#">
  4144.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  4145.               <a href="#">
  4146.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  4147.             </div><!--clinks-->
  4148.            
  4149.             <div class="ctraits">
  4150.             <!--span is needed for the style-->
  4151.               <span>+ positive trait</span><p />
  4152.               <span>+ positive trait</span><p />
  4153.               <span>+ positive trait</span><p />
  4154.               <br />
  4155.               <span>- negative trait</span><p />
  4156.               <span>- negative trait</span><p />
  4157.               <span>- negative trait</span><p />
  4158.             </div><!--ctraits-->
  4159.            
  4160.           </div><!--ccontent-->
  4161.          
  4162.           <!--PAGE 2-->
  4163.           <div class="ccontent" id="c18p2">
  4164.             <div class="cbio">
  4165.                
  4166.               <div class="headline">
  4167.                 <h2><span class="h2front">the</span>title</h2>
  4168.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  4169.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  4170.                 magna aliqua.
  4171.               </div><!--headline-->
  4172.            
  4173.               <div class="biocontent">
  4174.                
  4175.                 <!--LEFT DATA-->
  4176.                 <ul class="cell1">
  4177.                   <li> Full name:  <span> - </span> </li>
  4178.                   <li> Nickname:   <span> - </span> </li>
  4179.                   <li> Age:        <span> - </span> </li>
  4180.                   <li> D.o.B:      <span> - </span> </li>
  4181.                   <li> Gender:     <span> - </span> </li>
  4182.                   <li> Pronouns:   <span> - </span> </li>
  4183.                   <li> Sexuality:  <span> - </span> </li>
  4184.                   <li> Species: <span> - </span></li>
  4185.                 </ul>
  4186.                
  4187.                 <!--RIGHT DATA-->
  4188.                 <ul class="cell2">
  4189.                   <li> Occupation:      <span> - </span> </li>
  4190.                   <li> Nationality:     <span> - </span> </li>
  4191.                   <li> Residence:       <span> - </span> </li>
  4192.                   <li> Education:       <span> - </span> </li>
  4193.                   <li> Height:          <span> - </span> </li>
  4194.                   <li> Alignment:       <span> - </span> </li>
  4195.                   <li> Jung Type:       <span> - </span> </li>
  4196.                   <li> Affiliation:     <span> - </span></li>
  4197.                 </ul>
  4198.                
  4199.               </div><!--biocontent-->
  4200.              
  4201.             </div><!--cbio-->  
  4202.            
  4203.             <!--You can put another picture of your character or a flavour
  4204.            picture or whatever you like. Dimensions are: 185x340-->
  4205.             <div class="flavorimg" style="background-image:
  4206.              url('https://placehold.it/185x340');">
  4207.             </div>
  4208.            
  4209.           </div> <!--ccontent-->
  4210.          
  4211.           <!--PAGE 3-->
  4212.           <div class="ccontent" id="c18p3">
  4213.            
  4214.              <!--CONNECTION IMAGES/NAVIGATION-->
  4215.              <div class="navcon">
  4216.                 <div class="con" href="#c18con1" style="background-image:
  4217.                    url('http://placehold.it/84x84');"></div>
  4218.                 <div  class="con" href="#c18con2" style="background-image:
  4219.                    url('http://placehold.it/84x84');"></div>
  4220.                 <div class="con" href="#c18con3" style="background-image:
  4221.                    url('http://placehold.it/84x84');"></div>
  4222.                 <div class="con" href="#c18con4" style="background-image:
  4223.                    url('http://placehold.it/84x84');"></div>
  4224.                 <div class="con" href="#c18con5" style="background-image:
  4225.                    url('http://placehold.it/84x84');"></div>
  4226.                 <div class="con" href="#c18con6" style="background-image:
  4227.                    url('http://placehold.it/84x84');"></div>
  4228.                 <div class="con" href="#c18con7" style="background-image:
  4229.                    url('http://placehold.it/50x50');"></div>
  4230.                 <div class="con" href="#c18con8" style="background-image:
  4231.                    url('http://placehold.it/50x50');"></div>
  4232.              </div>
  4233.            
  4234.              <div class="cbio">
  4235.                <div class="headline">
  4236.                  <h2><span class="h2front">social</span>connections</h2>
  4237.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  4238.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  4239.                  magna aliqua.
  4240.                </div><!--headline-->
  4241.              
  4242.                <div class="biocontent">
  4243.                
  4244.                  <div class="connections active" id="c18con1">
  4245.                    <span>Connection name :: </span>
  4246.                    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.
  4247.                  </div><!--connections-->
  4248.                
  4249.                  <!--ADD CONNECTION INFO-->
  4250.                  <!--Add as many connection info text fields as you like. If
  4251.                 you need less than 18, remove them from the navigation  
  4252.                 above as well. To add new info:
  4253.                     copy the follow div .connections
  4254.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  4255.                     c# = card number, con# = connection number.
  4256.                
  4257.                 Make sure only the first connection div has the class
  4258.                 'active' see above.    
  4259.                 You can also change these to names but then you need to
  4260.                 edit the 'href' in the navigation (.clinks .navcon) as well
  4261.                 .-->
  4262.                
  4263.                  <div class="connections" id="c18con2">
  4264.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  4265.                  </div>
  4266.            
  4267.                </div><!--biocontent-->
  4268.              </div><!--cbio-->
  4269.           </div> <!--ccontent-->    
  4270.          
  4271.         </div> <!--ccard-->
  4272.        
  4273.        
  4274.        
  4275.         <!--CCARD NINETEEN-->
  4276.        
  4277.         <div class="ccard" id="c19">
  4278.          
  4279.           <!--INNER TAB NAVIGATION-->
  4280.           <div class="cfooter">
  4281.             <a href="#c19p1" class="active">
  4282.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  4283.             <a href="#c19p2">
  4284.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  4285.             <a href="#c19p3">
  4286.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  4287.           </div>
  4288.          
  4289.           <div class="ccontent active" id="c19p1">
  4290.             <div class="cbio">
  4291.                
  4292.               <div class="headline">
  4293.                 <h2><span class="h2front">short</span>bio</h2>
  4294.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  4295.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  4296.                 magna aliqua.
  4297.               </div><!--headline-->
  4298.            
  4299.               <div class="biocontent">
  4300.                 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
  4301.               </div><!--biocontent-->
  4302.              
  4303.             </div><!--cbio-->  
  4304.            
  4305.             <div class="clinks">
  4306.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  4307.              http://fontawesome.io/icons/-->
  4308.               <a href="#">
  4309.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  4310.               <a href="#">
  4311.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  4312.               <a href="#">
  4313.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  4314.               <a href="#">
  4315.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  4316.               <a href="#">
  4317.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  4318.               <a href="#">
  4319.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  4320.             </div><!--clinks-->
  4321.            
  4322.             <div class="ctraits">
  4323.             <!--span is needed for the style-->
  4324.               <span>+ positive trait</span><p />
  4325.               <span>+ positive trait</span><p />
  4326.               <span>+ positive trait</span><p />
  4327.               <br />
  4328.               <span>- negative trait</span><p />
  4329.               <span>- negative trait</span><p />
  4330.               <span>- negative trait</span><p />
  4331.             </div><!--ctraits-->
  4332.            
  4333.           </div><!--ccontent-->
  4334.          
  4335.           <!--PAGE 2-->
  4336.           <div class="ccontent" id="c19p2">
  4337.             <div class="cbio">
  4338.                
  4339.               <div class="headline">
  4340.                 <h2><span class="h2front">the</span>title</h2>
  4341.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  4342.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  4343.                 magna aliqua.
  4344.               </div><!--headline-->
  4345.            
  4346.               <div class="biocontent">
  4347.                
  4348.                 <!--LEFT DATA-->
  4349.                 <ul class="cell1">
  4350.                   <li> Full name:  <span> - </span> </li>
  4351.                   <li> Nickname:   <span> - </span> </li>
  4352.                   <li> Age:        <span> - </span> </li>
  4353.                   <li> D.o.B:      <span> - </span> </li>
  4354.                   <li> Gender:     <span> - </span> </li>
  4355.                   <li> Pronouns:   <span> - </span> </li>
  4356.                   <li> Sexuality:  <span> - </span> </li>
  4357.                   <li> Species: <span> - </span></li>
  4358.                 </ul>
  4359.                
  4360.                 <!--RIGHT DATA-->
  4361.                 <ul class="cell2">
  4362.                   <li> Occupation:      <span> - </span> </li>
  4363.                   <li> Nationality:     <span> - </span> </li>
  4364.                   <li> Residence:       <span> - </span> </li>
  4365.                   <li> Education:       <span> - </span> </li>
  4366.                   <li> Height:          <span> - </span> </li>
  4367.                   <li> Alignment:       <span> - </span> </li>
  4368.                   <li> Jung Type:       <span> - </span> </li>
  4369.                   <li> Affiliation:     <span> - </span></li>
  4370.                 </ul>
  4371.                
  4372.               </div><!--biocontent-->
  4373.              
  4374.             </div><!--cbio-->  
  4375.            
  4376.             <!--You can put another picture of your character or a flavour
  4377.            picture or whatever you like. Dimensions are: 195x340-->
  4378.             <div class="flavorimg" style="background-image:
  4379.              url('https://placehold.it/195x340');">
  4380.             </div>
  4381.            
  4382.           </div> <!--ccontent-->
  4383.          
  4384.           <!--PAGE 3-->
  4385.           <div class="ccontent" id="c19p3">
  4386.            
  4387.              <!--CONNECTION IMAGES/NAVIGATION-->
  4388.              <div class="navcon">
  4389.                 <div class="con" href="#c19con1" style="background-image:
  4390.                    url('http://placehold.it/84x84');"></div>
  4391.                 <div  class="con" href="#c19con2" style="background-image:
  4392.                    url('http://placehold.it/84x84');"></div>
  4393.                 <div class="con" href="#c19con3" style="background-image:
  4394.                    url('http://placehold.it/84x84');"></div>
  4395.                 <div class="con" href="#c19con4" style="background-image:
  4396.                    url('http://placehold.it/84x84');"></div>
  4397.                 <div class="con" href="#c19con5" style="background-image:
  4398.                    url('http://placehold.it/84x84');"></div>
  4399.                 <div class="con" href="#c19con6" style="background-image:
  4400.                    url('http://placehold.it/84x84');"></div>
  4401.                 <div class="con" href="#c19con7" style="background-image:
  4402.                    url('http://placehold.it/50x50');"></div>
  4403.                 <div class="con" href="#c19con8" style="background-image:
  4404.                    url('http://placehold.it/50x50');"></div>
  4405.              </div>
  4406.            
  4407.              <div class="cbio">
  4408.                <div class="headline">
  4409.                  <h2><span class="h2front">social</span>connections</h2>
  4410.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  4411.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  4412.                  magna aliqua.
  4413.                </div><!--headline-->
  4414.              
  4415.                <div class="biocontent">
  4416.                
  4417.                  <div class="connections active" id="c19con1">
  4418.                    <span>Connection name :: </span>
  4419.                    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.
  4420.                  </div><!--connections-->
  4421.                
  4422.                  <!--ADD CONNECTION INFO-->
  4423.                  <!--Add as many connection info text fields as you like. If
  4424.                 you need less than 19, remove them from the navigation  
  4425.                 above as well. To add new info:
  4426.                     copy the follow div .connections
  4427.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  4428.                     c# = card number, con# = connection number.
  4429.                
  4430.                 Make sure only the first connection div has the class
  4431.                 'active' see above.    
  4432.                 You can also change these to names but then you need to
  4433.                 edit the 'href' in the navigation (.clinks .navcon) as well
  4434.                 .-->
  4435.                
  4436.                  <div class="connections" id="c19con2">
  4437.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  4438.                  </div>
  4439.            
  4440.                </div><!--biocontent-->
  4441.              </div><!--cbio-->
  4442.           </div> <!--ccontent-->    
  4443.          
  4444.         </div> <!--ccard-->
  4445.        
  4446.        
  4447.        
  4448.         <!--CCARD TWENTY-->
  4449.        
  4450.         <div class="ccard" id="c20">
  4451.          
  4452.           <!--INNER TAB NAVIGATION-->
  4453.           <div class="cfooter">
  4454.             <a href="#c20p1" class="active">
  4455.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  4456.             <a href="#c20p2">
  4457.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  4458.             <a href="#c20p3">
  4459.                 <i class="fa fa-stop" aria-hidden="true"></i></a>
  4460.           </div>
  4461.          
  4462.           <div class="ccontent active" id="c20p1">
  4463.             <div class="cbio">
  4464.                
  4465.               <div class="headline">
  4466.                 <h2><span class="h2front">short</span>bio</h2>
  4467.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  4468.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  4469.                 magna aliqua.
  4470.               </div><!--headline-->
  4471.            
  4472.               <div class="biocontent">
  4473.                 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
  4474.               </div><!--biocontent-->
  4475.              
  4476.             </div><!--cbio-->  
  4477.            
  4478.             <div class="clinks">
  4479.               <!--You can customise these links as much as you like. You can               find more icons to suit your needs here:
  4480.              http://fontawesome.io/icons/-->
  4481.               <a href="#">
  4482.                   <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  4483.               <a href="#">
  4484.                   <i class="fa fa-book" aria-hidden="true"></i></a>
  4485.               <a href="#">
  4486.                   <i class="fa fa-instagram" aria-hidden="true"></i></a>
  4487.               <a href="#">
  4488.                   <i class="fa fa-pencil" aria-hidden="true"></i></a>
  4489.               <a href="#">
  4490.                   <i class="fa fa-music" aria-hidden="true"></i></a>
  4491.               <a href="#">
  4492.                   <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  4493.             </div><!--clinks-->
  4494.            
  4495.             <div class="ctraits">
  4496.             <!--span is needed for the style-->
  4497.               <span>+ positive trait</span><p />
  4498.               <span>+ positive trait</span><p />
  4499.               <span>+ positive trait</span><p />
  4500.               <br />
  4501.               <span>- negative trait</span><p />
  4502.               <span>- negative trait</span><p />
  4503.               <span>- negative trait</span><p />
  4504.             </div><!--ctraits-->
  4505.            
  4506.           </div><!--ccontent-->
  4507.          
  4508.           <!--PAGE 2-->
  4509.           <div class="ccontent" id="c20p2">
  4510.             <div class="cbio">
  4511.                
  4512.               <div class="headline">
  4513.                 <h2><span class="h2front">the</span>title</h2>
  4514.                 <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  4515.                 elit, sed do eiusmod tempor incididunt ut labore et dolore
  4516.                 magna aliqua.
  4517.               </div><!--headline-->
  4518.            
  4519.               <div class="biocontent">
  4520.                
  4521.                 <!--LEFT DATA-->
  4522.                 <ul class="cell1">
  4523.                   <li> Full name:  <span> - </span> </li>
  4524.                   <li> Nickname:   <span> - </span> </li>
  4525.                   <li> Age:        <span> - </span> </li>
  4526.                   <li> D.o.B:      <span> - </span> </li>
  4527.                   <li> Gender:     <span> - </span> </li>
  4528.                   <li> Pronouns:   <span> - </span> </li>
  4529.                   <li> Sexuality:  <span> - </span> </li>
  4530.                   <li> Species: <span> - </span></li>
  4531.                 </ul>
  4532.                
  4533.                 <!--RIGHT DATA-->
  4534.                 <ul class="cell2">
  4535.                   <li> Occupation:      <span> - </span> </li>
  4536.                   <li> Nationality:     <span> - </span> </li>
  4537.                   <li> Residence:       <span> - </span> </li>
  4538.                   <li> Education:       <span> - </span> </li>
  4539.                   <li> Height:          <span> - </span> </li>
  4540.                   <li> Alignment:       <span> - </span> </li>
  4541.                   <li> Jung Type:       <span> - </span> </li>
  4542.                   <li> Affiliation:     <span> - </span></li>
  4543.                 </ul>
  4544.                
  4545.               </div><!--biocontent-->
  4546.              
  4547.             </div><!--cbio-->  
  4548.            
  4549.             <!--You can put another picture of your character or a flavour
  4550.            picture or whatever you like. Dimensions are: 205x340-->
  4551.             <div class="flavorimg" style="background-image:
  4552.              url('https://placehold.it/205x340');">
  4553.             </div>
  4554.            
  4555.           </div> <!--ccontent-->
  4556.          
  4557.           <!--PAGE 3-->
  4558.           <div class="ccontent" id="c20p3">
  4559.            
  4560.              <!--CONNECTION IMAGES/NAVIGATION-->
  4561.              <div class="navcon">
  4562.                 <div class="con" href="#c20con1" style="background-image:
  4563.                    url('http://placehold.it/84x84');"></div>
  4564.                 <div  class="con" href="#c20con2" style="background-image:
  4565.                    url('http://placehold.it/84x84');"></div>
  4566.                 <div class="con" href="#c20con3" style="background-image:
  4567.                    url('http://placehold.it/84x84');"></div>
  4568.                 <div class="con" href="#c20con4" style="background-image:
  4569.                    url('http://placehold.it/84x84');"></div>
  4570.                 <div class="con" href="#c20con5" style="background-image:
  4571.                    url('http://placehold.it/84x84');"></div>
  4572.                 <div class="con" href="#c20con6" style="background-image:
  4573.                    url('http://placehold.it/84x84');"></div>
  4574.                 <div class="con" href="#c20con7" style="background-image:
  4575.                    url('http://placehold.it/50x50');"></div>
  4576.                 <div class="con" href="#c20con8" style="background-image:
  4577.                    url('http://placehold.it/50x50');"></div>
  4578.              </div>
  4579.            
  4580.              <div class="cbio">
  4581.                <div class="headline">
  4582.                  <h2><span class="h2front">social</span>connections</h2>
  4583.                  <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  4584.                  elit, sed do eiusmod tempor incididunt ut labore et dolore
  4585.                  magna aliqua.
  4586.                </div><!--headline-->
  4587.              
  4588.                <div class="biocontent">
  4589.                
  4590.                  <div class="connections active" id="c20con1">
  4591.                    <span>Connection name :: </span>
  4592.                    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.
  4593.                  </div><!--connections-->
  4594.                
  4595.                  <!--ADD CONNECTION INFO-->
  4596.                  <!--Add as many connection info text fields as you like. If
  4597.                 you need less than 20, remove them from the navigation  
  4598.                 above as well. To add new info:
  4599.                     copy the follow div .connections
  4600.                     change the id to id="c#con# (replace hashtags with the                      right numbers.
  4601.                     c# = card number, con# = connection number.
  4602.                
  4603.                 Make sure only the first connection div has the class
  4604.                 'active' see above.    
  4605.                 You can also change these to names but then you need to
  4606.                 edit the 'href' in the navigation (.clinks .navcon) as well
  4607.                 .-->
  4608.                
  4609.                  <div class="connections" id="c20con2">
  4610.                      <span>Connection Name :: </span> CONNECTIONS TEXT
  4611.                  </div>
  4612.            
  4613.                </div><!--biocontent-->
  4614.              </div><!--cbio-->
  4615.           </div> <!--ccontent-->    
  4616.          
  4617.         </div> <!--ccard-->
  4618.        
  4619.        
  4620.        
  4621.        </div> <!--gallery-track-->
  4622.       </section>
  4623.      
  4624.      
  4625.     </div><!--container-->
  4626.  
  4627.     <script type="text/javascript">
  4628.    
  4629.     $(document).ready(function() {
  4630.        
  4631.         /*TRIANGLE COLOR*/
  4632.         $('.cbox').each(function() {
  4633.             var groupClass = $(this).attr('class').split(" ")[1];
  4634.  
  4635.             $(this).find('.triangle').addClass(groupClass);
  4636.  
  4637.         });
  4638.  
  4639.  
  4640.  
  4641.         /*CBOX CARDS*/
  4642.         $('.cbox').on('click', function(e) {
  4643.  
  4644.             var currentAttrValue = $(this).attr('href');
  4645.             var groupClass = $(this).attr('class').split(" ")[1];
  4646.  
  4647.             if ($('.ccard' + currentAttrValue).hasClass('active')) {
  4648.                 $('.ccard' + currentAttrValue).removeClass('active');
  4649.                 $(this).removeClass('active');
  4650.             }
  4651.             else {
  4652.                 window.location.hash = $(this).attr('href');
  4653.                 $('.ccard' + currentAttrValue).addClass('active').siblings('.ccard').removeClass('active');
  4654.                 $(this).addClass('active').siblings('.cbox').removeClass('active');
  4655.             }
  4656.  
  4657.             /*TRAIT COLOURS*/
  4658.             $(currentAttrValue).find('.ctraits, .cell1, .cell2').addClass(groupClass);
  4659.  
  4660.         });
  4661.  
  4662.  
  4663.         /*CARD TABS & ACTIVE LINKS*/
  4664.        $('.cfooter a').on('click', function(e) {
  4665.            var currentAttrValue = $(this).attr('href');
  4666.  
  4667.             $('.ccontent' + currentAttrValue).fadeIn(600).siblings('.ccontent').hide();
  4668.             $(this).addClass('active').siblings().removeClass('active');
  4669.  
  4670.             e.preventDefault();
  4671.         });
  4672.        
  4673.        
  4674.         /*CONNECTION TABS*/
  4675.         $('.con').on('click', function(e) {
  4676.             var currentAttrValue = $(this).attr('href');
  4677.  
  4678.             $('.connections' + currentAttrValue).fadeIn(600).siblings('.connections').hide();
  4679.             $(this).addClass('active').siblings().removeClass('active');
  4680.  
  4681.             e.preventDefault();
  4682.          });
  4683.  
  4684.  
  4685.         /*ISOTOPE*/
  4686.         /*NO LAYOUT*/
  4687.         Isotope.Item.prototype._create = function() {
  4688.             // assign id, used for original-order sorting
  4689.             this.id = this.layout.itemGUID++;
  4690.             // transition objects
  4691.             this._transn = {
  4692.                 ingProperties: {},
  4693.                 clean: {},
  4694.                 onEnd: {}
  4695.             };
  4696.             this.sortData = {};
  4697.         };
  4698.  
  4699.         Isotope.prototype.arrange = function(opts) {
  4700.             // set any options pass
  4701.             this.option(opts);
  4702.             this._getIsInstant();
  4703.             // just filter
  4704.             this.filteredItems = this._filter(this.items);
  4705.             // flag for initalized
  4706.             this._isLayoutInited = true;
  4707.         };
  4708.        
  4709.        
  4710.         /*FILTER*/
  4711.         var $grid = $('#gallery-track').isotope({
  4712.             itemSelector: '.cbox',
  4713.             stagger: 30,
  4714.             layoutMode: 'none'
  4715.         });
  4716.  
  4717.         $('.square').on('click', function() {
  4718.             $('.ccard').each(function() {
  4719.                 $(this).removeClass('active');
  4720.             });
  4721.  
  4722.             $('#gallery').animate({
  4723.                 scrollLeft: 0
  4724.             }, 800);
  4725.  
  4726.             var filterValue = $(this).attr('data-filter');
  4727.             $grid.isotope({
  4728.                 filter: filterValue
  4729.             });
  4730.  
  4731.             e.preventDefault();
  4732.         });
  4733.        
  4734.          /*FIX LEGEND ON SCROLL*/
  4735.        
  4736.         $(function($) {
  4737.             function fixedLegend() {
  4738.                 if ($(window).scrollTop() > 190)
  4739.                     $('footer').css({
  4740.                        'position': 'fixed',
  4741.                        'width': '100%',
  4742.                        'z-index': '3',
  4743.                        'margin': '0 auto',
  4744.                        'left': '0',
  4745.                        'background': 'rgba(255, 255, 255, 0.8)',
  4746.                        'top': '0px'
  4747.                     });
  4748.                    
  4749.                
  4750.                    
  4751.                 else
  4752.                     $('footer').css({
  4753.                        'position': 'relative',
  4754.                        'background': 'rgba(255, 255, 255, 0.3)',
  4755.                        'margin': '30px 0 0 0',
  4756.                        'top': 'auto'
  4757.                     });
  4758.             }
  4759.        
  4760.             $(window).scroll(fixedLegend);
  4761.                 fixedLegend();
  4762.             });
  4763.        
  4764.         /*HASH SCRIPT*/
  4765.         var hash = $.trim(window.location.hash);
  4766.         if (hash) {
  4767.             //time out to prevent jumping of div
  4768.             setTimeout(function() {
  4769.                 $('.cbox[href$="' + hash + '"]').trigger('click');
  4770.             }, 800);
  4771.         }
  4772.  
  4773.  
  4774.     }); //DOCUMENT READY
  4775.     </script>
  4776.  </body>
  4777. </html>
Advertisement
Add Comment
Please, Sign In to add comment