API tools faq
paste
Advertisement
insidicism

Untitled

insidicism
Aug 20th, 2017
99
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 81.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3.  
  4.   <!--THEME #3: SODA POP FICTION v. 2.0 by @nonspace.
  5.  Don't steal.
  6.  Don't claim as your own.
  7.  Don't use as base code.
  8.  I will find and haunt you.
  9.  Editing for personal use is fine!-->
  10.  
  11.  
  12.   <head>
  13.  
  14.   <title>{Title}</title>
  15.   <link rel="icon" type="image/png" href="{Favicon}">
  16.  
  17.   <!-- FONT AWESOME -->
  18.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  19.  
  20.   <!-- GOOGLE FONTS -->
  21.   <link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i|Roboto:300,300i,400,400i,700,700i" rel="stylesheet">
  22.  
  23.   <!-- JQUERY --->
  24.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  25.  
  26.   <!-- LIGHTBOX PLUGIN -->
  27.    <link rel="stylesheet" href="https://static.tumblr.com/fx4xpyt/RtNop2sco/lightbox.css">
  28.    <script src="https://static.tumblr.com/qbtyvii/vS0op2okj/lightbox.min.js"></script>
  29.  
  30.   <!--S-M-TOOLTIPS -->
  31.   <script src="https://static.tumblr.com/fx4xpyt/VlKom52b7/jquery.style-my-tooltips.js"></script>  
  32.  
  33.   <!-- SCRIPTS -->
  34.  
  35.   <!---- S-M-TOOLTIPS --->
  36.     <script>
  37.      (function($){
  38.          $(document).ready(function(){
  39.              $("[title]").style_my_tooltips({
  40.                  tip_follows_cursor:true,
  41.                  tip_delay_time:50,
  42.                  tip_fade_speed:300,
  43.                  attribute:"title"
  44.              });
  45.          });
  46.      })(jQuery);
  47.    </script>
  48.  
  49.   <!--- TAB SCRIPT -->
  50.   <script>
  51.     $(document).ready(function(){
  52.          $('#navigation li a').on('click', function(e) {
  53.             var currentAttrValue = $(this).attr('href');
  54.            
  55.             // SHOW / HIDE TABS
  56.             $('.tabs' + currentAttrValue).fadeIn(600).siblings('.tabs').hide             ();
  57.            
  58.             // CHANGE / REMOVE ACTIVE
  59.             $(this).parent('li').addClass('active').siblings().removeClass              ('active');
  60.            
  61.             e.preventDefault();
  62.          });
  63.        
  64.          $('.footerlinks a').on('click', function(e) {
  65.             var currentAttrValue = $(this).attr('href');
  66.            
  67.             // SHOW / HIDE TABS
  68.             $('.tabcontent' + currentAttrValue).fadeIn(600).siblings('                  .tabcontent').hide();
  69.            
  70.             // CHANGE / REMOVE ACTIVE
  71.             $(this).parent('li').addClass('actives').siblings().removeClass              ('actives');
  72.            
  73.             e.preventDefault();
  74.          });
  75.        
  76.          var hash = $.trim( window.location.hash );
  77.          if (hash) $('#navigation li a[href$="'+hash+'"]').trigger('click');
  78.     });
  79.    
  80. </script>
  81.  
  82. <!-- POP UP source: https://kaushikresearch.wordpress.com/jquery/popup-with-jquery/ (modified)-->
  83.  
  84. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  85.  
  86. <script>
  87. $plugin2 = $.noConflict( true );
  88. $plugin2(document).ready(function() {
  89.     var mouseX;
  90.     var mouseY;
  91.    
  92. $plugin2(document).mousemove( function(e) {
  93.     mouseX = e.clientX;
  94.     mouseY = e.clientY;
  95. });  
  96.  
  97. $plugin2('a.poplight[href^=#]').click(function() {
  98.    
  99.     var popID = $plugin2(this).attr('rel'); //Get Popup Name
  100.     var popURL = $plugin2(this).attr('href'); //Get Popup href to define size
  101.     var query= popURL.split('?');
  102.     var dim= query[1].split('&');
  103.     var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  104.  
  105.     $plugin2('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  106.    
  107.         var popMargTop = ($plugin2('#' + popID).height() + 80) / 2;
  108.         var popMargLeft = ($plugin2('#' + popID).width() + 80) / 2;
  109.  
  110.     //Apply Margin to Popup
  111.     $plugin2('#' + popID).css({
  112.        
  113.         'top' : mouseY - 250,
  114.         'left' : mouseX - 320
  115.     });
  116.  
  117.     $plugin2('body').append('<div id="fade"></div>');
  118.     $plugin2('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  119.         return false;
  120.     });
  121.  
  122.     $plugin2('a.close, #fade').live('click', function() {
  123.         $plugin2('#fade , .popup_block').fadeOut(function() {
  124.             $plugin2('#fade, a.close').remove(); //fade them both out
  125.         });
  126.            
  127.             return false;
  128.     });
  129. });
  130.  
  131. </script>
  132.    
  133.    
  134.     <!-- CSS -->
  135.    
  136.     <style type="text/css">
  137.    
  138.     /* LIGHTBOX PLUGINS FIRST */
  139.    
  140.     .mfp-bottom-bar {
  141.         display: none;
  142.     }
  143.    
  144.     /* POP UP */
  145.    
  146.     #fade { /*--Transparent background layer--*/
  147.        display: none; /*--hidden by default--*/
  148.        background: #000;
  149.        position: fixed; left: 0; top: 0;
  150.        width: 100%; height: 100%;
  151.        opacity: .20;
  152.        z-index: 9999;
  153.     }
  154.  
  155.     .popup_block{
  156.        display: none; /*--hidden by default--*/
  157.        padding: 20px;
  158.        float: left;
  159.        font-size: 11.3px;
  160.        line-height: 140%;
  161.        font-family: 'arimo', sans-serif;
  162.        text-align: justify;
  163.        overflow-y: hidden;
  164.        display: none;
  165.        position: fixed;
  166.        top: 50%; left: 50%;
  167.        z-index: 99999;
  168.        /*--CSS3 Box Shadows--*/
  169.        }
  170.        
  171.     .popup_txt {
  172.         z-index: 0;
  173.        background: #f0f0f0;
  174.        padding: 20px;
  175.        border: 4px solid #fff;
  176.        -webkit-box-shadow: 0px 0px 20px #000;
  177.        -moz-box-shadow: 0px 0px 20px #000;
  178.        box-shadow: 0px 0px 20px #000;
  179.        padding-top: 15px;
  180.        height: 210px;
  181.        overflow: hidden;
  182.        overflow-x: hidden;
  183.     }
  184.    
  185.      .popup_txt a {
  186.         text-decoration: none;
  187.         color: #7c182b;
  188.         transition: ease color 0.5s;
  189.     }
  190.    
  191.     .popup_txt a:hover {
  192.         color: #555;
  193.     }
  194.    
  195.     section {
  196.         overflow-y: scroll;
  197.         margin-bottom: 5px;
  198.         height: 146px;
  199.     }
  200.    
  201.     .popup_tip {
  202.         z-index: 9999;
  203.         float: right;
  204.         margin-right: -10px;
  205.         margin-top: -20px;
  206.         width: 0;
  207.         height: 0;
  208.         border-style: solid;
  209.         border-width: 8px 0 8px 10px;
  210.         border-color: transparent transparent transparent #ffffff;
  211.  
  212.     }
  213.  
  214.     img.btn_close {
  215.        float: right;
  216.        margin: -55px -55px 0 0;
  217.        }
  218.        
  219.     /*--Making IE6 Understand Fixed Positioning--*/
  220.     *html #fade {
  221.         position: absolute;
  222.         }
  223.        
  224.     *html .popup_block {
  225.         position: absolute;
  226.         }
  227.    
  228.     #s-m-t-tooltip {
  229.         max-width:300px;
  230.         z-index:10;
  231.         margin:10px 14px 7px 12px;
  232.         padding:5px;
  233.         background:#fff; /* fallback if rgba not supported */
  234.         background:rgba(255,255,255,0.9);
  235.         -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.15),-1px -1px 0 rgba(255           ,255,255,0.3);
  236.         -webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.15),-1px -1px 0 rgba(255         ,255,255,0.3);
  237.         box-shadow:2px 2px 5px rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255         ,0.3);
  238.         letter-spacing: 1px;
  239.         text-transform: uppercase;
  240.         font-family:'arimo', sans-serif;
  241.         font-size:9px;
  242.         line-height:16px;
  243.         color: #7c182b;
  244.         }
  245.    
  246.     body {
  247.         background: #f8f8f8;
  248.         font-family: 'arimo', sans-serif;
  249.         }
  250.        
  251.     #container {
  252.         position: relative;
  253.         width: 600px;
  254.         height: 719;
  255.         margin: 50px auto;
  256.         }
  257.        
  258.     /* BACK BUTTON */
  259.        
  260.     #buttons {
  261.         position: absolute;
  262.         margin: 265px 0px 0px -100px;
  263.         z-index: 9;
  264.         }
  265.    
  266.     #buttons ul {
  267.         list-style-type: none;
  268.         padding: 15px;
  269.        
  270.         }
  271.    
  272.     #buttons a {
  273.         color: #7c182b;
  274.         }
  275.    
  276.     #buttons ul li:hover {
  277.         background-color: rgba(0,0,0,0.2);
  278.         }
  279.        
  280.     #buttons ul li {
  281.         padding: 8px;
  282.         text-align: center;
  283.         width: 15px;
  284.         height: 15px;
  285.         margin-bottom: 5px;
  286.         background-color: rgba(255,255,255,0.9);
  287.         border-radius: 50px;
  288.         transition: background-color 0.5s ease;
  289.         box-shadow:1px 1px 0px rgba(200,200,200,0.4);
  290.         font-size: 13px;
  291.     }
  292.    
  293.    .bigbutton {
  294.         padding: 13px 19px 20px 16px!important;
  295.         text-align: center;
  296.         font-size: 20px!important;
  297.         width: 20px;
  298.         height: 20px;
  299.         margin-left: 5px;
  300.     }
  301.        
  302.     /* PICTURE NAVIGATION */
  303.      
  304.     #navigation {
  305.         position: absolute;
  306.         width: 135px;
  307.         height: 719px;
  308.         overflow-y: scroll;
  309.         }
  310.        
  311.     #navigation ul {
  312.         margin-top: 0px;
  313.         }
  314.        
  315.     #navigation li {
  316.         list-style-type: none;
  317.         margin-left: -40px;
  318.         margin-top: 0.5px;
  319.         }
  320.        
  321.     #navigation li img {
  322.         height: 110px;
  323.         width: 110px;
  324.         outline:1px solid #f0f0f0;
  325.         border:3px solid #fff;
  326.         cursor: pointer;
  327.         transition: border 0.5s ease;
  328.         box-shadow:3px 3px 0px rgba(220,220,220,0.1);
  329.         }
  330.        
  331.     #navigation li img:hover {
  332.         border: 3px solid #ccc!important; /* PICTURE HOVER COLOR */
  333.         }  
  334.        
  335.     .active img {
  336.         border: 3px solid #bbb!important; /* ACTIVE PICTURE COLOR */
  337.         }
  338.        
  339.     /* TABS */
  340.        
  341.     .tabs {
  342.         position: relative;
  343.         background: #fff;
  344.         margin: 0px 150px;
  345.         width: 450px;
  346.         height: 719px;
  347.         outline: 1px solid #f0f0f0;
  348.         display: none;
  349.         box-shadow:3px 3px 0px rgba(220,220,220,0.1);
  350.         }
  351.        
  352.     .tabs.active, .tabcontent.active {
  353.         display: block;
  354.         }
  355.      
  356.     /* CHARACTER STATS RIGHT SIDE */
  357.      
  358.     .stats {
  359.         position: relative;
  360.         margin-left: 465px;
  361.         width: 200px;
  362.         font-family: 'roboto', sans-serif;
  363.         font-size: 9px;
  364.         font-weight: bold;
  365.         text-transform: uppercase;
  366.         line-height: 180%;
  367.         }
  368.        
  369.     .stats a {
  370.         text-decoration: none;
  371.         color: #000;
  372.         transition: ease color 0.5s;
  373.     }
  374.    
  375.     .stats a:hover {
  376.         color: #bbb;
  377.     }
  378.        
  379.     .tabcontent {
  380.         position: absolute;
  381.         color: #000;
  382.         margin: 0px 20px;
  383.         padding: 15px 20px 0px 0px;
  384.         width: 410px;
  385.         height: 665px;
  386.         font-size: 11.3px;
  387.         line-height: 140%;
  388.         font-family: 'arimo', sans-serif;
  389.         text-align: justify;
  390.         overflow-y: hidden;
  391.         display: none;
  392.         overflow-y: scroll;
  393.         }
  394.        
  395.     .tabcontent:hover {
  396.         overflow-y: scroll;
  397.         }
  398.        
  399.     /* + STYLE FORMATTING IN TABS */
  400.    
  401.     .tabcontent a {
  402.         text-decoration: none;
  403.         color: #7c182b;  /* LINK COLOR */
  404.         }
  405.      
  406.     .tabcontent ul {
  407.         list-style-type: none;
  408.         }
  409.      
  410.     .tabcontent li {
  411.         margin-left: -10px;
  412.         }
  413.        
  414.     .tabcontent li:before { /* LIST STYLE ICONS */
  415.         content: "\f0da"; /* FontAwesome Unicode */
  416.         font-family: FontAwesome;
  417.         display: inline-block;
  418.         margin-left: -15px;
  419.         width: 15px;
  420.         color: #bbb;
  421.         }
  422.        
  423.     /* PAGE LINKS */
  424.        
  425.     .footerlinks {
  426.         position: absolute;
  427.         bottom: -7px;
  428.         margin-left: 47%;
  429.         }
  430.        
  431.     .footerlinks a {
  432.         text-decoration: none;
  433.         font-size: 16px;
  434.         padding-right: 1px;
  435.         color: #bbb;
  436.         }
  437.        
  438.     .footerlinks ul {
  439.         list-style-type: none;
  440.         padding: 0px 0px 0px 2px;
  441.         }
  442.        
  443.     .footerlinks li {
  444.         display: inline-block;
  445.         }
  446.        
  447.     .actives a { /* COLOR OF ACTIVE PAGE TAB */
  448.         color: #7c182b!important;
  449.        }
  450.        
  451.     /* CONNECTIONS */
  452.    
  453.     #connections {
  454.         position: absolute;
  455.         bottom: -14px;
  456.         margin-left: 425px;
  457.         width: 200px;
  458.         font-family: 'roboto', sans-serif;
  459.         font-size: 9px;
  460.         text-transform: uppercase;
  461.         line-height: 180%;
  462.         }
  463.        
  464.     #connections ul {
  465.         list-style-type: none;
  466.     }
  467.    
  468.     #connections ul img {
  469.         width: 50px;
  470.         filter: grayscale(100%);
  471.         border: 3px solid #bbb!important; /* ACTIVE PICTURE COLOR */
  472.     }
  473.        
  474.     /* CREDIT */
  475.      
  476.     footer {
  477.         position: fixed;
  478.         bottom: 5px;
  479.         right: 15px;
  480.         padding: 5px;
  481.         }
  482.        
  483.     footer a {
  484.         text-decoration: none;
  485.         font-family: 'arimo', sans-serif;
  486.         font-size: 10px;
  487.         color: #7c182b;
  488.         font-weight: bold;
  489.         transition: color 0.5s ease;
  490.         }
  491.        
  492.     footer a:hover {
  493.         color: #aaa;
  494.         }
  495.        
  496.     /* MISC */
  497.      
  498.     h1 {
  499.         font-family: 'roboto', sans-serif;
  500.         font-size: 20px;
  501.         text-transform: uppercase;
  502.         color: #7c182b;
  503.         letter-spacing: -1px;
  504.         }
  505.        
  506.     h3 {
  507.         color: #7c182b;
  508.         font-size: 15px;
  509.         font-family: 'roboto', sans-serif;
  510.         letter-spacing: -1px;
  511.     }
  512.        
  513.     h4 {
  514.         text-transform: uppercase;
  515.         }  
  516.        
  517.     .tw { /* TRIGGER WARNING STYLING */
  518.         color: #000;
  519.         font-size: 10px;
  520.         letter-spacing: 0px;
  521.         }
  522.      
  523.     blockquote {
  524.         margin-left: 15px;
  525.         width: 96%;
  526.         }
  527.        
  528.     .fa-hashtag {
  529.         margin-top: 10px;
  530.     }
  531.     .fa-hashtag ~ .fa-hashtag {
  532.         margin-top: 0px;
  533.     }
  534.    
  535.     .social {
  536.         margin-top: 10px;
  537.     }
  538.    
  539.     .social a {
  540.         margin-left: 0px;
  541.     }
  542.      
  543.     .square {
  544.         width: 7px;
  545.         height: 7px;
  546.         display: inline-block;
  547.         margin-right: 5px;
  548.         }
  549.        
  550.     /* SQUARE COLORS */
  551.      
  552.     .red {
  553.         background-color: #cf1f3c;
  554.         }
  555.  
  556.     .green {
  557.         background-color: #286756;
  558.         }
  559.  
  560.     .yellow {
  561.         background-color: #ffb52f;
  562.         }
  563.  
  564.     .black {
  565.         background-color: #111111;
  566.         }
  567.        
  568.     /* SCROLLBARS */
  569.        
  570.     ::-webkit-scrollbar {
  571.         width: 5px;
  572.         }
  573.  
  574.     ::-webkit-scrollbar-track {
  575.         border-radius: 1px;
  576.         background-color: #f8f8f8;
  577.         }
  578.        
  579.     .tabcontent::-webkit-scrollbar-track {
  580.         border-radius: 1px;
  581.         background-color: #fff;
  582.         }
  583.  
  584.      .tabcontent::-webkit-scrollbar-thumb {
  585.         border-radius: 1px;
  586.         background-color: #fff;
  587.         transition: background-color 0.5s;
  588.         }
  589.        
  590.     .tabcontent:hover::-webkit-scrollbar-thumb {
  591.         border-radius: 1px;
  592.         background-color: #ddd;
  593.         }
  594.  
  595.     ::-webkit-scrollbar-thumb {
  596.         border-radius: 1px;
  597.         background-color: #ddd;
  598.         }
  599.      
  600.     </style>
  601.    
  602.   </head>
  603.  
  604.  
  605.   <body>
  606.    
  607.     <!---- OUTLINE CONTAINER ----->
  608.     <div id="container">
  609.    
  610.     <!-- BACK NAVIGATION W/ 1 ADDITIONAL LINK e.g. rules-->
  611.      <div id="buttons">
  612.         <ul>
  613.             <li><a href="/navi" title="MAP">
  614.                 <i class="fa fa-book" aria-hidden="true"></i></a></li>
  615.             <li class="bigbutton"><a href="/" title="BACK">
  616.                 <i class="fa fa-home" aria-hidden="true"></i></a></li>
  617.             <li><a href="/ask" title="MESSAGE">
  618.                 <i class="fa fa-envelope" aria-hidden="true"></i></a></li>
  619.         </ul>
  620.      </div> <!--buttons-->
  621.      
  622.      
  623.    
  624.       <!----- CHARACTER PICTURE LINKS ------>
  625.      <div id="navigation">
  626.         <ul>
  627.           <li class="active"><a href="#tab1a" title="PERCIVELL COUSLAND">
  628.           <img src="https://68.media.tumblr.com/2346603bef499f0f7b3bb0656a4e8e59/tumblr_inline_outhnkNeE11v5j2ls_540.png"></a></li>
  629.          
  630.           <li><a href="#tab2a" title="ALARIK DOBILEIT">
  631.           <img src="https://68.media.tumblr.com/e08cdceb49b255238e0150de38f88179/tumblr_inline_outhn7YdeQ1v5j2ls_540.png"></a></li>
  632.          
  633.           <li><a href="#tab3a" title="NESSA DORAN">
  634.           <img src="https://68.media.tumblr.com/0aac3a65e695cb50394eda17c806da6f/tumblr_inline_outhndMQCi1v5j2ls_540.png"></a></li>
  635.          
  636.           <li><a href="#tab4a" title="MAINIO">
  637.           <img src="https://68.media.tumblr.com/d5de7b48be65fbff36e545e8f8aeb6e8/tumblr_inline_outir7LIaS1v5j2ls_540.png"></a></li>
  638.          
  639.           <li><a href="#tab5a" title="ROWAN">
  640.           <img src="https://68.media.tumblr.com/92bdfe18176ac94e30586e8b26e89096/tumblr_inline_outhnxAAH31v5j2ls_540.png"></a></li>
  641.          
  642.          
  643.         </ul>
  644.        
  645.       </div> <!--navigation-->
  646.      
  647.       <!------ TABS ------>
  648.      
  649.       <!-- For clarification because it is a bit confusing:
  650.           .tabcontent contains the content for page 1 & 2 for each                    character.
  651.           sub#a is page 1 (the default page) and sub#b is page 2.-->
  652.      
  653.       <!--To add new tabs:
  654.          1. Copy everything in "tabs" div (starts after TAB #).
  655.          2. Paste it at after the last tab
  656.          3. Change the div ID's in
  657.             Replace # with the corresponding tab number.
  658.              .tabs (tab#a),
  659.              .tabcontent (sub#a and sub#b),
  660.              .footerlinks li (sub#a and sub#b).
  661.          4. Add an entry to #navigation.
  662.             Copy/paste a li entry and replace 'href' attribute with the                 right tab ID.
  663.  
  664.         Help post: https://nonspace.tumblr.com/post/158471534827/hi-im-using-your-page-3-and-ive-tried-to-follow
  665.            
  666.        If you run into any trouble with this, send me a message and I'll           try to help you.
  667.        
  668.      <!-- If you want to link to another character of yours that                 is in the navigation you need to set the link like
  669.      <a href="/YOURPAGENAME/#tabNUMBERa">
  670.      and replace NUMBER with the corresponding tab number of said character       -->
  671.      
  672.       <!-- TAB 1 -->
  673.      
  674.       <div class="tabs active" id="tab1a">
  675.      
  676.          <div class="tabcontent active" id="sub1a">
  677.              
  678.                 <h1> PERCIVELL COUSLAND<br />
  679.                  
  680.                 </h1>
  681.    
  682.                 <!-- BASICS -->
  683.    
  684.                 <h4>BASIC INFORMATION</h4>
  685.                
  686.                  
  687.                 <!--- SHORT BIO -->
  688.    
  689. bio tba. stats on 2nd page.
  690.                
  691.                 <!-- PLOT POINTS -->
  692.            
  693.                 <h4>Origins Decisions</h4>
  694.                   <ul>
  695.                    <li>Recruits all companions, Shale included.</li>
  696.                    <li>Completed all companion quests.</li>
  697.                    <li>Marjolane lives, Leliana unhardened.</li>
  698.                    <li>Alistair reunited with his sister.</li>
  699.                    <li>Does not kill Flemeth; grimoire given to Morrigan.</li>
  700.                    <li>Redcliffe Village saved from the undead.</li>
  701.                    <li>Isolde lives; Connor saved by the Circle mages.</li>
  702.                    <li>The Circle mages are saved.</li>
  703.                    <li>Eomon is cured with the Sacred Ashes.</li>
  704.                    <li>Jowan is judged by Eomon to return to the Circle.</li>
  705.                    <li>Convinced Zathrian to lift the curse on the werewolves.</li>
  706.                    <li>Spoke in Dagna's favor to the Circle.</li>
  707.                    <li>The Anvil is destroyed.</li>
  708.                    <li>Put Bhelen on Orzammar's throne.</li>
  709.                    <li>Loghain spared & recruited to Wardens; canon divergence-- Alistair remains.</li>
  710.                    <li>Alistair and Morrigan complete the Dark Ritual.</li>
  711.                    <li>Alistair and Anora rule Ferelden.</li>
  712.                  </ul>
  713.  
  714.                 <!-- ADD SOMETHING ELSE IF YOU LIKE -->
  715.  
  716.                 <h4>Awakening Decisions</h4>
  717.          
  718.                <ul>
  719.                  <li>Recruited all possible companions.</li>
  720.                  <li>Upgrades all of Vigil's Keep.</li>
  721.                  <li>Amaranthine was saved.</li>
  722.                  <li>Vigil's Keep was defended.</li>
  723.                  <li>Killed the Architect.</li>
  724.                  
  725.                </ul>
  726.  
  727.            
  728.           </div> <!--tabcontent-->
  729.          
  730.           <!-- PAGE 2 -->
  731.          
  732.           <div class="tabcontent" id="sub1b">
  733.          
  734.           <h3>BASIC INFORMATION</h3>
  735.          
  736.           <blockquote>
  737.          
  738.     <p><b>FULL NAME</b> Percivell Jacob Cousland<br>
  739.     <b>NICKNAME(S)</b> Percy<br>
  740.     <b>TITLE</b> The Hero of Ferelden, the Warden, Warden-Commander<br>
  741.     <b>OCCUPATION</b> Grey Warden<br>
  742.     <b>AGE</b> 24 (Origins); 35 (Inquisition)<br>
  743.     <b>DATE OF BIRTH</b> 2 Kingsway<br>
  744.     <b>NATIONALITY</b> Fereldan<br>
  745.     <b>GENDER</b> Male<br>
  746.     <b>ORIENTATION</b> Homosexual<br>
  747.     <b>RELIGION</b> Andrastian<br>
  748.     <b>CLASS</b> Archer rogue; Ranger specialization<br>
  749.    
  750.           </blockquote>
  751.    
  752.        
  753.          <p><h3>PHYSICAL INFORMATION</h3>
  754.                
  755.          <blockquote>
  756.        
  757.     <p><b>FACE CLAIM</b> Jamie Dornan<br>
  758.     <b>HEIGHT</b> 6'1"<br>
  759.     <b>EYE COLOUR</b> Deep blue<br>
  760.     <b>HAIR COLOUR + STYLE</b> Brown, curly and shoulder-length.<br>
  761.     <b>DOMINANT HAND</b> Right<br>
  762.     <b>DISTINGUISHING FEATURES</b> Slightly broad-shouldered, muscles well-defined.<br>
  763.     <b>ACCENT + INTENSITY</b> Fereldan (English) accent, well-spoken and succinct.<br>
  764.     <b>TATTOO(S)</b> N/A<br>
  765.     <b>SCAR(S)</b> Several; one notable across his abdomen.<br>
  766.     <b>PIERCING(S)</b> One lobe piercing.<br>
  767.    
  768.                </blockquote>
  769.    
  770.    
  771.    
  772.         <p><h3>BACKGROUND INFORMATION</h3>
  773.        
  774.         <blockquote>
  775.                
  776.     <p><b>HOMETOWN</b> Highever, Ferelden<br>
  777.     <b>CURRENT RESIDENCE</b> Traveling<br>
  778.     <b>LANGUAGE(S)</b> Trade tongue, Orlesian<br>
  779.     <b>SOCIAL CLASS</b> Noble<br>
  780.     <b>EDUCATION</b> Nobleman's education, the works.<br>
  781.     <b>FATHER</b> Bryce Cousland (deceased)<br>
  782.     <b>MOTHER</b> Eleanor Cousland (deceased)<br>
  783.     <b>SHIP</b> Zevran (canon; not assumed upon interaction)<br>
  784.     <b>SIBLING(S)</b> Fergus Cousland<br>
  785.     <b>CHILD(REN)</b> N/A<br>
  786.     <b>PET(S)</b> Peanut the Mabari<br>
  787.    
  788.         </blockquote>
  789.    
  790.    
  791.         <p><h3>PERSONALITY INFORMATION</h3>
  792.        
  793.         <blockquote>
  794.                
  795.     <p><b>JUNG TYPE</b> INTJ<br>
  796.     <b>ENNEATYPE</b> Type 1 - The Reformer<br>
  797.     <b>MORAL ALIGNMENT</b> Neutral Good<br>
  798.     <b>TEMPERAMENT</b> Phlegmatic<br>
  799.     <b>INTELLIGENCE TYPE</b> Intrapersonal<br>
  800.     <b>PERSONALITY STRENGTHS</b> Loyal, intelligent, studious, patient, strong-willed, compassionate, rational, perceptive, cautious, kind-hearted<br>
  801.     <b>PERSONALITY WEAKNESSES</b> Isolationist, mutes emotions, takes on too much, cold when angered, may struggle empathizing, melancholy, stoic<br>
  802.    
  803.         </blockquote>
  804.    
  805.            
  806.         <p><h3>VICES + HABITS</h3>
  807.        
  808.         <blockquote>
  809.                
  810.     <p><b>SMOKES?</b> Occasionally<br>
  811.     <b>DRINKS?</b> Rarely<br>
  812.     <b>DRUGS?</b> Never<br>
  813.     <b>HABIT(S)</b> Gritting teeth, clenching fists, pacing<br>
  814.     <b>HOBBIES</b> Reading, listening to music, journaling, archery, chess<br>
  815.     <b>LIKES</b> Non-fiction & fiction texts, poetry, keeping active, cold weather, dogs, small groups, diplomacy<br>
  816.    <b>DISLIKES</b> Violence, crowds, political jargon, heat, shouting, disorder<br>
  817.            
  818.        
  819.    
  820.        </blockquote>
  821.              
  822.          </div>
  823.          
  824.          <!-- PAGE 3 -->
  825.          <div class="tabcontent" id="sub1c">
  826.  
  827.             CONTENT GOES HERE
  828.  
  829.          </div>
  830.           <!--tabcontent sub-->
  831.          
  832.          
  833.          <!-- PAGE LINKS -->
  834.          <div class="footerlinks">
  835.             <ul>
  836.                 <li class="actives"><a href="#sub1a">&#9632;</a></li>
  837.                 <li><a href="#sub1b">&#9632;</a></li>
  838.                 <li><a href="#sub1c">&#9632;</a></li>
  839.             </ul>
  840.           </div> <!--footerlinks-->
  841.          
  842.           <!-- SIDE STATS -->
  843.          
  844.           <!-- These are a few stats regarding the character such as plot             availability, ship availability, engame ship, development status,           main verse, creation date. but again, you can put your own things.           Could also be character links.-->
  845.          
  846.           <!-- The squares are intended to show availability through color            coding. But you can use it differently if you want to. To change            the color of the squares, replace the color name of a class to the           right color (green, yellow, red or black). Replace brackets with            your own info
  847.          
  848.          If you want to change the colors to entirely different ones you             need to find the .green, .yellow, .red and/or .black. (just ctrl+f           and search the code)
  849.          
  850.          -->
  851.          
  852.           <div class="stats">
  853.            
  854.          
  855.             <!-- LINKS -->
  856.             <!-- Replace YOURTAG with the correct tag of yours.
  857.            You can add more links as you need, just copy paste -->
  858.            
  859.        
  860.            
  861.            
  862.             <!-- SOCIAL -->
  863.             <!--An image gallery essentially. Replace YOURIMAGEURL with
  864.            the image URL. The 'data-lightbox' value is the galleries.
  865.            
  866.            All images with the same name here will be in the same gallery,
  867.            no mattter on what page they are.
  868.            So if you want all images to be one big gallery, name them all
  869.            the same.
  870.            
  871.            There an image caption as well.
  872.            
  873.            Hide or show specific social media per character by deleting
  874.            or removing comment tags <!-- these here-->
  875.            
  876.             <div class="social">
  877.            
  878.            
  879.                
  880.             <!--YOUTUBE
  881.            <div class="fa fa-youtube square" aria-hidden="true"></div>
  882.                <a href="YOURIMAGEURL" data-lightbox="CHAR1youtube" data-title="YOUR CAPTION">YOUTUBE</a>
  883.                <br>-->
  884.                
  885.             <!--YOUR DATING APP OF CHOICE
  886.            <div class="fa fa-fire square" aria-hidden="true"></div>
  887.                <a href="YOURIMAGEURL" data-lightbox="CHAR1date" data-title="YOUR CAPTION">DATING APP</a>
  888.                <a href="YOURIMAGEURL" data-lightbox="CHAR1date" data-title="YOUR CAPTION"></a>
  889.                <br>-->
  890.                
  891.             <!--SNAPCHAT
  892.            <div class="fa fa-snapchat square" aria-hidden="true"></div>
  893.                <a href="YOURIMAGEURL" data-lightbox="CHAR1snapchat" data-title="YOUR CAPTION">SNAPCHAT</a>
  894.                <a href="YOURIMAGEURL" data-lightbox="CHAR1snapchat" data-title="YOUR CAPTION"></a>
  895.                <br>-->
  896.        
  897.            </div><!--social-->
  898.            
  899.           </div> <!--stats-->
  900.          
  901.           <!-- CONNECTIONS -->
  902.           <!-- Straight forward, character connections. You find the
  903.          actual content window of the pop up right after this section.
  904.          Images are 50x50 but scale down if using larger ones.
  905.          
  906.          href="#?w=300"    - '300' specifies the size of the popup.
  907.          rel="CHAR1con1" - Is the id the pop up relates to. A.k.a. it
  908.                              opens the div with the same name as this.
  909.                              !!!Make sure these are named properly!!!
  910.                              
  911.         Add more by copy/pasting (or delete to remove)-->
  912.          
  913.           <div id="connections">
  914.          
  915.               <ul>
  916.              
  917.                 <li><a href="#?w=300" rel="CHAR1con1" class="poplight"
  918.                     title="CONNECTION NAME">
  919.                    <img src="http://placehold.it/50x50"></a></li>
  920.          
  921.                 <li><a href="#?w=300" rel="CHAR1con2" class="poplight"
  922.                    title="CONNECTION NAME">
  923.                    <img src="http://placehold.it/50x50"></a></li>
  924.                    
  925.                 <li><a href="#?w=300" rel="CHAR1con3" class="poplight"
  926.                    title="CONNECTION NAME">
  927.                    <img src="http://placehold.it/50x50"></a></li>
  928.                    
  929.                 <li><a href="#?w=300" rel="CHAR1con4" class="poplight"
  930.                    title="CONNECTION NAME">
  931.                    <img src="http://placehold.it/50x50"></a></li>
  932.                    
  933.                  <li><a href="#?w=300" rel="CHAR1con5" class="poplight"
  934.                    title="CONNECTION NAME">
  935.                    <img src="http://placehold.it/50x50"></a></li>
  936.          
  937.               </ul>
  938.              
  939.          </div> <!--connections-->
  940.          
  941.       </div> <!--tabs-->
  942.      
  943.       <!-- CONNECTIONS -->
  944.       <!--Here are the actual content boxes of the connection pop ups.
  945.      Make sure the divs here have the right id as the same in the above
  946.      section.-->
  947.      
  948.       <!-- CONNECTION 1-->
  949.      
  950.       <div id="CHAR1con1" class="popup_block">
  951.      
  952.        <div class="popup_txt">
  953.          <h1>CONNECTION NAME 1
  954.          <br /><span class="tw">Relation: Kind of relation here.</span></h1>
  955.          
  956.          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.
  957.          
  958.          </div> <!--popup_txt-->
  959.          
  960.          <div class="popup_tip"></div> <!--this is the little arrow-->
  961.          
  962.       </div> <!--popup-->
  963.      
  964.      
  965.       <!-- CONNECTION 2-->
  966.      
  967.       <div id="CHAR1con2" class="popup_block">
  968.      
  969.        <div class="popup_txt">
  970.          <h1>CONNECTION NAME 2
  971.          <br /><span class="tw">Relation: Relation</span></h1>
  972.          
  973.          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.
  974.          
  975.          </div> <!--popup_txt-->
  976.          
  977.          <div class="popup_tip"></div><!--the little arrow-->
  978.          
  979.       </div> <!--popup-->
  980.      
  981.      
  982.       <!-- CONNECTION 3-->
  983.      
  984.       <div id="CHAR1con3" class="popup_block">
  985.      
  986.        <div class="popup_txt">
  987.          <h1>CONNECTION NAME 3
  988.          <br /><span class="tw">Relation: Relation</span></h1>
  989.          
  990.          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.
  991.          
  992.          </div> <!--popup_txt-->
  993.          
  994.          <div class="popup_tip"></div><!--the little arrow-->
  995.          
  996.       </div> <!--popup-->
  997.      
  998.      
  999.       <!-- CONNECTION 4-->
  1000.      
  1001.       <div id="CHAR1con4" class="popup_block">
  1002.      
  1003.        <div class="popup_txt">
  1004.          <h1>CONNECTION NAME 4
  1005.          <br /><span class="tw">Relation: Relation</span></h1>
  1006.          
  1007.          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.
  1008.          
  1009.          </div> <!--popup_txt-->
  1010.          
  1011.          <div class="popup_tip"></div><!--the little arrow-->
  1012.          
  1013.       </div> <!--popup-->
  1014.      
  1015.      
  1016.       <!-- CONNECTION 5-->
  1017.      
  1018.       <div id="CHAR1con5" class="popup_block">
  1019.      
  1020.        <div class="popup_txt">
  1021.          <h1>CONNECTION NAME 5
  1022.          <br /><span class="tw">Relation: Relation</span></h1>
  1023.          
  1024.          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.
  1025.          
  1026.          </div> <!--popup_txt-->
  1027.          
  1028.          <div class="popup_tip"></div><!--the little arrow-->
  1029.          
  1030.       </div> <!--popup-->
  1031.      
  1032.      
  1033.       <!-- TAB 2 -->
  1034.      
  1035.       <div class="tabs" id="tab2a">
  1036.      
  1037.          <div class="tabcontent active" id="sub2a">
  1038.              
  1039.                 <h1> ALARIK DOBILEIT<br />
  1040.                
  1041.                 </h1>
  1042.    
  1043.                 <!-- BASICS -->
  1044.    
  1045.                 <h4>BASIC INFORMATION</h4>
  1046.                
  1047.            
  1048.                  
  1049.                 <!--- SHORT BIO -->
  1050.    
  1051. bio tba. stats on 2nd page.
  1052.                
  1053.                 <!-- PLOT POINTS -->
  1054.            
  1055.                 <h4>PLOT POINTS</h4>
  1056.                   <ul>
  1057.                    <li>Grew up in Nevarra.</li>
  1058.                    <li>Mother died in childbirth; father passed when Alarik was 15.</li>
  1059.                    <li>Apprenticed as an artist before being taken in by the Duchess.</li>
  1060.                    <li>Works as a painter and was secretly given the resources to specialize his magic under the Duchess.</li>
  1061.                    <li>Travels to the Inquisition alongside the Duchess; available as a companion.</li>
  1062.                  </ul>
  1063.  
  1064.                 <!-- ADD SOMETHING ELSE IF YOU LIKE -->
  1065.  
  1066.                 <h4>MAGE TALENTS</h4>
  1067.          
  1068.                <ul>
  1069.                  <li>Shapeshifter & Force mage.</li>
  1070.                 <li>Preferred forms: Mountain lion, domestic cat, great bear, blue jay, hawk.</li>
  1071.               </ul>
  1072.  
  1073.            
  1074.          </div> <!--tabcontent-->
  1075.          
  1076.          <!-- PAGE 2 -->
  1077.          
  1078.          <div class="tabcontent" id="sub2b">
  1079.          
  1080.          <h3>BASIC INFORMATION</h3>
  1081.          
  1082.          <blockquote>
  1083.          
  1084.    <p><b>FULL NAME</b> Alarik Dobileit<br>
  1085.    <b>NICKNAME(S)</b> N/A<br>
  1086.    <b>TITLE</b> Painter to the <a href=“https://frivolousfrills.tumblr.com/duchess”>Dowager Duchess Van Markham</a><br>
  1087.    <b>OCCUPATION</b> Professional painter<br>
  1088.    <b>AGE</b> 35 (Inquisition)<br>
  1089.    <b>DATE OF BIRTH</b> 23 Guardian<br>
  1090.    <b>NATIONALITY</b> Nevarran<br>
  1091.    <b>GENDER</b> Male<br>
  1092.    <b>ORIENTATION</b> Pan-romantic demisexual<br>
  1093.    <b>RELIGION</b> Andrastian (loosely)<br>
  1094.    <b>CLASS</b> Mage; Shapeshifter + Force specializations<br>
  1095.    
  1096.           </blockquote>
  1097.    
  1098.        
  1099.          <p><h3>PHYSICAL INFORMATION</h3>
  1100.                
  1101.          <blockquote>
  1102.        
  1103.     <p><b>FACE CLAIM</b> Ben Barnes<br>
  1104.     <b>HEIGHT</b> 5'11"<br>
  1105.     <b>EYE COLOUR</b> Dark brown<br>
  1106.     <b>HAIR COLOUR + STYLE</b> Dark brown, nearly black; wavy and slightly above shoulders<br>
  1107.     <b>DOMINANT HAND</b> Right<br>
  1108.     <b>DISTINGUISHING FEATURES</b> Slender but toned.<br>
  1109.     <b>ACCENT + INTENSITY</b> Nevarran (Eastern European), a bit heavy in common company, diluted among nobility.<br>
  1110.     <b>TATTOO(S)</b> N/A<br>
  1111.     <b>SCAR(S)</b> A few scattered.<br>
  1112.     <b>PIERCING(S)</b> One cartilage piercing.<br>
  1113.    
  1114.                </blockquote>
  1115.    
  1116.    
  1117.    
  1118.         <p><h3>BACKGROUND INFORMATION</h3>
  1119.        
  1120.         <blockquote>
  1121.                
  1122.     <p><b>HOMETOWN</b> Nevarra City, Nevarra<br>
  1123.     <b>CURRENT RESIDENCE</b> Skyhold<br>
  1124.     <b>LANGUAGE(S)</b> Trade tongue, Nevarran, some Orlesian<br>
  1125.     <b>SOCIAL CLASS</b> Commoner under noble employment<br>
  1126.     <b>EDUCATION</b> Basic literacy until employment --grew more extensive under the Duchess.<br>
  1127.     <b>FATHER</b> Dietrich Dobileit (deceased)<br>
  1128.     <b>MOTHER</b> Elena Dobileit (deceased)<br>
  1129.     <b>SHIP</b> Verse dependent<br>
  1130.     <b>SIBLING(S)</b> N/A<br>
  1131.     <b>CHILD(REN)</b> N/A<br>
  1132.     <b>PET(S)</b> N/A<br>
  1133.    
  1134.         </blockquote>
  1135.    
  1136.    
  1137.         <p><h3>PERSONALITY INFORMATION</h3>
  1138.        
  1139.         <blockquote>
  1140.                
  1141.     <p><b>JUNG TYPE</b> INFJ<br>
  1142.     <b>ENNEATYPE</b> Type 1 - The Reformer<br>
  1143.     <b>MORAL ALIGNMENT</b> Neutral Good<br>
  1144.     <b>TEMPERAMENT</b> Phlegmatic<br>
  1145.     <b>INTELLIGENCE TYPE</b> Spatial<br>
  1146.     <b>PERSONALITY STRENGTHS</b> Creative, intuitive, gentle, attentive listener, decisive, altruistic, hard-working and determined<br>
  1147.     <b>PERSONALITY WEAKNESSES</b> Perfectionist, extremely private, tires himself out from overwork, standoffish in his quietness, does not always seek to engage others if he doesn't want to<br>
  1148.    
  1149.         </blockquote>
  1150.    
  1151.            
  1152.         <p><h3>VICES + HABITS</h3>
  1153.        
  1154.         <blockquote>
  1155.                
  1156.     <p><b>SMOKES?</b> Never<br>
  1157.     <b>DRINKS?</b> Socially<br>
  1158.     <b>DRUGS?</b> Never<br>
  1159.     <b>HABIT(S)</b> Pinching fingers together, running hands through his hair, tying hair back, talking with hands, rubbing jaw<br>
  1160.     <b>HOBBIES</b> Painting, reading, hiking, sketching, studying/training<br>
  1161.     <b>LIKES</b> Animals, quiet space to work, one on one conversations, people-watching, old texts<br>
  1162.     <b>DISLIKES</b> Excessive drama, loud noises, too many people trying to engage him at once, Templars, nobility (Duchess excluded)<br>
  1163.            
  1164.        
  1165.    
  1166.         </blockquote>
  1167.              
  1168.           </div>
  1169.          
  1170.           <!-- PAGE 3 -->
  1171.           <div class="tabcontent" id="sub2c">
  1172.  
  1173.             CONTENT GOES HERE
  1174.  
  1175.           </div>
  1176.           <!--tabcontent sub-->
  1177.          
  1178.          
  1179.           <!-- PAGE LINKS -->
  1180.           <div class="footerlinks">
  1181.             <ul>
  1182.                 <li class="actives"><a href="#sub2a">&#9632;</a></li>
  1183.                 <li><a href="#sub2b">&#9632;</a></li>
  1184.                 <li><a href="#sub2c">&#9632;</a></li>
  1185.             </ul>
  1186.           </div> <!--footerlinks-->
  1187.          
  1188.           <!-- SIDE STATS -->
  1189.                    
  1190.           <div class="stats">
  1191.            
  1192.  
  1193.            
  1194.            
  1195.             <!-- SOCIAL -->
  1196.            
  1197.             <div class="social">
  1198.            
  1199.  
  1200.                
  1201.             <!--YOUTUBE
  1202.            <div class="fa fa-youtube square" aria-hidden="true"></div>
  1203.                <a href="YOURIMAGEURL" data-lightbox="CHAR2youtube" data-title="YOUR CAPTION">YOUTUBE</a>
  1204.                <br>-->
  1205.                
  1206.             <!--YOUR DATING APP OF CHOICE
  1207.            <div class="fa fa-fire square" aria-hidden="true"></div>
  1208.                <a href="YOURIMAGEURL" data-lightbox="CHAR2date" data-title="YOUR CAPTION">DATING APP</a>
  1209.                <a href="YOURIMAGEURL" data-lightbox="CHAR2date" data-title="YOUR CAPTION"></a>
  1210.                <br>-->
  1211.                
  1212.             <!--SNAPCHAT
  1213.            <div class="fa fa-snapchat square" aria-hidden="true"></div>
  1214.                <a href="YOURIMAGEURL" data-lightbox="CHAR2snapchat" data-title="YOUR CAPTION">SNAPCHAT</a>
  1215.                <a href="YOURIMAGEURL" data-lightbox="CHAR2snapchat" data-title="YOUR CAPTION"></a>
  1216.                <br>-->
  1217.        
  1218.            </div><!--social-->
  1219.            
  1220.           </div> <!--stats-->
  1221.          
  1222.           <!-- CONNECTIONS -->
  1223.          
  1224.           <div id="connections">
  1225.          
  1226.               <ul>
  1227.              
  1228.                 <li><a href="#?w=300" rel="CHAR2con1" class="poplight"
  1229.                     title="CONNECTION NAME">
  1230.                    <img src="http://placehold.it/50x50"></a></li>
  1231.          
  1232.                 <li><a href="#?w=300" rel="CHAR2con2" class="poplight"
  1233.                    title="CONNECTION NAME">
  1234.                    <img src="http://placehold.it/50x50"></a></li>
  1235.                    
  1236.                 <li><a href="#?w=300" rel="CHAR2con3" class="poplight"
  1237.                    title="CONNECTION NAME">
  1238.                    <img src="http://placehold.it/50x50"></a></li>
  1239.                    
  1240.                 <li><a href="#?w=300" rel="CHAR2con4" class="poplight"
  1241.                    title="CONNECTION NAME">
  1242.                    <img src="http://placehold.it/50x50"></a></li>
  1243.                    
  1244.                  <li><a href="#?w=300" rel="CHAR2con5" class="poplight"
  1245.                    title="CONNECTION NAME">
  1246.                    <img src="http://placehold.it/50x50"></a></li>
  1247.          
  1248.               </ul>
  1249.              
  1250.          </div> <!--connections-->
  1251.          
  1252.       </div> <!--tabs-->
  1253.      
  1254.       <!-- CONNECTIONS -->
  1255.      
  1256.       <!-- CONNECTION 1-->
  1257.      
  1258.       <div id="CHAR2con1" class="popup_block">
  1259.      
  1260.        <div class="popup_txt">
  1261.          <h1>CONNECTION NAME 1
  1262.          <br /><span class="tw">Relation: Kind of relation here.</span></h1>
  1263.          
  1264.          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.
  1265.          
  1266.          </div> <!--popup_txt-->
  1267.          
  1268.          <div class="popup_tip"></div> <!--this is the little arrow-->
  1269.          
  1270.       </div> <!--popup-->
  1271.      
  1272.      
  1273.       <!-- CONNECTION 2-->
  1274.      
  1275.       <div id="CHAR2con2" class="popup_block">
  1276.      
  1277.        <div class="popup_txt">
  1278.          <h1>CONNECTION NAME 2
  1279.          <br /><span class="tw">Relation: Relation</span></h1>
  1280.          
  1281.          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.
  1282.          
  1283.          </div> <!--popup_txt-->
  1284.          
  1285.          <div class="popup_tip"></div><!--the little arrow-->
  1286.          
  1287.       </div> <!--popup-->
  1288.      
  1289.      
  1290.       <!-- CONNECTION 3-->
  1291.      
  1292.       <div id="CHAR2con3" class="popup_block">
  1293.      
  1294.        <div class="popup_txt">
  1295.          <h1>CONNECTION NAME 3
  1296.          <br /><span class="tw">Relation: Relation</span></h1>
  1297.          
  1298.          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.
  1299.          
  1300.          </div> <!--popup_txt-->
  1301.          
  1302.          <div class="popup_tip"></div><!--the little arrow-->
  1303.          
  1304.       </div> <!--popup-->
  1305.      
  1306.      
  1307.       <!-- CONNECTION 4-->
  1308.      
  1309.       <div id="CHAR2con4" class="popup_block">
  1310.      
  1311.        <div class="popup_txt">
  1312.          <h1>CONNECTION NAME 4
  1313.          <br /><span class="tw">Relation: Relation</span></h1>
  1314.          
  1315.          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.
  1316.          
  1317.          </div> <!--popup_txt-->
  1318.          
  1319.          <div class="popup_tip"></div><!--the little arrow-->
  1320.          
  1321.       </div> <!--popup-->
  1322.      
  1323.      
  1324.       <!-- CONNECTION 5-->
  1325.      
  1326.       <div id="CHAR2con5" class="popup_block">
  1327.      
  1328.        <div class="popup_txt">
  1329.          <h1>CONNECTION NAME 5
  1330.          <br /><span class="tw">Relation: Relation</span></h1>
  1331.          
  1332.          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.
  1333.          
  1334.          </div> <!--popup_txt-->
  1335.          
  1336.          <div class="popup_tip"></div><!--the little arrow-->
  1337.          
  1338.       </div> <!--popup-->
  1339.      
  1340.      
  1341.       <!-- TAB 3 -->
  1342.      
  1343.       <div class="tabs" id="tab3a">
  1344.      
  1345.          <div class="tabcontent active" id="sub3a">
  1346.              
  1347.                 <h1> NESSA DORAN<br />
  1348.                
  1349.                 </h1>
  1350.    
  1351.                 <!-- BASICS -->
  1352.    
  1353.                 <h4>BASIC INFORMATION</h4>
  1354.                
  1355.            
  1356.                  
  1357.                 <!--- SHORT BIO -->
  1358.    
  1359. bio tba. stats on 2nd page.
  1360.                
  1361.                 <!-- PLOT POINTS -->
  1362.            
  1363.                 <h4>PLOT POINTS</h4>
  1364.                   <ul>
  1365.                    <li>Grew up in a lesser noble house.</li>
  1366.                    <li>Ran away from home at 15 after repeated rebellions.</li>
  1367.                    <li>Attacked in Darktown and tried to return home only to be shut out.</li>
  1368.                    <li>Gained street smarts and eventually took up work under the Red Iron.</li>
  1369.                    <li>Potential companion to Hawke and/or connection for the Inquisition.</li>
  1370.                  </ul>
  1371.  
  1372.                 <!-- ADD SOMETHING ELSE IF YOU LIKE -->
  1373.  
  1374.                 <h4>SKILL INFO</h4>
  1375.          
  1376.                <ul>
  1377.                  <li>Learned how to wield a weapon after time on the streets.</li>
  1378.                  <li>Berserker skills taught by a fellow mercenary who acted as a mentor.</li>
  1379.                </ul>
  1380.  
  1381.            
  1382.           </div> <!--tabcontent-->
  1383.          
  1384.           <!-- PAGE 2 -->
  1385.          
  1386.           <div class="tabcontent" id="sub3b">
  1387.          
  1388.           <h3>BASIC INFORMATION</h3>
  1389.          
  1390.           <blockquote>
  1391.          
  1392.     <p><b>FULL NAME</b> Nessa Doran<br>
  1393.     <b>NICKNAME(S)</b> Nes, Nessie<br>
  1394.     <b>TITLE</b> N/A</a><br>
  1395.     <b>OCCUPATION</b> Mercenary for the Red Iron<br>
  1396.     <b>AGE</b> 30 (Inquisition)<br>
  1397.     <b>DATE OF BIRTH</b> 25 Cloudreach<br>
  1398.     <b>NATIONALITY</b> Free Marcher - Kirkwall<br>
  1399.     <b>GENDER</b> Female<br>
  1400.     <b>ORIENTATION</b> TBD<br>
  1401.     <b>RELIGION</b> Agnostic<br>
  1402.     <b>CLASS</b> Two-handed warrior; Berserker specialization.<br>
  1403.    
  1404.           </blockquote>
  1405.    
  1406.        
  1407.          <p><h3>PHYSICAL INFORMATION</h3>
  1408.                
  1409.          <blockquote>
  1410.        
  1411.     <p><b>FACE CLAIM</b> Shannen Doherty<br>
  1412.     <b>HEIGHT</b> 5'7"<br>
  1413.     <b>EYE COLOUR</b> Blue<br>
  1414.     <b>HAIR COLOUR + STYLE</b> Black; straight and past shoulders.<br>
  1415.     <b>DOMINANT HAND</b> Left<br>
  1416.     <b>DISTINGUISHING FEATURES</b> Fit, strong arms and legs; narrower hips and average bust.<br>
  1417.     <b>ACCENT + INTENSITY</b> Kirkwallian (English), puts it on heavier than needed.<br>
  1418.     <b>TATTOO(S)</b> Rose vine tattoos down her back.<br>
  1419.     <b>SCAR(S)</b> Along her jaw and over her lip, rest are scattered.<br>
  1420.     <b>PIERCING(S)</b> Pierced lobes.<br>
  1421.    
  1422.                </blockquote>
  1423.    
  1424.    
  1425.    
  1426.         <p><h3>BACKGROUND INFORMATION</h3>
  1427.        
  1428.         <blockquote>
  1429.                
  1430.     <p><b>HOMETOWN</b> Hightown, Kirkwall<br>
  1431.     <b>CURRENT RESIDENCE</b> Lowtown+Darktown, Kirkwall<br>
  1432.     <b>LANGUAGE(S)</b> Trade tongue, some Orlesian<br>
  1433.     <b>SOCIAL CLASS</b> Noble-born; disowned<br>
  1434.     <b>EDUCATION</b> Noble education until fifteen<br>
  1435.     <b>FATHER</b> Collin Doran (alive)<br>
  1436.     <b>MOTHER</b> Moira Dorian (alive)<br>
  1437.     <b>SHIP</b> Verse dependent<br>
  1438.     <b>SIBLING(S)</b> N/A<br>
  1439.     <b>CHILD(REN)</b> N/A<br>
  1440.     <b>PET(S)</b> N/A<br>
  1441.    
  1442.         </blockquote>
  1443.    
  1444.    
  1445.         <p><h3>PERSONALITY INFORMATION</h3>
  1446.        
  1447.         <blockquote>
  1448.                
  1449.     <p><b>JUNG TYPE</b> ESTP<br>
  1450.     <b>ENNEATYPE</b> Type 8 - The Challenger<br>
  1451.     <b>MORAL ALIGNMENT</b> True Neutral<br>
  1452.     <b>TEMPERAMENT</b> Choleric<br>
  1453.     <b>INTELLIGENCE TYPE</b> Kinesthetic<br>
  1454.     <b>PERSONALITY STRENGTHS</b> Bold, rational, perceptive, dry wit, can engage easily, direct in social situations, takes initiative, looks out for those she cares about<br>
  1455.     <b>PERSONALITY WEAKNESSES</b> Crass, insensitive, defiant and a risk-taker, will use force as manipulation tactic, self-serving<br>
  1456.    
  1457.         </blockquote>
  1458.    
  1459.            
  1460.         <p><h3>VICES + HABITS</h3>
  1461.        
  1462.         <blockquote>
  1463.                
  1464.     <p><b>SMOKES?</b> Occasionally<br>
  1465.     <b>DRINKS?</b> Semi-frequently<br>
  1466.     <b>DRUGS?</b> Will try what's given to her at least once<br>
  1467.     <b>HABIT(S)</b> Digging heel into ground, cracking knuckles, rubbing her temple and behind her neck.<br>
  1468.     <b>HOBBIES</b> Physical training, card games, sharing stories, reading<br>
  1469.     <b>LIKES</b> Being active, talking, money, physical comforts (roof over her head, food, drink), animals, freedom to choose<br>
  1470.     <b>DISLIKES</b> Nobility, tight spaces, innocents being harmed, extended periods of silence<br>
  1471.            
  1472.        
  1473.    
  1474.         </blockquote>
  1475.              
  1476.           </div>
  1477.  
  1478.           <!-- PAGE 3 -->
  1479.           <div class="tabcontent" id="sub3c">
  1480.  
  1481.             CONTENT GOES HERE
  1482.  
  1483.           </div>
  1484.           <!--tabcontent sub-->
  1485.          
  1486.          
  1487.           <!-- PAGE LINKS -->
  1488.           <div class="footerlinks">
  1489.             <ul>
  1490.                 <li class="actives"><a href="#sub3a">&#9632;</a></li>
  1491.                 <li><a href="#sub3b">&#9632;</a></li>
  1492.                 <li><a href="#sub3c">&#9632;</a></li>
  1493.             </ul>
  1494.           </div> <!--footerlinks-->
  1495.          
  1496.           <!-- SIDE STATS -->
  1497.                    
  1498.           <div class="stats">
  1499.            
  1500.  
  1501.             <!-- LINKS -->
  1502.             <!-- Replace YOURTAG with the correct tag of yours.
  1503.            You can add more links as you need, just copy paste -->
  1504.            
  1505.  
  1506.            
  1507.             <!-- SOCIAL -->
  1508.            
  1509.             <div class="social">
  1510.            
  1511.  
  1512.                
  1513.             <!--YOUTUBE
  1514.            <div class="fa fa-youtube square" aria-hidden="true"></div>
  1515.                <a href="YOURIMAGEURL" data-lightbox="CHAR3youtube" data-title="YOUR CAPTION">YOUTUBE</a>
  1516.                <br>-->
  1517.                
  1518.             <!--YOUR DATING APP OF CHOICE
  1519.            <div class="fa fa-fire square" aria-hidden="true"></div>
  1520.                <a href="YOURIMAGEURL" data-lightbox="CHAR3date" data-title="YOUR CAPTION">DATING APP</a>
  1521.                <a href="YOURIMAGEURL" data-lightbox="CHAR3date" data-title="YOUR CAPTION"></a>
  1522.                <br>-->
  1523.                
  1524.             <!--SNAPCHAT
  1525.            <div class="fa fa-snapchat square" aria-hidden="true"></div>
  1526.                <a href="YOURIMAGEURL" data-lightbox="CHAR3snapchat" data-title="YOUR CAPTION">SNAPCHAT</a>
  1527.                <a href="YOURIMAGEURL" data-lightbox="CHAR3snapchat" data-title="YOUR CAPTION"></a>
  1528.                <br>-->
  1529.        
  1530.            </div><!--social-->
  1531.            
  1532.           </div> <!--stats-->
  1533.          
  1534.           <!-- CONNECTIONS -->
  1535.          
  1536.           <div id="connections">
  1537.          
  1538.               <ul>
  1539.              
  1540.                 <li><a href="#?w=300" rel="CHAR3con1" class="poplight"
  1541.                     title="CONNECTION NAME">
  1542.                    <img src="http://placehold.it/50x50"></a></li>
  1543.          
  1544.                 <li><a href="#?w=300" rel="CHAR3con2" class="poplight"
  1545.                    title="CONNECTION NAME">
  1546.                    <img src="http://placehold.it/50x50"></a></li>
  1547.                    
  1548.                 <li><a href="#?w=300" rel="CHAR3con3" class="poplight"
  1549.                    title="CONNECTION NAME">
  1550.                    <img src="http://placehold.it/50x50"></a></li>
  1551.                    
  1552.                 <li><a href="#?w=300" rel="CHAR3con4" class="poplight"
  1553.                    title="CONNECTION NAME">
  1554.                    <img src="http://placehold.it/50x50"></a></li>
  1555.                    
  1556.                  <li><a href="#?w=300" rel="CHAR3con5" class="poplight"
  1557.                    title="CONNECTION NAME">
  1558.                    <img src="http://placehold.it/50x50"></a></li>
  1559.          
  1560.               </ul>
  1561.              
  1562.          </div> <!--connections-->
  1563.          
  1564.       </div> <!--tabs-->
  1565.      
  1566.       <!-- CONNECTIONS -->
  1567.      
  1568.       <!-- CONNECTION 1-->
  1569.      
  1570.       <div id="CHAR3con1" class="popup_block">
  1571.      
  1572.        <div class="popup_txt">
  1573.          <h1>CONNECTION NAME 1
  1574.          <br /><span class="tw">Relation: Kind of relation here.</span></h1>
  1575.          
  1576.          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.
  1577.          
  1578.          </div> <!--popup_txt-->
  1579.          
  1580.          <div class="popup_tip"></div> <!--this is the little arrow-->
  1581.          
  1582.       </div> <!--popup-->
  1583.      
  1584.      
  1585.       <!-- CONNECTION 2-->
  1586.      
  1587.       <div id="CHAR3con2" class="popup_block">
  1588.      
  1589.        <div class="popup_txt">
  1590.          <h1>CONNECTION NAME 2
  1591.          <br /><span class="tw">Relation: Relation</span></h1>
  1592.          
  1593.          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.
  1594.          
  1595.          </div> <!--popup_txt-->
  1596.          
  1597.          <div class="popup_tip"></div><!--the little arrow-->
  1598.          
  1599.       </div> <!--popup-->
  1600.      
  1601.      
  1602.       <!-- CONNECTION 3-->
  1603.      
  1604.       <div id="CHAR3con3" class="popup_block">
  1605.      
  1606.        <div class="popup_txt">
  1607.          <h1>CONNECTION NAME 3
  1608.          <br /><span class="tw">Relation: Relation</span></h1>
  1609.          
  1610.          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.
  1611.          
  1612.          </div> <!--popup_txt-->
  1613.          
  1614.          <div class="popup_tip"></div><!--the little arrow-->
  1615.          
  1616.       </div> <!--popup-->
  1617.      
  1618.      
  1619.       <!-- CONNECTION 4-->
  1620.      
  1621.       <div id="CHAR3con4" class="popup_block">
  1622.      
  1623.        <div class="popup_txt">
  1624.          <h1>CONNECTION NAME 4
  1625.          <br /><span class="tw">Relation: Relation</span></h1>
  1626.          
  1627.          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.
  1628.          
  1629.          </div> <!--popup_txt-->
  1630.          
  1631.          <div class="popup_tip"></div><!--the little arrow-->
  1632.          
  1633.       </div> <!--popup-->
  1634.      
  1635.      
  1636.       <!-- CONNECTION 5-->
  1637.      
  1638.       <div id="CHAR3con5" class="popup_block">
  1639.      
  1640.        <div class="popup_txt">
  1641.          <h1>CONNECTION NAME 5
  1642.          <br /><span class="tw">Relation: Relation</span></h1>
  1643.          
  1644.          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.
  1645.          
  1646.          </div> <!--popup_txt-->
  1647.          
  1648.          <div class="popup_tip"></div><!--the little arrow-->
  1649.          
  1650.       </div> <!--popup-->
  1651.      
  1652.      
  1653.       <!-- TAB 4 -->
  1654.      
  1655.       <div class="tabs" id="tab4a">
  1656.      
  1657.          <div class="tabcontent active" id="sub4a">
  1658.              
  1659.                 <h1> MAINIO<br />
  1660.                  
  1661.                 </h1>
  1662.    
  1663.                 <!-- BASICS -->
  1664.    
  1665.                  
  1666.                 <!--- SHORT BIO -->
  1667.    
  1668. bio tba. stats on 2nd page.
  1669.                
  1670.                 <!-- PLOT POINTS -->
  1671.            
  1672.                 <h4>PLOT POINTS</h4>
  1673.                   <ul>
  1674.                    <li>Raised in the Anderfels, magic manifested young.</li>
  1675.                    <li>Trained under Astraeus, an elvhen mage.</li>
  1676.                    <li>Left the Anderfels at 17.</li>
  1677.                    <li>Travels Thedas amassing new knowledge and experiencing current events from a distance.</li>
  1678.                    <li>Is available as companion for any of the 3 games.</li>
  1679.                  </ul>
  1680.  
  1681.                 <!-- ADD SOMETHING ELSE IF YOU LIKE -->
  1682.  
  1683.                 <h4>MAGE TALENTS</h4>
  1684.          
  1685.                <ul>
  1686.                  <li>Battlemage and Spirit Healing are his two main studies.</li>
  1687.                  <li>Uses a lot of entropic and arcane spells as well.</li>
  1688.                </ul>
  1689.  
  1690.            
  1691.           </div> <!--tabcontent-->
  1692.          
  1693.           <!-- PAGE 2 -->
  1694.          
  1695.           <div class="tabcontent" id="sub4b">
  1696.          
  1697.           <h3>BASIC INFORMATION</h3>
  1698.          
  1699.     <p><b>FULL NAME</b> Mainio (surname unknown)<br>
  1700.     <b>NICKNAME(S)</b> N/A<br>
  1701.     <b>TITLE</b> N/A<br>
  1702.     <b>OCCUPATION</b> Apostate<br>
  1703.     <b>AGE</b> 37 (Inquisition)<br>
  1704.     <b>DATE OF BIRTH</b> 17 Drakonis<br>
  1705.     <b>NATIONALITY</b> Anders<br>
  1706.     <b>GENDER</b> Male<br>
  1707.     <b>ORIENTATION</b> TBD<br>
  1708.     <b>RELIGION</b> Agnostic<br>
  1709.     <b>CLASS</b> Mage; Battlemage + Spirit Healer specializations<br>
  1710.    
  1711.           </blockquote>
  1712.    
  1713.        
  1714.          <p><h3>PHYSICAL INFORMATION</h3>
  1715.                
  1716.          <blockquote>
  1717.        
  1718.     <p><b>FACE CLAIM</b> Karl Urban as Éomer<br>
  1719.     <b>HEIGHT</b> 6'2"<br>
  1720.     <b>EYE COLOUR</b> Hazel w/ green tones<br>
  1721.     <b>HAIR COLOUR + STYLE</b> Sandy blond, past shoulders and wavy.<br>
  1722.     <b>DOMINANT HAND</b> Left<br>
  1723.     <b>DISTINGUISHING FEATURES</b> Sturdy build, broad-shouldered.<br>
  1724.     <b>ACCENT + INTENSITY</b> Heavy mix of accents, primarily Anders (Germanic) accent when guard lowered.<br>
  1725.     <b>TATTOO(S)</b> Knotted designs down his back, similar patterns around his wrists.<br>
  1726.     <b>SCAR(S)</b> Several, one notable one across his cheek.<br>
  1727.     <b>PIERCING(S)</b> Lobe and cartilage piercings.<br>
  1728.    
  1729.                </blockquote>
  1730.    
  1731.    
  1732.    
  1733.         <p><h3>BACKGROUND INFORMATION</h3>
  1734.        
  1735.         <blockquote>
  1736.                
  1737.     <p><b>HOMETOWN</b> Hossberg, Anderfels<br>
  1738.     <b>CURRENT RESIDENCE</b> Traveling<br>
  1739.     <b>LANGUAGE(S)</b> Too many, speaks Trade tongue most often.<br>
  1740.     <b>SOCIAL CLASS</b> Unknown<br>
  1741.     <b>EDUCATION</b> Taught and trained by <a href=“https://starshrouded.tumblr.com”>Astraeus</a>.<br>
  1742.     <b>FATHER</b> Unknown<br>
  1743.     <b>MOTHER</b> Unknown<br>
  1744.     <b>SHIP</b> Verse dependent<br>
  1745.     <b>SIBLING(S)</b> N/A<br>
  1746.     <b>CHILD(REN)</b> N/A<br>
  1747.     <b>PET(S)</b> N/A<br>
  1748.    
  1749.         </blockquote>
  1750.    
  1751.    
  1752.         <p><h3>PERSONALITY INFORMATION</h3>
  1753.        
  1754.         <blockquote>
  1755.                
  1756.     <p><b>JUNG TYPE</b> ENTP<br>
  1757.     <b>ENNEATYPE</b> Type 8 - The Challenger<br>
  1758.     <b>MORAL ALIGNMENT</b> Chaotic Neutral<br>
  1759.     <b>TEMPERAMENT</b> Sanguine<br>
  1760.     <b>INTELLIGENCE TYPE</b> Linguistic<br>
  1761.     <b>PERSONALITY STRENGTHS</b> Intelligent, quick-witted, creative, charismatic, observant, thinks well on his feet, logical while eager to think outside the box<br>
  1762.     <b>PERSONALITY WEAKNESSES</b> Insensitive, self-serving, borders on argumentative, occasionally disregards people's comfort, dislikes practical matters, flighty<br>
  1763.    
  1764.         </blockquote>
  1765.    
  1766.            
  1767.         <p><h3>VICES + HABITS</h3>
  1768.        
  1769.         <blockquote>
  1770.                
  1771.     <p><b>SMOKES?</b> Semi-frequently<br>
  1772.     <b>DRINKS?</b> Socially<br>
  1773.     <b>DRUGS?</b> Why not<br>
  1774.     <b>HABIT(S)</b> Tapping fingers, humming, singing lowly, motions with hands<br>
  1775.     <b>HOBBIES</b> Reading, people-watching, studying magic, traveling, learning new languages & history<br>
  1776.    <b>LIKES</b> Nature, new places, ruins, magic, music, books, storytelling, new experiences of most kinds<br>
  1777.    <b>DISLIKES</b> Restrictions, excessive rules, overly serious individuals, when his self-preservation is threatened<br>
  1778.            
  1779.        
  1780.    
  1781.        </blockquote>
  1782.              
  1783.          </div>
  1784.          
  1785.           <!-- PAGE 3 -->
  1786.          <div class="tabcontent" id="sub4c">
  1787.  
  1788.             CONTENT GOES HERE
  1789.  
  1790.          </div>
  1791.           <!--tabcontent sub-->
  1792.          
  1793.          
  1794.          <!-- PAGE LINKS -->
  1795.          <div class="footerlinks">
  1796.             <ul>
  1797.                 <li class="actives"><a href="#sub4a">&#9632;</a></li>
  1798.                 <li><a href="#sub4b">&#9632;</a></li>
  1799.                 <li><a href="#sub4c">&#9632;</a></li>
  1800.             </ul>
  1801.           </div> <!--footerlinks-->
  1802.          
  1803.           <!-- SIDE STATS -->
  1804.                    
  1805.           <div class="stats">
  1806.            
  1807.  
  1808.             <!-- LINKS -->
  1809.             <!-- Replace YOURTAG with the correct tag of yours.
  1810.            You can add more links as you need, just copy paste -->
  1811.            
  1812.  
  1813.            
  1814.             <!-- SOCIAL -->
  1815.            
  1816.             <div class="social">
  1817.            
  1818.  
  1819.                
  1820.             <!--YOUTUBE
  1821.            <div class="fa fa-youtube square" aria-hidden="true"></div>
  1822.                <a href="YOURIMAGEURL" data-lightbox="CHAR4youtube" data-title="YOUR CAPTION">YOUTUBE</a>
  1823.                <br>-->
  1824.                
  1825.             <!--YOUR DATING APP OF CHOICE
  1826.            <div class="fa fa-fire square" aria-hidden="true"></div>
  1827.                <a href="YOURIMAGEURL" data-lightbox="CHAR4date" data-title="YOUR CAPTION">DATING APP</a>
  1828.                <a href="YOURIMAGEURL" data-lightbox="CHAR4date" data-title="YOUR CAPTION"></a>
  1829.                <br>-->
  1830.                
  1831.             <!--SNAPCHAT
  1832.            <div class="fa fa-snapchat square" aria-hidden="true"></div>
  1833.                <a href="YOURIMAGEURL" data-lightbox="CHAR4snapchat" data-title="YOUR CAPTION">SNAPCHAT</a>
  1834.                <a href="YOURIMAGEURL" data-lightbox="CHAR4snapchat" data-title="YOUR CAPTION"></a>
  1835.                <br>-->
  1836.        
  1837.            </div><!--social-->
  1838.            
  1839.           </div> <!--stats-->
  1840.          
  1841.           <!-- CONNECTIONS -->
  1842.          
  1843.           <div id="connections">
  1844.          
  1845.               <ul>
  1846.              
  1847.                 <li><a href="#?w=300" rel="CHAR4con1" class="poplight"
  1848.                     title="CONNECTION NAME">
  1849.                    <img src="http://placehold.it/50x50"></a></li>
  1850.          
  1851.                 <li><a href="#?w=300" rel="CHAR4con2" class="poplight"
  1852.                    title="CONNECTION NAME">
  1853.                    <img src="http://placehold.it/50x50"></a></li>
  1854.                    
  1855.                 <li><a href="#?w=300" rel="CHAR4con3" class="poplight"
  1856.                    title="CONNECTION NAME">
  1857.                    <img src="http://placehold.it/50x50"></a></li>
  1858.                    
  1859.                 <li><a href="#?w=300" rel="CHAR4con4" class="poplight"
  1860.                    title="CONNECTION NAME">
  1861.                    <img src="http://placehold.it/50x50"></a></li>
  1862.                    
  1863.                  <li><a href="#?w=300" rel="CHAR4con5" class="poplight"
  1864.                    title="CONNECTION NAME">
  1865.                    <img src="http://placehold.it/50x50"></a></li>
  1866.          
  1867.               </ul>
  1868.              
  1869.          </div> <!--connections-->
  1870.          
  1871.       </div> <!--tabs-->
  1872.      
  1873.       <!-- CONNECTIONS -->
  1874.      
  1875.       <!-- CONNECTION 1-->
  1876.      
  1877.       <div id="CHAR4con1" class="popup_block">
  1878.      
  1879.        <div class="popup_txt">
  1880.          <h1>CONNECTION NAME 1
  1881.          <br /><span class="tw">Relation: Kind of relation here.</span></h1>
  1882.          
  1883.          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.
  1884.          
  1885.          </div> <!--popup_txt-->
  1886.          
  1887.          <div class="popup_tip"></div> <!--this is the little arrow-->
  1888.          
  1889.       </div> <!--popup-->
  1890.      
  1891.      
  1892.       <!-- CONNECTION 2-->
  1893.      
  1894.       <div id="CHAR4con2" class="popup_block">
  1895.      
  1896.        <div class="popup_txt">
  1897.          <h1>CONNECTION NAME 2
  1898.          <br /><span class="tw">Relation: Relation</span></h1>
  1899.          
  1900.          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.
  1901.          
  1902.          </div> <!--popup_txt-->
  1903.          
  1904.          <div class="popup_tip"></div><!--the little arrow-->
  1905.          
  1906.       </div> <!--popup-->
  1907.      
  1908.      
  1909.       <!-- CONNECTION 3-->
  1910.      
  1911.       <div id="CHAR4con3" class="popup_block">
  1912.      
  1913.        <div class="popup_txt">
  1914.          <h1>CONNECTION NAME 3
  1915.          <br /><span class="tw">Relation: Relation</span></h1>
  1916.          
  1917.          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.
  1918.          
  1919.          </div> <!--popup_txt-->
  1920.          
  1921.          <div class="popup_tip"></div><!--the little arrow-->
  1922.          
  1923.       </div> <!--popup-->
  1924.      
  1925.      
  1926.       <!-- CONNECTION 4-->
  1927.      
  1928.       <div id="CHAR4con4" class="popup_block">
  1929.      
  1930.        <div class="popup_txt">
  1931.          <h1>CONNECTION NAME 4
  1932.          <br /><span class="tw">Relation: Relation</span></h1>
  1933.          
  1934.          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.
  1935.          
  1936.          </div> <!--popup_txt-->
  1937.          
  1938.          <div class="popup_tip"></div><!--the little arrow-->
  1939.          
  1940.       </div> <!--popup-->
  1941.      
  1942.      
  1943.       <!-- CONNECTION 5-->
  1944.      
  1945.       <div id="CHAR4con5" class="popup_block">
  1946.      
  1947.        <div class="popup_txt">
  1948.          <h1>CONNECTION NAME 5
  1949.          <br /><span class="tw">Relation: Relation</span></h1>
  1950.          
  1951.          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.
  1952.          
  1953.          </div> <!--popup_txt-->
  1954.          
  1955.          <div class="popup_tip"></div><!--the little arrow-->
  1956.          
  1957.       </div> <!--popup-->
  1958.      
  1959.      
  1960.       <!-- TAB 5 -->
  1961.      
  1962.       <div class="tabs" id="tab5a">
  1963.      
  1964.          <div class="tabcontent active" id="sub5a">
  1965.              
  1966.                 <h1> ROWAN<br />
  1967.                  
  1968.                 </h1>
  1969.    
  1970.                 <!-- BASICS -->
  1971.    
  1972.                 <h4>BASIC INFORMATION</h4>
  1973.                
  1974.            
  1975.                  
  1976.                 <!--- SHORT BIO -->
  1977.    
  1978. bio tba. stats on 2nd page.
  1979.                
  1980.                 <!-- PLOT POINTS -->
  1981.            
  1982.                 <h4>PLOT POINTS</h4>
  1983.                   <ul>
  1984.                    <li>Born in Antiva, worked alongside mother 'til 13.</li>
  1985.                    <li>Stowed away on a ship to Orlais when mother died.</li>
  1986.                    <li>Worked as a servant for several years.</li>
  1987.                    <li>Became a mercenary in Val Royeaux after leaving noble's estate.</li>
  1988.                    <li>Works for the Inquisition as an agent, often under Leliana.</li>
  1989.                  </ul>
  1990.  
  1991.                 <!-- ADD SOMETHING ELSE IF YOU LIKE -->
  1992.  
  1993.                 <h4>SKILL INFO</h4>
  1994.          
  1995.                <ul>
  1996.                  <li>Picked up assassin skillset as a mercenary.</li>
  1997.                  <li>Occasionally helped Red Jenny with nobility knowledge.</li>
  1998.                </ul>
  1999.  
  2000.            
  2001.           </div> <!--tabcontent-->
  2002.          
  2003.           <!-- PAGE 2 -->
  2004.          
  2005.           <div class="tabcontent" id="sub5b">
  2006.          
  2007.           <h3>BASIC INFORMATION</h3>
  2008.          
  2009.           <blockquote>
  2010.          
  2011.     <p><b>FULL NAME</b> Rowan<br>
  2012.     <b>NICKNAME(S)</b> N/A<br>
  2013.     <b>TITLE</b> N/A</a><br>
  2014.     <b>OCCUPATION</b> Inquisition agent<br>
  2015.     <b>AGE</b> 26 (Inquisition)<br>
  2016.     <b>DATE OF BIRTH</b> 2 Firstfall<br>
  2017.     <b>NATIONALITY</b> Antivan<br>
  2018.     <b>GENDER</b> Male<br>
  2019.     <b>ORIENTATION</b> Pan-romantic demisexual<br>
  2020.     <b>RELIGION</b> Agnostic<br>
  2021.     <b>CLASS</b> Duel-dagger rogue; Assassin specialization.<br>
  2022.    
  2023.           </blockquote>
  2024.    
  2025.        
  2026.          <p><h3>PHYSICAL INFORMATION</h3>
  2027.                
  2028.          <blockquote>
  2029.        
  2030.     <p><b>FACE CLAIM</b> Luke Pasqualino<br>
  2031.     <b>HEIGHT</b> 5'3"<br>
  2032.     <b>EYE COLOUR</b> Honey brown<br>
  2033.     <b>HAIR COLOUR + STYLE</b> Dark brown, nearly black; wavy and past chin-length.<br>
  2034.     <b>DOMINANT HAND</b> Left<br>
  2035.     <b>DISTINGUISHING FEATURES</b> Lithe but compact figure.<br>
  2036.     <b>ACCENT + INTENSITY</b> Slight mix of Orlesian (French) & Antivan (Spanish) accent, gets heavy when aggravated.<br>
  2037.    <b>TATTOO(S)</b> N/A<br>
  2038.    <b>SCAR(S)</b> Scars over over his lip and under his eye. various others on his body.<br>
  2039.    <b>PIERCING(S)</b> Pierced lobes and cartilages.<br>
  2040.    
  2041.               </blockquote>
  2042.    
  2043.    
  2044.    
  2045.        <p><h3>BACKGROUND INFORMATION</h3>
  2046.        
  2047.        <blockquote>
  2048.                
  2049.    <p><b>HOMETOWN</b> Antiva City, Antiva<br>
  2050.    <b>CURRENT RESIDENCE</b> Orlais; Skyhold depending<br>
  2051.     <b>LANGUAGE(S)</b> Trade tongue, Antivan, Orlesian<br>
  2052.     <b>SOCIAL CLASS</b> Commoner<br>
  2053.     <b>EDUCATION</b> Low-literacy, natural musician that learns by ear, photographic memory.<br>
  2054.     <b>FATHER</b> Unknown, of Orlesian origin<br>
  2055.     <b>MOTHER</b> Belva (deceased)<br>
  2056.     <b>SHIP</b> Verse dependent<br>
  2057.     <b>SIBLING(S)</b> N/A<br>
  2058.     <b>CHILD(REN)</b> N/A<br>
  2059.     <b>PET(S)</b> N/A<br>
  2060.    
  2061.         </blockquote>
  2062.    
  2063.    
  2064.         <p><h3>PERSONALITY INFORMATION</h3>
  2065.        
  2066.         <blockquote>
  2067.                
  2068.     <p><b>JUNG TYPE</b> ISFJ<br>
  2069.     <b>ENNEATYPE</b> Type 6 - The Loyalist<br>
  2070.     <b>MORAL ALIGNMENT</b> Neutral Good/True Neutral (dependent)<br>
  2071.     <b>TEMPERAMENT</b> Melancholic<br>
  2072.     <b>INTELLIGENCE TYPE</b> Musical<br>
  2073.     <b>PERSONALITY STRENGTHS</b> Loyal, hardworking, observant, reliable, supportive, practical and meticulous, quietly compassionate, protective<br>
  2074.     <b>PERSONALITY WEAKNESSES</b> Represses emotions, overly humble, can be passive to slights and mistreatment, seemingly cold, low self-worth, fierce temper when pushed, irritable<br>
  2075.    
  2076.         </blockquote>
  2077.    
  2078.            
  2079.         <p><h3>VICES + HABITS</h3>
  2080.        
  2081.         <blockquote>
  2082.                
  2083.     <p><b>SMOKES?</b> Never<br>
  2084.     <b>DRINKS?</b> Rarely<br>
  2085.     <b>DRUGS?</b> Never<br>
  2086.     <b>HABIT(S)</b> Clicking tongue, scratching facial scars<br>
  2087.     <b>HOBBIES</b> Long walks, exercising, playing music, cooking<br>
  2088.     <b>LIKES</b> Order, time to himself, physical training, music, helping others, singing (alone), having purpose<br>
  2089.     <b>DISLIKES</b> Being treated as lesser, mistreatment of others, being purposeless, crowds, too much attention, excessive touching without permission<br>
  2090.            
  2091.        
  2092.    
  2093.         </blockquote>
  2094.              
  2095.           </div>
  2096.          
  2097.           <!-- PAGE 3 -->
  2098.           <div class="tabcontent" id="sub5c">
  2099.  
  2100.             CONTENT GOES HERE
  2101.  
  2102.           </div>
  2103.           <!--tabcontent sub-->
  2104.          
  2105.          
  2106.           <!-- PAGE LINKS -->
  2107.           <div class="footerlinks">
  2108.             <ul>
  2109.                 <li class="actives"><a href="#sub5a">&#9632;</a></li>
  2110.                 <li><a href="#sub5b">&#9632;</a></li>
  2111.                 <li><a href="#sub5c">&#9632;</a></li>
  2112.             </ul>
  2113.           </div> <!--footerlinks-->
  2114.          
  2115.           <!-- SIDE STATS -->
  2116.                    
  2117.           <div class="stats">
  2118.            
  2119.        
  2120.             <!-- LINKS -->
  2121.             <!-- Replace YOURTAG with the correct tag of yours.
  2122.            You can add more links as you need, just copy paste -->
  2123.            
  2124.        
  2125.            
  2126.            
  2127.             <!-- SOCIAL -->
  2128.            
  2129.             <div class="social">
  2130.            
  2131.          
  2132.                
  2133.             <!--YOUTUBE
  2134.            <div class="fa fa-youtube square" aria-hidden="true"></div>
  2135.                <a href="YOURIMAGEURL" data-lightbox="CHAR5youtube" data-title="YOUR CAPTION">YOUTUBE</a>
  2136.                <br>-->
  2137.                
  2138.             <!--YOUR DATING APP OF CHOICE
  2139.            <div class="fa fa-fire square" aria-hidden="true"></div>
  2140.                <a href="YOURIMAGEURL" data-lightbox="CHAR5date" data-title="YOUR CAPTION">DATING APP</a>
  2141.                <a href="YOURIMAGEURL" data-lightbox="CHAR5date" data-title="YOUR CAPTION"></a>
  2142.                <br>-->
  2143.                
  2144.             <!--SNAPCHAT
  2145.            <div class="fa fa-snapchat square" aria-hidden="true"></div>
  2146.                <a href="YOURIMAGEURL" data-lightbox="CHAR5snapchat" data-title="YOUR CAPTION">SNAPCHAT</a>
  2147.                <a href="YOURIMAGEURL" data-lightbox="CHAR5snapchat" data-title="YOUR CAPTION"></a>
  2148.                <br>-->
  2149.        
  2150.            </div><!--social-->
  2151.            
  2152.           </div> <!--stats-->
  2153.          
  2154.           <!-- CONNECTIONS -->
  2155.          
  2156.           <div id="connections">
  2157.          
  2158.               <ul>
  2159.              
  2160.                 <li><a href="#?w=300" rel="CHAR5con1" class="poplight"
  2161.                     title="CONNECTION NAME">
  2162.                    <img src="http://placehold.it/50x50"></a></li>
  2163.          
  2164.                 <li><a href="#?w=300" rel="CHAR5con2" class="poplight"
  2165.                    title="CONNECTION NAME">
  2166.                    <img src="http://placehold.it/50x50"></a></li>
  2167.                    
  2168.                 <li><a href="#?w=300" rel="CHAR5con3" class="poplight"
  2169.                    title="CONNECTION NAME">
  2170.                    <img src="http://placehold.it/50x50"></a></li>
  2171.                    
  2172.                 <li><a href="#?w=300" rel="CHAR5con4" class="poplight"
  2173.                    title="CONNECTION NAME">
  2174.                    <img src="http://placehold.it/50x50"></a></li>
  2175.                    
  2176.                  <li><a href="#?w=300" rel="CHAR5con5" class="poplight"
  2177.                    title="CONNECTION NAME">
  2178.                    <img src="http://placehold.it/50x50"></a></li>
  2179.          
  2180.               </ul>
  2181.              
  2182.          </div> <!--connections-->
  2183.          
  2184.       </div> <!--tabs-->
  2185.      
  2186.       <!-- CONNECTIONS -->
  2187.      
  2188.       <!-- CONNECTION 1-->
  2189.      
  2190.       <div id="CHAR5con1" class="popup_block">
  2191.      
  2192.        <div class="popup_txt">
  2193.          <h1>CONNECTION NAME 1
  2194.          <br /><span class="tw">Relation: Kind of relation here.</span></h1>
  2195.          
  2196.          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.
  2197.          
  2198.          </div> <!--popup_txt-->
  2199.          
  2200.          <div class="popup_tip"></div> <!--this is the little arrow-->
  2201.          
  2202.       </div> <!--popup-->
  2203.      
  2204.      
  2205.       <!-- CONNECTION 2-->
  2206.      
  2207.       <div id="CHAR5con2" class="popup_block">
  2208.      
  2209.        <div class="popup_txt">
  2210.          <h1>CONNECTION NAME 2
  2211.          <br /><span class="tw">Relation: Relation</span></h1>
  2212.          
  2213.          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.
  2214.          
  2215.          </div> <!--popup_txt-->
  2216.          
  2217.          <div class="popup_tip"></div><!--the little arrow-->
  2218.          
  2219.       </div> <!--popup-->
  2220.      
  2221.      
  2222.       <!-- CONNECTION 3-->
  2223.      
  2224.       <div id="CHAR5con3" class="popup_block">
  2225.      
  2226.        <div class="popup_txt">
  2227.          <h1>CONNECTION NAME 3
  2228.          <br /><span class="tw">Relation: Relation</span></h1>
  2229.          
  2230.          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.
  2231.          
  2232.          </div> <!--popup_txt-->
  2233.          
  2234.          <div class="popup_tip"></div><!--the little arrow-->
  2235.          
  2236.       </div> <!--popup-->
  2237.      
  2238.      
  2239.       <!-- CONNECTION 4-->
  2240.      
  2241.       <div id="CHAR5con4" class="popup_block">
  2242.      
  2243.        <div class="popup_txt">
  2244.          <h1>CONNECTION NAME 4
  2245.          <br /><span class="tw">Relation: Relation</span></h1>
  2246.          
  2247.          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.
  2248.          
  2249.          </div> <!--popup_txt-->
  2250.          
  2251.          <div class="popup_tip"></div><!--the little arrow-->
  2252.          
  2253.       </div> <!--popup-->
  2254.      
  2255.      
  2256.       <!-- CONNECTION 5-->
  2257.      
  2258.       <div id="CHAR5con5" class="popup_block">
  2259.      
  2260.        <div class="popup_txt">
  2261.          <h1>CONNECTION NAME 5
  2262.          <br /><span class="tw">Relation: Relation</span></h1>
  2263.          
  2264.          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.
  2265.          
  2266.          </div> <!--popup_txt-->
  2267.          
  2268.          <div class="popup_tip"></div><!--the little arrow-->
  2269.          
  2270.       </div> <!--popup-->
  2271.      
  2272.      
  2273.      
  2274.     </div> <!--container-->
  2275.    
  2276.     <footer>
  2277.       <a href="https://nonspace.tumblr.com/tagged/mcodes"><i class="fa fa-copyright" aria-hidden="true"></i> NNSPC</a>
  2278.     </footer>
  2279.    
  2280.   </body>
  2281. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!