nonspace

PAGE #06 :: CAUTERIZE

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