API tools faq
paste
Advertisement
NecromancerCoding

Welcome to Twin Peaks Directorio

NecromancerCoding
Nov 3rd, 2020 (edited)
1,161
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 61.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.     <title>welcome to twin peaks</title>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.     <meta http-equiv="content-script-type" content="text/javascript" />
  7.     <meta http-equiv="content-style-type" content="text/css" />
  8.     <link rel="shortcut icon" type="image/x-icon" href="https://illiweb.com/fa/favicon/discussion.ico" />
  9.     <meta name="language" content="es" />
  10.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  11.     <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"/>
  12.     <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"/>
  13.     <script src="https://static.tumblr.com/zd7jnbb/TDPpnlgj3/jquery.style-my-tooltips.js"></script>
  14.     <link href="https://static.tumblr.com/zd7jnbb/nzwpnlgii/style-my-tooltips.css" />
  15.     <script>
  16.         (function($){$(document).ready(function(){$("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0 });});})(jQuery);
  17.     </script>
  18.     <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i|Poppins:200,400,700,900&display=swap&subset=latin-ext" rel="stylesheet" />
  19.     <style>
  20.         :root {
  21.              --border1: 1px solid #111;
  22.              --bckg1: #222;
  23.              --bckg2: #242424;
  24.              --bckg3: #262626;
  25.              --accent1: #7f8a62;
  26.              --accent2: #586141;
  27.         }
  28.          body {
  29.              background-image:url(https://i.imgur.com/lOHg4VW.png);
  30.              background-size:cover;
  31.              background-position:center;
  32.              background-attachment:fixed;
  33.              color:#888;
  34.              font:12px 'Roboto';
  35.              padding:0;
  36.             margin:0;
  37.         }
  38.          a, a:hover {
  39.              text-decoration:none!important;
  40.         }
  41.          a {
  42.              color:var(--accent2);
  43.         }
  44.          a:hover {
  45.              color:var(--accent1);
  46.         }
  47.          *::selection{
  48.              background:var(--accent1);
  49.              color:white;
  50.         }
  51.          ::-webkit-scrollbar {
  52.              width: 1px;
  53.              height: 1px;
  54.         }
  55.          ::-webkit-scrollbar-button {
  56.              width: 0px;
  57.              height: 0px;
  58.         }
  59.          ::-webkit-scrollbar-thumb {
  60.              background: var(--accent1);
  61.         }
  62.          ::-webkit-scrollbar-track {
  63.              background:transparent;
  64.         }
  65.          ::-webkit-scrollbar-corner {
  66.              background: transparent;
  67.         }
  68.          .pjdesc::-webkit-scrollbar-thumb {
  69.              background: var(--grupo);
  70.         }
  71.          .personaje::selection, .personaje *::selection, #topbar>div::selection, #topbar>div *::selection {
  72.              background:var(--grupo);
  73.         }
  74.          body::-webkit-scrollbar-track {
  75.              background:var(--bckg1);
  76.         }
  77.         /*Tooltip*/
  78.          #s-m-t-tooltip{
  79.              display:block;
  80.              position:absolute;
  81.             /* basic */
  82.              max-width:300px;
  83.              z-index: 999;
  84.              margin:14px 14px 7px 12px;
  85.             /* style and design */
  86.              padding:8px;
  87.              background:var(--bckg1);
  88.              border:var(--border1);
  89.             /* font */
  90.              font-family:Roboto,sans-serif;
  91.              font-size:10px;
  92.              font-weight:bold;
  93.              text-transform:uppercase;
  94.              line-height:16px;
  95.              color:#888;
  96.         }
  97.          #topbar {
  98.              border-bottom: var(--border1);
  99.              background: var(--bckg1);
  100.              width: 100%;
  101.              display: flex;
  102.              justify-content: center;
  103.              align-items: center;
  104.              padding: 10px 0 0 10px;
  105.              flex-wrap: wrap;
  106.              box-sizing: border-box;
  107.              margin-bottom:0px;
  108.         }
  109.          #topbar>div {
  110.              border: var(--border1);
  111.              background: var(--bckg2);
  112.              margin-right: 10px;
  113.              margin-bottom: 10px;
  114.              display: flex;
  115.              justify-content: space-between;
  116.              align-items: center;
  117.              width: calc(20% - 10px);
  118.              box-sizing: border-box;
  119.              padding: 10px;
  120.              --grupo:var(--accent1);
  121.         }
  122.          #topbar>div span {
  123.              background: var(--bckg3);
  124.              color: var(--grupo);
  125.              width: 25px;
  126.              height: 25px;
  127.              border: var(--border1);
  128.              display: flex;
  129.              justify-content: center;
  130.              align-items: center;
  131.              border-radius: 5px;
  132.              margin-right: 10px;
  133.         }
  134.          #topbar>div>div {
  135.              display: flex;
  136.              justify-content: center;
  137.              align-items: center;
  138.         }
  139.          #topbar>div strong {
  140.              font: 15px 'Poppins';
  141.              text-transform: uppercase;
  142.         }
  143.          #topbar>div em {
  144.              font: 16px 'Poppins';
  145.              color: var(--grupo);
  146.              margin-right: 5px;
  147.         }
  148.          .personaje {
  149.              border: var(--border1);
  150.              position: relative;
  151.              margin: 0 15px 15px 0;
  152.              width: calc(25% - 15px);
  153.              box-sizing: border-box;
  154.              height: 280px;
  155.              overflow: hidden;
  156.              --grupo:var(--accent1);
  157.         }
  158.          #body {
  159.              display: flex;
  160.              justify-content: center;
  161.              align-items: center;
  162.              flex-wrap: wrap;
  163.              padding: 15px 0 0 15px;
  164.         }
  165.          .pjimg {
  166.              position: absolute;
  167.              top: 0;
  168.              left: 0;
  169.              bottom: 68px;
  170.              right: 0;
  171.              background-image: url(http://placehold.it/455x210/333);
  172.              background-size: cover;
  173.              background-position: center;
  174.         }
  175.          .pjdata {
  176.              position: absolute;
  177.              background: var(--bckg2);
  178.              top: 210px;
  179.              border-top: var(--border1);
  180.              transition:ease 1s;
  181.         }
  182.          .pjboton {
  183.              background: var(--bckg1);
  184.              position: absolute;
  185.              right: 10px;
  186.              top: -22px;
  187.              width: 50px;
  188.              height: 20px;
  189.              border-radius: 10px 10px 0 0;
  190.              border: var(--border1);
  191.              display: flex;
  192.              justify-content: center;
  193.              align-items: center;
  194.              cursor:pointer;
  195.         }
  196.          .pjhead {
  197.              height: 67px;
  198.              display: flex;
  199.              justify-content: space-between;
  200.              align-items: center;
  201.              width: 90%;
  202.              margin: 0 auto;
  203.         }
  204.          .pjheadtexto {
  205.              display: flex;
  206.              justify-content: center;
  207.              align-items: flex-start;
  208.              flex-direction: column;
  209.         }
  210.          .pjheadlinks {
  211.              display: flex;
  212.              justify-content: center;
  213.              align-items: center;
  214.         }
  215.          .pjhead h {
  216.              font: 18px 'Poppins';
  217.              line-height: 18px;
  218.              color: var(--grupo);
  219.         }
  220.          .pjhead m {
  221.              text-transform: uppercase;
  222.              font-size: 10px;
  223.         }
  224.          .pjheadlinks a {
  225.              color:var(--grupo);
  226.              margin-left:5px;
  227.              font-size:18px;
  228.         }
  229.          .pjdesc {
  230.              height: 163px;
  231.              margin: 0px 15px 20px 20px;
  232.              overflow: auto;
  233.              padding-right: 5px;
  234.              text-align: justify;
  235.         }
  236.          .pjdactive {
  237.              top:27px;
  238.         }
  239.         /*Colores de grupos, cambia los existentes y añade los que necesites replicando el código*/
  240.          .fbi {
  241.              --grupo: #335C67!important;
  242.         }
  243.          .tpsd {
  244.              --grupo: #9E2A2B!important;
  245.         }
  246.          .locals {
  247.              --grupo: #95B2B0!important;
  248.         }
  249.          .outsiders {
  250.              --grupo: #E09F3E!important;
  251.         }
  252.          .entities {
  253.              --grupo: #948165!important;
  254.         }
  255.         /*Señales de tipo/estado de personaje;
  256.          los originales no tienen señal*/
  257.          .canon .pjhead h:before {
  258.              content:"* ";
  259.         }
  260.          .muerto .pjhead h:before {
  261.              content:"† ";
  262.         }
  263.          .canon.muerto .pjhead h:before {
  264.              content:"*† ";
  265.         }
  266.     </style>
  267.     <script>
  268.         $(document).ready(function() {
  269.         $('#topbar>div').each(function() {
  270.         var buttonClass = $(this).attr('class');
  271.         var censLength = $('#body .' + buttonClass).length;
  272.         $(this).find('em').text(censLength);
  273.         });
  274.         $('.pjboton').click(function() {
  275.         $(this).find('.sf').toggle();
  276.         $(this).parent('.pjdata').toggleClass('pjdactive');
  277.         });
  278.         });
  279.     </script>
  280. </head>
  281.  
  282. <body>
  283.     <div id="topbar">
  284.         <div class="fbi">
  285.             <div><span class="sf sf-scale-o"></span><strong>FBI/DEA</strong></div><em></em></div>
  286.         <div class="tpsd">
  287.             <div><span class="sf sf-sheriff-o"></span><strong>TPSD</strong></div><em></em></div>
  288.         <div class="locals">
  289.             <div><span class="sf sf-pie-o"></span><strong>Locals</strong></div><em></em></div>
  290.         <div class="outsiders">
  291.             <div><span class="sf sf-stamp-o"></span><strong>Outsiders</strong></div><em></em></div>
  292.         <div class="entities">
  293.             <div><span class="sf sf-spider-o"></span><strong>Entities</strong></div><em></em></div>
  294.         <div class="canon">
  295.             <div><span class="sf sf-book-o"></span><strong>* Canon</strong></div><em></em></div>
  296.         <div class="original">
  297.             <div><span class="sf sf-lightbulb-o"></span><strong>Original</strong></div><em></em></div>
  298.         <div class="muerto">
  299.             <div><span class="sf sf-lightbulb-o"></span><strong>† Fallecidos</strong></div><em></em></div>
  300.     </div>
  301.     <div id="body">
  302.         <!-- Inicio de personaje -->
  303.         <div class="personaje fbi">
  304.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  305.             <div class="pjdata">
  306.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  307.                 <div class="pjhead">
  308.                     <div class="pjheadtexto">
  309.                         <h>name m. surname</h>
  310.                         <m>occupation of character</m>
  311.                     </div>
  312.                     <div class="pjheadlinks">
  313.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  314.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  315.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  316.                     </div>
  317.                 </div>
  318.                 <div class="pjdesc">
  319.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  320.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  321.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  322.                 </div>
  323.             </div>
  324.         </div>
  325.         <!-- Final de personaje -->
  326.         <!-- Inicio de personaje -->
  327.         <div class="personaje fbi canon">
  328.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  329.             <div class="pjdata">
  330.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  331.                 <div class="pjhead">
  332.                     <div class="pjheadtexto">
  333.                         <h>name m. surname</h>
  334.                         <m>occupation of character</m>
  335.                     </div>
  336.                     <div class="pjheadlinks">
  337.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  338.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  339.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  340.                     </div>
  341.                 </div>
  342.                 <div class="pjdesc">
  343.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  344.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  345.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  346.                 </div>
  347.             </div>
  348.         </div>
  349.         <!-- Final de personaje -->
  350.         <!-- Inicio de personaje -->
  351.         <div class="personaje fbi">
  352.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  353.             <div class="pjdata">
  354.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  355.                 <div class="pjhead">
  356.                     <div class="pjheadtexto">
  357.                         <h>name m. surname</h>
  358.                         <m>occupation of character</m>
  359.                     </div>
  360.                     <div class="pjheadlinks">
  361.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  362.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  363.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  364.                     </div>
  365.                 </div>
  366.                 <div class="pjdesc">
  367.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  368.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  369.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  370.                 </div>
  371.             </div>
  372.         </div>
  373.         <!-- Final de personaje -->
  374.         <!-- Inicio de personaje -->
  375.         <div class="personaje tpsd muerto">
  376.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  377.             <div class="pjdata">
  378.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  379.                 <div class="pjhead">
  380.                     <div class="pjheadtexto">
  381.                         <h>name m. surname</h>
  382.                         <m>occupation of character</m>
  383.                     </div>
  384.                     <div class="pjheadlinks">
  385.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  386.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  387.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  388.                     </div>
  389.                 </div>
  390.                 <div class="pjdesc">
  391.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  392.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  393.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  394.                 </div>
  395.             </div>
  396.         </div>
  397.         <!-- Final de personaje -->
  398.         <!-- Inicio de personaje -->
  399.         <div class="personaje tpsd canon">
  400.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  401.             <div class="pjdata">
  402.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  403.                 <div class="pjhead">
  404.                     <div class="pjheadtexto">
  405.                         <h>name m. surname</h>
  406.                         <m>occupation of character</m>
  407.                     </div>
  408.                     <div class="pjheadlinks">
  409.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  410.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  411.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  412.                     </div>
  413.                 </div>
  414.                 <div class="pjdesc">
  415.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  416.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  417.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  418.                 </div>
  419.             </div>
  420.         </div>
  421.         <!-- Final de personaje -->
  422.         <!-- Inicio de personaje -->
  423.         <div class="personaje locals">
  424.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  425.             <div class="pjdata">
  426.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  427.                 <div class="pjhead">
  428.                     <div class="pjheadtexto">
  429.                         <h>name m. surname</h>
  430.                         <m>occupation of character</m>
  431.                     </div>
  432.                     <div class="pjheadlinks">
  433.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  434.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  435.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  436.                     </div>
  437.                 </div>
  438.                 <div class="pjdesc">
  439.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  440.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  441.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  442.                 </div>
  443.             </div>
  444.         </div>
  445.         <!-- Final de personaje -->
  446.         <!-- Inicio de personaje -->
  447.         <div class="personaje locals">
  448.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  449.             <div class="pjdata">
  450.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  451.                 <div class="pjhead">
  452.                     <div class="pjheadtexto">
  453.                         <h>name m. surname</h>
  454.                         <m>occupation of character</m>
  455.                     </div>
  456.                     <div class="pjheadlinks">
  457.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  458.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  459.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  460.                     </div>
  461.                 </div>
  462.                 <div class="pjdesc">
  463.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  464.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  465.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  466.                 </div>
  467.             </div>
  468.         </div>
  469.         <!-- Final de personaje -->
  470.         <!-- Inicio de personaje -->
  471.         <div class="personaje locals">
  472.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  473.             <div class="pjdata">
  474.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  475.                 <div class="pjhead">
  476.                     <div class="pjheadtexto">
  477.                         <h>name m. surname</h>
  478.                         <m>occupation of character</m>
  479.                     </div>
  480.                     <div class="pjheadlinks">
  481.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  482.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  483.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  484.                     </div>
  485.                 </div>
  486.                 <div class="pjdesc">
  487.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  488.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  489.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  490.                 </div>
  491.             </div>
  492.         </div>
  493.         <!-- Final de personaje -->
  494.         <!-- Inicio de personaje -->
  495.         <div class="personaje locals canon muerto">
  496.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  497.             <div class="pjdata">
  498.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  499.                 <div class="pjhead">
  500.                     <div class="pjheadtexto">
  501.                         <h>name m. surname</h>
  502.                         <m>occupation of character</m>
  503.                     </div>
  504.                     <div class="pjheadlinks">
  505.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  506.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  507.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  508.                     </div>
  509.                 </div>
  510.                 <div class="pjdesc">
  511.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  512.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  513.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  514.                 </div>
  515.             </div>
  516.         </div>
  517.         <!-- Final de personaje -->
  518.         <!-- Inicio de personaje -->
  519.         <div class="personaje outsiders">
  520.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  521.             <div class="pjdata">
  522.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  523.                 <div class="pjhead">
  524.                     <div class="pjheadtexto">
  525.                         <h>name m. surname</h>
  526.                         <m>occupation of character</m>
  527.                     </div>
  528.                     <div class="pjheadlinks">
  529.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  530.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  531.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  532.                     </div>
  533.                 </div>
  534.                 <div class="pjdesc">
  535.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  536.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  537.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  538.                 </div>
  539.             </div>
  540.         </div>
  541.         <!-- Final de personaje -->
  542.         <!-- Inicio de personaje -->
  543.         <div class="personaje outsiders">
  544.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  545.             <div class="pjdata">
  546.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  547.                 <div class="pjhead">
  548.                     <div class="pjheadtexto">
  549.                         <h>name m. surname</h>
  550.                         <m>occupation of character</m>
  551.                     </div>
  552.                     <div class="pjheadlinks">
  553.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  554.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  555.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  556.                     </div>
  557.                 </div>
  558.                 <div class="pjdesc">
  559.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  560.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  561.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  562.                 </div>
  563.             </div>
  564.         </div>
  565.         <!-- Final de personaje -->
  566.         <!-- Inicio de personaje -->
  567.         <div class="personaje outsiders">
  568.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  569.             <div class="pjdata">
  570.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  571.                 <div class="pjhead">
  572.                     <div class="pjheadtexto">
  573.                         <h>name m. surname</h>
  574.                         <m>occupation of character</m>
  575.                     </div>
  576.                     <div class="pjheadlinks">
  577.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  578.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  579.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  580.                     </div>
  581.                 </div>
  582.                 <div class="pjdesc">
  583.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  584.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  585.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  586.                 </div>
  587.             </div>
  588.         </div>
  589.         <!-- Final de personaje -->
  590.         <!-- Inicio de personaje -->
  591.         <div class="personaje entities">
  592.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  593.             <div class="pjdata">
  594.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  595.                 <div class="pjhead">
  596.                     <div class="pjheadtexto">
  597.                         <h>name m. surname</h>
  598.                         <m>occupation of character</m>
  599.                     </div>
  600.                     <div class="pjheadlinks">
  601.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  602.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  603.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  604.                     </div>
  605.                 </div>
  606.                 <div class="pjdesc">
  607.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  608.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  609.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  610.                 </div>
  611.             </div>
  612.         </div>
  613.         <!-- Final de personaje -->
  614.         <!-- Inicio de personaje -->
  615.         <div class="personaje entities">
  616.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  617.             <div class="pjdata">
  618.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  619.                 <div class="pjhead">
  620.                     <div class="pjheadtexto">
  621.                         <h>name m. surname</h>
  622.                         <m>occupation of character</m>
  623.                     </div>
  624.                     <div class="pjheadlinks">
  625.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  626.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  627.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  628.                     </div>
  629.                 </div>
  630.                 <div class="pjdesc">
  631.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  632.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  633.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  634.                 </div>
  635.             </div>
  636.         </div>
  637.         <!-- Final de personaje -->
  638.         <!-- Inicio de personaje -->
  639.         <div class="personaje entities">
  640.             <div class="pjimg" style="background-image: url(http://placehold.it/455x210/333);"></div>
  641.             <div class="pjdata">
  642.                 <div class="pjboton"><em class="sf sf-chevron-up"></em><em class="sf sf-chevron-down" style="display:none;"></em></div>
  643.                 <div class="pjhead">
  644.                     <div class="pjheadtexto">
  645.                         <h>name m. surname</h>
  646.                         <m>occupation of character</m>
  647.                     </div>
  648.                     <div class="pjheadlinks">
  649.                         <a href="LINK AL PERFIL" title="Perfil"><em class="sf sf-user-o"></em></a>
  650.                         <a href="LINK PARA MP" title="Mensaje privado"><em class="sf sf-envelope-1-o"></em></a>
  651.                         <a href="LINK A LA FICHA" title="Expediente de personaje"><em class="sf sf-book-o"></em></a>
  652.                     </div>
  653.                 </div>
  654.                 <div class="pjdesc">
  655.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan purus ac velit aliquet, ut consectetur ipsum sollicitudin. Ut rutrum sapien vitae orci sagittis mollis. Fusce tellus diam, tempus non sem vitae, auctor viverra purus. Ut urna dui, venenatis ut lacus nec, ultricies vulputate justo. Integer nunc lacus, rhoncus ac purus non, volutpat tristique urna. Praesent congue rutrum arcu vel ultricies. In ultricies eleifend purus, ac venenatis odio aliquet quis. Praesent enim enim, mollis at diam nec, tincidunt accumsan orci. Etiam et turpis vel ante ullamcorper pretium. Quisque ut diam rutrum, lacinia turpis eget, vestibulum tellus. Maecenas dapibus euismod nisl eget sodales. Sed eu odio imperdiet elit aliquam dictum.
  656.                     <br/><br/> Morbi rhoncus felis quis eros euismod, in bibendum lorem mattis. Proin finibus ornare sapien, quis rhoncus ante tristique eget. Nullam lacinia aliquet neque et vehicula. Vivamus malesuada tempor eros, suscipit mattis urna congue sed. In commodo tortor eu ligula euismod, in consectetur felis pellentesque. Integer ac eros justo. In faucibus, ipsum in facilisis gravida, velit nulla ultrices erat, non efficitur neque odio ut nulla. Duis eu tellus ac felis iaculis consectetur. Vivamus eget pretium est. Maecenas porttitor enim enim. Nullam commodo ex vitae dolor scelerisque auctor vitae quis arcu. Proin sodales urna eget ex euismod dictum. Nunc tempor nisl rhoncus facilisis tempor. Mauris accumsan magna vitae velit mollis suscipit. In vulputate enim non tellus eleifend auctor. Phasellus eu tincidunt erat, nec facilisis enim.
  657.                     <br/><br/> Sed accumsan odio mi, ut maximus tellus faucibus eget. Cras vel enim eu elit rutrum laoreet nec vel dui. Fusce a tortor ut orci mattis dictum luctus in purus. Phasellus nisi ipsum, ultrices tristique risus vel, euismod porta elit. Morbi porta id urna quis accumsan. Pellentesque sit amet mollis neque. Integer imperdiet varius purus. Aliquam consequat, urna sit amet tempor posuere, mi purus vestibulum ligula, vitae hendrerit quam quam ac nibh. Mauris tristique ex sit amet dui tristique, sit amet gravida neque posuere. Vestibulum quis quam eget leo pulvinar volutpat vitae vitae felis. Sed et nulla tempus, euismod orci eu, mattis metus. Curabitur et ex nec purus semper cursus. In pellentesque luctus velit, et gravida eros mollis et.
  658.                 </div>
  659.             </div>
  660.         </div>
  661.         <!-- Final de personaje -->
  662.     </div>
  663. </body>
  664.  
  665. </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!