nonspace

PAGE #05 :: PHOTON v.2.0 w/ Timeline

Aug 1st, 2018
343
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 76.28 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!--PAGE THEME #5: PHOTON w/ Timeline 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.   <link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i&amp;subset=cyrillic,greek,hebrew,latin-ext,vietnamese" rel="stylesheet">
  17.  
  18.   <!--FONT AWESOME ICONS-->
  19.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  20.  
  21.   <!--JQUERY-->
  22.   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  23.  
  24.  
  25.   <style type="text/css">
  26.     /*SET GROUP COLORS*/
  27.  
  28.     /*WANT MORE GROUPS/COLOURS?*/
  29.  
  30.     /*This will require a bit of knowledge of mostly CSS. You can add more
  31.       variables as seen below. You'll also have to add these variables to
  32.       the respective style groups at the bottom of the style, there's a
  33.       headline /*GROUP STYLES.
  34.  
  35.       --gx2 is the colour variable for the second part of the gradient.*/
  36.  
  37.     :root {
  38.       /*GROUP 1*/
  39.       --g1: #ff9600;
  40.       --g12: #f7136f;
  41.       /*GROUP 2*/
  42.       --g2: #f7136f;
  43.       --g22: #f7136f;
  44.       /*GROUP 3*/
  45.       --g3: #f50304;
  46.       --g32: #3e1d44;
  47.       /*GROUP 4*/
  48.       --g4: #247677;
  49.       --g42: #247677;
  50.       /*GROUP 5*/
  51.       --g5: #ff9600;
  52.       --g52: #ff9600;
  53.  
  54.       /*ADDITIONAL COLOURS*/
  55.       --g6: #f7136f;
  56.       --g62: #f7136f;
  57.  
  58.       --g7: #ff9600;
  59.       --g72: #ff9600;
  60.  
  61.       --g8: #247677;
  62.       --g82: #247677;
  63.  
  64.       --g9: #ff9600;
  65.       --g92: #ff9600;
  66.  
  67.       --g10: #f7136f;
  68.       --g102: #f7136f;
  69.     }
  70.  
  71.     html,
  72.     body {
  73.       padding: 0px;
  74.       margin: 0px;
  75.       font-family: 'Arimo', Helvetica, sans-serif;
  76.       min-height: 100%;
  77.     }
  78.  
  79.     body {
  80.       overflow: auto;
  81.       background: -webkit-linear-gradient(left top, #f1f1f1, #d6d9d6);
  82.       /* For Safari 5.1 to 6.0 */
  83.       background: -o-linear-gradient(bottom right, #f1f1f1, #d6d9d6);
  84.       /* For Opera 11.1 to 12.0 */
  85.       background: -moz-linear-gradient(bottom right, #f1f1f1, #d6d9d6);
  86.       /* For Firefox 3.6 to 15 */
  87.       background: linear-gradient(to bottom right, #f1f1f1, #d6d9d6);
  88.       /* Standard syntax */
  89.     }
  90.  
  91.     article#desctxt a, .biocontent a {
  92.         text-decoration: none;
  93.         color: #7a7a7a;
  94.         letter-spacing: 0.5px;
  95.         -webkit-transition: all 0.5s ease;
  96.         -moz-transition: all 0.5s ease;
  97.         -ms-transition: all 0.5s ease;
  98.         transition: all 0.5s ease;
  99.     }
  100.     article#desctxt a:hover, .biocontent a:hover {
  101.         color: #000;
  102.     }
  103.  
  104.     #container {
  105.       position: relative;
  106.       margin: 3% auto;
  107.       width: 700px;
  108.       height: auto;
  109.       vertical-align: center;
  110.     }
  111.  
  112.  
  113.     /*HEADER*/
  114.  
  115.     header {
  116.       margin: 0px;
  117.       padding: 15px 10px 25px;
  118.       position: relative;
  119.       height: auto;
  120.       -webkit-transition: all 0.5s ease;
  121.       -moz-transition: all 0.5s ease;
  122.       -ms-transition: all 0.5s ease;
  123.       transition: all 0.5s ease;
  124.     }
  125.  
  126.     header:after {
  127.       content: "";
  128.       position: absolute;
  129.       bottom: -0px;
  130.       left: -0px;
  131.     }
  132.  
  133.     header:after {
  134.       right: 0px;
  135.       height: 5px;
  136.       background-image: rgb(204, 204, 204);
  137.       background-image: -webkit-linear-gradient(left, transparent 20%, #ff9600 35%, #f7136f 50%, #247677 65%, transparent 80%);
  138.       background-image: -moz-linear-gradient(left, transparent 20%, #ff9600 35%, #f7136f 50%, #247677 65%, transparent 80%);
  139.       background-image: -o-linear-gradient(left, transparent 20%, #ff9600 35%, #f7136f 50%, #247677 65%, transparent 80%);
  140.       background-image: linear-gradient(to right, transparent 20%, #ff9600 35%, #f7136f 50%, #247677 65%, transparent 80%);
  141.       /*GREY GRADIENT
  142.         background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent));
  143.         background-image: -webkit-linear-gradient(left, transparent 20%, rgb(204,204,204) 50%, transparent 80%);
  144.         background-image: -moz-linear-gradient(left, transparent 20%, rgb(204,204,204) 50%, transparent 80%);
  145.         background-image: -o-linear-gradient(left, transparent 20%, rgb(204,204,204) 50%, transparent 80%);*/
  146.     }
  147.  
  148.     h1 {
  149.       font-family: Helvetica, sans-serif;
  150.       font-weight: bold;
  151.       font-size: 23px;
  152.       margin: 5px 0px 10px 0px;
  153.       text-align: center;
  154.       text-transform: uppercase;
  155.     }
  156.  
  157.     article#desc {
  158.       height: 100%;
  159.       width: auto;
  160.       margin: 0px auto;
  161.       text-align: center;
  162.     }
  163.  
  164.     /*LINKS*/
  165.  
  166.     nav a {
  167.       font-family: 'Helvetica';
  168.       text-decoration: none;
  169.       text-transform: uppercase;
  170.       font-size: 10px;
  171.       margin: 0px 0px;
  172.       padding: 0 15px;
  173.       color: #000;
  174.     }
  175.  
  176.     nav a:first-child {
  177.       padding-left: 0px;
  178.     }
  179.  
  180.     article#desctxt {
  181.       width: 650px;
  182.       max-height: auto;
  183.       margin: 15px auto 0px;
  184.       text-align: center;
  185.       line-height: 140%;
  186.       font-size: 12px;
  187.     }
  188.  
  189.     article#desctxt b {
  190.       text-transform: uppercase;
  191.     }
  192.  
  193.     /*CHARACTER NAV*/
  194.  
  195.     footer {
  196.       position: relative;
  197.       margin: 20px 0 0 0;
  198.       padding: 10px 0;
  199.       width: auto;
  200.       height: auto;
  201.       -webkit-transition: all 0.5s ease;
  202.       -moz-transition: all 0.5s ease;
  203.       -ms-transition: all 0.5s ease;
  204.       transition: all 0.5s ease;
  205.     }
  206.  
  207.     #legend {
  208.       position: relative;
  209.       width: 650px;
  210.       height: auto;
  211.       margin: 0 auto;
  212.       text-align: center;
  213.     }
  214.  
  215.     /*GROUP LINK SQUARES*/
  216.  
  217.     .square {
  218.       position: relative;
  219.       height: 10px;
  220.       font-size: 9px;
  221.       letter-spacing: 0.5px;
  222.       padding: 5px 5px;
  223.       display: inline-block;
  224.       margin: 5px 5px;
  225.       border-radius: 5px;
  226.       color: #000;
  227.       background-color: #f8f8f8;
  228.       font-family: helvetica;
  229.       text-transform: uppercase;
  230.     }
  231.  
  232.  
  233.     /*CHARACTER CARD GALLERY*/
  234.  
  235.     #gallery {
  236.       position: relative;
  237.       padding: 20px 0px 20px;
  238.       overflow-x: hidden;
  239.       overflow-y: hidden;
  240.       height: auto;
  241.       margin: 0px 0px 25px 0px;
  242.     }
  243.  
  244.     #gallery-track {
  245.       position: relative;
  246.       width: auto;
  247.       display: -webkit-box;
  248.       display: -moz-box;
  249.       display: -ms-flexbox;
  250.       display: -webkit-flex;
  251.       /* Safari */
  252.       -webkit-flex-wrap: wrap;
  253.       /* Safari 6.1+ */
  254.       display: flex;
  255.       flex-wrap: wrap;
  256.       flex-direction: row;
  257.       padding-right: 0px;
  258.       margin: -15px -25px;
  259.       height: auto;
  260.       display: none;
  261.     }
  262.  
  263.     /*CONTENT CARDS*/
  264.  
  265.     .ccard {
  266.       display: none;
  267.       opacity: 0;
  268.       width: 100%;
  269.       height: auto;
  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.  
  278.     .ccontent {
  279.       position: relative;
  280.       width: auto;
  281.       height: 370px;
  282.       margin: 0px auto;
  283.       display: none;
  284.       -webkit-transition: all 1s ease;
  285.       -moz-transition: all 1s ease;
  286.       -ms-transition: all 1s ease;
  287.       transition: all 1s ease;
  288.     }
  289.  
  290.     /*BIO*/
  291.  
  292.     .cbio {
  293.       position: relative;
  294.       width: 480px;
  295.       height: 360px;
  296.     }
  297.  
  298.     .headline {
  299.       position: relative;
  300.       width: 465px;
  301.       height: 50px;
  302.       background: rgb(236, 237, 236);
  303.       line-height: 50px;
  304.       padding: 0px 0px 0px 15px;
  305.       color: #999;
  306.     }
  307.  
  308.     h2 {
  309.       font-family: helvetica;
  310.       font-size: 25px;
  311.       margin: 0px;
  312.       color: rgb(46, 46, 46);
  313.       font-weight: normal;
  314.       text-transform: uppercase;
  315.       display: inline;
  316.     }
  317.  
  318.     /*first part of title*/
  319.  
  320.     h2 span {
  321.       font-weight: bold;
  322.       color: #000;
  323.     }
  324.  
  325.     .flavorimg {
  326.       position: absolute;
  327.       bottom: 0px;
  328.       right: 0px;
  329.       width: 200px;
  330.       height: 365px;
  331.       border: 3px solid rgb(236, 237, 236);
  332.       background-position: bottom right;
  333.       background-size: 100%;
  334.       background-repeat: no-repeat;
  335.       -webkit-filter: grayscale(0%);
  336.       filter: grayscale(0%);
  337.       -webkit-transition: all 1s ease;
  338.       -moz-transition: all 1s ease;
  339.       -ms-transition: all 1s ease;
  340.       transition: all 1s ease;
  341.     }
  342.  
  343.     .biocontent {
  344.       position: relative;
  345.       height: auto;
  346.       font-size: 14px;
  347.       text-align: justify;
  348.       line-height: 145%;
  349.       margin-top: 10px;
  350.       white-space: normal;
  351.       width: 480px;
  352.       padding: 0px 0px;
  353.     }
  354.  
  355.     .biodata {
  356.       background: rgb(236, 237, 236);
  357.       padding: 0px 10px;
  358.       height: 130px;
  359.       overflow: hidden;
  360.     }
  361.  
  362.     .biotxt {
  363.       background: rgb(236, 237, 236);
  364.       margin: 10px 0px 0px;
  365.       padding: 0px 10px 0px;
  366.       height: 160px;
  367.       overflow-y: auto;
  368.       overflow-x: hidden;
  369.       font-size: 12px;
  370.       line-height: 150%;
  371.       border-bottom: 5px solid rgb(236, 237, 236);
  372.       border-top: 5px solid rgb(236, 237, 236);
  373.     }
  374.  
  375.     /*GRID LINKS*/
  376.  
  377.     .clinks {
  378.       display: grid;
  379.       position: absolute;
  380.       right: 5px;
  381.       top: 5px;
  382.       height: 30px;
  383.       padding: 5px;
  384.       width: 230px;
  385.       grid-template-rows: repeat(1, 1fr);
  386.       grid-template-columns: repeat(6, 1fr);
  387.       grid-gap: 2px;
  388.     }
  389.  
  390.     .clinks a {
  391.       display: flex;
  392.       justify-content: center;
  393.       align-items: center;
  394.       font-size: 15px;
  395.       color: #7a7a7a;
  396.       background: #dbdbdb;
  397.       text-decoration: none;
  398.     }
  399.  
  400.     /*INFO*/
  401.  
  402.     .cell1,
  403.     .cell2 {
  404.       height: auto;
  405.       width: 220px;
  406.       padding: 8px 0 0 0;
  407.       margin: 2px;
  408.       font-size: 12px;
  409.       overflow: hidden;
  410.     }
  411.  
  412.     .cell1 {
  413.       float: left;
  414.     }
  415.  
  416.     .cell2 {
  417.       float: right;
  418.     }
  419.  
  420.     .cell1 ul,
  421.     .cell2 ul {
  422.       margin: 0;
  423.       padding: 0;
  424.     }
  425.  
  426.     .cell1 li:first-child,
  427.     .cell2 li:first-child {
  428.       margin: 0;
  429.     }
  430.  
  431.     .cell1 li,
  432.     .cell2 li {
  433.       list-style-type: none;
  434.       text-align: left;
  435.       color: #fff;
  436.       line-height: 180%;
  437.       margin: 8px 0 0 0;
  438.       padding-left: 0px;
  439.       border-bottom: 1px solid rgb(221, 221, 221);
  440.     }
  441.  
  442.     .cell1 li i,
  443.     .cell2 li i {
  444.       font-style: normal;
  445.       padding: 5px;
  446.       border-radius: 5px;
  447.     }
  448.  
  449.     .cell1 p,
  450.     .cell2 p {
  451.       padding: 0.3px;
  452.     }
  453.  
  454.     .cell1 span,
  455.     .cell2 span {
  456.       color: #000;
  457.       background: #ecedec!important;
  458.       line-height: 186%;
  459.       margin: -1px;
  460.       padding: 0px 15px 0px;
  461.       float: right;
  462.     }
  463.  
  464.     /*TIMELINE*/
  465.  
  466.    .timeline {
  467.        position: relative;
  468.        width: 100%;
  469.        height: 200px;
  470.        overflow-x: hidden;
  471.        padding: 0;
  472.        margin: 50px 0px 0px 0px;
  473.    }
  474.    .line {
  475.        position: absolute;
  476.        height: 5px;
  477.        width: 100%;
  478.        margin: 55px 0px 0px 0px;
  479.        background-image: rgb(236,237,236);
  480.        background-image: -webkit-linear-gradient(left, transparent 0%, rgb(236,237,236) 10%, rgb(236,237,236) 90%, transparent 100%);
  481.        background-image: -moz-linear-gradient(left, transparent 0%, rgb(236,237,236) 10%, rgb(236,237,236) 90%, transparent 100%);
  482.        background-image: -o-linear-gradient(transparent 0%, rgb(236,237,236) 10%, rgb(236,237,236) 90%, transparent 100%);
  483.        background-image: linear-gradient(to right, transparent 0%, rgb(236,237,236) 10%, rgb(236,237,236) 90%, transparent 100%);
  484.    }
  485.    .titem {
  486.        position: relative;
  487.        list-style: none;
  488.        margin: 0px;
  489.        padding: 0px 10px;
  490.        display: inline-block;
  491.        vertical-align: top;
  492.        font-size: 12px;
  493.        /* changes width of event item, set as max-width
  494.        if you want it to be dynamic */
  495.        width: 100px;
  496.    }
  497.    .titem li:first-child {
  498.        margin: 0px;
  499.    }
  500.    .titem li {
  501.        margin: 20px 0px 0px 0px;
  502.        padding: 0px 5px;
  503.        text-align: center;
  504.    }
  505.    .titem li span:nth-child(odd) {
  506.        font-size: 10px;
  507.        letter-spacing: 0.5px;
  508.        padding: 5px 5px;
  509.        display: inline-block;
  510.        border-radius: 5px;
  511.        background-color: #f8f8f8;
  512.        font-family: helvetica;
  513.        text-transform: uppercase;
  514.    }
  515.    .titem .fa {
  516.        font-size: 20px;
  517.        margin: 0 auto;
  518.        height: 20px;
  519.        width: 20px;
  520.        padding: 2px;
  521.        color: #f8f8f8;
  522.        line-height: 100%;
  523.        border-radius: 100px;
  524.        border: 4px solid #ecedec;
  525.    }
  526.  
  527.     /*ACTIVE STYLES*/
  528.  
  529.     /*CONTENT CARD*/
  530.  
  531.     .ccard.active {
  532.       opacity: 1;
  533.       display: block;
  534.       margin: 0px 0px;
  535.     }
  536.  
  537.     /*CONTENT CARD INNER TABS*/
  538.  
  539.     .ccontent.active,
  540.     .connections.active {
  541.       display: block;
  542.     }
  543.  
  544.     .square.active {
  545.       color: #fff;
  546.       background: #ccc;
  547.     }
  548.  
  549.     /*GROUP COLOURS*/
  550.  
  551.     /*IF YOU WANT GRADIENT COLOURS
  552.       you'll need to uncomment the gradient code. You can either use the already existing colour variables or add different ones.
  553.       Note: for the moz and linear-gradient, as well as opera you will need to write the variable as just --g#.
  554.       For an easy gradient generator, you can head to http://www.colorzilla.com/gradient-editor/*/
  555.  
  556.     /*LEGEND & TRAITS & INFO DATA*/
  557.  
  558.    /*GROUP 1*/
  559.  
  560.    #legend .g1,
  561.    .cell1.g1 li i,
  562.    .cell2.g1 li i,
  563.    .clinks.g1 a:hover {
  564.      background: var(--g1);
  565.       background-image: -webkit-linear-gradient(left, var(--g1) 0%, var(--g12) 100%);
  566.       background-image: -moz-linear-gradient(left, --g1 0%, --g12 100%);
  567.       background-image: -o-linear-gradient(left, --g1 0%, --g12 100%);
  568.       background-image: linear-gradient(to right, --g1 0%, --g12 100%);
  569.     }
  570.  
  571.     /*GROUP 2*/
  572.  
  573.     #legend .g2,
  574.     .cell1.g2 li i,
  575.     .cell2.g2 li i,
  576.     .clinks.g2 a:hover {
  577.       background: var(--g2);
  578.       background-image: -webkit-linear-gradient(left, var(--g2) 0%, var(--g22) 100%);
  579.       background-image: -moz-linear-gradient(left, --g2 0%, --g22 100%);
  580.       background-image: -o-linear-gradient(left, --g2 0%, --g22 100%);
  581.       background-image: linear-gradient(to right, --g2 0%, --g22 100%);
  582.     }
  583.  
  584.     /*GROUP 3*/
  585.  
  586.     #legend .g3,
  587.     .cell1.g3 li i,
  588.     .cell2.g3 li i,
  589.     .clinks.g3 a:hover {
  590.       background: var(--g3);
  591.       background-image: -webkit-linear-gradient(left, var(--g3) 0%, var(--g32) 100%);
  592.       background-image: -moz-linear-gradient(left, --g3 0%, --g32 100%);
  593.       background-image: -o-linear-gradient(left, --g3 0%, --g32 100%);
  594.       background-image: linear-gradient(to right, --g3 0%, --g32 100%);
  595.     }
  596.  
  597.     /*GROUP 4*/
  598.  
  599.     #legend .g4,
  600.     .cell1.g4 li i,
  601.     .cell2.g4 li i,
  602.     .clinks.g4 a:hover {
  603.       background: var(--g4);
  604.       background-image: -webkit-linear-gradient(left, var(--g4) 0%, var(--g42) 100%);
  605.       background-image: -moz-linear-gradient(left, --g4 0%, --g42 100%);
  606.       background-image: -o-linear-gradient(left, --g4 0%, --g42 100%);
  607.       background-image: linear-gradient(to right, --g4 0%, --g42 100%);
  608.     }
  609.  
  610.     /*GROUP 5*/
  611.  
  612.     #legend .g5,
  613.     .cell1.g5 li i,
  614.     .cell2.g5 li i,
  615.     .clinks.g5 a:hover {
  616.       background: var(--g5);
  617.       background-image: -webkit-linear-gradient(left, var(--g5) 0%, var(--g52) 100%);
  618.       background-image: -moz-linear-gradient(left, --g5 0%, --g52 100%);
  619.       background-image: -o-linear-gradient(left, --g5 0%, --g52 100%);
  620.       background-image: linear-gradient(to right, --g5 0%, --g52 100%);
  621.     }
  622.  
  623.     /*GROUP 6*/
  624.  
  625.     #legend .g6,
  626.     .cell1.g6 li i,
  627.     .cell2.g6 li i,
  628.     .clinks.g6 a:hover {
  629.       background: var(--g6);
  630.       background-image: -webkit-linear-gradient(left, var(--g6) 0%, var(--g62) 100%);
  631.       background-image: -moz-linear-gradient(left, --g6 0%, --g62 100%);
  632.       background-image: -o-linear-gradient(left, --g6 0%, --g62 100%);
  633.       background-image: linear-gradient(to right, --g6 0%, --g62 100%);
  634.     }
  635.  
  636.     /*GROUP 7*/
  637.  
  638.     #legend .g7,
  639.     .cell1.g7 li i,
  640.     .cell2.g7 li i,
  641.     .clinks.g7 a:hover {
  642.       background: var(--g7);
  643.       background-image: -webkit-linear-gradient(left, var(--g7) 0%, var(--g72) 100%);
  644.       background-image: -moz-linear-gradient(left, --g7 0%, --g72 100%);
  645.       background-image: -o-linear-gradient(left, --g7 0%, --g72 100%);
  646.       background-image: linear-gradient(to right, --g7 0%, --g72 100%);
  647.     }
  648.  
  649.     /*GROUP 8*/
  650.  
  651.     #legend .g8,
  652.     .cell1.g8 li i,
  653.     .cell2.g8 li i,
  654.     .clinks.g8 a:hover {
  655.       background: var(--g8);
  656.       background-image: -webkit-linear-gradient(left, var(--g8) 0%, var(--g82) 100%);
  657.       background-image: -moz-linear-gradient(left, --g8 0%, --g82 100%);
  658.       background-image: -o-linear-gradient(left, --g8 0%, --g82 100%);
  659.       background-image: linear-gradient(to right, --g8 0%, --g82 100%);
  660.     }
  661.  
  662.     /*GROUP 9*/
  663.  
  664.     #legend .g9,
  665.     .cell1.g9 li i,
  666.     .cell2.g9 li i,
  667.     .clinks.g9 a:hover {
  668.       background: var(--g9);
  669.       background-image: -webkit-linear-gradient(left, var(--g9) 0%, var(--g92) 100%);
  670.       background-image: -moz-linear-gradient(left, --g9 0%, --g92 100%);
  671.       background-image: -o-linear-gradient(left, --g9 0%, --g92 100%);
  672.       background-image: linear-gradient(to right, --g9 0%, --g92 100%);
  673.     }
  674.  
  675.     /*GROUP 5*/
  676.  
  677.     #legend .g10,
  678.     .cell1.g10 li i,
  679.     .cell2.g10 li i,
  680.     .clinks.g10 a:hover {
  681.       background: var(--g10);
  682.       background-image: -webkit-linear-gradient(left, var(--g10) 0%, var(--g102) 100%);
  683.       background-image: -moz-linear-gradient(left, --g10 0%, --g102 100%);
  684.       background-image: -o-linear-gradient(left, --g10 0%, --g102 100%);
  685.       background-image: linear-gradient(to right, --g10 0%, --g102 100%);
  686.     }
  687.  
  688.     /*HEADER GRADIENTS*/
  689.  
  690.     header.g1:after {
  691.       right: 0px;
  692.       height: 5px;
  693.       background: --g1;
  694.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g1) 50%, transparent 80%);
  695.       background-image: -moz-linear-gradient(left, transparent 20%, --g1 50%, transparent 80%);
  696.       background-image: -o-linear-gradient(left, transparent 20%, --g1 50%, transparent 80%);
  697.       background-image: linear-gradient(to right, transparent 20%, --g1 50%, transparent 80%);
  698.     }
  699.  
  700.     header.g2:after {
  701.       right: 0px;
  702.       height: 5px;
  703.       background: --g2;
  704.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g2) 50%, transparent 80%);
  705.       background-image: -moz-linear-gradient(left, transparent 20%, --g2 50%, transparent 80%);
  706.       background-image: -o-linear-gradient(left, transparent 20%, --g2 50%, transparent 80%);
  707.       background-image: linear-gradient(to right, transparent 20%, --g2 50%, transparent 80%);
  708.     }
  709.  
  710.     header.g3:after {
  711.       right: 0px;
  712.       height: 5px;
  713.       background: --g3;
  714.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g3) 50%, transparent 80%);
  715.       background-image: -moz-linear-gradient(left, transparent 20%, --g3 50%, transparent 80%);
  716.       background-image: -o-linear-gradient(left, transparent 20%, --g3 50%, transparent 80%);
  717.       background-image: linear-gradient(to right, transparent 20%, --g3 50%, transparent 80%);
  718.     }
  719.  
  720.     header.g4:after {
  721.       right: 0px;
  722.       height: 5px;
  723.       background: --g4;
  724.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g4) 50%, transparent 80%);
  725.       background-image: -moz-linear-gradient(left, transparent 20%, --g4 50%, transparent 80%);
  726.       background-image: -o-linear-gradient(left, transparent 20%, --g4 50%, transparent 80%);
  727.       background-image: linear-gradient(to right, transparent 20%, --g4 50%, transparent 80%);
  728.     }
  729.  
  730.     header.g5:after {
  731.       right: 0px;
  732.       height: 5px;
  733.       background: --g1;
  734.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g5) 50%, transparent 80%);
  735.       background-image: -moz-linear-gradient(left, transparent 20%, --g5 50%, transparent 80%);
  736.       background-image: -o-linear-gradient(left, transparent 20%, --g5 50%, transparent 80%);
  737.       background-image: linear-gradient(to right, transparent 20%, --g5 50%, transparent 80%);
  738.     }
  739.  
  740.     header.g6:after {
  741.       right: 0px;
  742.       height: 5px;
  743.       background: --g6;
  744.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g6) 50%, transparent 80%);
  745.       background-image: -moz-linear-gradient(left, transparent 20%, --g6 50%, transparent 80%);
  746.       background-image: -o-linear-gradient(left, transparent 20%, --g6 50%, transparent 80%);
  747.       background-image: linear-gradient(to right, transparent 20%, --g6 50%, transparent 80%);
  748.     }
  749.  
  750.     header.g7:after {
  751.       right: 0px;
  752.       height: 5px;
  753.       background: --g7;
  754.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g7) 50%, transparent 80%);
  755.       background-image: -moz-linear-gradient(left, transparent 20%, --g7 50%, transparent 80%);
  756.       background-image: -o-linear-gradient(left, transparent 20%, --g7 50%, transparent 80%);
  757.       background-image: linear-gradient(to right, transparent 20%, --g7 50%, transparent 80%);
  758.     }
  759.  
  760.     header.g8:after {
  761.       right: 0px;
  762.       height: 5px;
  763.       background: --g8;
  764.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g8) 50%, transparent 80%);
  765.       background-image: -moz-linear-gradient(left, transparent 20%, --g8 50%, transparent 80%);
  766.       background-image: -o-linear-gradient(left, transparent 20%, --g8 50%, transparent 80%);
  767.       background-image: linear-gradient(to right, transparent 20%, --g8 50%, transparent 80%);
  768.     }
  769.  
  770.     header.g9:after {
  771.       right: 0px;
  772.       height: 5px;
  773.       background: --g9;
  774.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g9) 50%, transparent 80%);
  775.       background-image: -moz-linear-gradient(left, transparent 20%, --g9 50%, transparent 80%);
  776.       background-image: -o-linear-gradient(left, transparent 20%, --g9 50%, transparent 80%);
  777.       background-image: linear-gradient(to right, transparent 20%, --g9 50%, transparent 80%);
  778.     }
  779.  
  780.     header.g10:after {
  781.       right: 0px;
  782.       height: 5px;
  783.       background: --g10;
  784.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g10) 50%, transparent 80%);
  785.       background-image: -moz-linear-gradient(left, transparent 20%, --g10 50%, transparent 80%);
  786.       background-image: -o-linear-gradient(left, transparent 20%, --g10 50%, transparent 80%);
  787.       background-image: linear-gradient(to right, transparent 20%, --g10 50%, transparent 80%);
  788.     }
  789.  
  790.  
  791.     /*HOVER STYLES*/
  792.  
  793.     .square:hover {
  794.       cursor: pointer;
  795.     }
  796.  
  797.     .clinks a {
  798.       -webkit-transition: all 0.5s ease;
  799.       -moz-transition: all 0.5s ease;
  800.       -ms-transition: all 0.5s ease;
  801.       transition: all 0.5s ease;
  802.     }
  803.  
  804.     .clinks a:hover {
  805.       color: #fff;
  806.     }
  807.  
  808.     .flavorimg:hover {
  809.       -webkit-filter: grayscale(0%);
  810.       filter: grayscale(0%);
  811.     }
  812.  
  813.  
  814.     /*ANIMATION KEYFRAMES*/
  815.  
  816.     @-webkit-keyframes fadeIn {
  817.       0% {
  818.         opacity: 0;
  819.       }
  820.       20% {
  821.         opacity: 0;
  822.       }
  823.       40% {
  824.         opacity: 0.3;
  825.       }
  826.       60% {
  827.         opacity: 0.5;
  828.       }
  829.       80% {
  830.         opacity: 0.9;
  831.       }
  832.       100% {
  833.         opacity: 1;
  834.       }
  835.     }
  836.  
  837.     @keyframes fadeIn {
  838.       0% {
  839.         opacity: 0;
  840.       }
  841.       20% {
  842.         opacity: 0;
  843.       }
  844.       40% {
  845.         opacity: 0.3;
  846.       }
  847.       60% {
  848.         opacity: 0.5;
  849.       }
  850.       80% {
  851.         opacity: 0.9;
  852.       }
  853.       100% {
  854.         opacity: 1;
  855.       }
  856.     }
  857.  
  858.  
  859.     /*SCROLLBAR STYLES*/
  860.  
  861.     ::-webkit-scrollbar {
  862.       width: 5px;
  863.       height: 5px;
  864.     }
  865.  
  866.     ::-webkit-scrollbar-track {
  867.       border-radius: 1px;
  868.       background-color: #f8f8f8;
  869.     }
  870.  
  871.     ::-webkit-scrollbar-thumb {
  872.       border-radius: 1px;
  873.       background-color: #ddd;
  874.     }
  875.  
  876.     .biodata::-webkit-scrollbar-track,
  877.     .biotxt::-webkit-scrollbar-track {
  878.       border-radius: 1px;
  879.       width: 10px!important;
  880.       background: -webkit-linear-gradient(bottom, #ecedee, #eceeec 100%);
  881.     }
  882.  
  883.     .biodata::-webkit-scrollbar-thumb,
  884.     .biotxt::-webkit-scrollbar-thumb {
  885.       border-radius: 1px;
  886.       width: 10px!important;
  887.       background: -webkit-linear-gradient(top, #ddd, #eee 100%);
  888.       /*background: -webkit-linear-gradient(top, #edeeed, #eceeec 100%);          if transparent*/
  889.     }
  890.   </style>
  891. </head>
  892.  
  893. <body>
  894.  
  895.   <div id="container">
  896.  
  897.     <!--HEADER-->
  898.     <header>
  899.  
  900.       <!--TITLE & LINKS-->
  901.       <article id="desc">
  902.         <h1>photon</h1>
  903.  
  904.         <!--HEADER LINKS-->
  905.         <!--enter URL for your about page-->
  906.         <nav>
  907.           <a href="/">
  908.                 <i class="fa fa-home" aria-hidden="true"></i>
  909.                 Home</a>
  910.           <a href="/YOURABOUTPAGE">
  911.                 <i class="fa fa-user" aria-hidden="true"></i>
  912.                 About</a>
  913.           <a href="/ask">
  914.                 <i class="fa fa-envelope" aria-hidden="true"></i>
  915.                 Message</a>
  916.           <!--CREDIT, DON'T CHANGE!!!-->
  917.           <a href="https://nonspace.tumblr.com">
  918.                 <i class="fa fa-copyright" aria-hidden="true"></i>
  919.                 NNSPC</a>
  920.         </nav>
  921.       </article>
  922.  
  923.       <!--DESCRIPTION-->
  924.       <article id="desctxt">
  925.         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  926.       </article>
  927.  
  928.     </header>
  929.  
  930.     <footer>
  931.       <div id="legend">
  932.  
  933.         <!--GROUP LEGEND-->
  934.         <!--The 'g#' in the 'square' class sets the color for the group
  935.          (see variables at the top of CSS).
  936.          The data-filter is for sorting on click. You can add several
  937.          groups to a link: group AND group, group OR group etc. You can
  938.          read more here: https://isotope.metafizzy.co/filtering.html-->
  939.  
  940.         <div class="square active" href="#c1">one</div>
  941.         <div class="square" href="#c2">two</div>
  942.         <div class="square" href="#c3">three</div>
  943.         <div class="square" href="#c4">four</div>
  944.         <div class="square" href="#c5">five</div>
  945.         <div class="square" href="#c6">six</div>
  946.         <div class="square" href="#c7">seven</div>
  947.         <div class="square" href="#c8">eight</div>
  948.         <div class="square" href="#c9">nine</div>
  949.         <div class="square" href="#c10">ten</div>
  950.         <!--ADDITIONAL GROUPS
  951.          <div class="square g6" data-filter=".g6">group</div>
  952.          <div class="square g7" data-filter=".g7">group</div>
  953.          <div class="square g8" data-filter=".g8">group</div>
  954.          <div class="square g9" data-filter=".g9">group</div>
  955.          <div class="square g10" data-filter=".g10">group</div>-->
  956.  
  957.       </div>
  958.       <!--legend-->
  959.     </footer>
  960.  
  961.     <!--TABS & TAB LINKS-->
  962.     <!--The href attribute in the .square div is what links you to the
  963.      corresponding ccard (content card).
  964.      You can link to these tabs using the URL
  965.      (http://YOURURL.com/YOURPAGE/#TABNAME) so if you want to change them
  966.      to the character name you need to edit the square href and give the
  967.      right ccard div the same id.
  968.  
  969.      For example:
  970.  
  971.      Your character's name is Musterman.
  972.  
  973.      In the cbox:
  974.          <div class="cbox g1" href="#MUSTERMAN">
  975.          take note to not leave out the hashtag(#)
  976.      In the ccard:
  977.          <div class="ccard" id="MUSTERMAN">
  978.  
  979.  
  980.      <!--CHARACTER CARDS-->
  981.     <section id="gallery">
  982.  
  983.       <div class="ccard g1 active" id="c1">
  984.  
  985.         <div class="ccontent active">
  986.           <div class="cbio">
  987.  
  988.             <div class="headline">
  989.               <h2><span>first</span>last</h2>
  990.  
  991.               <div class="clinks">
  992.                 <!--You can customise these links as much as you like.
  993.                You can find more icons here: http://fontawesome.io/icons/
  994.                Depending on how long your character's name is you may have
  995.                to remove some links or adjust the width for the .clinks
  996.                class-->
  997.                 <a href="#">
  998.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  999.                 <a href="#">
  1000.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1001.                 <a href="#">
  1002.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1003.                 <a href="#">
  1004.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1005.                 <a href="#">
  1006.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1007.                 <a href="#">
  1008.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1009.               </div>
  1010.               <!--clinks-->
  1011.             </div>
  1012.             <!--headline-->
  1013.  
  1014.             <div class="biocontent">
  1015.  
  1016.               <div class="biodata">
  1017.                 <!--LEFT DATA-->
  1018.                 <ul class="cell1">
  1019.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1020.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1021.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1022.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1023.                 </ul>
  1024.  
  1025.                 <!--RIGHT DATA-->
  1026.                 <ul class="cell2">
  1027.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1028.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1029.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1030.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1031.                 </ul>
  1032.               </div>
  1033.               <!--biodata-->
  1034.  
  1035.               <div class="biotxt">
  1036.                 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
  1037.                 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
  1038.                 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
  1039.                 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
  1040.                 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
  1041.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1042.               </div>
  1043.               <!--biotxt-->
  1044.  
  1045.             </div>
  1046.             <!--biocontent-->
  1047.  
  1048.           </div>
  1049.           <!--cbio-->
  1050.  
  1051.           <!--CHARACTER IMAGE-->
  1052.           <div class="flavorimg" style="background-image:
  1053.              url('https://placehold.it/200x365');">
  1054.           </div>
  1055.  
  1056.         </div>
  1057.         <!--ccontent-->
  1058.  
  1059.         <!--NOTE: When there's too many events on the timeline the line will break into a new paragraph. This is a known issue and I'm
  1060.        working on a fix. In the meantime if you do have more items than fit on the overview (although this is intended to be a
  1061.        compact theme and not for a detailed timeline) I recommend changing either/or the width or the padding of .titem in the CSS
  1062.        part.-->
  1063.  
  1064.         <div class="timeline">
  1065.           <div class="line"></div>
  1066.  
  1067.           <ul class="titem">
  1068.             <li><span>DATE</span></li>
  1069.             <li><i class="fa fa-star" aria-hidden="true"></i></li>
  1070.             <li><span>EVENT</span></li>
  1071.           </ul>
  1072.  
  1073.           <ul class="titem">
  1074.             <li><span>DATE</span></li>
  1075.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1076.             <li><span>EVENT</span></li>
  1077.           </ul>
  1078.  
  1079.           <ul class="titem">
  1080.             <li><span>DATE</span></li>
  1081.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1082.             <li><span>EVENT</span></li>
  1083.           </ul>
  1084.  
  1085.         </div>
  1086.         <!--timeline-->
  1087.  
  1088.       </div>
  1089.       <!--ccard-->
  1090.  
  1091.  
  1092.       <!--CHARACTER 2-->
  1093.       <div class="ccard g2" id="c2">
  1094.  
  1095.         <div class="ccontent active">
  1096.           <div class="cbio">
  1097.  
  1098.             <div class="headline">
  1099.               <h2><span>first</span>last</h2>
  1100.  
  1101.               <div class="clinks">
  1102.                 <!--You can customise these links as much as you like.
  1103.                You can find more icons here: http://fontawesome.io/icons/
  1104.                Depending on how long your character's name is you may have
  1105.                to remove some links or adjust the width for the .clinks
  1106.                class-->
  1107.                 <a href="#">
  1108.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1109.                 <a href="#">
  1110.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1111.                 <a href="#">
  1112.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1113.                 <a href="#">
  1114.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1115.                 <a href="#">
  1116.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1117.                 <a href="#">
  1118.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1119.               </div>
  1120.               <!--clinks-->
  1121.             </div>
  1122.             <!--headline-->
  1123.  
  1124.             <div class="biocontent">
  1125.  
  1126.               <div class="biodata">
  1127.                 <!--LEFT DATA-->
  1128.                 <ul class="cell1">
  1129.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1130.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1131.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1132.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1133.                 </ul>
  1134.  
  1135.                 <!--RIGHT DATA-->
  1136.                 <ul class="cell2">
  1137.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1138.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1139.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1140.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1141.                 </ul>
  1142.               </div>
  1143.               <!--biodata-->
  1144.  
  1145.               <div class="biotxt">
  1146.                 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
  1147.                 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
  1148.                 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
  1149.                 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
  1150.                 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
  1151.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1152.               </div>
  1153.               <!--biotxt-->
  1154.  
  1155.             </div>
  1156.             <!--biocontent-->
  1157.  
  1158.           </div>
  1159.           <!--cbio-->
  1160.  
  1161.           <!--CHARACTER IMAGE-->
  1162.           <div class="flavorimg" style="background-image:
  1163.              url('https://placehold.it/200x365');">
  1164.           </div>
  1165.  
  1166.         </div>
  1167.         <!--ccontent-->
  1168.  
  1169.         <div class="timeline">
  1170.           <div class="line"></div>
  1171.  
  1172.           <ul class="titem">
  1173.             <li><span>DATE</span></li>
  1174.             <li><i class="fa fa-star" aria-hidden="true"></i></li>
  1175.             <li><span>EVENT</span></li>
  1176.           </ul>
  1177.  
  1178.           <ul class="titem">
  1179.             <li><span>DATE</span></li>
  1180.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1181.             <li><span>EVENT</span></li>
  1182.           </ul>
  1183.  
  1184.           <ul class="titem">
  1185.             <li><span>DATE</span></li>
  1186.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1187.             <li><span>EVENT</span></li>
  1188.           </ul>
  1189.  
  1190.         </div>
  1191.         <!--timeline-->
  1192.  
  1193.       </div>
  1194.       <!--ccard-->
  1195.  
  1196.  
  1197.  
  1198.       <!--CHARACTER 3-->
  1199.       <div class="ccard g3" id="c3">
  1200.  
  1201.         <div class="ccontent active">
  1202.           <div class="cbio">
  1203.  
  1204.             <div class="headline">
  1205.               <h2><span>first</span>last</h2>
  1206.  
  1207.               <div class="clinks">
  1208.                 <!--You can customise these links as much as you like.
  1209.                You can find more icons here: http://fontawesome.io/icons/
  1210.                Depending on how long your character's name is you may have
  1211.                to remove some links or adjust the width for the .clinks
  1212.                class-->
  1213.                 <a href="#">
  1214.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1215.                 <a href="#">
  1216.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1217.                 <a href="#">
  1218.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1219.                 <a href="#">
  1220.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1221.                 <a href="#">
  1222.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1223.                 <a href="#">
  1224.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1225.               </div>
  1226.               <!--clinks-->
  1227.             </div>
  1228.             <!--headline-->
  1229.  
  1230.             <div class="biocontent">
  1231.  
  1232.               <div class="biodata">
  1233.                 <!--LEFT DATA-->
  1234.                 <ul class="cell1">
  1235.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1236.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1237.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1238.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1239.                 </ul>
  1240.  
  1241.                 <!--RIGHT DATA-->
  1242.                 <ul class="cell2">
  1243.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1244.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1245.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1246.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1247.                 </ul>
  1248.               </div>
  1249.               <!--biodata-->
  1250.  
  1251.               <div class="biotxt">
  1252.                 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
  1253.                 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
  1254.                 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
  1255.                 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
  1256.                 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
  1257.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1258.               </div>
  1259.               <!--biotxt-->
  1260.  
  1261.             </div>
  1262.             <!--biocontent-->
  1263.  
  1264.           </div>
  1265.           <!--cbio-->
  1266.  
  1267.           <!--CHARACTER IMAGE-->
  1268.           <div class="flavorimg" style="background-image:
  1269.              url('https://i.imgur.com/uEfdGEk.png');">
  1270.           </div>
  1271.  
  1272.         </div>
  1273.         <!--ccontent-->
  1274.  
  1275.         <div class="timeline">
  1276.           <div class="line"></div>
  1277.  
  1278.           <ul class="titem">
  1279.             <li><span>DATE</span></li>
  1280.             <li><i class="fa fa-star" aria-hidden="true"></i></li>
  1281.             <li><span>EVENT</span></li>
  1282.           </ul>
  1283.  
  1284.           <ul class="titem">
  1285.             <li><span>DATE</span></li>
  1286.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1287.             <li><span>EVENT</span></li>
  1288.           </ul>
  1289.  
  1290.           <ul class="titem">
  1291.             <li><span>DATE</span></li>
  1292.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1293.             <li><span>EVENT</span></li>
  1294.           </ul>
  1295.  
  1296.         </div>
  1297.         <!--timeline-->
  1298.  
  1299.       </div>
  1300.       <!--ccard-->
  1301.  
  1302.  
  1303.       <!--CHARACTER 4-->
  1304.       <div class="ccard g4" id="c4">
  1305.  
  1306.         <div class="ccontent active">
  1307.           <div class="cbio">
  1308.  
  1309.             <div class="headline">
  1310.               <h2><span>first</span>last</h2>
  1311.  
  1312.               <div class="clinks">
  1313.                 <!--You can customise these links as much as you like.
  1314.                You can find more icons here: http://fontawesome.io/icons/
  1315.                Depending on how long your character's name is you may have
  1316.                to remove some links or adjust the width for the .clinks
  1317.                class-->
  1318.                 <a href="#">
  1319.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1320.                 <a href="#">
  1321.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1322.                 <a href="#">
  1323.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1324.                 <a href="#">
  1325.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1326.                 <a href="#">
  1327.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1328.                 <a href="#">
  1329.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1330.               </div>
  1331.               <!--clinks-->
  1332.             </div>
  1333.             <!--headline-->
  1334.  
  1335.             <div class="biocontent">
  1336.  
  1337.               <div class="biodata">
  1338.                 <!--LEFT DATA-->
  1339.                 <ul class="cell1">
  1340.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1341.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1342.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1343.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1344.                 </ul>
  1345.  
  1346.                 <!--RIGHT DATA-->
  1347.                 <ul class="cell2">
  1348.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1349.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1350.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1351.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1352.                 </ul>
  1353.               </div>
  1354.               <!--biodata-->
  1355.  
  1356.               <div class="biotxt">
  1357.                 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
  1358.                 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
  1359.                 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
  1360.                 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
  1361.                 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
  1362.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1363.               </div>
  1364.               <!--biotxt-->
  1365.  
  1366.             </div>
  1367.             <!--biocontent-->
  1368.  
  1369.           </div>
  1370.           <!--cbio-->
  1371.  
  1372.           <!--CHARACTER IMAGE-->
  1373.           <div class="flavorimg" style="background-image:
  1374.              url('https://placehold.it/200x365');">
  1375.           </div>
  1376.  
  1377.         </div>
  1378.         <!--ccontent-->
  1379.  
  1380.         <div class="timeline">
  1381.           <div class="line"></div>
  1382.  
  1383.           <ul class="titem">
  1384.             <li><span>DATE</span></li>
  1385.             <li><i class="fa fa-star" aria-hidden="true"></i></li>
  1386.             <li><span>EVENT</span></li>
  1387.           </ul>
  1388.  
  1389.           <ul class="titem">
  1390.             <li><span>DATE</span></li>
  1391.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1392.             <li><span>EVENT</span></li>
  1393.           </ul>
  1394.  
  1395.           <ul class="titem">
  1396.             <li><span>DATE</span></li>
  1397.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1398.             <li><span>EVENT</span></li>
  1399.           </ul>
  1400.  
  1401.         </div>
  1402.         <!--timeline-->
  1403.  
  1404.       </div>
  1405.       <!--ccard-->
  1406.  
  1407.  
  1408.  
  1409.       <!--CHARACTER 5-->
  1410.       <div class="ccard g5" id="c5">
  1411.  
  1412.         <div class="ccontent active">
  1413.           <div class="cbio">
  1414.  
  1415.             <div class="headline">
  1416.               <h2><span>first</span>last</h2>
  1417.  
  1418.               <div class="clinks">
  1419.                 <!--You can customise these links as much as you like.
  1420.                You can find more icons here: http://fontawesome.io/icons/
  1421.                Depending on how long your character's name is you may have
  1422.                to remove some links or adjust the width for the .clinks
  1423.                class-->
  1424.                 <a href="#">
  1425.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1426.                 <a href="#">
  1427.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1428.                 <a href="#">
  1429.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1430.                 <a href="#">
  1431.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1432.                 <a href="#">
  1433.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1434.                 <a href="#">
  1435.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1436.               </div>
  1437.               <!--clinks-->
  1438.             </div>
  1439.             <!--headline-->
  1440.  
  1441.             <div class="biocontent">
  1442.  
  1443.               <div class="biodata">
  1444.                 <!--LEFT DATA-->
  1445.                 <ul class="cell1">
  1446.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1447.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1448.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1449.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1450.                 </ul>
  1451.  
  1452.                 <!--RIGHT DATA-->
  1453.                 <ul class="cell2">
  1454.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1455.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1456.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1457.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1458.                 </ul>
  1459.               </div>
  1460.               <!--biodata-->
  1461.  
  1462.               <div class="biotxt">
  1463.                 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
  1464.                 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
  1465.                 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
  1466.                 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
  1467.                 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
  1468.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1469.               </div>
  1470.               <!--biotxt-->
  1471.  
  1472.             </div>
  1473.             <!--biocontent-->
  1474.  
  1475.           </div>
  1476.           <!--cbio-->
  1477.  
  1478.           <!--CHARACTER IMAGE-->
  1479.           <div class="flavorimg" style="background-image:
  1480.              url('https://placehold.it/200x365');">
  1481.           </div>
  1482.  
  1483.         </div>
  1484.         <!--ccontent-->
  1485.  
  1486.         <div class="timeline">
  1487.           <div class="line"></div>
  1488.  
  1489.           <ul class="titem">
  1490.             <li><span>DATE</span></li>
  1491.             <li><i class="fa fa-star" aria-hidden="true"></i></li>
  1492.             <li><span>EVENT</span></li>
  1493.           </ul>
  1494.  
  1495.           <ul class="titem">
  1496.             <li><span>DATE</span></li>
  1497.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1498.             <li><span>EVENT</span></li>
  1499.           </ul>
  1500.  
  1501.           <ul class="titem">
  1502.             <li><span>DATE</span></li>
  1503.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1504.             <li><span>EVENT</span></li>
  1505.           </ul>
  1506.  
  1507.         </div>
  1508.         <!--timeline-->
  1509.  
  1510.       </div>
  1511.       <!--ccard-->
  1512.  
  1513.  
  1514.  
  1515.       <!--CHARACTER 6-->
  1516.       <div class="ccard g6" id="c6">
  1517.  
  1518.         <div class="ccontent active">
  1519.           <div class="cbio">
  1520.  
  1521.             <div class="headline">
  1522.               <h2><span>first</span>last</h2>
  1523.  
  1524.               <div class="clinks">
  1525.                 <!--You can customise these links as much as you like.
  1526.                You can find more icons here: http://fontawesome.io/icons/
  1527.                Depending on how long your character's name is you may have
  1528.                to remove some links or adjust the width for the .clinks
  1529.                class-->
  1530.                 <a href="#">
  1531.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1532.                 <a href="#">
  1533.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1534.                 <a href="#">
  1535.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1536.                 <a href="#">
  1537.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1538.                 <a href="#">
  1539.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1540.                 <a href="#">
  1541.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1542.               </div>
  1543.               <!--clinks-->
  1544.             </div>
  1545.             <!--headline-->
  1546.  
  1547.             <div class="biocontent">
  1548.  
  1549.               <div class="biodata">
  1550.                 <!--LEFT DATA-->
  1551.                 <ul class="cell1">
  1552.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1553.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1554.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1555.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1556.                 </ul>
  1557.  
  1558.                 <!--RIGHT DATA-->
  1559.                 <ul class="cell2">
  1560.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1561.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1562.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1563.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1564.                 </ul>
  1565.               </div>
  1566.               <!--biodata-->
  1567.  
  1568.               <div class="biotxt">
  1569.                 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
  1570.                 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
  1571.                 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
  1572.                 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
  1573.                 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
  1574.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1575.               </div>
  1576.               <!--biotxt-->
  1577.  
  1578.             </div>
  1579.             <!--biocontent-->
  1580.  
  1581.           </div>
  1582.           <!--cbio-->
  1583.  
  1584.           <!--CHARACTER IMAGE-->
  1585.           <div class="flavorimg" style="background-image:
  1586.              url('https://placehold.it/200x365');">
  1587.           </div>
  1588.  
  1589.         </div>
  1590.         <!--ccontent-->
  1591.  
  1592.         <div class="timeline">
  1593.           <div class="line"></div>
  1594.  
  1595.           <ul class="titem">
  1596.             <li><span>DATE</span></li>
  1597.             <li><i class="fa fa-star" aria-hidden="true"></i></li>
  1598.             <li><span>EVENT</span></li>
  1599.           </ul>
  1600.  
  1601.           <ul class="titem">
  1602.             <li><span>DATE</span></li>
  1603.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1604.             <li><span>EVENT</span></li>
  1605.           </ul>
  1606.  
  1607.           <ul class="titem">
  1608.             <li><span>DATE</span></li>
  1609.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1610.             <li><span>EVENT</span></li>
  1611.           </ul>
  1612.  
  1613.         </div>
  1614.         <!--timeline-->
  1615.  
  1616.       </div>
  1617.       <!--ccard-->
  1618.  
  1619.  
  1620.  
  1621.       <!--CHARACTER 7-->
  1622.       <div class="ccard g7" id="c7">
  1623.  
  1624.         <div class="ccontent active">
  1625.           <div class="cbio">
  1626.  
  1627.             <div class="headline">
  1628.               <h2><span>first</span>last</h2>
  1629.  
  1630.               <div class="clinks">
  1631.                 <!--You can customise these links as much as you like.
  1632.                You can find more icons here: http://fontawesome.io/icons/
  1633.                Depending on how long your character's name is you may have
  1634.                to remove some links or adjust the width for the .clinks
  1635.                class-->
  1636.                 <a href="#">
  1637.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1638.                 <a href="#">
  1639.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1640.                 <a href="#">
  1641.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1642.                 <a href="#">
  1643.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1644.                 <a href="#">
  1645.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1646.                 <a href="#">
  1647.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1648.               </div>
  1649.               <!--clinks-->
  1650.             </div>
  1651.             <!--headline-->
  1652.  
  1653.             <div class="biocontent">
  1654.  
  1655.               <div class="biodata">
  1656.                 <!--LEFT DATA-->
  1657.                 <ul class="cell1">
  1658.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1659.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1660.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1661.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1662.                 </ul>
  1663.  
  1664.                 <!--RIGHT DATA-->
  1665.                 <ul class="cell2">
  1666.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1667.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1668.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1669.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1670.                 </ul>
  1671.               </div>
  1672.               <!--biodata-->
  1673.  
  1674.               <div class="biotxt">
  1675.                 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
  1676.                 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
  1677.                 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
  1678.                 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
  1679.                 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
  1680.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1681.               </div>
  1682.               <!--biotxt-->
  1683.  
  1684.             </div>
  1685.             <!--biocontent-->
  1686.  
  1687.           </div>
  1688.           <!--cbio-->
  1689.  
  1690.           <!--CHARACTER IMAGE-->
  1691.           <div class="flavorimg" style="background-image:
  1692.              url('https://placehold.it/200x365');">
  1693.           </div>
  1694.  
  1695.         </div>
  1696.         <!--ccontent-->
  1697.  
  1698.         <div class="timeline">
  1699.           <div class="line"></div>
  1700.  
  1701.           <ul class="titem">
  1702.             <li><span>DATE</span></li>
  1703.             <li><i class="fa fa-star" aria-hidden="true"></i></li>
  1704.             <li><span>EVENT</span></li>
  1705.           </ul>
  1706.  
  1707.           <ul class="titem">
  1708.             <li><span>DATE</span></li>
  1709.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1710.             <li><span>EVENT</span></li>
  1711.           </ul>
  1712.  
  1713.           <ul class="titem">
  1714.             <li><span>DATE</span></li>
  1715.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1716.             <li><span>EVENT</span></li>
  1717.           </ul>
  1718.  
  1719.         </div>
  1720.         <!--timeline-->
  1721.  
  1722.       </div>
  1723.       <!--ccard-->
  1724.  
  1725.  
  1726.  
  1727.       <!--CHARACTER 8-->
  1728.       <div class="ccard g8" id="c8">
  1729.  
  1730.         <div class="ccontent active">
  1731.           <div class="cbio">
  1732.  
  1733.             <div class="headline">
  1734.               <h2><span>first</span>last</h2>
  1735.  
  1736.               <div class="clinks">
  1737.                 <!--You can customise these links as much as you like.
  1738.                You can find more icons here: http://fontawesome.io/icons/
  1739.                Depending on how long your character's name is you may have
  1740.                to remove some links or adjust the width for the .clinks
  1741.                class-->
  1742.                 <a href="#">
  1743.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1744.                 <a href="#">
  1745.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1746.                 <a href="#">
  1747.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1748.                 <a href="#">
  1749.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1750.                 <a href="#">
  1751.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1752.                 <a href="#">
  1753.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1754.               </div>
  1755.               <!--clinks-->
  1756.             </div>
  1757.             <!--headline-->
  1758.  
  1759.             <div class="biocontent">
  1760.  
  1761.               <div class="biodata">
  1762.                 <!--LEFT DATA-->
  1763.                 <ul class="cell1">
  1764.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1765.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1766.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1767.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1768.                 </ul>
  1769.  
  1770.                 <!--RIGHT DATA-->
  1771.                 <ul class="cell2">
  1772.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1773.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1774.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1775.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1776.                 </ul>
  1777.               </div>
  1778.               <!--biodata-->
  1779.  
  1780.               <div class="biotxt">
  1781.                 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
  1782.                 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
  1783.                 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
  1784.                 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
  1785.                 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
  1786.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1787.               </div>
  1788.               <!--biotxt-->
  1789.  
  1790.             </div>
  1791.             <!--biocontent-->
  1792.  
  1793.           </div>
  1794.           <!--cbio-->
  1795.  
  1796.           <!--CHARACTER IMAGE-->
  1797.           <div class="flavorimg" style="background-image:
  1798.              url('https://placehold.it/200x365');">
  1799.           </div>
  1800.  
  1801.         </div>
  1802.         <!--ccontent-->
  1803.  
  1804.         <div class="timeline">
  1805.           <div class="line"></div>
  1806.  
  1807.           <ul class="titem">
  1808.             <li><span>DATE</span></li>
  1809.             <li><i class="fa fa-star" aria-hidden="true"></i></li>
  1810.             <li><span>EVENT</span></li>
  1811.           </ul>
  1812.  
  1813.           <ul class="titem">
  1814.             <li><span>DATE</span></li>
  1815.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1816.             <li><span>EVENT</span></li>
  1817.           </ul>
  1818.  
  1819.           <ul class="titem">
  1820.             <li><span>DATE</span></li>
  1821.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1822.             <li><span>EVENT</span></li>
  1823.           </ul>
  1824.  
  1825.         </div>
  1826.         <!--timeline-->
  1827.  
  1828.       </div>
  1829.       <!--ccard-->
  1830.  
  1831.  
  1832.  
  1833.       <!--CHARACTER 9-->
  1834.       <div class="ccard g9" id="c9">
  1835.  
  1836.         <div class="ccontent active">
  1837.           <div class="cbio">
  1838.  
  1839.             <div class="headline">
  1840.               <h2><span>first</span>last</h2>
  1841.  
  1842.               <div class="clinks">
  1843.                 <!--You can customise these links as much as you like.
  1844.                You can find more icons here: http://fontawesome.io/icons/
  1845.                Depending on how long your character's name is you may have
  1846.                to remove some links or adjust the width for the .clinks
  1847.                class-->
  1848.                 <a href="#">
  1849.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1850.                 <a href="#">
  1851.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1852.                 <a href="#">
  1853.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1854.                 <a href="#">
  1855.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1856.                 <a href="#">
  1857.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1858.                 <a href="#">
  1859.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1860.               </div>
  1861.               <!--clinks-->
  1862.             </div>
  1863.             <!--headline-->
  1864.  
  1865.             <div class="biocontent">
  1866.  
  1867.               <div class="biodata">
  1868.                 <!--LEFT DATA-->
  1869.                 <ul class="cell1">
  1870.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1871.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1872.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1873.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1874.                 </ul>
  1875.  
  1876.                 <!--RIGHT DATA-->
  1877.                 <ul class="cell2">
  1878.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1879.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1880.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1881.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1882.                 </ul>
  1883.               </div>
  1884.               <!--biodata-->
  1885.  
  1886.               <div class="biotxt">
  1887.                 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
  1888.                 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
  1889.                 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
  1890.                 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
  1891.                 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
  1892.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1893.               </div>
  1894.               <!--biotxt-->
  1895.  
  1896.             </div>
  1897.             <!--biocontent-->
  1898.  
  1899.           </div>
  1900.           <!--cbio-->
  1901.  
  1902.           <!--CHARACTER IMAGE-->
  1903.           <div class="flavorimg" style="background-image:
  1904.              url('https://placehold.it/200x365');">
  1905.           </div>
  1906.  
  1907.         </div>
  1908.         <!--ccontent-->
  1909.  
  1910.         <div class="timeline">
  1911.           <div class="line"></div>
  1912.  
  1913.           <ul class="titem">
  1914.             <li><span>DATE</span></li>
  1915.             <li><i class="fa fa-star" aria-hidden="true"></i></li>
  1916.             <li><span>EVENT</span></li>
  1917.           </ul>
  1918.  
  1919.           <ul class="titem">
  1920.             <li><span>DATE</span></li>
  1921.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1922.             <li><span>EVENT</span></li>
  1923.           </ul>
  1924.  
  1925.           <ul class="titem">
  1926.             <li><span>DATE</span></li>
  1927.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  1928.             <li><span>EVENT</span></li>
  1929.           </ul>
  1930.  
  1931.         </div>
  1932.         <!--timeline-->
  1933.  
  1934.       </div>
  1935.       <!--ccard-->
  1936.  
  1937.  
  1938.  
  1939.       <!--CHARACTER 10-->
  1940.       <div class="ccard g10" id="c10">
  1941.  
  1942.         <div class="ccontent active">
  1943.           <div class="cbio">
  1944.  
  1945.             <div class="headline">
  1946.               <h2><span>first</span>last</h2>
  1947.  
  1948.               <div class="clinks">
  1949.                 <!--You can customise these links as much as you like.
  1950.                You can find more icons here: http://fontawesome.io/icons/
  1951.                Depending on how long your character's name is you may have
  1952.                to remove some links or adjust the width for the .clinks
  1953.                class-->
  1954.                 <a href="#">
  1955.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1956.                 <a href="#">
  1957.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1958.                 <a href="#">
  1959.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1960.                 <a href="#">
  1961.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1962.                 <a href="#">
  1963.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1964.                 <a href="#">
  1965.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1966.               </div>
  1967.               <!--clinks-->
  1968.             </div>
  1969.             <!--headline-->
  1970.  
  1971.             <div class="biocontent">
  1972.  
  1973.               <div class="biodata">
  1974.                 <!--LEFT DATA-->
  1975.                 <ul class="cell1">
  1976.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1977.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1978.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1979.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1980.                 </ul>
  1981.  
  1982.                 <!--RIGHT DATA-->
  1983.                 <ul class="cell2">
  1984.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1985.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1986.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1987.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1988.                 </ul>
  1989.               </div>
  1990.               <!--biodata-->
  1991.  
  1992.               <div class="biotxt">
  1993.                 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
  1994.                 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
  1995.                 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
  1996.                 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
  1997.                 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
  1998.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1999.               </div>
  2000.               <!--biotxt-->
  2001.  
  2002.             </div>
  2003.             <!--biocontent-->
  2004.  
  2005.           </div>
  2006.           <!--cbio-->
  2007.  
  2008.           <!--CHARACTER IMAGE-->
  2009.           <div class="flavorimg" style="background-image:
  2010.              url('https://placehold.it/200x365');">
  2011.           </div>
  2012.  
  2013.         </div>
  2014.         <!--ccontent-->
  2015.  
  2016.         <div class="timeline">
  2017.           <div class="line"></div>
  2018.  
  2019.           <ul class="titem">
  2020.             <li><span>DATE</span></li>
  2021.             <li><i class="fa fa-star" aria-hidden="true"></i></li>
  2022.             <li><span>EVENT</span></li>
  2023.           </ul>
  2024.  
  2025.           <ul class="titem">
  2026.             <li><span>DATE</span></li>
  2027.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  2028.             <li><span>EVENT</span></li>
  2029.           </ul>
  2030.  
  2031.           <ul class="titem">
  2032.             <li><span>DATE</span></li>
  2033.             <li><i class="fa fa-circle" aria-hidden="true"></i></li>
  2034.             <li><span>EVENT</span></li>
  2035.           </ul>
  2036.  
  2037.         </div>
  2038.         <!--timeline-->
  2039.  
  2040.       </div>
  2041.       <!--ccard-->
  2042.  
  2043.  
  2044.   </div>
  2045.   <!--gallery-track-->
  2046.   </section>
  2047.  
  2048.  
  2049.   </div>
  2050.   <!--container-->
  2051.  
  2052.   <!--DON'T MESS WITH THE SCRIPTS UNLESS YOU KNOW WHAT YOU'RE DOING-->
  2053.   <script type="text/javascript">
  2054.     $(document).ready(function() {
  2055.  
  2056.       /*CCARD COLORS*/
  2057.       $('.ccard').each(function() {
  2058.         var groupClass = $(this).attr('class').split(" ")[1];
  2059.  
  2060.         $(this).find('.cell1').addClass(groupClass);
  2061.         $(this).find('.cell2').addClass(groupClass);
  2062.         $(this).find('.clinks').addClass(groupClass);
  2063.  
  2064.       });
  2065.  
  2066.  
  2067.       /*CARDS*/
  2068.       $('.square').on('click', function(e) {
  2069.  
  2070.         var currentAttrValue = $(this).attr('href');
  2071.         var groupClass = $('.ccard' + currentAttrValue).attr('class').split(" ")[1];
  2072.  
  2073.         $('header').removeClass();
  2074.  
  2075.         window.location.hash = $(this).attr('href');
  2076.         $('.ccard' + currentAttrValue).addClass('active').siblings('.ccard').removeClass('active');
  2077.         $(this).addClass('active').siblings('.square').removeClass('active');
  2078.  
  2079.  
  2080.         /*HEADER GRADIENT*/
  2081.         $('header').addClass(groupClass);
  2082.  
  2083.       });
  2084.  
  2085.       /*FIX LEGEND ON SCROLL*/
  2086.  
  2087.        $(function($) {
  2088.            function fixedLegend() {
  2089.                if ($(window).scrollTop() > 190)
  2090.                    $('footer').css({
  2091.                       'position': 'fixed',
  2092.                       'width': '100%',
  2093.                       'z-index': '3',
  2094.                       'margin': '0 auto',
  2095.                       'left': '0',
  2096.                       'background': 'rgba(255, 255, 255, 0.8)',
  2097.                       'top': '0px'
  2098.                    });
  2099.  
  2100.  
  2101.  
  2102.                else
  2103.                    $('footer').css({
  2104.                       'position': 'relative',
  2105.                       'background': 'rgba(255, 255, 255, 0.0)',
  2106.                       'margin': '20px 0 0 0',
  2107.                       'top': 'auto'
  2108.                    });
  2109.            }
  2110.  
  2111.            $(window).scroll(fixedLegend);
  2112.                fixedLegend();
  2113.            });
  2114.  
  2115.  
  2116.       /*HASH SCRIPT*/
  2117.       var hash = $.trim(window.location.hash);
  2118.       if (hash) {
  2119.         //time out to prevent jumping of div
  2120.         $('.square[href$="' + hash + '"]').trigger('click');
  2121.       }
  2122.  
  2123.     }); //DOCUMENT READY
  2124.   </script>
  2125. </body>
  2126.  
  2127. </html>
Advertisement
Add Comment
Please, Sign In to add comment