<link href="https://fonts.googleapis.com/css?family=Merriweather|Roboto+Condensed|Roboto+Mono|Roboto+Slab|Roboto:500" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<div id="guia">
<div class="navi">
<h3>Básicos</h3>
<span>
<a href="#botoni1" class="botoniac">Disclaimer</a>
<a href="#botoni2">Normativa</a>
<a href="#botoni3">Ambientación
<a href="#botoni4">Guía</a>
<a href="#botoni5">FAQ</a>
<a href="/">OTRA COSA</a>
<a href="/">Contexto</a>
<a href="/">Cronología</a>
<a href="/">Grupos</a>
<a href="/">Créditos</a>
</span>
<h3>Especies</h3>
<span>
<a href="/">vampiro</a>
<a href="/">vampiro</a>
<a href="/">vampiro</a>
<a href="/">vampiro</a>
<a href="/">vampiro</a>
<a href="/">vampiro</a>
</span>
<h3>Folclore</h3>
<span>
<a href="/">Ciudad</a>
<a href="/">Bosque</a>
<a href="/">otro</a>
<a href="/">otro</a>
<a href="/">otro</a>
</span>
</div>
<div class="page">
<div class="conteni">
<div id="botoni1" style="display: block;">
<h1>Disclaimer</h1>
Les damos al bienvenida a <b>NOMBRE CHULI</b>. Somos un foro de rol de temática <b>loquesea</b>.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum mollis turpis. Praesent posuere sollicitudin ipsum, ornare mollis mauris dictum vehicula. Vestibulum rhoncus sed velit ac congue. Nulla purus libero, cursus gravida convallis nec, ullamcorper sed nibh. Nam laoreet aliquet condimentum. Suspendisse rutrum nec felis ac malesuada. Proin ut nulla in enim ullamcorper egestas vel non velit. Phasellus iaculis vestibulum tincidunt. Donec interdum eros non ullamcorper luctus. Fusce cursus urna ac ultrices placerat. Maecenas maximus vestibulum diam. Vivamus in accumsan tellus. Sed velit nisl, dapibus id mattis at, rutrum vel tortor. Pellentesque facilisis luctus purus, eu semper urna mattis in. Nunc ullamcorper ex tellus, ac porta nisl elementum at.
<br></br>
Praesent vulputate magna quis lorem rhoncus gravida. Aliquam erat volutpat. Suspendisse id pulvinar orci. Nunc venenatis lectus nisl. Morbi efficitur mollis consequat. Maecenas molestie egestas molestie. Praesent in mollis ex, vestibulum malesuada nibh. <br></br> Praesent commodo elit non justo tristique iaculis. Vestibulum dolor quam, ultricies a quam at, ultricies vehicula neque. Praesent viverra, ex vitae mollis pharetra, libero neque pharetra urna, ac luctus ex nunc a tellus.
<br></br>
<e class="fas fa-exclamation-triangle"></e>
Praesent commodo elit non justo tristique iaculis. Vestibulum dolor quam, ultricies a quam at, ultricies vehicula neque. Praesent viverra, ex vitae mollis pharetra, libero neque pharetra urna, ac luctus ex nunc a tellus.
<br></br>
</div>
<div id="botoni2">
<h1>Normativa</h1>
A continuación les presentamos las normas que la administración de Scarlet Valley considera oportunas para el buen funcionamiento del foro.
<br></br>
Las reglas aquí expuestas pueden ser editadas en un futuro futuro. En dicho caso, se notificará a la comunidad previamente.
<br><br>
<a class="minic">— VER NORMAS GENERALES</a>
<div class="minico" style="display: none;">
<h2>General</h2>
<i class="fas fa-angle-double-right"></i> Entendemos que una vez han decidio unirse a Scarlet Valley RPG se han <b>leído y aceptado las
normas</b> que se describen a continuación. El desconocimiento de la normativa no exime de respetarlas y cumplirlas.
<br></br>
<i class="fas fa-angle-double-right"></i> Como hemos aclarado en el apartado anterior (Disclaimer) Scarlet Valley RPG es un foro con
contenido explícito <b>dirigido a usuarios mayores de 18 años</b>. Esperamos de nuestros usuarios una madurez acorde.
<br><br>
<i class="fas fa-angle-double-right"></i><b> La tolerancia y el respeto</b> son fundamentales para la buena convivencia en esta comunidad.
No se permiten comportamientos agresivos o discriminatorios hacia ningún usuario. En el caso de tener algún problema o dificultad para
dialogar con otro usuario os rogamos que acudáis a la administración para encontrar una solución. Las faltas de respeto a nivel usuario
serán duramente sancionadas.
<br><br>
<i class="fas fa-angle-double-right"></i> El <b>registro</b> debe realizarse con nombre y apellido del personaje, no se permiten nicknames
o palabras titubeantes como "pensando".
<br>
<i class="fas fa-angle-right" style=" margin-left: 17px; "></i> Las iniciales para el primer o segundo nombre están permitidas.
<br>
<i class="fas fa-angle-right" style=" margin-left: 17px; "></i> No se puede utilizar nombres completos canon de fandoms o celebridades
conocidas.
<br><br>
<i class="fas fa-angle-double-right"></i> La <b>publicidad</b> de otros foros o blogs sólo está permitida en la zona de afiliaciones.
<br><br>
<i class="fas fa-angle-double-right"></i> Contamos con un apartado de <a href="/t13-buzon-del-staff">dudas y sugerencias</a> público
en el que todos los usuarios pueden participar. Recuerden que sus preguntas también pueden ayudar a otros usuarios. Asimismo disponemos
de la cuenta master (la única que puede recibir mensajes privados) por si necesitan hacer una consulta privada de cualquier índole.
<br>
<i class="fas fa-angle-right" style=" margin-left: 17px; "></i> Aquellos usuarios con color pueden pronunciarse en este apartado público
sobre cualquier aspecto del foro. Toda queja o sugerencia puede tomarse en cuenta y llevarse a cabo siempre que tenga lógica y se haga
con educación.
<br>
<i class="fas fa-angle-right" style=" margin-left: 17px; "></i> Nos reservamos el derecho de publicar sus dudas en el apartado de FAQ
(Preguntas frecuentes).
</div>
<h2>Actividad</h2>
<i class="fas fa-angle-double-right"></i> Una vez se registra una <b>cuenta</b> se disponen de 72 horas para postear la ficha. Aquellas
cuentas que no publiquen la ficha en dicho espacio de tiempo serán eliminadas.
<br>
<i class="fas fa-angle-right" style=" margin-left: 17px; "></i> Las fichas se pueden publicar a medias en el caso de que surja alguna
duda o se necesite más tiempo. Para ello es necesario notificarlo en el título del tema. Después de postear una ficha incompleta se
disponen de otros tres días para terminarla.
<br></br>
<i class="fas fa-angle-double-right"></i> Una cuenta se considera <b>inactiva</b> a los 30 días desde su último post de rol. Dicha
cuenta perderá color y la totalidad de sus puntos e inventario.
<br>
<i class="fas fa-angle-right" style=" margin-left: 17px; "></i> El usuario dispondrá de 48 horas después de perder el color para
notificar la reactivación de la cuenta.
<br>
<i class="fas fa-angle-right" style=" margin-left: 17px; "></i> Pasado ese tiempo la cuenta perderá todos sus registros, logros y
aprendizaje (subida de nivel).
<br>
<i class="fas fa-angle-right" style=" margin-left: 17px; "></i> Si una cuenta cae en inactivos por segunda vez no habrá posibilidad de
recuperarla.
<br>
<i class="fas fa-angle-right" style=" margin-left: 17px; "></i> El personaje inactivo queda a disposición de la administración para su
uso en eventos o tramas globales.
<br></br>
<i class="fas fa-angle-double-right"></i> Para evitar caer en inactividad disponemos de un tema donde se pueden notificar
<a href="/t14-ausencias-y-despedidas">ausencias</a>. El tema cuenta con sus propias normas.
<h2>Hablando de Rol</h2>
<i class="fas fa-angle-double-right"></i> <b>Metarol</b>. Está completamente prohibido manejar o manipular personajes ajenos. Contacten con el staff en caso de ser objeto de metarol.
<br><br>
<i class="fas fa-angle-double-right"></i> Para poder acceder a las <b>zonas de rol</b> es necesario tener la ficha de personaje aceptada y los registros hechos.
<br><br>
<i class="fas fa-angle-double-right"></i> El <b>rango de edad</b> de los personajes está comprendido entre los 16 y 80 años.
</div>
<div id="botoni3">
<h1>Ambientación</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum mollis turpis.
</div>
<div id="botoni4">
<h1>Guia</h1>
Mauris interdum mollis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div id="botoni5">
<h1>FAQ</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum mollis turpis. Praesent posuere sollicitudin ipsum, ornare mollis mauris dictum vehicula. Vestibulum rhoncus sed velit ac congue. Nulla purus libero, cursus gravida convallis nec, ullamcorper sed nibh. Nam laoreet aliquet condimentum. Suspendisse rutrum nec felis ac malesuada. Proin ut nulla in enim ullamcorper egestas vel non velit. Phasellus iaculis vestibulum tincidunt. Donec interdum eros non ullamcorper luctus. Fusce cursus urna ac ultrices placerat. Maecenas maximus vestibulum diam. Vivamus in accumsan tellus. Sed velit nisl, dapibus id mattis at, rutrum vel tortor. Pellentesque facilisis luctus purus, eu semper urna mattis in. Nunc ullamcorper ex tellus, ac porta nisl elementum at.
Praesent vulputate magna quis lorem rhoncus gravida. Aliquam erat volutpat. Suspendisse id pulvinar orci. Nunc venenatis lectus nisl. Morbi efficitur mollis consequat. Maecenas molestie egestas molestie. Praesent in mollis ex, vestibulum malesuada nibh. Praesent commodo elit non justo tristique iaculis. Vestibulum dolor quam, ultricies a quam at, ultricies vehicula neque. Praesent viverra, ex vitae mollis pharetra, libero neque pharetra urna, ac luctus ex nunc a tellus. Pellentesque et tellus lobortis, mollis est ut, vestibulum neque. Pellentesque vestibulum facilisis orci. In dolor tellus, scelerisque non maximus eu, ultricies placerat ante. Vivamus ut porta nunc, id ornare elit.
</div>
</div></div><!---cerramos---->
body {
font-family: Roboto, Verdana, Arial, Helvetica, sans-serif;
color: #9e9e9e;
background-color: #000;
background-repeat: no-repeat;
font-size: 12px;
height: auto;
padding: 10px 0;
margin: 0 auto;
background: url(https://i.imgur.com/6IPC6A7.png);
background-attachment: fixed;
background-size: 100%;
}
:root {
--text: #9e9e9e;
--btra: #2a2a2a66;
--btra2: #2a2a2acc;
--btra3: #ffffff1a;
--coral: #6f393c;
--coraltra: #6f393c6b;
--amar: #8b8b1b;
--btra2: #ffffff1a;
}
a {
color: var(--amar);
text-decoration: none;
}
a:hover,
a:link:hover {
color: #d2d226;
}
#guia {
margin: 0 auto;
max-width: 900px;
display: grid;
grid-template-columns: fit-content(250px) 1fr;
line-height: 18px;
}
#guia .navi {
padding: 50px;
align-items: top;
background: var(--btra);
letter-spacing: 1px;
}
#guia h3 {
font-size: 15px;
font-family: Roboto;
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--coral);
counter-increment: h3;
}
#guia h3:before {
content: "0" counter(h3) ". ";
text-align: right;
padding-top: 1px;
letter-spacing: 2px;
font: 700 7px/20px;
color: #fff;
}
#guia .navi span a {
display: block;
font: 500 10px;
margin-bottom: 10px;
letter-spacing: 1.5px;
grid-template-columns: 25px 1fr;
grid-gap: 15px;
counter-increment: guia;
}
#guia .navi span a:before {
content: "00" counter(guia) ". ";
text-align: right;
padding-top: 1px;
letter-spacing: 2px;
font: 700 7px/20px;
color: #fff;
}
#guia .page {
border-left: 1px solid var(--coraltra);
padding: 50px 75px 75px;
background: var(--btra);
font-family: roboto;
font-size: 13px;
word-spacing: 2px;
text-align: justify;
}
#guia .page h1 {
font-family: roboto slab;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
color: var(--coral);
border-bottom: 1px solid var(--btra2);
padding-bottom: 4px;
letter-spacing: 5px;
text-align: center;
}
#guia .page b,
#guia .page strong {
font-weight: bold;
color: var(--coral);
font-family: roboto condensed;
letter-spacing: 1px;
}
.conteni > div {
display: none;
}
.botoniac {
color: #d2d226 !important;
font-weight: bolder !important;
transition: ease 0.6s !important;
}
#guia h2 {
color: var(--amar);
font-size: 17px;
text-transform: uppercase;
font-family: roboto condensed;
font-weight: lighter;
text-align: center;
}
.conteni i:before {
font-weight: bolder;
color: var(--amar);
font-size: 11px;
}
.conteni e {
color: var(--amar);
font-size: 14px;
padding: 3px;
}
a.minic {
cursor: pointer;
display: inline-block;
}
$(document).ready(function () {
$(".navi a").click(function () {
var butone = $(this).attr("href");
$(".navi a").not(this).removeClass("botoniac");
$(this).addClass("botoniac");
$(".conteni > div").not(butone).slideUp();
$(butone).slideDown();
return false;
});
});
//botón de más información__
$(document).ready(function(){
$('.minic').click(function(){
$(this).siblings('.minico').slideToggle(900);
});
});
External CSS
This Pen doesn't use any external CSS resources.