nonspace

PAGE #08 :: DEJA VU

Dec 17th, 2018
5,144
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 38.60 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!--PAGE THEME #08: DEJA VU by @nonspace.
  4.  Don't steal.
  5.  Don't claim as your own.
  6.  Don't use as base code.
  7.  Editing for personal use is fine!-->
  8.  
  9. <html>
  10. <head>
  11.   <meta charset="utf-8">
  12.   <meta name="viewport" content="width=device-width">
  13.   <link rel="icon" type="image/png" href="{Favicon}">
  14.   <title>{Title}</title>
  15.  
  16.   <!--FONTS-->
  17.   <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  18.   <link href="https://fonts.googleapis.com/css?family=Chivo:400,400i,700|Playfair+Display:400,400i,700,700i|Roboto+Slab:400,700|Source+Code+Pro:400,700&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  19.  
  20.   <!--FONT AWESOME-->
  21.   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" crossorigin="anonymous">
  22.  
  23.   <!--JQUERY-->
  24.   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  25.  
  26.   <!--You can find all color settings at the beginning of the style tag.
  27.  All of the colors and some other details are changeable through this    
  28.  variables.
  29.  Hopefully that makes it easier to customise!
  30.  
  31.  If you want individual colors per tab/character you will need to
  32.  enable it below in "Color per tab toggle". This is disabled by default.
  33.  
  34.  To add more tabs:
  35.    1. Copy/paste a new entry within the navigation.
  36.       I've marked what you need to copy. You can search for "Copy here".          Change the 'data-tab' to #tab-x (x being a number not used before,
  37.       e.g. tab-6)
  38.    2. Copy/paste a new tab. Important! Make sure your new tab does NOT have        the 'current' class; change its ID to tab-x (see above
  39.       (they must match!!) e.g. tab-6),
  40.  
  41.  -->
  42.  
  43.   <!--COLOR PER TAB TOGGLE-->
  44.   <script type="text/javascript">
  45.     /*This lets you enable/disable different colors per tab.
  46.       true = enabled, false =disabled*/
  47.     var colorPerTab = false;
  48.     /*To turn the image gallery into connection popups
  49.     IMPORTANT: The popups (in the code) need to be in the same order
  50.     as the corresponding gallery image otherwise it will open the
  51.     wrong one! */
  52.     var connectionPopup = false;
  53.   </script>
  54.   <style>
  55. /*SETTINGS & COLORS*/
  56. :root {
  57.  /*colors*/
  58.  --accentColorOne: #FF4B2B;
  59.   --accentColorTwo: #FF416C;
  60.  
  61.   /*color per tab if enabled above*/
  62.   --accentColorOne-1: #FFF;
  63.   --accentColorTwo-1: #FFF;
  64.   --accentColorOne-2: #FFF;
  65.   --accentColorTwo-2: #FFF;
  66.   --accentColorOne-3: #FFF;
  67.   --accentColorTwo-3: #FFF;
  68.   --accentColorOne-4: #FFF;
  69.   --accentColorTwo-4: #FFF;
  70.   --accentColorOne-5: #FFF;
  71.   --accentColorTwo-5: #FFF;
  72.  
  73.   --colorOne: #1e1e1e;
  74.   --colorTwo: #111;
  75.   --fontColor: #1e1e1e;
  76.   --borderColor: #bbb;
  77.  
  78.   /*navigation  sidebar*/
  79.   --sidebar: #1e1e1e;
  80.   --sidebarFont: #fff;
  81.   --sidebarSubtitle: #999;
  82.   --characterSelection: #222;
  83.   --activeCharacter: #f8f8f8;
  84.  
  85.   /*Link bar*/
  86.   --barLinks: #fff;
  87.  
  88.   /*tab content*/
  89.   --textColor: #1e1e1e;
  90.   --detailBackground: #eee;
  91.   --cardBackground: #fff;
  92.  
  93.   /*misc*/
  94.   --whiteHeadline: #fff;
  95.   --fontOne: 'Montserrat';
  96.   --fontTwo: 'Chivo';
  97.   --sidebarPrefix: 'x ';
  98.   --gallery: 100px; /*to disable gallery on all tabs set to 0*/
  99.   --closeX: #fff;
  100.   --scrollbar: #f8f8f8;
  101.   --credit: #555;
  102.   --creditLink: #ccc;
  103.  
  104.   /*status*/
  105.   /*by adding active, other or closed as a class to the
  106.     nav li you can change the color of the right border.
  107.     e.g. to indicate the status of the item*/
  108.   --active: #36b276;
  109.   --other: #ffab33;
  110.   --closed: #dd4b39;
  111. }
  112.  
  113. nav ul li.active {
  114.   border-color: var(--active);
  115. }
  116. nav ul li.other {
  117.   border-color: var(--other);
  118. }
  119. nav ul li.closed {
  120.   border-color: var(--closed);
  121. }
  122.  
  123. /*GENERAL*/
  124. *{
  125.   box-sizing: border-box;
  126.   padding: 0;
  127.   margin: 0;
  128.   -webkit-font-smoothing: antialiased;
  129.   -moz-osx-font-smoothing: grayscale;
  130.   text-rendering: optimizeLegibility;
  131. }
  132.  
  133. body {
  134.   font-family: var(--fontOne);
  135.   color: var(--fontColor);
  136. }
  137.  
  138. .chivo-dark {
  139.   font-family: var(--fontTwo);
  140.   text-transform: uppercase;
  141.   background: #111;
  142.   color: var(--whiteHeadline);
  143. }
  144.  
  145. /*titles*/
  146. h2, h3 {
  147.   font-weight: normal;
  148.   letter-spacing: 4px;
  149.   font-size: 16px;
  150.   text-align: center;
  151.   padding: 20px;
  152. }
  153.  
  154. h2 {
  155.   font-size: 18px;
  156.   border-bottom: 5px solid #222;
  157. }
  158.  
  159. .content h3 {
  160.   background: none;
  161.   color: var(--fontColor);
  162.   text-align: left;
  163.   padding: 0 20px 0 0;
  164. }
  165.  
  166.  
  167. /*LAYOUT*/
  168. #wrapper {
  169.   position: relative;
  170.   height: 100vh;
  171.   width: 100vw;
  172.   display: flex;
  173.   overflow-y: hidden;
  174. }
  175.  
  176. nav {
  177.   background: var(--sidebar);
  178.   color: var(--sidebarFont);
  179.   font-size: 16px;
  180.   width: 250px;
  181.   min-width: 250px;
  182.   overflow-y: auto;
  183.   padding-bottom: 80px;
  184. }
  185.  
  186. /*menu button*/
  187. #close {
  188.   position: absolute;
  189.   top: 0;
  190.   left: 245px;
  191.   color: var(--fontColor);
  192.   padding: 10px 20px;
  193.   background: #fff;
  194.   font-size: 28px;
  195.   cursor: pointer;
  196.   z-index: 999;
  197. }
  198.  
  199. #close:before {
  200.   position: relative;
  201.   font-family: "Font Awesome 5 Free";
  202.   font-weight: 900;
  203.   content: "\f00d";
  204. }
  205.  
  206. #close.x {
  207.   background: none;
  208.   color: var(--closeX);
  209. }
  210.  
  211. #close.x:before {
  212.   font-family: "Font Awesome 5 Free";
  213.   font-weight: 900;
  214.   content: "\f054";
  215. }
  216.  
  217. nav h2 {
  218.     position: relative;
  219.     z-index: 99;
  220. }
  221.  
  222. /*navigation*/
  223. nav ul {
  224.   padding-top: 65px;
  225.   position: absolute;
  226.   width: 335px;
  227.   top: 0px;
  228.   height: 100%;
  229.   overflow-y: auto;
  230.   padding-bottom: 40px;
  231.   z-index: 3;
  232. }
  233.  
  234. nav ul::-webkit-scrollbar {
  235.   position: relative;
  236.   margin-top: -65px;
  237.   width: 5px;
  238.   height: 8px;
  239.   background-color: var(--scrollbar);
  240. }
  241.  
  242. nav ul::-webkit-scrollbar-thumb {
  243.   background: var(-accentColorOne);
  244.   background: -webkit-linear-gradient(to bottom, var(--accentColorOne), var(--accentColorTwo));  /* Chrome 10-25, Safari 5.1-6 */
  245.   background: linear-gradient(to bottom, var(--accentColorOne), var(--accentColorTwo)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  246. }
  247.  
  248. nav ul li {
  249.   list-style-type: none;
  250.   background: #222;
  251.   display: flex;
  252.   padding: 0 0px;
  253.   width: 250px;
  254.   height: 60px;
  255.   margin: 10px 0;
  256.   border-right: 5px solid var(--sidebar);
  257. }
  258.  
  259. nav ul li span:before, .headline ul li:before {
  260.   content: var(--sidebarPrefix);
  261.   text-transform: lowercase;
  262. }
  263.  
  264. /*current list item*/
  265. nav ul li.current, nav ul li:hover {
  266.   position: relative;
  267.   background: #f8f8f8;
  268.   color: var(--fontColor);
  269.   cursor: pointer;
  270.   transform: scale(1.03,1.05);
  271.   transform-origin: left;
  272.   border: none;
  273. }
  274.  
  275. nav ul li img {
  276.   height: 60px;
  277.   width: 60px;
  278.   object-fit: cover;
  279.   filter: grayscale(100%);
  280. }
  281.  
  282. nav ul li div {
  283.   padding: 0 10px;
  284.   align-self: center;
  285. }
  286.  
  287. nav ul li span {
  288.   display: block;
  289.   font-style: italic;
  290.   color: var(--sidebarSubtitle);
  291.   font-size: 14px;
  292. }
  293.  
  294. main {
  295.   position: relative;
  296.   background: #f8f8f8;
  297.   flex: 1;
  298. }
  299.  
  300. /*tab*/
  301. .tab {
  302.   position: relative;
  303.   width: 100%;
  304.   height: 100%;
  305.   display: none;
  306.   -webkit-animation-duration: 0.8s;
  307.   animation-name: fadeIn;
  308.   animation-duration: 0.8s;
  309. }
  310.  
  311. .tab.current {
  312.   display: flex;
  313. }
  314.  
  315. /*tab link bar*/
  316. .bar {
  317.   position: relative;
  318.   width: 80px;
  319.   height: 100%;
  320.   background: #FF416C;  /* fallback for old browsers */
  321.   background: -webkit-linear-gradient(to bottom, var(--accentColorOne), var(--accentColorTwo));  /* Chrome 10-25, Safari 5.1-6 */
  322.   background: linear-gradient(to bottom, var(--accentColorOne), var(--accentColorTwo)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  323.   display: flex;
  324.   flex-direction: column;
  325. }
  326.  
  327. .bar-links {
  328.   position: relative;
  329.   flex: 2;
  330.   margin: 80px auto 10px;
  331.   z-index: 4;
  332. }
  333.  
  334. .bar-links li {
  335.   list-style-type: none;
  336.   padding-bottom: 20px;
  337. }
  338.  
  339. .bar-links li a {
  340.   color: var(--barLinks);
  341.   font-size: 21px;
  342. }
  343.  
  344. .bar-bottom {
  345.   position: relative;
  346.   flex: 1;
  347.   text-align: center;
  348.   color: var(--barLinks);
  349.   font-size: 12px;
  350.   margin: 20px auto 20px;
  351. }
  352.  
  353. .rotate {
  354.   position: absolute;
  355.   bottom: 0;
  356.   font-family: var(--fontTwo);
  357.   letter-spacing: 4px;
  358.   text-transform: uppercase;
  359.   display: block;
  360.   width: 100%;
  361.   transform: rotate(-90deg);
  362. }
  363.  
  364. /*detail bar*/
  365. .stats {
  366.   position: relative;
  367.   width: 250px;
  368.   height: 100%;
  369.   display: flex;
  370.   flex-direction: column;
  371.   z-index: 2;
  372. }
  373.  
  374. .stats span {
  375.     text-align: right;
  376. }
  377.  
  378. .picture {
  379.   position: relative;
  380.   height: 250px;
  381. }
  382.  
  383. .picture img {
  384.   object-fit: cover;
  385.   height: 250px;
  386.   width: 250px;
  387. }
  388.  
  389. .details {
  390.   position: relative;
  391.   background: var(--detailBackground);
  392.   flex: 1;
  393.   overflow: hidden;
  394. }
  395.  
  396. .details ul {
  397.   padding: 10px 20px;
  398.   height: 90%;
  399.   overflow: auto;
  400. }
  401.  
  402. .details ul li {
  403.   display: flex;
  404.   align-items: center;
  405.   justify-content: space-between;
  406.   padding: 8px 0px;
  407.   border-bottom: 1px dashed #1e1e1e;
  408. }
  409.  
  410. .details ul li:last-child {
  411.   border-bottom: none;
  412. }
  413.  
  414. .details i {
  415.   font-family: var(--fontTwo);
  416.   font-style: normal;
  417.   text-transform: uppercase;
  418.   font-size: 15px;
  419.   width: 80px;
  420.   word-break: break-word;
  421. }
  422.  
  423. /*inner tab content*/
  424. .info {
  425.   position: relative;
  426.   background: var(--cardBackground);
  427.   height: 600px;
  428.   max-width: 950px;
  429.   align-self: center;
  430.   flex: 1;
  431.   display: flex;
  432.   overflow: hidden;
  433.   margin: auto 0;
  434. }
  435.  
  436. .content {
  437.   position: relative;
  438.   flex: 1;
  439.   display: flex;
  440.   padding: 25px 40px;
  441.   flex-direction: column;
  442. }
  443.  
  444. .row-1, .row-2 {
  445.   position: relative;
  446.   display: flex;
  447.   padding: 15px 0;
  448.   flex: 1;
  449.   overflow: hidden;
  450.   align-items: center;
  451. }
  452.  
  453. .row-1 {
  454.   border-bottom: 1px dashed var(--borderColor);
  455. }
  456.  
  457. .headline {
  458.   min-width: 150px;
  459.   word-break: break-word;
  460. }
  461.  
  462. .headline ul {
  463.   margin: 15px 0px;
  464. }
  465.  
  466. .headline li {
  467.   list-style-type: none;
  468.   padding: 2px;
  469.   margin: 3px;
  470.   font-size: 12px;
  471.   width: auto;
  472.   letter-spacing: 2px;
  473. }
  474.  
  475. .text {
  476.   position: relative;
  477.   display: flex;
  478.   align-items: baseline;
  479.   height: 100%;
  480.   padding: 0 0px 10px 0px;
  481. }
  482.  
  483. .text .txt {
  484.   position: relative;
  485.   overflow-y: auto;
  486.   height: 100%;
  487.   line-height: 150%;
  488. }
  489.  
  490. .text .txt p {
  491.   margin: 10px 0;
  492. }
  493.    
  494. .quote, .bubbles {
  495.   margin: auto;
  496. }
  497.  
  498. .quote {
  499.   position: relative;
  500.   flex: 1;
  501.   font-family: 'Playfair Display';
  502.   font-size: 28px;
  503.   line-height: 100%;
  504.   font-style: italic;
  505.   color: var(--fontColor)
  506.   padding: 10px 0px 10px 25px;
  507.   overflow-y: auto;
  508.   overflow-x: hidden;
  509.   height: 100%;
  510. }
  511.  
  512. .quote span {
  513.   display: block;
  514.   text-align: right;
  515.   font-style: normal;
  516.   font-size: 13px;
  517.   font-family: var(--fontTwo);
  518.   margin-top: 8px;
  519.   text-transform: uppercase;
  520.   color: var(--fontColor);
  521. }
  522.  
  523. .bubbles {
  524.   flex: 1;
  525.   padding: 10px 20px 10px 0px;
  526.   border-right: 1px dashed var(--borderColor);
  527.   height: 100%;
  528. }
  529.  
  530. .bubbles ul {
  531.   list-style-type: none;
  532.   height: 100%;
  533.   overflow-y: auto;
  534. }
  535.  
  536. .bubbles ul li {
  537.   display: inline-block;
  538.   word-break: break-all;
  539.   font-family: var(--fontTwo);
  540.   font-size: 14px;
  541.   text-transform: uppercase;
  542.   letter-spacing: 0px;
  543.   color: var(--barLinks);
  544.   width: auto;
  545.   padding: 5px;
  546.   margin: 5px 2.5px 5px;
  547.   background: var(--accentColorOne);  /* fallback for old browsers */
  548.   background: -webkit-linear-gradient(to right, var(--accentColorOne), var(--accentColorTwo));  /* Chrome 10-25, Safari 5.1-6 */
  549.   background: linear-gradient(to right, var(--accentColorOne), var(--accentColorTwo)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  550. }
  551.  
  552. .gallery {
  553.   width: var(--gallery);
  554.   overflow: auto;
  555. }
  556.  
  557. .gallery ul {
  558.   display: flex;
  559.   flex-direction: column;
  560. }
  561.  
  562. .gallery ul li {
  563.   list-style-type: none;
  564.   line-height: 0;
  565.   font-size: 0;
  566.   flex: 1;
  567.   background: var(--colorTwo);
  568.   height: 100px;
  569. }
  570.  
  571. .gallery li img {
  572.   width: 100px;
  573.   height: 100px;
  574.   object-fit: cover;
  575.   filter: grayscale(100%);
  576. }
  577.  
  578. .side-title {
  579.   background: var(--sidebar);
  580.   color: var(--whiteHeadline);
  581.   height: 600px;
  582. }
  583.  
  584. .side-title .rotate {
  585.   margin: 50px auto 50px;
  586. }
  587.  
  588. #credit {
  589.   position: absolute;
  590.   bottom: 0;
  591.   width: 250px;
  592.   text-align: center;
  593.   padding: 15px;
  594.   font-size: 10px;
  595.   letter-spacing: 1px;
  596.   color: var(--credit);
  597.   z-index: 10;
  598. }
  599.  
  600. #credit a {
  601.   color: var(--creditLink);
  602.   text-decoration: none;
  603. }
  604.  
  605. /*transitions*/
  606. nav ul li, nav, #close {
  607.   -webkit-transition: all 0.5s ease;
  608.   -moz-transition: all 0.5s ease;
  609.   -ms-transition: all 0.5s ease;
  610.   transition: all 0.5s ease;
  611. }
  612.  
  613. /*shadows*/
  614. .stats, .info, .bar, #close {
  615.   -webkit-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
  616.   -moz-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
  617.   box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
  618. }
  619. nav {
  620.   -webkit-box-shadow: inset 0px 0px 53px -17px rgba(0,0,0,1);
  621.   -moz-box-shadow: inset 0px 0px 53px -17px rgba(0,0,0,1);
  622.   box-shadow: inset 0px 0px 53px -17px rgba(0,0,0,1);
  623. }
  624.  
  625. /*ANIMATION KEYFRAMES*/
  626. @-webkit-keyframes fadeIn  {
  627.   0% { opacity: 0; }
  628.   20% { opacity: 0; }
  629.   40% { opacity: 0.3; }
  630.   60% { opacity: 0.5; }
  631.   80% { opacity: 0.9; }
  632.   100% { opacity: 1; }
  633. }
  634. @keyframes fadeIn {
  635.   0% { opacity: 0; }
  636.   20% { opacity: 0; }
  637.   40% { opacity: 0.3; }
  638.   60% { opacity: 0.5; }
  639.   80% { opacity: 0.9; }
  640.   100% { opacity: 1; }
  641. }
  642.  
  643. /*POPUP*/
  644. .popup {
  645.   width: 100%;
  646.   height: 100%;
  647.   background: rgba(0,0,0,0.5);
  648.   position: fixed;
  649.   z-index: 999;
  650.   top: 0;
  651.   bottom: 0;
  652.   display: none;
  653. }
  654.  
  655. .popup-inner {
  656.   position: relative;
  657.   width: 500px;
  658.   height: 280px;
  659.   display: flex;
  660.   background: var(--cardBackground);
  661.   color: var(--textColor);
  662.   margin: auto;
  663.   border: 10px solid rgba( var(--colorTriangle),0.5);
  664.   -webkit-background-clip: padding-box; /* for Safari */
  665.   background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
  666. }
  667.  
  668. .popup-inner img {
  669.   width: 200px;
  670.   height: 100%;
  671.   filter: grayscale(0);
  672.   object-fit: cover;
  673.   o-object-fit: cover;
  674. }
  675.  
  676. .con-desc {
  677.   overflow: hidden;
  678.   border-bottom: 25px solid var(--cardBackground);
  679. }
  680.  
  681. .con-text {
  682.   margin: 25px;
  683.   height: 100%;
  684.   overflow-y: auto;
  685.   margin-bottom: 25px;
  686. }
  687.   </style>
  688.  
  689.   <!--MOBILE STYLES-->
  690.   <link rel="stylesheet" type="text/css" href="https://drive.google.com/uc?export=view&id=1YhHjX9QD1fzQ03jjOrSqN1oTWJOAcyy3" />
  691.  
  692. </head>
  693. <body>
  694.   <div id="wrapper">
  695.     <nav class="hidden">
  696.       <span id="close"></span>
  697.       <h2 class="chivo-dark">Characters</h2>
  698.       <ul>
  699.         <li class="current" data-tab="#tab-1">
  700.           <img src="https://images.pexels.com/photos/702350/pexels-photo-702350.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
  701.           <div>
  702.             Character Name
  703.             <span>Subtitle</span>
  704.           </div>
  705.         </li>
  706.         <!--COPY HERE-->
  707.         <li class="" data-tab="#tab-2">
  708.           <img src="https://images.pexels.com/photos/1670646/pexels-photo-1670646.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
  709.           <div>
  710.             Character Name
  711.             <span>Subtitle</span>
  712.           </div>
  713.         </li>
  714.         <!--TO HERE-->
  715.         <li class="" data-tab="#tab-3">
  716.           <img src="https://images.pexels.com/photos/1674730/pexels-photo-1674730.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
  717.           <div>
  718.             Character Name
  719.             <span>Subtitle</span>
  720.           </div>
  721.         </li>
  722.         <li data-tab="#tab-4">
  723.           <img src="https://images.pexels.com/photos/1672548/pexels-photo-1672548.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
  724.           <div>
  725.             Character Name
  726.             <span>Subtitle</span>
  727.           </div>
  728.         </li>
  729.         <li data-tab="#tab-5">
  730.           <img src="https://images.pexels.com/photos/1661857/pexels-photo-1661857.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
  731.           <div>
  732.             Character Name
  733.             <span>Subtitle</span>
  734.           </div>
  735.         </li>
  736.        
  737.  
  738.         <!--PASTE NEW NAV ENTRIES HERE-->
  739.  
  740.       </ul>
  741.       <div id="credit" class="chivo-dark">Design & Code by <a href="https://nonspace.tumblr.com">NNSPC</a></div>
  742.    </nav>
  743.  
  744.    <main>
  745.      <!--TAB ONE-->
  746.      <div class="tab current" id="tab-1">
  747.        <div class="bar">
  748.          <div class="bar-links">
  749.            <ul>
  750.              <li><a href="/tagged/TAG" >
  751.                <i class="fas fa-hashtag" ></i></a></li>
  752.              <li><a href="/tagged/HEADCANONS" >
  753.                <i class="fas fa-book" ></i></a></li>
  754.              <li><a href="/tagged/PICTURES" >
  755.                <i class="fas fa-camera" ></i></a></li>
  756.              <li><a href="/tagged/WRITING" >
  757.                <i class="fas fa-pen" ></i></a></li>
  758.              <li><a href="PLAYLIST" >
  759.                <i class="fas fa-music" ></i></a></li>
  760.              <li><a href="PINTEREST" >
  761.                <i class="fab fa-pinterest-p" ></i></a></li>
  762.            </ul>
  763.          </div>
  764.          <div class="bar-bottom">
  765.            <div class="rotate">active other something</div>
  766.          </div>
  767.        </div>
  768.        <div class="stats">
  769.          <div class="picture">
  770.            <img src="https://images.pexels.com/photos/702350/pexels-photo-702350.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
  771.          </div>
  772.          <div class="details">
  773.            <h3 class="chivo-dark">Character Name</h3>
  774.            <ul>
  775.              <li> <i>Full name</i>  <span> First Last </span> </li>
  776.              <li> <i>Nickname</i>   <span> Nick </span> </li>
  777.              <li> <i>Age</i>        <span> 00 </span> </li>
  778.              <li> <i>D.o.B</i>      <span> Month, 00th </span> </li>
  779.              <li> <i>Occupation</i> <span> Occupation </span> </li>
  780.              <li> <i>Residence</i>  <span> Country </span> </li>
  781.              <li> <i>Status</i><span> Status </span> </li>
  782.              <li> <i>Affiliation</i><span> None </span> </li>
  783.            </ul>
  784.          </div>
  785.        </div>
  786.        <div class="info">
  787.          <div class="content">
  788.  
  789.            <div class="row-1">
  790.              <div class="text">
  791.                <div class="headline">
  792.                  <h3 class="chivo-dark">Biography</h3>
  793.                  <ul>
  794.                    <li>keyword</li>
  795.                    <li>keyword</li>
  796.                    <li>keyword</li>
  797.                    <li>keyword</li>
  798.                  </ul>
  799.                </div>
  800.                <div class="txt">
  801.                  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.
  802.                </div>
  803.              </div>
  804.  
  805.            </div>
  806.  
  807.            <div class="row-2">
  808.              <div class="bubbles">
  809.                <ul>
  810.                  <li>Character</li>
  811.                  <li>Character</li>
  812.                  <li>Character Trait</li>
  813.                  <li>Trait</li>
  814.                  <li>Character Trait</li>
  815.                  <li>Character Trait</li>
  816.                  <li>Character</li>
  817.                  <li>Character</li>
  818.                  <li>Character Trait</li>
  819.                  <li>Trait</li>
  820.                  <li>Character Trait</li>
  821.                  <li>Character Trait</li>
  822.                </ul>
  823.              </div>
  824.              <div class="quote">
  825.                <div>
  826.                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  827.                  <span>- <i>Lorem Ipsum</i>, <b>Dolor Sit</b></span>
  828.                </div>
  829.              </div>
  830.            </div>
  831.  
  832.          </div>
  833.          <div class="gallery">
  834.            <ul>
  835.              <li><img src="https://images.pexels.com/photos/262333/pexels-photo-262333.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
  836.              <li><img src="https://images.pexels.com/photos/105470/pexels-photo-105470.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
  837.              <li><img src="https://images.pexels.com/photos/965879/pexels-photo-965879.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
  838.              <li><img src="https://images.pexels.com/photos/1007523/pexels-photo-1007523.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
  839.              <li><img src="https://images.pexels.com/photos/275033/pexels-photo-275033.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
  840.              <li><img src="https://images.pexels.com/photos/735911/pexels-photo-735911.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
  841.            </ul>
  842.          </div>
  843.          <div class="bar side-title">
  844.            <div class="rotate">Character Name</div>
  845.          </div>
  846.        </div>
  847.        
  848.      <!--CONNECTION POPUP ONE-->
  849.      <!--COPY HERE-->
  850.      <div class="popup">
  851.        <div class="popup-inner">
  852.          <!--IMAGE-->
  853.          <img src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80">
  854.          <div class="con-desc">
  855.          
  856.              <h3 class="chivo-dark">Connection</h3>
  857.              <!--CONNECTION TEXT-->
  858.              <div class="con-text">
  859.                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
  860.           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
  861.            </div>
  862.          </div>
  863.        </div>
  864.      </div>
  865.      <!--TO HERE FOR MORE POPUPS-->
  866.      
  867.      </div><!--tab one end-->
  868.  
  869. <!----------------------COPY HERE---------------------->
  870.      <!--TAB TWO-->
  871.      <div class="tab" id="tab-2">
  872.        <div class="bar">
  873.          <div class="bar-links">
  874.            <ul>
  875.              <li><a href="/tagged/TAG" >
  876.                <i class="fas fa-hashtag" ></i></a></li>
  877.              <li><a href="/tagged/HEADCANONS" >
  878.                <i class="fas fa-book" ></i></a></li>
  879.              <li><a href="/tagged/PICTURES" >
  880.                <i class="fas fa-camera" ></i></a></li>
  881.              <li><a href="/tagged/WRITING" >
  882.                <i class="fas fa-pen" ></i></a></li>
  883.              <li><a href="PLAYLIST" >
  884.                <i class="fas fa-music" ></i></a></li>
  885.              <li><a href="PINTEREST" >
  886.                <i class="fab fa-pinterest-p" ></i></a></li>
  887.            </ul>
  888.          </div>
  889.          <div class="bar-bottom">
  890.            <div class="rotate">active other something</div>
  891.          </div>
  892.        </div>
  893.        <div class="stats">
  894.          <div class="picture">
  895.            <img src="http://placehold.jp/111111/666666/250x250.png">
  896.          </div>
  897.          <div class="details">
  898.            <h3 class="chivo-dark">Character Name</h3>
  899.            <ul>
  900.              <li> <i>Full name</i>  <span> First Last </span> </li>
  901.              <li> <i>Nickname</i>   <span> Nick </span> </li>
  902.              <li> <i>Age</i>        <span> 00 </span> </li>
  903.              <li> <i>D.o.B</i>      <span> Month, 00th </span> </li>
  904.              <li> <i>Occupation</i> <span> Occupation </span> </li>
  905.              <li> <i>Residence</i>  <span> Country </span> </li>
  906.              <li> <i>Status</i><span> Status </span> </li>
  907.              <li> <i>Affiliation</i><span> None </span> </li>
  908.            </ul>
  909.          </div>
  910.        </div>
  911.        <div class="info">
  912.          <div class="content">
  913.  
  914.            <div class="row-1">
  915.              <div class="text">
  916.                <div class="headline">
  917.                  <h3 class="chivo-dark">Biography</h3>
  918.                  <ul>
  919.                    <li>keyword</li>
  920.                    <li>keyword</li>
  921.                    <li>keyword</li>
  922.                    <li>keyword</li>
  923.                  </ul>
  924.                </div>
  925.                <div class="txt">
  926.                  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.
  927.                </div>
  928.              </div>
  929.  
  930.            </div>
  931.  
  932.            <div class="row-2">
  933.              <div class="bubbles">
  934.                <ul>
  935.                  <li>Character</li>
  936.                  <li>Character</li>
  937.                  <li>Character Trait</li>
  938.                  <li>Trait</li>
  939.                  <li>Character Trait</li>
  940.                  <li>Character Trait</li>
  941.                  <li>Character</li>
  942.                  <li>Character</li>
  943.                  <li>Character Trait</li>
  944.                  <li>Trait</li>
  945.                  <li>Character Trait</li>
  946.                  <li>Character Trait</li>
  947.                </ul>
  948.              </div>
  949.              <div class="quote">
  950.                <div>
  951.                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  952.                  <span>- <i>Lorem Ipsum</i>, <b>Dolor Sit</b></span>
  953.                </div>
  954.              </div>
  955.            </div>
  956.  
  957.          </div>
  958.          <div class="gallery">
  959.            <ul>
  960.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  961.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  962.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  963.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  964.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  965.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  966.            </ul>
  967.          </div>
  968.          <div class="bar side-title">
  969.            <div class="rotate">Character Name</div>
  970.          </div>
  971.        </div>
  972.        
  973.        <!--CONNECTION POPUP ONE-->
  974.      <div class="popup">
  975.        <div class="popup-inner">
  976.          <!--IMAGE-->
  977.          <img src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80">
  978.          <div class="con-desc">
  979.          
  980.              <h3 class="chivo-dark">Connection</h3>
  981.              <!--CONNECTION TEXT-->
  982.              <div class="con-text">
  983.                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
  984.           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
  985.            </div>
  986.          </div>
  987.        </div>
  988.      </div>
  989.      
  990.      </div>
  991. <!-----------------------------TO HERE------------------------------>
  992.  
  993.      <!--TAB THREE-->
  994.      <div class="tab" id="tab-3">
  995.        <div class="bar">
  996.          <div class="bar-links">
  997.            <ul>
  998.              <li><a href="/tagged/TAG" >
  999.                <i class="fas fa-hashtag" ></i></a></li>
  1000.              <li><a href="/tagged/HEADCANONS" >
  1001.                <i class="fas fa-book" ></i></a></li>
  1002.              <li><a href="/tagged/PICTURES" >
  1003.                <i class="fas fa-camera" ></i></a></li>
  1004.              <li><a href="/tagged/WRITING" >
  1005.                <i class="fas fa-pen" ></i></a></li>
  1006.              <li><a href="PLAYLIST" >
  1007.                <i class="fas fa-music" ></i></a></li>
  1008.              <li><a href="PINTEREST" >
  1009.                <i class="fab fa-pinterest-p" ></i></a></li>
  1010.            </ul>
  1011.          </div>
  1012.          <div class="bar-bottom">
  1013.            <div class="rotate">active other something</div>
  1014.          </div>
  1015.        </div>
  1016.        <div class="stats">
  1017.          <div class="picture">
  1018.            <img src="http://placehold.jp/111111/666666/250x250.png">
  1019.          </div>
  1020.          <div class="details">
  1021.            <h3 class="chivo-dark">Character Name</h3>
  1022.            <ul>
  1023.              <li> <i>Full name</i>  <span> First Last </span> </li>
  1024.              <li> <i>Nickname</i>   <span> Nick </span> </li>
  1025.              <li> <i>Age</i>        <span> 00 </span> </li>
  1026.              <li> <i>D.o.B</i>      <span> Month, 00th </span> </li>
  1027.              <li> <i>Occupation</i> <span> Occupation </span> </li>
  1028.              <li> <i>Residence</i>  <span> Country </span> </li>
  1029.              <li> <i>Status</i><span> Status </span> </li>
  1030.              <li> <i>Affiliation</i><span> None </span> </li>
  1031.            </ul>
  1032.          </div>
  1033.        </div>
  1034.        <div class="info">
  1035.          <div class="content">
  1036.  
  1037.            <div class="row-1">
  1038.              <div class="text">
  1039.                <div class="headline">
  1040.                  <h3 class="chivo-dark">Biography</h3>
  1041.                  <ul>
  1042.                    <li>keyword</li>
  1043.                    <li>keyword</li>
  1044.                    <li>keyword</li>
  1045.                    <li>keyword</li>
  1046.                  </ul>
  1047.                </div>
  1048.                <div class="txt">
  1049.                  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.
  1050.                </div>
  1051.              </div>
  1052.  
  1053.            </div>
  1054.  
  1055.            <div class="row-2">
  1056.              <div class="bubbles">
  1057.                <ul>
  1058.                  <li>Character</li>
  1059.                  <li>Character</li>
  1060.                  <li>Character Trait</li>
  1061.                  <li>Trait</li>
  1062.                  <li>Character Trait</li>
  1063.                  <li>Character Trait</li>
  1064.                  <li>Character</li>
  1065.                  <li>Character</li>
  1066.                  <li>Character Trait</li>
  1067.                  <li>Trait</li>
  1068.                  <li>Character Trait</li>
  1069.                  <li>Character Trait</li>
  1070.                </ul>
  1071.              </div>
  1072.              <div class="quote">
  1073.                <div>
  1074.                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  1075.                  <span>- <i>Lorem Ipsum</i>, <b>Dolor Sit</b></span>
  1076.                </div>
  1077.              </div>
  1078.            </div>
  1079.  
  1080.          </div>
  1081.          <div class="gallery">
  1082.            <ul>
  1083.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1084.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1085.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1086.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1087.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1088.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1089.            </ul>
  1090.          </div>
  1091.          <div class="bar side-title">
  1092.            <div class="rotate">Character Name</div>
  1093.          </div>
  1094.        </div>
  1095.      </div>
  1096.  
  1097.      <!--TAB FOUR-->
  1098.      <div class="tab" id="tab-4">
  1099.        <div class="bar">
  1100.          <div class="bar-links">
  1101.            <ul>
  1102.              <li><a href="/tagged/TAG" >
  1103.                <i class="fas fa-hashtag" ></i></a></li>
  1104.              <li><a href="/tagged/HEADCANONS" >
  1105.                <i class="fas fa-book" ></i></a></li>
  1106.              <li><a href="/tagged/PICTURES" >
  1107.                <i class="fas fa-camera" ></i></a></li>
  1108.              <li><a href="/tagged/WRITING" >
  1109.                <i class="fas fa-pen" ></i></a></li>
  1110.              <li><a href="PLAYLIST" >
  1111.                <i class="fas fa-music" ></i></a></li>
  1112.              <li><a href="PINTEREST" >
  1113.                <i class="fab fa-pinterest-p" ></i></a></li>
  1114.            </ul>
  1115.          </div>
  1116.          <div class="bar-bottom">
  1117.            <div class="rotate">active other something</div>
  1118.          </div>
  1119.        </div>
  1120.        <div class="stats">
  1121.          <div class="picture">
  1122.            <img src="http://placehold.jp/111111/666666/250x250.png">
  1123.          </div>
  1124.          <div class="details">
  1125.            <h3 class="chivo-dark">Character Name</h3>
  1126.            <ul>
  1127.              <li> <i>Full name</i>  <span> First Last </span> </li>
  1128.              <li> <i>Nickname</i>   <span> Nick </span> </li>
  1129.              <li> <i>Age</i>        <span> 00 </span> </li>
  1130.              <li> <i>D.o.B</i>      <span> Month, 00th </span> </li>
  1131.              <li> <i>Occupation</i> <span> Occupation </span> </li>
  1132.              <li> <i>Residence</i>  <span> Country </span> </li>
  1133.              <li> <i>Status</i><span> Status </span> </li>
  1134.              <li> <i>Affiliation</i><span> None </span> </li>
  1135.            </ul>
  1136.          </div>
  1137.        </div>
  1138.        <div class="info">
  1139.          <div class="content">
  1140.  
  1141.            <div class="row-1">
  1142.              <div class="text">
  1143.                <div class="headline">
  1144.                  <h3 class="chivo-dark">Biography</h3>
  1145.                  <ul>
  1146.                    <li>keyword</li>
  1147.                    <li>keyword</li>
  1148.                    <li>keyword</li>
  1149.                    <li>keyword</li>
  1150.                  </ul>
  1151.                </div>
  1152.                <div class="txt">
  1153.                  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.
  1154.                </div>
  1155.              </div>
  1156.  
  1157.            </div>
  1158.  
  1159.            <div class="row-2">
  1160.              <div class="bubbles">
  1161.                <ul>
  1162.                  <li>Character</li>
  1163.                  <li>Character</li>
  1164.                  <li>Character Trait</li>
  1165.                  <li>Trait</li>
  1166.                  <li>Character Trait</li>
  1167.                  <li>Character Trait</li>
  1168.                  <li>Character</li>
  1169.                  <li>Character</li>
  1170.                  <li>Character Trait</li>
  1171.                  <li>Trait</li>
  1172.                  <li>Character Trait</li>
  1173.                  <li>Character Trait</li>
  1174.                </ul>
  1175.              </div>
  1176.              <div class="quote">
  1177.                <div>
  1178.                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  1179.                  <span>- <i>Lorem Ipsum</i>, <b>Dolor Sit</b></span>
  1180.                </div>
  1181.              </div>
  1182.            </div>
  1183.  
  1184.          </div>
  1185.          <div class="gallery">
  1186.            <ul>
  1187.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1188.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1189.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1190.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1191.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1192.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1193.            </ul>
  1194.          </div>
  1195.          <div class="bar side-title">
  1196.            <div class="rotate">Character Name</div>
  1197.          </div>
  1198.        </div>
  1199.      </div>
  1200.  
  1201.      <!--TAB FIVE-->
  1202.      <div class="tab" id="tab-5">
  1203.        <div class="bar">
  1204.          <div class="bar-links">
  1205.            <ul>
  1206.              <li><a href="/tagged/TAG" >
  1207.                <i class="fas fa-hashtag" ></i></a></li>
  1208.              <li><a href="/tagged/HEADCANONS" >
  1209.                <i class="fas fa-book" ></i></a></li>
  1210.              <li><a href="/tagged/PICTURES" >
  1211.                <i class="fas fa-camera" ></i></a></li>
  1212.              <li><a href="/tagged/WRITING" >
  1213.                <i class="fas fa-pen" ></i></a></li>
  1214.              <li><a href="PLAYLIST" >
  1215.                <i class="fas fa-music" ></i></a></li>
  1216.              <li><a href="PINTEREST" >
  1217.                <i class="fab fa-pinterest-p" ></i></a></li>
  1218.            </ul>
  1219.          </div>
  1220.          <div class="bar-bottom">
  1221.            <div class="rotate">active other something</div>
  1222.          </div>
  1223.        </div>
  1224.        <div class="stats">
  1225.          <div class="picture">
  1226.            <img src="http://placehold.jp/111111/666666/250x250.png">
  1227.          </div>
  1228.          <div class="details">
  1229.            <h3 class="chivo-dark">Character Name</h3>
  1230.            <ul>
  1231.              <li> <i>Full name</i>  <span> First Last </span> </li>
  1232.              <li> <i>Nickname</i>   <span> Nick </span> </li>
  1233.              <li> <i>Age</i>        <span> 00 </span> </li>
  1234.              <li> <i>D.o.B</i>      <span> Month, 00th </span> </li>
  1235.              <li> <i>Occupation</i> <span> Occupation </span> </li>
  1236.              <li> <i>Residence</i>  <span> Country </span> </li>
  1237.              <li> <i>Status</i><span> Status </span> </li>
  1238.              <li> <i>Affiliation</i><span> None </span> </li>
  1239.            </ul>
  1240.          </div>
  1241.        </div>
  1242.        <div class="info">
  1243.          <div class="content">
  1244.  
  1245.            <div class="row-1">
  1246.              <div class="text">
  1247.                <div class="headline">
  1248.                  <h3 class="chivo-dark">Biography</h3>
  1249.                  <ul>
  1250.                    <li>keyword</li>
  1251.                    <li>keyword</li>
  1252.                    <li>keyword</li>
  1253.                    <li>keyword</li>
  1254.                  </ul>
  1255.                </div>
  1256.                <div class="txt">
  1257.                  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.
  1258.                </div>
  1259.              </div>
  1260.  
  1261.            </div>
  1262.  
  1263.            <div class="row-2">
  1264.              <div class="bubbles">
  1265.                <ul>
  1266.                  <li>Character</li>
  1267.                  <li>Character</li>
  1268.                  <li>Character Trait</li>
  1269.                  <li>Trait</li>
  1270.                  <li>Character Trait</li>
  1271.                  <li>Character Trait</li>
  1272.                  <li>Character</li>
  1273.                  <li>Character</li>
  1274.                  <li>Character Trait</li>
  1275.                  <li>Trait</li>
  1276.                  <li>Character Trait</li>
  1277.                  <li>Character Trait</li>
  1278.                </ul>
  1279.              </div>
  1280.              <div class="quote">
  1281.                <div>
  1282.                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  1283.                  <span>- <i>Lorem Ipsum</i>, <b>Dolor Sit</b></span>
  1284.                </div>
  1285.              </div>
  1286.            </div>
  1287.  
  1288.          </div>
  1289.          <div class="gallery">
  1290.            <ul>
  1291.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1292.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1293.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1294.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1295.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1296.              <li><img src="http://placehold.jp/111111/666666/100x100.png"></li>
  1297.            </ul>
  1298.          </div>
  1299.          <div class="bar side-title">
  1300.            <div class="rotate">Character Name</div>
  1301.          </div>
  1302.        </div>
  1303.      </div>
  1304.  
  1305.      <!--PASTE NEW TABS HERE-->
  1306.  
  1307.    </main>
  1308.  </div>
  1309.  
  1310.  <!--DO NOT TOUCH THE SCRIPTS UNLESS YOU KNOW WHAT YOU'RE DOING-->
  1311.  <script>
  1312.  $( document ).ready(function() {
  1313.      
  1314.   if( connectionPopup === true) {
  1315.   $(".gallery li").each(function() {
  1316.       $(this).css("cursor", "pointer");
  1317.    });
  1318.        
  1319.    /*POPUP*/
  1320.    /*opens popup on click*/
  1321.    $(".gallery li").on('click', function() {
  1322.      var currentIndex = $(this).index() + 4;
  1323.  
  1324.      var currentLoc = ".tab.current .popup:nth-of-type(" + currentIndex + ')';
  1325.      
  1326.  
  1327.       $(this).addClass('active').siblings('.gallery li').removeClass('active');
  1328.  
  1329.        $('.popup').fadeOut();
  1330.        $(currentLoc).fadeIn().css('display', 'flex');
  1331.        $(document.body).addClass('noscroll'); /*noscroll on background*/
  1332.     });
  1333.  
  1334.      $(".popup").on('click', function() {
  1335.        $(this).fadeOut();
  1336.        $(document.body).removeClass('noscroll');
  1337.        $('.gallery img').removeClass('active');
  1338.      });
  1339.      /*prevent closing popup by clicking on it*/
  1340.      $('.popup-inner').click(function (e) {
  1341.        e.stopPropagation();
  1342.      });
  1343.    }
  1344.  
  1345.  
  1346.     $('nav li').on('click', function(e) {
  1347.       var currentAttrValue = $(this).attr('data-tab');
  1348.  
  1349.       window.location.hash = $(this).attr('data-tab');
  1350.  
  1351.       $('.tab' + currentAttrValue).addClass('current').siblings('.tab').removeClass('current');
  1352.       $(this).addClass('current').siblings('nav li').removeClass('current');
  1353.     });
  1354.  
  1355.     /*HASH SCRIPT*/
  1356.     var hash = $.trim(window.location.hash);
  1357.  
  1358.     if (hash) {
  1359.       $('nav li[data-tab$="' + hash + '"]').trigger('click');
  1360.     }
  1361.  
  1362.     $('#close').on('click', function() {
  1363.       if ( ($(this)).hasClass('x') ) {
  1364.         $('#close, nav, nav .current, nav ul').removeAttr('style');
  1365.         $('#close').removeClass('x');
  1366.       }
  1367.  
  1368.       else {
  1369.         $('nav .current').css({
  1370.           'transform' : 'scale(1)',
  1371.         });
  1372.         $('nav').css({
  1373.           'margin-left' : '-250px',
  1374.         });
  1375.         $('nav ul').css({
  1376.           'overflow-y' : 'hidden',
  1377.         });
  1378.         $('#close').css({
  1379.           'left' : '12px',
  1380.         });
  1381.         $('#close').addClass('x');
  1382.       }
  1383.     });
  1384.    
  1385.     /*color per tab*/
  1386.     if( colorPerTab === true) {
  1387.       var i = 1;
  1388.       $(".tab").each(function() {
  1389.         var thisNext = $(this).find("nav ul, .bar, .bubbles ul li");
  1390.         thisNext.css({
  1391.           "background" : "var(--accentColorOne-" + i + ")",
  1392.           "background" : "-webkit-linear-gradient(to bottom, var(--accentColorOne-" + i + "), var(--accentColorTwo-" + i + "))",
  1393.           "background" : "linear-gradient(to bottom, var(--accentColorOne-" + i + "), var(--accentColorTwo-" + i + "))"
  1394.         });
  1395.        i++;
  1396.       });
  1397.     }
  1398.  
  1399.   });/*document ready*/
  1400.   </script>
  1401. </body>
  1402. </html>
Advertisement
Add Comment
Please, Sign In to add comment