API tools faq
paste
Advertisement
altraviolence

page 05 - soul (character page ; v1 - horizontal scrolling)

altraviolence
Aug 5th, 2017
1,864
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 28.93 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. SOUL character page (05) by PEACHTHMS | peachthms.tumblr.com
  6. V1.0
  7. Version 1 - horizontal scrolling
  8.  
  9. - do not claim this page or any of the code as your own
  10. - do not redistribute this page or any of the code as your own
  11. - do not mix my code with another theme maker's code
  12. - do not remove or edit the credit in anyway; it must remain visible in the code and on the page
  13.    
  14. HOW TO EDIT
  15.  
  16. TO ADD A NEW FILTER
  17.    
  18.    Find <div id="filters">.
  19.    
  20.    Underneath it, add <div class="btn" data-filter=""> </div>
  21.    
  22.    The class must remain as "btn".
  23.    
  24.    Inbetween the data-filter quotation marks, add your filter name. Do not use spaces, if it has to be two words either make it one word or use hyphens. I recommend keeping it short and sweet.
  25.    
  26.    Inbetween > </div> add your filter name again, this is what the user will see on the screen.
  27.    
  28.    Example.
  29.    
  30.    <div class="btn" data-filter="categoryfilter">category filter name</div>
  31.    
  32.    TO ADD A NEW CHARACTER IMAGE
  33.    
  34.    Find <div id="nav">.
  35.    
  36.    Underneath it, add <div class="tabButton box" data-tab=""><img src="http://i.imgur.com/p55abqi.png"></div>
  37.    
  38.    After box, add your category filter that you added in the filter list earlier.
  39.    
  40.    Inbetween the data-tab quotation marks, add your tab number, this has to match the id of the div full of the character information.
  41.    
  42.    Example.
  43.    
  44.    <div class="tabButton box categoryfilter" data-tab="tab-1"><img src="http://i.imgur.com/p55abqi.png"></div>
  45.    
  46.    TO ADD A NEW CHARACTER BOX
  47.    
  48.    Find <div id="preview">.
  49.    
  50.    Underneath it, add the character box
  51.  
  52.    <div id="tab-#" class="tabContent">
  53.  
  54.        <h1>character 1 name</h1>
  55.  
  56.        <ul>
  57.            <li><b>age:</b> xx</li>
  58.            <li><b>location:</b> xx</li>
  59.            <li><b>skills:</b> xx</li>
  60.            <li><b>likes:</b> xx</li>
  61.            <li><b>dislikes:</b> xx</li>
  62.        </ul>
  63.  
  64.        <h2>backstory</h2>
  65.  
  66.        <p></p>
  67.  
  68.        <h2>relationships</h2>
  69.  
  70.        <ul class="rel">
  71.            <li><b>name</b> &mdash; relationship</li>
  72.        </ul>
  73.  
  74.        <h2>tags</h2>
  75.  
  76.        <ul>
  77.            <li><a href="/tagged/">link</a></li>
  78.        </ul>
  79.  
  80.        </div>
  81.        
  82.        Make sure the id in <div id="tab-# class="tabContent"> matches the data-tab value in the navigation section.
  83.        
  84.        Example.
  85.        
  86.        <div id="tab-1" class="tabContent">
  87.        
  88.  
  89. -->
  90.    
  91. <head>
  92.  
  93. <title>{Title}</title> <!-- CHANGE YOUR TITLE HERE -->
  94.  
  95. <link rel="shortcut icon" href="{Favicon}">
  96.  
  97. <meta charset="UTF-8">
  98. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  99.  
  100. <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
  101.  
  102. <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  103.  
  104. <style>
  105.  
  106. * {
  107.     padding: 0;
  108.     margin: 0;
  109. }  
  110.  
  111. ::-moz-selection {
  112.     background-color: #aaaaaa; /** selection colour **/
  113.     color: #ffffff; /** font colour **/
  114. }
  115.  
  116. ::selection {
  117.     background-color: #aaaaaa; /** selection colour **/
  118.     color: #ffffff; /** font colour **/
  119. }
  120.  
  121. ::-webkit-scrollbar {
  122.     width: 2px;
  123.     height: 2px;
  124. }
  125.  
  126. ::-webkit-scrollbar-thumb {
  127.     background: #e5b5b9; /** accent colour **/
  128. }
  129.        
  130. ::-webkit-scrollbar-track {
  131.     background: transparent;
  132. }
  133.  
  134. body {
  135.     background-color: #eeeeee;
  136.     font-family: 'Calibri', sans-serif;
  137.     color: #555555;
  138.     font-size: 11px;
  139.     line-height: 20px;
  140. }
  141.  
  142. #container {
  143.     width: 100%;
  144.     height: 100%;
  145. }
  146.  
  147. #content {
  148.     background-color: #ffffff;
  149.     position: absolute;
  150.     margin: auto auto;
  151.     top: 0;
  152.     right: 0;
  153.     bottom: 0;
  154.     left: 0;
  155.     width: 800px;
  156.     height: 530px;
  157.     display: flex;
  158. }
  159.  
  160. #left {
  161.     width: 150px;
  162.     max-height: inherit;
  163.     overflow-y: auto;
  164.     border-right: 1px solid #eeeeee;
  165.     padding: 5px;
  166. }
  167.  
  168. #left h1 {
  169.     text-transform: uppercase;
  170.     font-size: 14px;
  171.     padding: 15px;
  172.     border-bottom: 1px solid #eeeeee;
  173. }
  174.  
  175. #left h2 {
  176.     text-transform: uppercase;
  177.     font-size: 12px;
  178.     padding: 5px 15px;
  179. }
  180.  
  181. #nav {
  182.     width: auto;
  183.     max-height: 169px;
  184.     overflow-x: scroll;
  185.     white-space: nowrap;
  186.     border-bottom: 1px solid #eeeeee;
  187. }
  188.  
  189. #nav img {
  190.     width: 130px;
  191.     height: 130px;
  192.     filter: grayscale(40%);
  193.     -webkit-filter: grayscale(40%);    
  194. }
  195.  
  196. #nav img:hover {
  197.     filter: grayscale(0);
  198.     -webkit-filter: grayscale(0);  
  199.     -webkit-transition: all .8;
  200.     -moz-transition: all .8s;
  201.     -o-transition: all .8s;
  202.     -ms-transition: all .8s;    
  203.     transition: all .8s;  
  204. }
  205.  
  206. #nav img:hover {
  207.     cursor: help;
  208. }
  209.  
  210. #nav ul {
  211.     white-space: nowrap;
  212. }
  213.  
  214. #nav li {
  215.     list-style: none;
  216.     display: inline-block;
  217.     margin: 15px;
  218. }
  219.  
  220. #right {    
  221.     width: 650px;
  222.     height: inherit;
  223. }
  224.  
  225. #preview {
  226.     width: inherit;
  227.     height: 360px;
  228. }
  229.  
  230. .tabContent {
  231.     display: none;
  232.     position: absolute;
  233.     background-color: #ffffff;
  234.     width: calc(inherit - 50px);
  235.     max-height: 275px;
  236.     overflow-y: scroll;
  237.     margin: 30px;
  238.     padding: 10px;
  239. }
  240.  
  241. .tabContent h1 {
  242.     text-transform: uppercase;
  243. }
  244.  
  245. .tabContent h2 {
  246.     font-style: italic;
  247. }
  248.  
  249. .tabContent p {
  250.     margin: 20px 0;
  251. }
  252.  
  253. .tabContent ul {
  254.     margin: 15px 0px;
  255. }
  256.  
  257. .tabContent li {
  258.     display: inline-block;
  259.     padding-right: 50px;
  260. }
  261.  
  262. .btn {
  263.     border: none!important;
  264.     background: none!important;
  265.     outline: none!important;
  266.     display: block;
  267.     padding: 5px 0 5px 15px;
  268. }
  269.  
  270. .btn:first-of-type {
  271.     padding: 15px 0 5px 15px;
  272. }
  273.  
  274. .btn:hover {
  275.     padding-left: 25px;
  276.     cursor: help;
  277.     -webkit-transition: all .3;
  278.     -moz-transition: all .3s;
  279.     -o-transition: all .3s;
  280.     -ms-transition: all .3s;    
  281.     transition: all .3s;
  282.    
  283. }
  284.  
  285. .active {
  286.     font-weight: bold;
  287.     color: #e5b5b9; /** accent colour **/
  288. }
  289.  
  290. .box {
  291.     display: inline-block;
  292.     margin: 15px;
  293. }
  294.  
  295. ul.rel li {
  296.     display: block;
  297. }
  298.  
  299. a {
  300.     color: #e5b5b9; /** accent colour **/
  301. }
  302.  
  303. a:hover {
  304.     color: #aaaaaa;
  305.     -webkit-transition: all .8;
  306.     -moz-transition: all .8s;
  307.     -o-transition: all .8s;
  308.     -ms-transition: all .8s;    
  309.     transition: all .8s;
  310. }
  311.  
  312. b, i {
  313.     color: #e5b5b9; /** accent colour **/
  314. }
  315.  
  316. #return {
  317.     position: absolute;
  318.     top: 15px;
  319.     left: 15px;
  320.     text-transform: uppercase;
  321. }
  322.  
  323. #credit {
  324.     text-transform: uppercase;
  325.     font-size: 8px;
  326.     letter-spacing: 2px;
  327.     bottom: 15px;
  328.     right: 15px;
  329.     position: fixed;
  330. }
  331.  
  332. #credit a {
  333.     color: #aaaaaa;
  334.     text-decoration: none;
  335.     -webkit-transition: all .8;
  336.     -moz-transition: all .8s;
  337.     -o-transition: all .8s;
  338.     -ms-transition: all .8s;    
  339.     transition: all .8s;
  340. }
  341.  
  342. #credit a:hover {
  343.     color: #e5b5b9; /** accent colour **/
  344. }
  345.  
  346. </style>    
  347.  
  348. </head>
  349.  
  350. <body>
  351.  
  352. <div id="container">
  353.  
  354.  
  355. <a href="/" id="return"> &#43; return to blog</a>
  356.  
  357. <div id="content">
  358.  
  359. <div id="left">
  360.  
  361.     <h1>filters</h1>    
  362.    
  363.     <!-- leave this one alone to allow you to reset the filters -->
  364.     <div class="active btn" data-filter="box">refresh</div>
  365.    
  366.     <h2>category title</h2>
  367.    
  368.     <div class="btn" data-filter="c1">category 1</div>
  369.     <div class="btn" data-filter="c2">category 2</div>
  370.     <div class="btn" data-filter="c3">category 3</div>
  371.     <div class="btn" data-filter="c4">category 4</div>
  372.    
  373.     <!-- use <h2> </h2> for category headings -->
  374.  
  375. </div> <!-- left -->
  376.  
  377. <div id="right">
  378.    
  379. <div id="nav">
  380.  
  381.     <div class="tabButton box c1" data-tab="tab-1"><img src="http://i.imgur.com/p55abqi.png"></div>
  382.     <div class="tabButton box c2" data-tab="tab-2"><img src="http://i.imgur.com/YWno3PJ.png"></div>
  383.     <div class="tabButton box c3" data-tab="tab-3"><img src="http://i.imgur.com/SEXNyNu.png"></div>
  384.     <div class="tabButton box c4" data-tab="tab-4"><img src="http://i.imgur.com/dk64fFM.png"></div>
  385.     <div class="tabButton box c1 c2" data-tab="tab-5"><img src="http://i.imgur.com/a39Zjbv.png"></div>
  386.     <div class="tabButton box c2 c4" data-tab="tab-6"><img src="http://i.imgur.com/vTOFK4m.png"></div>
  387.     <div class="tabButton box c1 c2" data-tab="tab-7"><img src="http://i.imgur.com/CHdm4NG.png"></div>
  388.     <div class="tabButton box c3" data-tab="tab-8"><img src="http://i.imgur.com/lRIPnYE.png"></div>
  389.  
  390. </div> <!-- nav | KEEP ALL CHARACTER IMAGE DIVS ABOVE THIS LINE -->
  391.  
  392. <div id="preview">
  393.  
  394.  
  395.  
  396.  
  397.  
  398.     <div id="tab-1" class="tabContent">
  399.    
  400.     <h1>character 1 name</h1>
  401.    
  402.     <ul>
  403.         <li><b>age:</b> xx</li>
  404.         <li><b>location:</b> xx</li>
  405.         <li><b>skills:</b> xx</li>
  406.         <li><b>likes:</b> xx</li>
  407.         <li><b>dislikes:</b> xx</li>
  408.     </ul>
  409.    
  410.     <h2>backstory</h2>
  411.    
  412.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis augue tortor. Donec interdum nisl odio, eu viverra massa iaculis quis. Pellentesque augue massa, vulputate hendrerit mattis ut, accumsan vitae mi. In hac habitasse platea dictumst. Sed sit amet elementum sapien, ac maximus risus. Quisque posuere lacus nec sem porttitor, non condimentum sem tincidunt. Phasellus quis erat et eros scelerisque rhoncus in vitae nunc. Sed id aliquet velit. Duis blandit varius porta. Cras elementum quam sed velit ultrices lobortis.</p>
  413.  
  414.     <p>Ut venenatis dapibus lectus efficitur ultrices. Donec tincidunt ut nunc pretium varius. Proin at porta dolor. Sed luctus ultricies urna quis rutrum. Donec volutpat tempor ullamcorper. Pellentesque egestas bibendum mauris id dictum. Morbi fermentum tincidunt turpis sit amet imperdiet. Nullam scelerisque neque semper, condimentum metus a, euismod lorem. Integer mollis porttitor dui, vel ornare lorem tincidunt tempor. In magna sem, efficitur malesuada erat at, fermentum varius nulla.</p>
  415.  
  416.     <p>Aenean accumsan scelerisque augue at iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean iaculis fermentum turpis rutrum porttitor. Quisque malesuada quis sem ut sollicitudin. Nullam non turpis vel ex vestibulum eleifend nec ut nisi. Duis ultricies tristique tempus. Sed condimentum nibh sed arcu volutpat, maximus porta lorem viverra. Integer venenatis elit a egestas tincidunt. Donec sed accumsan nunc, sit amet rutrum ex. Duis venenatis est eu diam rhoncus, scelerisque luctus nunc placerat. Nullam at laoreet lectus, ut hendrerit diam. Quisque rhoncus elementum lorem eget congue.</p>
  417.    
  418.     <h2>relationships</h2>
  419.    
  420.     <ul class="rel">
  421.         <li><b>name</b> &mdash; relationship</li>
  422.         <li><b>name</b> &mdash; relationship</li>
  423.         <li><b>name</b> &mdash; relationship</li>
  424.     </ul>
  425.     <h2>tags</h2>
  426.     <ul>
  427.         <li><a href="/tagged/">link</a></li>
  428.         <li><a href="/tagged/">link</a></li>
  429.         <li><a href="/tagged/">link</a></li>
  430.         <li><a href="/tagged/">link</a></li>
  431.     </ul>
  432.    
  433.     </div>
  434.  
  435.  
  436.  
  437.  
  438.  
  439.     <div id="tab-2" class="tabContent">
  440.    
  441.     <h1>character 2 name</h1>
  442.    
  443.     <ul>
  444.         <li><b>age:</b> xx</li>
  445.         <li><b>location:</b> xx</li>
  446.         <li><b>skills:</b> xx</li>
  447.         <li><b>likes:</b> xx</li>
  448.         <li><b>dislikes:</b> xx</li>
  449.     </ul>
  450.    
  451.     <h2>backstory</h2>
  452.    
  453.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis augue tortor. Donec interdum nisl odio, eu viverra massa iaculis quis. Pellentesque augue massa, vulputate hendrerit mattis ut, accumsan vitae mi. In hac habitasse platea dictumst. Sed sit amet elementum sapien, ac maximus risus. Quisque posuere lacus nec sem porttitor, non condimentum sem tincidunt. Phasellus quis erat et eros scelerisque rhoncus in vitae nunc. Sed id aliquet velit. Duis blandit varius porta. Cras elementum quam sed velit ultrices lobortis.</p>
  454.  
  455.     <p>Ut venenatis dapibus lectus efficitur ultrices. Donec tincidunt ut nunc pretium varius. Proin at porta dolor. Sed luctus ultricies urna quis rutrum. Donec volutpat tempor ullamcorper. Pellentesque egestas bibendum mauris id dictum. Morbi fermentum tincidunt turpis sit amet imperdiet. Nullam scelerisque neque semper, condimentum metus a, euismod lorem. Integer mollis porttitor dui, vel ornare lorem tincidunt tempor. In magna sem, efficitur malesuada erat at, fermentum varius nulla.</p>
  456.  
  457.     <p>Aenean accumsan scelerisque augue at iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean iaculis fermentum turpis rutrum porttitor. Quisque malesuada quis sem ut sollicitudin. Nullam non turpis vel ex vestibulum eleifend nec ut nisi. Duis ultricies tristique tempus. Sed condimentum nibh sed arcu volutpat, maximus porta lorem viverra. Integer venenatis elit a egestas tincidunt. Donec sed accumsan nunc, sit amet rutrum ex. Duis venenatis est eu diam rhoncus, scelerisque luctus nunc placerat. Nullam at laoreet lectus, ut hendrerit diam. Quisque rhoncus elementum lorem eget congue.</p>
  458.    
  459.     <h2>relationships</h2>
  460.    
  461.     <ul class="rel">
  462.         <li><b>name</b> &mdash; relationship</li>
  463.         <li><b>name</b> &mdash; relationship</li>
  464.         <li><b>name</b> &mdash; relationship</li>
  465.     </ul>
  466.     <h2>tags</h2>
  467.     <ul>
  468.         <li><a href="/tagged/">link</a></li>
  469.         <li><a href="/tagged/">link</a></li>
  470.         <li><a href="/tagged/">link</a></li>
  471.         <li><a href="/tagged/">link</a></li>
  472.     </ul>
  473.    
  474.     </div>
  475.  
  476.  
  477.  
  478.  
  479.  
  480.     <div id="tab-3" class="tabContent">
  481.    
  482.     <h1>character 3 name</h1>
  483.    
  484.     <ul>
  485.         <li><b>age:</b> xx</li>
  486.         <li><b>location:</b> xx</li>
  487.         <li><b>skills:</b> xx</li>
  488.         <li><b>likes:</b> xx</li>
  489.         <li><b>dislikes:</b> xx</li>
  490.     </ul>
  491.    
  492.     <h2>backstory</h2>
  493.    
  494.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis augue tortor. Donec interdum nisl odio, eu viverra massa iaculis quis. Pellentesque augue massa, vulputate hendrerit mattis ut, accumsan vitae mi. In hac habitasse platea dictumst. Sed sit amet elementum sapien, ac maximus risus. Quisque posuere lacus nec sem porttitor, non condimentum sem tincidunt. Phasellus quis erat et eros scelerisque rhoncus in vitae nunc. Sed id aliquet velit. Duis blandit varius porta. Cras elementum quam sed velit ultrices lobortis.</p>
  495.  
  496.     <p>Ut venenatis dapibus lectus efficitur ultrices. Donec tincidunt ut nunc pretium varius. Proin at porta dolor. Sed luctus ultricies urna quis rutrum. Donec volutpat tempor ullamcorper. Pellentesque egestas bibendum mauris id dictum. Morbi fermentum tincidunt turpis sit amet imperdiet. Nullam scelerisque neque semper, condimentum metus a, euismod lorem. Integer mollis porttitor dui, vel ornare lorem tincidunt tempor. In magna sem, efficitur malesuada erat at, fermentum varius nulla.</p>
  497.  
  498.     <p>Aenean accumsan scelerisque augue at iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean iaculis fermentum turpis rutrum porttitor. Quisque malesuada quis sem ut sollicitudin. Nullam non turpis vel ex vestibulum eleifend nec ut nisi. Duis ultricies tristique tempus. Sed condimentum nibh sed arcu volutpat, maximus porta lorem viverra. Integer venenatis elit a egestas tincidunt. Donec sed accumsan nunc, sit amet rutrum ex. Duis venenatis est eu diam rhoncus, scelerisque luctus nunc placerat. Nullam at laoreet lectus, ut hendrerit diam. Quisque rhoncus elementum lorem eget congue.</p>
  499.    
  500.     <h2>relationships</h2>
  501.    
  502.     <ul class="rel">
  503.         <li><b>name</b> &mdash; relationship</li>
  504.         <li><b>name</b> &mdash; relationship</li>
  505.         <li><b>name</b> &mdash; relationship</li>
  506.     </ul>
  507.     <h2>tags</h2>
  508.     <ul>
  509.         <li><a href="/tagged/">link</a></li>
  510.         <li><a href="/tagged/">link</a></li>
  511.         <li><a href="/tagged/">link</a></li>
  512.         <li><a href="/tagged/">link</a></li>
  513.     </ul>
  514.    
  515.     </div>
  516.  
  517.  
  518.  
  519.  
  520.  
  521.     <div id="tab-4" class="tabContent">
  522.    
  523.     <h1>character 4 name</h1>
  524.    
  525.     <ul>
  526.         <li><b>age:</b> xx</li>
  527.         <li><b>location:</b> xx</li>
  528.         <li><b>skills:</b> xx</li>
  529.         <li><b>likes:</b> xx</li>
  530.         <li><b>dislikes:</b> xx</li>
  531.     </ul>
  532.    
  533.     <h2>backstory</h2>
  534.    
  535.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis augue tortor. Donec interdum nisl odio, eu viverra massa iaculis quis. Pellentesque augue massa, vulputate hendrerit mattis ut, accumsan vitae mi. In hac habitasse platea dictumst. Sed sit amet elementum sapien, ac maximus risus. Quisque posuere lacus nec sem porttitor, non condimentum sem tincidunt. Phasellus quis erat et eros scelerisque rhoncus in vitae nunc. Sed id aliquet velit. Duis blandit varius porta. Cras elementum quam sed velit ultrices lobortis.</p>
  536.  
  537.     <p>Ut venenatis dapibus lectus efficitur ultrices. Donec tincidunt ut nunc pretium varius. Proin at porta dolor. Sed luctus ultricies urna quis rutrum. Donec volutpat tempor ullamcorper. Pellentesque egestas bibendum mauris id dictum. Morbi fermentum tincidunt turpis sit amet imperdiet. Nullam scelerisque neque semper, condimentum metus a, euismod lorem. Integer mollis porttitor dui, vel ornare lorem tincidunt tempor. In magna sem, efficitur malesuada erat at, fermentum varius nulla.</p>
  538.  
  539.     <p>Aenean accumsan scelerisque augue at iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean iaculis fermentum turpis rutrum porttitor. Quisque malesuada quis sem ut sollicitudin. Nullam non turpis vel ex vestibulum eleifend nec ut nisi. Duis ultricies tristique tempus. Sed condimentum nibh sed arcu volutpat, maximus porta lorem viverra. Integer venenatis elit a egestas tincidunt. Donec sed accumsan nunc, sit amet rutrum ex. Duis venenatis est eu diam rhoncus, scelerisque luctus nunc placerat. Nullam at laoreet lectus, ut hendrerit diam. Quisque rhoncus elementum lorem eget congue.</p>
  540.    
  541.     <h2>relationships</h2>
  542.    
  543.     <ul class="rel">
  544.         <li><b>name</b> &mdash; relationship</li>
  545.         <li><b>name</b> &mdash; relationship</li>
  546.         <li><b>name</b> &mdash; relationship</li>
  547.     </ul>
  548.     <h2>tags</h2>
  549.     <ul>
  550.         <li><a href="/tagged/">link</a></li>
  551.         <li><a href="/tagged/">link</a></li>
  552.         <li><a href="/tagged/">link</a></li>
  553.         <li><a href="/tagged/">link</a></li>
  554.     </ul>
  555.    
  556.     </div>
  557.  
  558.  
  559.  
  560.  
  561.  
  562.     <div id="tab-5" class="tabContent">
  563.    
  564.     <h1>character 5 name</h1>
  565.    
  566.     <ul>
  567.         <li><b>age:</b> xx</li>
  568.         <li><b>location:</b> xx</li>
  569.         <li><b>skills:</b> xx</li>
  570.         <li><b>likes:</b> xx</li>
  571.         <li><b>dislikes:</b> xx</li>
  572.     </ul>
  573.    
  574.     <h2>backstory</h2>
  575.    
  576.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis augue tortor. Donec interdum nisl odio, eu viverra massa iaculis quis. Pellentesque augue massa, vulputate hendrerit mattis ut, accumsan vitae mi. In hac habitasse platea dictumst. Sed sit amet elementum sapien, ac maximus risus. Quisque posuere lacus nec sem porttitor, non condimentum sem tincidunt. Phasellus quis erat et eros scelerisque rhoncus in vitae nunc. Sed id aliquet velit. Duis blandit varius porta. Cras elementum quam sed velit ultrices lobortis.</p>
  577.  
  578.     <p>Ut venenatis dapibus lectus efficitur ultrices. Donec tincidunt ut nunc pretium varius. Proin at porta dolor. Sed luctus ultricies urna quis rutrum. Donec volutpat tempor ullamcorper. Pellentesque egestas bibendum mauris id dictum. Morbi fermentum tincidunt turpis sit amet imperdiet. Nullam scelerisque neque semper, condimentum metus a, euismod lorem. Integer mollis porttitor dui, vel ornare lorem tincidunt tempor. In magna sem, efficitur malesuada erat at, fermentum varius nulla.</p>
  579.  
  580.     <p>Aenean accumsan scelerisque augue at iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean iaculis fermentum turpis rutrum porttitor. Quisque malesuada quis sem ut sollicitudin. Nullam non turpis vel ex vestibulum eleifend nec ut nisi. Duis ultricies tristique tempus. Sed condimentum nibh sed arcu volutpat, maximus porta lorem viverra. Integer venenatis elit a egestas tincidunt. Donec sed accumsan nunc, sit amet rutrum ex. Duis venenatis est eu diam rhoncus, scelerisque luctus nunc placerat. Nullam at laoreet lectus, ut hendrerit diam. Quisque rhoncus elementum lorem eget congue.</p>
  581.    
  582.     <h2>relationships</h2>
  583.    
  584.     <ul class="rel">
  585.         <li><b>name</b> &mdash; relationship</li>
  586.         <li><b>name</b> &mdash; relationship</li>
  587.         <li><b>name</b> &mdash; relationship</li>
  588.     </ul>
  589.     <h2>tags</h2>
  590.     <ul>
  591.         <li><a href="/tagged/">link</a></li>
  592.         <li><a href="/tagged/">link</a></li>
  593.         <li><a href="/tagged/">link</a></li>
  594.         <li><a href="/tagged/">link</a></li>
  595.     </ul>
  596.    
  597.     </div>
  598.  
  599.  
  600.  
  601.  
  602.  
  603.     <div id="tab-6" class="tabContent">
  604.    
  605.     <h1>character 6 name</h1>
  606.    
  607.     <ul>
  608.         <li><b>age:</b> xx</li>
  609.         <li><b>location:</b> xx</li>
  610.         <li><b>skills:</b> xx</li>
  611.         <li><b>likes:</b> xx</li>
  612.         <li><b>dislikes:</b> xx</li>
  613.     </ul>
  614.    
  615.     <h2>backstory</h2>
  616.    
  617.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis augue tortor. Donec interdum nisl odio, eu viverra massa iaculis quis. Pellentesque augue massa, vulputate hendrerit mattis ut, accumsan vitae mi. In hac habitasse platea dictumst. Sed sit amet elementum sapien, ac maximus risus. Quisque posuere lacus nec sem porttitor, non condimentum sem tincidunt. Phasellus quis erat et eros scelerisque rhoncus in vitae nunc. Sed id aliquet velit. Duis blandit varius porta. Cras elementum quam sed velit ultrices lobortis.</p>
  618.  
  619.     <p>Ut venenatis dapibus lectus efficitur ultrices. Donec tincidunt ut nunc pretium varius. Proin at porta dolor. Sed luctus ultricies urna quis rutrum. Donec volutpat tempor ullamcorper. Pellentesque egestas bibendum mauris id dictum. Morbi fermentum tincidunt turpis sit amet imperdiet. Nullam scelerisque neque semper, condimentum metus a, euismod lorem. Integer mollis porttitor dui, vel ornare lorem tincidunt tempor. In magna sem, efficitur malesuada erat at, fermentum varius nulla.</p>
  620.  
  621.     <p>Aenean accumsan scelerisque augue at iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean iaculis fermentum turpis rutrum porttitor. Quisque malesuada quis sem ut sollicitudin. Nullam non turpis vel ex vestibulum eleifend nec ut nisi. Duis ultricies tristique tempus. Sed condimentum nibh sed arcu volutpat, maximus porta lorem viverra. Integer venenatis elit a egestas tincidunt. Donec sed accumsan nunc, sit amet rutrum ex. Duis venenatis est eu diam rhoncus, scelerisque luctus nunc placerat. Nullam at laoreet lectus, ut hendrerit diam. Quisque rhoncus elementum lorem eget congue.</p>
  622.    
  623.     <h2>relationships</h2>
  624.    
  625.     <ul class="rel">
  626.         <li><b>name</b> &mdash; relationship</li>
  627.         <li><b>name</b> &mdash; relationship</li>
  628.         <li><b>name</b> &mdash; relationship</li>
  629.     </ul>
  630.     <h2>tags</h2>
  631.     <ul>
  632.         <li><a href="/tagged/">link</a></li>
  633.         <li><a href="/tagged/">link</a></li>
  634.         <li><a href="/tagged/">link</a></li>
  635.         <li><a href="/tagged/">link</a></li>
  636.     </ul>
  637.    
  638.     </div>
  639.  
  640.  
  641.  
  642.  
  643.  
  644.     <div id="tab-7" class="tabContent">
  645.    
  646.     <h1>character 7 name</h1>
  647.    
  648.     <ul>
  649.         <li><b>age:</b> xx</li>
  650.         <li><b>location:</b> xx</li>
  651.         <li><b>skills:</b> xx</li>
  652.         <li><b>likes:</b> xx</li>
  653.         <li><b>dislikes:</b> xx</li>
  654.     </ul>
  655.    
  656.     <h2>backstory</h2>
  657.    
  658.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis augue tortor. Donec interdum nisl odio, eu viverra massa iaculis quis. Pellentesque augue massa, vulputate hendrerit mattis ut, accumsan vitae mi. In hac habitasse platea dictumst. Sed sit amet elementum sapien, ac maximus risus. Quisque posuere lacus nec sem porttitor, non condimentum sem tincidunt. Phasellus quis erat et eros scelerisque rhoncus in vitae nunc. Sed id aliquet velit. Duis blandit varius porta. Cras elementum quam sed velit ultrices lobortis.</p>
  659.  
  660.     <p>Ut venenatis dapibus lectus efficitur ultrices. Donec tincidunt ut nunc pretium varius. Proin at porta dolor. Sed luctus ultricies urna quis rutrum. Donec volutpat tempor ullamcorper. Pellentesque egestas bibendum mauris id dictum. Morbi fermentum tincidunt turpis sit amet imperdiet. Nullam scelerisque neque semper, condimentum metus a, euismod lorem. Integer mollis porttitor dui, vel ornare lorem tincidunt tempor. In magna sem, efficitur malesuada erat at, fermentum varius nulla.</p>
  661.  
  662.     <p>Aenean accumsan scelerisque augue at iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean iaculis fermentum turpis rutrum porttitor. Quisque malesuada quis sem ut sollicitudin. Nullam non turpis vel ex vestibulum eleifend nec ut nisi. Duis ultricies tristique tempus. Sed condimentum nibh sed arcu volutpat, maximus porta lorem viverra. Integer venenatis elit a egestas tincidunt. Donec sed accumsan nunc, sit amet rutrum ex. Duis venenatis est eu diam rhoncus, scelerisque luctus nunc placerat. Nullam at laoreet lectus, ut hendrerit diam. Quisque rhoncus elementum lorem eget congue.</p>
  663.    
  664.     <h2>relationships</h2>
  665.    
  666.     <ul class="rel">
  667.         <li><b>name</b> &mdash; relationship</li>
  668.         <li><b>name</b> &mdash; relationship</li>
  669.         <li><b>name</b> &mdash; relationship</li>
  670.     </ul>
  671.     <h2>tags</h2>
  672.     <ul>
  673.         <li><a href="/tagged/">link</a></li>
  674.         <li><a href="/tagged/">link</a></li>
  675.         <li><a href="/tagged/">link</a></li>
  676.         <li><a href="/tagged/">link</a></li>
  677.     </ul>
  678.    
  679.     </div>
  680.  
  681.  
  682.  
  683.  
  684.  
  685.     <div id="tab-8" class="tabContent">
  686.    
  687.     <h1>character 8 name</h1>
  688.    
  689.     <ul>
  690.         <li><b>age:</b> xx</li>
  691.         <li><b>location:</b> xx</li>
  692.         <li><b>skills:</b> xx</li>
  693.         <li><b>likes:</b> xx</li>
  694.         <li><b>dislikes:</b> xx</li>
  695.     </ul>
  696.    
  697.     <h2>backstory</h2>
  698.    
  699.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis augue tortor. Donec interdum nisl odio, eu viverra massa iaculis quis. Pellentesque augue massa, vulputate hendrerit mattis ut, accumsan vitae mi. In hac habitasse platea dictumst. Sed sit amet elementum sapien, ac maximus risus. Quisque posuere lacus nec sem porttitor, non condimentum sem tincidunt. Phasellus quis erat et eros scelerisque rhoncus in vitae nunc. Sed id aliquet velit. Duis blandit varius porta. Cras elementum quam sed velit ultrices lobortis.</p>
  700.  
  701.     <p>Ut venenatis dapibus lectus efficitur ultrices. Donec tincidunt ut nunc pretium varius. Proin at porta dolor. Sed luctus ultricies urna quis rutrum. Donec volutpat tempor ullamcorper. Pellentesque egestas bibendum mauris id dictum. Morbi fermentum tincidunt turpis sit amet imperdiet. Nullam scelerisque neque semper, condimentum metus a, euismod lorem. Integer mollis porttitor dui, vel ornare lorem tincidunt tempor. In magna sem, efficitur malesuada erat at, fermentum varius nulla.</p>
  702.  
  703.     <p>Aenean accumsan scelerisque augue at iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean iaculis fermentum turpis rutrum porttitor. Quisque malesuada quis sem ut sollicitudin. Nullam non turpis vel ex vestibulum eleifend nec ut nisi. Duis ultricies tristique tempus. Sed condimentum nibh sed arcu volutpat, maximus porta lorem viverra. Integer venenatis elit a egestas tincidunt. Donec sed accumsan nunc, sit amet rutrum ex. Duis venenatis est eu diam rhoncus, scelerisque luctus nunc placerat. Nullam at laoreet lectus, ut hendrerit diam. Quisque rhoncus elementum lorem eget congue.</p>
  704.    
  705.     <h2>relationships</h2>
  706.    
  707.     <ul class="rel">
  708.         <li><b>name</b> &mdash; relationship</li>
  709.         <li><b>name</b> &mdash; relationship</li>
  710.         <li><b>name</b> &mdash; relationship</li>
  711.     </ul>
  712.     <h2>tags</h2>
  713.     <ul>
  714.         <li><a href="/tagged/">link</a></li>
  715.         <li><a href="/tagged/">link</a></li>
  716.         <li><a href="/tagged/">link</a></li>
  717.         <li><a href="/tagged/">link</a></li>
  718.     </ul>
  719.    
  720.     </div>
  721.    
  722.    
  723.    
  724.    
  725.    
  726. </div> <!-- preview | KEEP ALL CHARACTER INFORMATION DIVS ABOVE THIS LINE -->
  727.  
  728. </div> <!-- right -->
  729.  
  730. </div> <!-- content -->
  731.          
  732. </div> <!-- container -->
  733.  
  734. <div id="credit">
  735. <a href="http://peachthms.tumblr.com" title="page by peachthms">< / ></a>
  736. </div>
  737.  
  738. </body>
  739.  
  740. <!-- DO NOT TOUCH OR REMOVE ; FILTER SCRIPT -->
  741. <script>
  742. var $boxs = $("#nav > .box");
  743. var $btns = $(".btn").on("click", function() {
  744.  
  745.   var active =
  746.     $btns.removeClass("active")
  747.       .filter(this)
  748.       .addClass("active")
  749.       .data("filter");
  750.  
  751.   $boxs
  752.     .hide()
  753.     .filter( "." + active )
  754.     .fadeIn(0);
  755.  
  756. });
  757. </script>
  758.  
  759. <!-- DO NOT TOUCH OR REMOVE ; TAB SCRIPT -->
  760. <script>
  761. $(function() {
  762.     $(".tabButton").click(function() {
  763.         var tab = $(this).attr("data-tab");
  764.         $(".tabContent").hide();
  765.         $("#" + tab).show();
  766.     });    
  767. });
  768. </script>
  769.    
  770. </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!