nonspace

PAGE #05 :: PHOTON

Aug 1st, 2018
384
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 67.39 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!--PAGE THEME #5: PHOTON 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: #ff9600;
  46.       --g32: #ff9600;
  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.     article#desctxt a, .biocontent a {
  91.         text-decoration: none;
  92.         color: #7a7a7a;
  93.         letter-spacing: 0.5px;
  94.         -webkit-transition: all 0.5s ease;
  95.         -moz-transition: all 0.5s ease;
  96.         -ms-transition: all 0.5s ease;
  97.         transition: all 0.5s ease;
  98.     }
  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.     .clinks a[aria-disabled] {
  401.         color: #a5a5a5;
  402.     }
  403.  
  404.     /*INFO*/
  405.  
  406.     .cell1,
  407.     .cell2 {
  408.       height: auto;
  409.       width: 220px;
  410.       padding: 8px 0 0 0;
  411.       margin: 2px;
  412.       font-size: 12px;
  413.       overflow: hidden;
  414.     }
  415.  
  416.     .cell1 {
  417.       float: left;
  418.     }
  419.  
  420.     .cell2 {
  421.       float: right;
  422.     }
  423.  
  424.     .cell1 ul,
  425.     .cell2 ul {
  426.       margin: 0;
  427.       padding: 0;
  428.     }
  429.  
  430.     .cell1 li:first-child,
  431.     .cell2 li:first-child {
  432.       margin: 0;
  433.     }
  434.  
  435.     .cell1 li,
  436.     .cell2 li {
  437.       list-style-type: none;
  438.       text-align: left;
  439.       color: #fff;
  440.       line-height: 180%;
  441.       margin: 8px 0 0 0;
  442.       padding-left: 0px;
  443.       border-bottom: 1px solid rgb(221, 221, 221);
  444.     }
  445.  
  446.     .cell1 li i,
  447.     .cell2 li i {
  448.       font-style: normal;
  449.       padding: 5px;
  450.       border-radius: 5px;
  451.     }
  452.  
  453.     .cell1 p,
  454.     .cell2 p {
  455.       padding: 0.3px;
  456.     }
  457.  
  458.     .cell1 span,
  459.     .cell2 span {
  460.       color: #000;
  461.       background: #ecedec!important;
  462.       line-height: 186%;
  463.       margin: -1px;
  464.       padding: 0px 15px 0px;
  465.       float: right;
  466.     }
  467.  
  468.     /*ACTIVE STYLES*/
  469.  
  470.     /*CONTENT CARD*/
  471.  
  472.     .ccard.active {
  473.       opacity: 1;
  474.       display: block;
  475.       margin: 0px 0px;
  476.     }
  477.  
  478.     /*CONTENT CARD INNER TABS*/
  479.  
  480.     .ccontent.active,
  481.     .connections.active {
  482.       display: block;
  483.     }
  484.  
  485.     .square.active {
  486.       color: #fff;
  487.       background: #ccc;
  488.     }
  489.  
  490.     /*GROUP COLOURS*/
  491.  
  492.     /*IF YOU WANT GRADIENT COLOURS
  493.       you'll need to uncomment the gradient code. You can either use the already existing colour variables or add different ones.
  494.       Note: for the moz and linear-gradient, as well as opera you will need to write the variable as just --g#.
  495.       For an easy gradient generator, you can head to http://www.colorzilla.com/gradient-editor/*/
  496.  
  497.     /*LEGEND & TRAITS & INFO DATA*/
  498.  
  499.    /*GROUP 1*/
  500.  
  501.    #legend .g1,
  502.    .cell1.g1 li i,
  503.    .cell2.g1 li i,
  504.    .clinks.g1 a:hover {
  505.      background: var(--g1);
  506.       background-image: -webkit-linear-gradient(left, var(--g1) 0%, var(--g12) 100%);
  507.       background-image: -moz-linear-gradient(left, --g1 0%, --g12 100%);
  508.       background-image: -o-linear-gradient(left, --g1 0%, --g12 100%);
  509.       background-image: linear-gradient(to right, --g1 0%, --g12 100%);
  510.     }
  511.  
  512.     /*GROUP 2*/
  513.  
  514.     #legend .g2,
  515.     .cell1.g2 li i,
  516.     .cell2.g2 li i,
  517.     .clinks.g2 a:hover {
  518.       background: var(--g2);
  519.       background-image: -webkit-linear-gradient(left, var(--g2) 0%, var(--g22) 100%);
  520.       background-image: -moz-linear-gradient(left, --g2 0%, --g22 100%);
  521.       background-image: -o-linear-gradient(left, --g2 0%, --g22 100%);
  522.       background-image: linear-gradient(to right, --g2 0%, --g22 100%);
  523.     }
  524.  
  525.     /*GROUP 3*/
  526.  
  527.     #legend .g3,
  528.     .cell1.g3 li i,
  529.     .cell2.g3 li i,
  530.     .clinks.g3 a:hover {
  531.       background: var(--g3);
  532.       background-image: -webkit-linear-gradient(left, var(--g3) 0%, var(--g32) 100%);
  533.       background-image: -moz-linear-gradient(left, --g3 0%, --g32 100%);
  534.       background-image: -o-linear-gradient(left, --g3 0%, --g32 100%);
  535.       background-image: linear-gradient(to right, --g3 0%, --g32 100%);
  536.     }
  537.  
  538.     /*GROUP 4*/
  539.  
  540.     #legend .g4,
  541.     .cell1.g4 li i,
  542.     .cell2.g4 li i,
  543.     .clinks.g4 a:hover {
  544.       background: var(--g4);
  545.       background-image: -webkit-linear-gradient(left, var(--g4) 0%, var(--g42) 100%);
  546.       background-image: -moz-linear-gradient(left, --g4 0%, --g42 100%);
  547.       background-image: -o-linear-gradient(left, --g4 0%, --g42 100%);
  548.       background-image: linear-gradient(to right, --g4 0%, --g42 100%);
  549.     }
  550.  
  551.     /*GROUP 5*/
  552.  
  553.     #legend .g5,
  554.     .cell1.g5 li i,
  555.     .cell2.g5 li i,
  556.     .clinks.g5 a:hover {
  557.       background: var(--g5);
  558.       background-image: -webkit-linear-gradient(left, var(--g5) 0%, var(--g52) 100%);
  559.       background-image: -moz-linear-gradient(left, --g5 0%, --g52 100%);
  560.       background-image: -o-linear-gradient(left, --g5 0%, --g52 100%);
  561.       background-image: linear-gradient(to right, --g5 0%, --g52 100%);
  562.     }
  563.  
  564.     /*GROUP 6*/
  565.  
  566.     #legend .g6,
  567.     .cell1.g6 li i,
  568.     .cell2.g6 li i,
  569.     .clinks.g6 a:hover {
  570.       background: var(--g6);
  571.       background-image: -webkit-linear-gradient(left, var(--g6) 0%, var(--g62) 100%);
  572.       background-image: -moz-linear-gradient(left, --g6 0%, --g62 100%);
  573.       background-image: -o-linear-gradient(left, --g6 0%, --g62 100%);
  574.       background-image: linear-gradient(to right, --g6 0%, --g62 100%);
  575.     }
  576.  
  577.     /*GROUP 7*/
  578.  
  579.     #legend .g7,
  580.     .cell1.g7 li i,
  581.     .cell2.g7 li i,
  582.     .clinks.g7 a:hover {
  583.       background: var(--g7);
  584.       background-image: -webkit-linear-gradient(left, var(--g7) 0%, var(--g72) 100%);
  585.       background-image: -moz-linear-gradient(left, --g7 0%, --g72 100%);
  586.       background-image: -o-linear-gradient(left, --g7 0%, --g72 100%);
  587.       background-image: linear-gradient(to right, --g7 0%, --g72 100%);
  588.     }
  589.  
  590.     /*GROUP 8*/
  591.  
  592.     #legend .g8,
  593.     .cell1.g8 li i,
  594.     .cell2.g8 li i,
  595.     .clinks.g8 a:hover {
  596.       background: var(--g8);
  597.       background-image: -webkit-linear-gradient(left, var(--g8) 0%, var(--g82) 100%);
  598.       background-image: -moz-linear-gradient(left, --g8 0%, --g82 100%);
  599.       background-image: -o-linear-gradient(left, --g8 0%, --g82 100%);
  600.       background-image: linear-gradient(to right, --g8 0%, --g82 100%);
  601.     }
  602.  
  603.     /*GROUP 9*/
  604.  
  605.     #legend .g9,
  606.     .cell1.g9 li i,
  607.     .cell2.g9 li i,
  608.     .clinks.g9 a:hover {
  609.       background: var(--g9);
  610.       background-image: -webkit-linear-gradient(left, var(--g9) 0%, var(--g92) 100%);
  611.       background-image: -moz-linear-gradient(left, --g9 0%, --g92 100%);
  612.       background-image: -o-linear-gradient(left, --g9 0%, --g92 100%);
  613.       background-image: linear-gradient(to right, --g9 0%, --g92 100%);
  614.     }
  615.  
  616.     /*GROUP 5*/
  617.  
  618.     #legend .g10,
  619.     .cell1.g10 li i,
  620.     .cell2.g10 li i,
  621.     .clinks.g10 a:hover {
  622.       background: var(--g10);
  623.       background-image: -webkit-linear-gradient(left, var(--g10) 0%, var(--g102) 100%);
  624.       background-image: -moz-linear-gradient(left, --g10 0%, --g102 100%);
  625.       background-image: -o-linear-gradient(left, --g10 0%, --g102 100%);
  626.       background-image: linear-gradient(to right, --g10 0%, --g102 100%);
  627.     }
  628.  
  629.     /*HEADER GRADIENTS*/
  630.  
  631.     header.g1:after {
  632.       right: 0px;
  633.       height: 5px;
  634.       background: --g1;
  635.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g1) 50%, transparent 80%);
  636.       background-image: -moz-linear-gradient(left, transparent 20%, --g1 50%, transparent 80%);
  637.       background-image: -o-linear-gradient(left, transparent 20%, --g1 50%, transparent 80%);
  638.       background-image: linear-gradient(to right, transparent 20%, --g1 50%, transparent 80%);
  639.     }
  640.  
  641.     header.g2:after {
  642.       right: 0px;
  643.       height: 5px;
  644.       background: --g2;
  645.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g2) 50%, transparent 80%);
  646.       background-image: -moz-linear-gradient(left, transparent 20%, --g2 50%, transparent 80%);
  647.       background-image: -o-linear-gradient(left, transparent 20%, --g2 50%, transparent 80%);
  648.       background-image: linear-gradient(to right, transparent 20%, --g2 50%, transparent 80%);
  649.     }
  650.  
  651.     header.g3:after {
  652.       right: 0px;
  653.       height: 5px;
  654.       background: --g3;
  655.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g3) 50%, transparent 80%);
  656.       background-image: -moz-linear-gradient(left, transparent 20%, --g3 50%, transparent 80%);
  657.       background-image: -o-linear-gradient(left, transparent 20%, --g3 50%, transparent 80%);
  658.       background-image: linear-gradient(to right, transparent 20%, --g3 50%, transparent 80%);
  659.     }
  660.  
  661.     header.g4:after {
  662.       right: 0px;
  663.       height: 5px;
  664.       background: --g4;
  665.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g4) 50%, transparent 80%);
  666.       background-image: -moz-linear-gradient(left, transparent 20%, --g4 50%, transparent 80%);
  667.       background-image: -o-linear-gradient(left, transparent 20%, --g4 50%, transparent 80%);
  668.       background-image: linear-gradient(to right, transparent 20%, --g4 50%, transparent 80%);
  669.     }
  670.  
  671.     header.g5:after {
  672.       right: 0px;
  673.       height: 5px;
  674.       background: --g1;
  675.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g5) 50%, transparent 80%);
  676.       background-image: -moz-linear-gradient(left, transparent 20%, --g5 50%, transparent 80%);
  677.       background-image: -o-linear-gradient(left, transparent 20%, --g5 50%, transparent 80%);
  678.       background-image: linear-gradient(to right, transparent 20%, --g5 50%, transparent 80%);
  679.     }
  680.  
  681.     header.g6:after {
  682.       right: 0px;
  683.       height: 5px;
  684.       background: --g6;
  685.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g6) 50%, transparent 80%);
  686.       background-image: -moz-linear-gradient(left, transparent 20%, --g6 50%, transparent 80%);
  687.       background-image: -o-linear-gradient(left, transparent 20%, --g6 50%, transparent 80%);
  688.       background-image: linear-gradient(to right, transparent 20%, --g6 50%, transparent 80%);
  689.     }
  690.  
  691.     header.g7:after {
  692.       right: 0px;
  693.       height: 5px;
  694.       background: --g7;
  695.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g7) 50%, transparent 80%);
  696.       background-image: -moz-linear-gradient(left, transparent 20%, --g7 50%, transparent 80%);
  697.       background-image: -o-linear-gradient(left, transparent 20%, --g7 50%, transparent 80%);
  698.       background-image: linear-gradient(to right, transparent 20%, --g7 50%, transparent 80%);
  699.     }
  700.  
  701.     header.g8:after {
  702.       right: 0px;
  703.       height: 5px;
  704.       background: --g8;
  705.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g8) 50%, transparent 80%);
  706.       background-image: -moz-linear-gradient(left, transparent 20%, --g8 50%, transparent 80%);
  707.       background-image: -o-linear-gradient(left, transparent 20%, --g8 50%, transparent 80%);
  708.       background-image: linear-gradient(to right, transparent 20%, --g8 50%, transparent 80%);
  709.     }
  710.  
  711.     header.g9:after {
  712.       right: 0px;
  713.       height: 5px;
  714.       background: --g9;
  715.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g9) 50%, transparent 80%);
  716.       background-image: -moz-linear-gradient(left, transparent 20%, --g9 50%, transparent 80%);
  717.       background-image: -o-linear-gradient(left, transparent 20%, --g9 50%, transparent 80%);
  718.       background-image: linear-gradient(to right, transparent 20%, --g9 50%, transparent 80%);
  719.     }
  720.  
  721.     header.g10:after {
  722.       right: 0px;
  723.       height: 5px;
  724.       background: --g10;
  725.       background-image: -webkit-linear-gradient(left, transparent 20%, var(--g10) 50%, transparent 80%);
  726.       background-image: -moz-linear-gradient(left, transparent 20%, --g10 50%, transparent 80%);
  727.       background-image: -o-linear-gradient(left, transparent 20%, --g10 50%, transparent 80%);
  728.       background-image: linear-gradient(to right, transparent 20%, --g10 50%, transparent 80%);
  729.     }
  730.  
  731.  
  732.     /*HOVER STYLES*/
  733.  
  734.     .square:hover {
  735.       cursor: pointer;
  736.     }
  737.  
  738.     .clinks a {
  739.       -webkit-transition: all 0.5s ease;
  740.       -moz-transition: all 0.5s ease;
  741.       -ms-transition: all 0.5s ease;
  742.       transition: all 0.5s ease;
  743.     }
  744.  
  745.     .clinks a:hover {
  746.       color: #fff;
  747.     }
  748.  
  749.     .clinks a[aria-disabled]:hover {
  750.         background: #dbdbdb;
  751.         color: #a5a5a5;
  752.         cursor: default;
  753.     }
  754.  
  755.     .flavorimg:hover {
  756.       -webkit-filter: grayscale(0%);
  757.       filter: grayscale(0%);
  758.     }
  759.  
  760.  
  761.     /*ANIMATION KEYFRAMES*/
  762.  
  763.     @-webkit-keyframes fadeIn {
  764.       0% {
  765.         opacity: 0;
  766.       }
  767.       20% {
  768.         opacity: 0;
  769.       }
  770.       40% {
  771.         opacity: 0.3;
  772.       }
  773.       60% {
  774.         opacity: 0.5;
  775.       }
  776.       80% {
  777.         opacity: 0.9;
  778.       }
  779.       100% {
  780.         opacity: 1;
  781.       }
  782.     }
  783.  
  784.     @keyframes fadeIn {
  785.       0% {
  786.         opacity: 0;
  787.       }
  788.       20% {
  789.         opacity: 0;
  790.       }
  791.       40% {
  792.         opacity: 0.3;
  793.       }
  794.       60% {
  795.         opacity: 0.5;
  796.       }
  797.       80% {
  798.         opacity: 0.9;
  799.       }
  800.       100% {
  801.         opacity: 1;
  802.       }
  803.     }
  804.  
  805.  
  806.     /*SCROLLBAR STYLES*/
  807.  
  808.     ::-webkit-scrollbar {
  809.       width: 5px;
  810.       height: 5px;
  811.     }
  812.  
  813.     ::-webkit-scrollbar-track {
  814.       border-radius: 1px;
  815.       background-color: #f8f8f8;
  816.     }
  817.  
  818.     ::-webkit-scrollbar-thumb {
  819.       border-radius: 1px;
  820.       background-color: #ddd;
  821.     }
  822.  
  823.     .biodata::-webkit-scrollbar-track,
  824.     .biotxt::-webkit-scrollbar-track {
  825.       border-radius: 1px;
  826.       width: 10px!important;
  827.       background: -webkit-linear-gradient(bottom, #ecedee, #eceeec 100%);
  828.     }
  829.  
  830.     .biodata::-webkit-scrollbar-thumb,
  831.     .biotxt::-webkit-scrollbar-thumb {
  832.       border-radius: 1px;
  833.       width: 10px!important;
  834.       background: -webkit-linear-gradient(top, #ddd, #eee 100%);
  835.       /*background: -webkit-linear-gradient(top, #edeeed, #eceeec 100%);          if transparent*/
  836.     }
  837.   </style>
  838. </head>
  839.  
  840. <body>
  841.  
  842.   <div id="container">
  843.  
  844.     <!--HEADER-->
  845.     <header>
  846.  
  847.       <!--TITLE & LINKS-->
  848.       <article id="desc">
  849.         <h1>photon</h1>
  850.  
  851.         <!--HEADER LINKS-->
  852.         <!--enter URL for your about page-->
  853.         <nav>
  854.           <a href="/">
  855.                 <i class="fa fa-home" aria-hidden="true"></i>
  856.                 Home</a>
  857.           <a href="/YOURABOUTPAGE">
  858.                 <i class="fa fa-user" aria-hidden="true"></i>
  859.                 About</a>
  860.           <a href="/ask">
  861.                 <i class="fa fa-envelope" aria-hidden="true"></i>
  862.                 Message</a>
  863.           <!--CREDIT, DON'T CHANGE!!!-->
  864.           <a href="https://nonspace.tumblr.com">
  865.                 <i class="fa fa-copyright" aria-hidden="true"></i>
  866.                 NNSPC</a>
  867.         </nav>
  868.       </article>
  869.  
  870.       <!--DESCRIPTION-->
  871.       <article id="desctxt">
  872.         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <b>dolore magna</b> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim
  873.         ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  874.       </article>
  875.  
  876.     </header>
  877.  
  878.     <footer>
  879.       <div id="legend">
  880.  
  881.         <!--GROUP LEGEND-->
  882.         <!--The 'g#' in the 'square' class sets the color for the group
  883.          (see variables at the top of CSS).
  884.          The data-filter is for sorting on click. You can add several
  885.          groups to a link: group AND group, group OR group etc. You can
  886.          read more here: https://isotope.metafizzy.co/filtering.html-->
  887.  
  888.         <div class="square active" href="#c1">one</div>
  889.         <div class="square" href="#c2">two</div>
  890.         <div class="square" href="#c3">three</div>
  891.         <div class="square" href="#c4">four</div>
  892.         <div class="square" href="#c5">five</div>
  893.         <div class="square" href="#c6">six</div>
  894.         <div class="square" href="#c7">seven</div>
  895.         <div class="square" href="#c8">eight</div>
  896.         <div class="square" href="#c9">nine</div>
  897.         <div class="square" href="#c10">ten</div>
  898.         <!--ADDITIONAL GROUPS
  899.          <div class="square g6" data-filter=".g6">group</div>
  900.          <div class="square g7" data-filter=".g7">group</div>
  901.          <div class="square g8" data-filter=".g8">group</div>
  902.          <div class="square g9" data-filter=".g9">group</div>
  903.          <div class="square g10" data-filter=".g10">group</div>-->
  904.  
  905.       </div>
  906.       <!--legend-->
  907.     </footer>
  908.  
  909.     <!--TABS & TAB LINKS-->
  910.     <!--The href attribute in the .square div is what links you to the
  911.      corresponding ccard (content card).
  912.      You can link to these tabs using the URL
  913.      (http://YOURURL.com/YOURPAGE/#TABNAME) so if you want to change them
  914.      to the character name you need to edit the square href and give the
  915.      right ccard div the same id.
  916.  
  917.      For example:
  918.  
  919.      Your character's name is Musterman.
  920.  
  921.      In the cbox:
  922.          <div class="cbox g1" href="#MUSTERMAN">
  923.          take note to not leave out the hashtag(#)
  924.      In the ccard:
  925.          <div class="ccard" id="MUSTERMAN">
  926.  
  927.  
  928.      <!--CHARACTER CARDS-->
  929.     <section id="gallery">
  930.  
  931.       <div class="ccard g1 active" id="c1">
  932.  
  933.         <div class="ccontent active">
  934.           <div class="cbio">
  935.  
  936.             <div class="headline">
  937.               <h2><span>first</span>last</h2>
  938.  
  939.               <div class="clinks">
  940.                 <!--You can customise these links as much as you like.
  941.                You can find more icons here: http://fontawesome.io/icons/
  942.                Depending on how long your character's name is you may have
  943.                to remove some links or adjust the width for the .clinks
  944.                class
  945.                Links that are currently not active or relevant, you can
  946.                disable by putting aria-disabled="true" within the link tag
  947.                -->
  948.                 <a href="#">
  949.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  950.                 <a href="#">
  951.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  952.                 <a href="#">
  953.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  954.                 <a href="#">
  955.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  956.                 <a href="#">
  957.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  958.                 <a href="#">
  959.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  960.               </div>
  961.               <!--clinks-->
  962.             </div>
  963.             <!--headline-->
  964.  
  965.             <div class="biocontent">
  966.  
  967.               <div class="biodata">
  968.                 <!--LEFT DATA-->
  969.                 <ul class="cell1">
  970.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  971.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  972.                   <li> <i>Age:</i> <span> 00 </span> </li>
  973.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  974.                 </ul>
  975.  
  976.                 <!--RIGHT DATA-->
  977.                 <ul class="cell2">
  978.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  979.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  980.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  981.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  982.                 </ul>
  983.               </div>
  984.               <!--biodata-->
  985.  
  986.               <div class="biotxt">
  987.                 Ut 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
  988.                 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
  989.                 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
  990.                 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
  991.                 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
  992.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  993.               </div>
  994.               <!--biotxt-->
  995.  
  996.             </div>
  997.             <!--biocontent-->
  998.  
  999.           </div>
  1000.           <!--cbio-->
  1001.  
  1002.           <!--CHARACTER IMAGE-->
  1003.           <div class="flavorimg" style="background-image:
  1004.              url('https://placehold.it/200x365');">
  1005.           </div>
  1006.  
  1007.         </div>
  1008.         <!--ccontent-->
  1009.       </div>
  1010.       <!--ccard-->
  1011.  
  1012.  
  1013.       <!--CHARACTER 2-->
  1014.       <div class="ccard g2" id="c2">
  1015.  
  1016.         <div class="ccontent active">
  1017.           <div class="cbio">
  1018.  
  1019.             <div class="headline">
  1020.               <h2><span>first</span>last</h2>
  1021.  
  1022.               <div class="clinks">
  1023.                 <!--You can customise these links as much as you like.
  1024.                You can find more icons here: http://fontawesome.io/icons/
  1025.                Depending on how long your character's name is you may have
  1026.                to remove some links or adjust the width for the .clinks
  1027.                class-->
  1028.                 <a href="#">
  1029.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1030.                 <a href="#">
  1031.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1032.                 <a href="#">
  1033.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1034.                 <a href="#">
  1035.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1036.                 <a href="#">
  1037.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1038.                 <a href="#">
  1039.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1040.               </div>
  1041.               <!--clinks-->
  1042.             </div>
  1043.             <!--headline-->
  1044.  
  1045.             <div class="biocontent">
  1046.  
  1047.               <div class="biodata">
  1048.                 <!--LEFT DATA-->
  1049.                 <ul class="cell1">
  1050.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1051.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1052.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1053.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1054.                 </ul>
  1055.  
  1056.                 <!--RIGHT DATA-->
  1057.                 <ul class="cell2">
  1058.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1059.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1060.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1061.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1062.                 </ul>
  1063.               </div>
  1064.               <!--biodata-->
  1065.  
  1066.               <div class="biotxt">
  1067.                 Ut 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
  1068.                 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
  1069.                 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
  1070.                 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
  1071.                 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
  1072.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1073.               </div>
  1074.               <!--biotxt-->
  1075.  
  1076.             </div>
  1077.             <!--biocontent-->
  1078.  
  1079.           </div>
  1080.           <!--cbio-->
  1081.  
  1082.           <!--CHARACTER IMAGE-->
  1083.           <div class="flavorimg" style="background-image:
  1084.              url('https://placehold.it/200x365');">
  1085.           </div>
  1086.  
  1087.         </div>
  1088.         <!--ccontent-->
  1089.       </div>
  1090.       <!--ccard-->
  1091.  
  1092.  
  1093.  
  1094.       <!--CHARACTER 3-->
  1095.       <div class="ccard g3" id="c3">
  1096.  
  1097.         <div class="ccontent active">
  1098.           <div class="cbio">
  1099.  
  1100.             <div class="headline">
  1101.               <h2><span>first</span>last</h2>
  1102.  
  1103.               <div class="clinks">
  1104.                 <!--You can customise these links as much as you like.
  1105.                You can find more icons here: http://fontawesome.io/icons/
  1106.                Depending on how long your character's name is you may have
  1107.                to remove some links or adjust the width for the .clinks
  1108.                class-->
  1109.                 <a href="#">
  1110.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1111.                 <a href="#">
  1112.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1113.                 <a href="#">
  1114.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1115.                 <a href="#">
  1116.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1117.                 <a href="#">
  1118.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1119.                 <a href="#">
  1120.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1121.               </div>
  1122.               <!--clinks-->
  1123.             </div>
  1124.             <!--headline-->
  1125.  
  1126.             <div class="biocontent">
  1127.  
  1128.               <div class="biodata">
  1129.                 <!--LEFT DATA-->
  1130.                 <ul class="cell1">
  1131.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1132.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1133.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1134.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1135.                 </ul>
  1136.  
  1137.                 <!--RIGHT DATA-->
  1138.                 <ul class="cell2">
  1139.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1140.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1141.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1142.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1143.                 </ul>
  1144.               </div>
  1145.               <!--biodata-->
  1146.  
  1147.               <div class="biotxt">
  1148.                 Ut 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
  1149.                 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
  1150.                 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
  1151.                 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
  1152.                 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
  1153.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1154.               </div>
  1155.               <!--biotxt-->
  1156.  
  1157.             </div>
  1158.             <!--biocontent-->
  1159.  
  1160.           </div>
  1161.           <!--cbio-->
  1162.  
  1163.           <!--CHARACTER IMAGE-->
  1164.           <div class="flavorimg" style="background-image:
  1165.              url('https://placehold.it/200x365');">
  1166.           </div>
  1167.  
  1168.         </div>
  1169.         <!--ccontent-->
  1170.       </div>
  1171.       <!--ccard-->
  1172.  
  1173.  
  1174.       <!--CHARACTER 4-->
  1175.       <div class="ccard g4" id="c4">
  1176.  
  1177.         <div class="ccontent active">
  1178.           <div class="cbio">
  1179.  
  1180.             <div class="headline">
  1181.               <h2><span>first</span>last</h2>
  1182.  
  1183.               <div class="clinks">
  1184.                 <!--You can customise these links as much as you like.
  1185.                You can find more icons here: http://fontawesome.io/icons/
  1186.                Depending on how long your character's name is you may have
  1187.                to remove some links or adjust the width for the .clinks
  1188.                class-->
  1189.                 <a href="#">
  1190.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1191.                 <a href="#">
  1192.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1193.                 <a href="#">
  1194.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1195.                 <a href="#">
  1196.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1197.                 <a href="#">
  1198.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1199.                 <a href="#">
  1200.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1201.               </div>
  1202.               <!--clinks-->
  1203.             </div>
  1204.             <!--headline-->
  1205.  
  1206.             <div class="biocontent">
  1207.  
  1208.               <div class="biodata">
  1209.                 <!--LEFT DATA-->
  1210.                 <ul class="cell1">
  1211.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1212.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1213.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1214.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1215.                 </ul>
  1216.  
  1217.                 <!--RIGHT DATA-->
  1218.                 <ul class="cell2">
  1219.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1220.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1221.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1222.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1223.                 </ul>
  1224.               </div>
  1225.               <!--biodata-->
  1226.  
  1227.               <div class="biotxt">
  1228.                 Ut 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
  1229.                 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
  1230.                 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
  1231.                 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
  1232.                 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
  1233.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1234.               </div>
  1235.               <!--biotxt-->
  1236.  
  1237.             </div>
  1238.             <!--biocontent-->
  1239.  
  1240.           </div>
  1241.           <!--cbio-->
  1242.  
  1243.           <!--CHARACTER IMAGE-->
  1244.           <div class="flavorimg" style="background-image:
  1245.              url('https://placehold.it/200x365');">
  1246.           </div>
  1247.  
  1248.         </div>
  1249.         <!--ccontent-->
  1250.       </div>
  1251.       <!--ccard-->
  1252.  
  1253.  
  1254.  
  1255.       <!--CHARACTER 5-->
  1256.       <div class="ccard g5" id="c5">
  1257.  
  1258.         <div class="ccontent active">
  1259.           <div class="cbio">
  1260.  
  1261.             <div class="headline">
  1262.               <h2><span>first</span>last</h2>
  1263.  
  1264.               <div class="clinks">
  1265.                 <!--You can customise these links as much as you like.
  1266.                You can find more icons here: http://fontawesome.io/icons/
  1267.                Depending on how long your character's name is you may have
  1268.                to remove some links or adjust the width for the .clinks
  1269.                class-->
  1270.                 <a href="#">
  1271.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1272.                 <a href="#">
  1273.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1274.                 <a href="#">
  1275.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1276.                 <a href="#">
  1277.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1278.                 <a href="#">
  1279.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1280.                 <a href="#">
  1281.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1282.               </div>
  1283.               <!--clinks-->
  1284.             </div>
  1285.             <!--headline-->
  1286.  
  1287.             <div class="biocontent">
  1288.  
  1289.               <div class="biodata">
  1290.                 <!--LEFT DATA-->
  1291.                 <ul class="cell1">
  1292.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1293.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1294.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1295.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1296.                 </ul>
  1297.  
  1298.                 <!--RIGHT DATA-->
  1299.                 <ul class="cell2">
  1300.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1301.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1302.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1303.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1304.                 </ul>
  1305.               </div>
  1306.               <!--biodata-->
  1307.  
  1308.               <div class="biotxt">
  1309.                 Ut 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
  1310.                 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
  1311.                 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
  1312.                 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
  1313.                 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
  1314.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1315.               </div>
  1316.               <!--biotxt-->
  1317.  
  1318.             </div>
  1319.             <!--biocontent-->
  1320.  
  1321.           </div>
  1322.           <!--cbio-->
  1323.  
  1324.           <!--CHARACTER IMAGE-->
  1325.           <div class="flavorimg" style="background-image:
  1326.              url('https://placehold.it/200x365');">
  1327.           </div>
  1328.  
  1329.         </div>
  1330.         <!--ccontent-->
  1331.       </div>
  1332.       <!--ccard-->
  1333.  
  1334.  
  1335.  
  1336.       <!--CHARACTER 6-->
  1337.       <div class="ccard g6" id="c6">
  1338.  
  1339.         <div class="ccontent active">
  1340.           <div class="cbio">
  1341.  
  1342.             <div class="headline">
  1343.               <h2><span>first</span>last</h2>
  1344.  
  1345.               <div class="clinks">
  1346.                 <!--You can customise these links as much as you like.
  1347.                You can find more icons here: http://fontawesome.io/icons/
  1348.                Depending on how long your character's name is you may have
  1349.                to remove some links or adjust the width for the .clinks
  1350.                class-->
  1351.                 <a href="#">
  1352.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1353.                 <a href="#">
  1354.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1355.                 <a href="#">
  1356.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1357.                 <a href="#">
  1358.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1359.                 <a href="#">
  1360.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1361.                 <a href="#">
  1362.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1363.               </div>
  1364.               <!--clinks-->
  1365.             </div>
  1366.             <!--headline-->
  1367.  
  1368.             <div class="biocontent">
  1369.  
  1370.               <div class="biodata">
  1371.                 <!--LEFT DATA-->
  1372.                 <ul class="cell1">
  1373.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1374.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1375.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1376.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1377.                 </ul>
  1378.  
  1379.                 <!--RIGHT DATA-->
  1380.                 <ul class="cell2">
  1381.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1382.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1383.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1384.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1385.                 </ul>
  1386.               </div>
  1387.               <!--biodata-->
  1388.  
  1389.               <div class="biotxt">
  1390.                 Ut 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
  1391.                 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
  1392.                 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
  1393.                 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
  1394.                 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
  1395.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1396.               </div>
  1397.               <!--biotxt-->
  1398.  
  1399.             </div>
  1400.             <!--biocontent-->
  1401.  
  1402.           </div>
  1403.           <!--cbio-->
  1404.  
  1405.           <!--CHARACTER IMAGE-->
  1406.           <div class="flavorimg" style="background-image:
  1407.              url('https://placehold.it/200x365');">
  1408.           </div>
  1409.  
  1410.         </div>
  1411.         <!--ccontent-->
  1412.       </div>
  1413.       <!--ccard-->
  1414.  
  1415.  
  1416.  
  1417.       <!--CHARACTER 7-->
  1418.       <div class="ccard g7" id="c7">
  1419.  
  1420.         <div class="ccontent active">
  1421.           <div class="cbio">
  1422.  
  1423.             <div class="headline">
  1424.               <h2><span>first</span>last</h2>
  1425.  
  1426.               <div class="clinks">
  1427.                 <!--You can customise these links as much as you like.
  1428.                You can find more icons here: http://fontawesome.io/icons/
  1429.                Depending on how long your character's name is you may have
  1430.                to remove some links or adjust the width for the .clinks
  1431.                class-->
  1432.                 <a href="#">
  1433.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1434.                 <a href="#">
  1435.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1436.                 <a href="#">
  1437.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1438.                 <a href="#">
  1439.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1440.                 <a href="#">
  1441.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1442.                 <a href="#">
  1443.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1444.               </div>
  1445.               <!--clinks-->
  1446.             </div>
  1447.             <!--headline-->
  1448.  
  1449.             <div class="biocontent">
  1450.  
  1451.               <div class="biodata">
  1452.                 <!--LEFT DATA-->
  1453.                 <ul class="cell1">
  1454.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1455.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1456.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1457.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1458.                 </ul>
  1459.  
  1460.                 <!--RIGHT DATA-->
  1461.                 <ul class="cell2">
  1462.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1463.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1464.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1465.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1466.                 </ul>
  1467.               </div>
  1468.               <!--biodata-->
  1469.  
  1470.               <div class="biotxt">
  1471.                 Ut 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
  1472.                 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
  1473.                 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
  1474.                 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
  1475.                 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
  1476.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1477.               </div>
  1478.               <!--biotxt-->
  1479.  
  1480.             </div>
  1481.             <!--biocontent-->
  1482.  
  1483.           </div>
  1484.           <!--cbio-->
  1485.  
  1486.           <!--CHARACTER IMAGE-->
  1487.           <div class="flavorimg" style="background-image:
  1488.              url('https://placehold.it/200x365');">
  1489.           </div>
  1490.  
  1491.         </div>
  1492.         <!--ccontent-->
  1493.       </div>
  1494.       <!--ccard-->
  1495.  
  1496.  
  1497.  
  1498.       <!--CHARACTER 8-->
  1499.       <div class="ccard g8" id="c8">
  1500.  
  1501.         <div class="ccontent active">
  1502.           <div class="cbio">
  1503.  
  1504.             <div class="headline">
  1505.               <h2><span>first</span>last</h2>
  1506.  
  1507.               <div class="clinks">
  1508.                 <!--You can customise these links as much as you like.
  1509.                You can find more icons here: http://fontawesome.io/icons/
  1510.                Depending on how long your character's name is you may have
  1511.                to remove some links or adjust the width for the .clinks
  1512.                class-->
  1513.                 <a href="#">
  1514.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1515.                 <a href="#">
  1516.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1517.                 <a href="#">
  1518.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1519.                 <a href="#">
  1520.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1521.                 <a href="#">
  1522.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1523.                 <a href="#">
  1524.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1525.               </div>
  1526.               <!--clinks-->
  1527.             </div>
  1528.             <!--headline-->
  1529.  
  1530.             <div class="biocontent">
  1531.  
  1532.               <div class="biodata">
  1533.                 <!--LEFT DATA-->
  1534.                 <ul class="cell1">
  1535.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1536.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1537.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1538.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1539.                 </ul>
  1540.  
  1541.                 <!--RIGHT DATA-->
  1542.                 <ul class="cell2">
  1543.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1544.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1545.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1546.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1547.                 </ul>
  1548.               </div>
  1549.               <!--biodata-->
  1550.  
  1551.               <div class="biotxt">
  1552.                 Ut 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
  1553.                 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
  1554.                 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
  1555.                 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
  1556.                 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
  1557.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1558.               </div>
  1559.               <!--biotxt-->
  1560.  
  1561.             </div>
  1562.             <!--biocontent-->
  1563.  
  1564.           </div>
  1565.           <!--cbio-->
  1566.  
  1567.           <!--CHARACTER IMAGE-->
  1568.           <div class="flavorimg" style="background-image:
  1569.              url('https://placehold.it/200x365');">
  1570.           </div>
  1571.  
  1572.         </div>
  1573.         <!--ccontent-->
  1574.       </div>
  1575.       <!--ccard-->
  1576.  
  1577.  
  1578.  
  1579.       <!--CHARACTER 9-->
  1580.       <div class="ccard g9" id="c9">
  1581.  
  1582.         <div class="ccontent active">
  1583.           <div class="cbio">
  1584.  
  1585.             <div class="headline">
  1586.               <h2><span>first</span>last</h2>
  1587.  
  1588.               <div class="clinks">
  1589.                 <!--You can customise these links as much as you like.
  1590.                You can find more icons here: http://fontawesome.io/icons/
  1591.                Depending on how long your character's name is you may have
  1592.                to remove some links or adjust the width for the .clinks
  1593.                class-->
  1594.                 <a href="#">
  1595.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1596.                 <a href="#">
  1597.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1598.                 <a href="#">
  1599.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1600.                 <a href="#">
  1601.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1602.                 <a href="#">
  1603.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1604.                 <a href="#">
  1605.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1606.               </div>
  1607.               <!--clinks-->
  1608.             </div>
  1609.             <!--headline-->
  1610.  
  1611.             <div class="biocontent">
  1612.  
  1613.               <div class="biodata">
  1614.                 <!--LEFT DATA-->
  1615.                 <ul class="cell1">
  1616.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1617.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1618.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1619.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1620.                 </ul>
  1621.  
  1622.                 <!--RIGHT DATA-->
  1623.                 <ul class="cell2">
  1624.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1625.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1626.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1627.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1628.                 </ul>
  1629.               </div>
  1630.               <!--biodata-->
  1631.  
  1632.               <div class="biotxt">
  1633.                 Ut 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
  1634.                 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
  1635.                 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
  1636.                 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
  1637.                 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
  1638.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1639.               </div>
  1640.               <!--biotxt-->
  1641.  
  1642.             </div>
  1643.             <!--biocontent-->
  1644.  
  1645.           </div>
  1646.           <!--cbio-->
  1647.  
  1648.           <!--CHARACTER IMAGE-->
  1649.           <div class="flavorimg" style="background-image:
  1650.              url('https://placehold.it/200x365');">
  1651.           </div>
  1652.  
  1653.         </div>
  1654.         <!--ccontent-->
  1655.       </div>
  1656.       <!--ccard-->
  1657.  
  1658.  
  1659.  
  1660.       <!--CHARACTER 10-->
  1661.       <div class="ccard g10" id="c10">
  1662.  
  1663.         <div class="ccontent active">
  1664.           <div class="cbio">
  1665.  
  1666.             <div class="headline">
  1667.               <h2><span>first</span>last</h2>
  1668.  
  1669.               <div class="clinks">
  1670.                 <!--You can customise these links as much as you like.
  1671.                You can find more icons here: http://fontawesome.io/icons/
  1672.                Depending on how long your character's name is you may have
  1673.                to remove some links or adjust the width for the .clinks
  1674.                class-->
  1675.                 <a href="#">
  1676.                     <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1677.                 <a href="#">
  1678.                     <i class="fa fa-book" aria-hidden="true"></i></a>
  1679.                 <a href="#">
  1680.                     <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1681.                 <a href="#">
  1682.                     <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1683.                 <a href="#">
  1684.                     <i class="fa fa-music" aria-hidden="true"></i></a>
  1685.                 <a href="#">
  1686.                     <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1687.               </div>
  1688.               <!--clinks-->
  1689.             </div>
  1690.             <!--headline-->
  1691.  
  1692.             <div class="biocontent">
  1693.  
  1694.               <div class="biodata">
  1695.                 <!--LEFT DATA-->
  1696.                 <ul class="cell1">
  1697.                   <li> <i>Full name:</i> <span> First Last </span> </li>
  1698.                   <li> <i>Nickname:</i> <span> Nick </span> </li>
  1699.                   <li> <i>Age:</i> <span> 00 </span> </li>
  1700.                   <li> <i>D.o.B:</i> <span> 00 Month </span> </li>
  1701.                 </ul>
  1702.  
  1703.                 <!--RIGHT DATA-->
  1704.                 <ul class="cell2">
  1705.                   <li> <i>Occupation:</i> <span> Occupation </span> </li>
  1706.                   <li> <i>Nationality:</i><span> Nation </span> </li>
  1707.                   <li> <i>Residence:</i> <span> Unkown </span> </li>
  1708.                   <li> <i>Affiliation:</i><span> Unknown </span> </li>
  1709.                 </ul>
  1710.               </div>
  1711.               <!--biodata-->
  1712.  
  1713.               <div class="biotxt">
  1714.                 Ut 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
  1715.                 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
  1716.                 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
  1717.                 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
  1718.                 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
  1719.                 consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1720.               </div>
  1721.               <!--biotxt-->
  1722.  
  1723.             </div>
  1724.             <!--biocontent-->
  1725.  
  1726.           </div>
  1727.           <!--cbio-->
  1728.  
  1729.           <!--CHARACTER IMAGE-->
  1730.           <div class="flavorimg" style="background-image:
  1731.              url('https://placehold.it/200x365');">
  1732.           </div>
  1733.  
  1734.         </div>
  1735.         <!--ccontent-->
  1736.       </div>
  1737.       <!--ccard-->
  1738.  
  1739.  
  1740.   </div>
  1741.   <!--gallery-track-->
  1742.   </section>
  1743.  
  1744.  
  1745.   </div>
  1746.   <!--container-->
  1747.  
  1748.   <!--DON'T MESS WITH THE SCRIPTS UNLESS YOU KNOW WHAT YOU'RE DOING-->
  1749.   <script type="text/javascript">
  1750.     $(document).ready(function() {
  1751.  
  1752.       /*CCARD COLORS*/
  1753.       $('.ccard').each(function() {
  1754.         var groupClass = $(this).attr('class').split(" ")[1];
  1755.  
  1756.         $(this).find('.cell1').addClass(groupClass);
  1757.         $(this).find('.cell2').addClass(groupClass);
  1758.         $(this).find('.clinks').addClass(groupClass);
  1759.  
  1760.       });
  1761.  
  1762.  
  1763.       /*CARDS*/
  1764.       $('.square').on('click', function(e) {
  1765.  
  1766.         var currentAttrValue = $(this).attr('href');
  1767.         var groupClass = $('.ccard' + currentAttrValue).attr('class').split(" ")[1];
  1768.  
  1769.         $('header').removeClass();
  1770.  
  1771.         window.location.hash = $(this).attr('href');
  1772.         $('.ccard' + currentAttrValue).addClass('active').siblings('.ccard').removeClass('active');
  1773.         $(this).addClass('active').siblings('.square').removeClass('active');
  1774.  
  1775.  
  1776.         /*HEADER GRADIENT*/
  1777.         $('header').addClass(groupClass);
  1778.  
  1779.       });
  1780.  
  1781.       /*FIX LEGEND ON SCROLL*/
  1782.  
  1783.        $(function($) {
  1784.            function fixedLegend() {
  1785.                if ($(window).scrollTop() > 190)
  1786.                    $('footer').css({
  1787.                       'position': 'fixed',
  1788.                       'width': '100%',
  1789.                       'z-index': '3',
  1790.                       'margin': '0 auto',
  1791.                       'left': '0',
  1792.                       'background': 'rgba(255, 255, 255, 0.8)',
  1793.                       'top': '0px'
  1794.                    });
  1795.  
  1796.  
  1797.  
  1798.                else
  1799.                    $('footer').css({
  1800.                       'position': 'relative',
  1801.                       'background': 'rgba(255, 255, 255, 0.0)',
  1802.                       'margin': '20px 0 0 0',
  1803.                       'top': 'auto'
  1804.                    });
  1805.            }
  1806.  
  1807.            $(window).scroll(fixedLegend);
  1808.                fixedLegend();
  1809.            });
  1810.  
  1811.  
  1812.       /*HASH SCRIPT*/
  1813.       var hash = $.trim(window.location.hash);
  1814.       if (hash) {
  1815.         //time out to prevent jumping of div
  1816.         $('.square[href$="' + hash + '"]').trigger('click');
  1817.       }
  1818.  
  1819.     }); //DOCUMENT READY
  1820.   </script>
  1821. </body>
  1822.  
  1823. </html>
Advertisement
Add Comment
Please, Sign In to add comment