0% acharam este documento útil (0 voto)

4 visualizações11 páginas

Absolute

O documento é um guia interativo de RPG que permite aos usuários criar personagens, aprender regras e rolar dados. Ele contém seções para a criação de personagens, regras de RPG e uma funcionalidade para rolar um dado D20. O layout é responsivo e inclui estilos CSS para uma melhor apresentação visual.

Enviado por

cortedobrassmello

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

4 visualizações11 páginas

Absolute

Enviado por

cortedobrassmello

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 11

<!

DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Guia de RPG Interativo</title>

<style>

/* Resetando margens e preenchimentos */

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: 'Arial', sans-serif;

background-color: #f1f1f1;

margin: 0;

padding: 0;

color: #333;

/* Cabeçalho */
header {

background-color: #333;

color: white;

text-align: center;

padding: 20px 0;

header h1 {

font-size: 2.5rem;

margin: 0;

/* Barra de navegação */

nav {

background-color: #444;

display: flex;

justify-content: center;

padding: 15px 0;

nav a {

color: white;

padding: 12px 20px;

text-decoration: none;

text-transform: uppercase;

margin: 0 10px;

border-radius: 5px;

nav a:hover {

background-color: #666;

/* Layout principal */

main {

padding: 30px 10%;

section {

margin-bottom: 40px;

/* Cards para conteúdo */

.card {

background-color: white;

padding: 20px;
margin: 10px;

border-radius: 8px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

width: 100%;

max-width: 400px;

text-align: center;

transition: all 0.3s ease-in-out;

.card:hover {

transform: scale(1.05);

/* Formulário de criação de personagens */

.form-group {

margin-bottom: 15px;

.form-group label {

display: block;

font-size: 1.1rem;

}
.form-group input {

width: 100%;

padding: 10px;

font-size: 1rem;

margin-top: 5px;

border: 1px solid #ccc;

border-radius: 5px;

.form-group button {

padding: 10px 20px;

background-color: #444;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

width: 100%;

.form-group button:hover {

background-color: #555;

}
/* Seção de rolagem de dados */

.roll-dice-btn {

display: block;

width: 100%;

padding: 10px;

background-color: #444;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

margin-top: 15px;

.roll-dice-btn:hover {

background-color: #555;

.dice-result {

font-size: 1.5rem;

margin-top: 20px;

color: #333;

font-weight: bold;

}
/* Responsividade */

@media (max-width: 768px) {

main {

padding: 30px 5%;

</style>

</head>

<body>

<h1>Guia de RPG Interativo</h1>

<p>Crie personagens, aprenda regras e role dados!</p>

</header>

<nav>

<a href="#home">Início</a>

<a href="#character-creation">Criação de Personagem</a>

<a href="#rules">Regras</a>

<a href="#dice-roller">Rolagem de Dados</a>

</nav>

<main>

<h2>Criação de Personagem</h2>

<h3>Preencha para Criar seu Personagem</h3>

<label for="name">Nome do Personagem</label>

<input type="text" id="name" placeholder="Nome do seu personagem">

</div>

<label for="class">Classe</label>

<input type="text" id="class" placeholder="Exemplo: Guerreiro, Mago">

</div>

<label for="level">Nível</label>

<input type="number" id="level" placeholder="Nível" min="1" max="20">

</div>

<div class="form-group">
<button onclick="criarPersonagem()">Criar Personagem</button>

</div>

</div>

</section>

<h2>Regras de RPG</h2>

<h3>Rolagem de Dados</h3>

<p>Para determinar o sucesso ou falha em ações, role o dado

correspondente.</p>

</div>

<h3>Combate</h3>

<p>Em combate, os jogadores e inimigos se alternam em turnos. O sucesso de

ataques é baseado na rolagem de dados.</p>

</div>

<h3>Magias</h3>

<p>Magias têm efeitos variados e são lançadas com base no nível de poder do
personagem e no tipo de magia.</p>

</div>

</section>

<h2>Rolagem de Dados</h2>

<button class="roll-dice-btn" onclick="rolarDado()">Role um D20</button>

<p id="dice-result" class="dice-result"></p>

</div>

</section>

</main>

// Função para criar o personagem

function criarPersonagem() {

const nome = document.getElementById('name').value;

const classe = document.getElementById('class').value;

const nivel = document.getElementById('level').value;

const info = `Personagem: ${nome} \nClasse: ${classe} \nNível: ${nivel}`;

document.getElementById('character-info').textContent = info;

}
// Função para rolar dado (D20)

function rolarDado() {

const resultado = Math.floor(Math.random() * 20) + 1;

document.getElementById('dice-result').textContent = `Você rolou: ${resultado}`;

</script>

</body>

</html>

Absolute

Enviado por

Absolute

Enviado por

<!

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Guia de RPG Interativo</title>

/* Resetando margens e preenchimentos */

font-family: 'Arial', sans-serif;

padding: 12px 20px;

padding: 30px 10%;

/* Cards para conteúdo */

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

transition: all 0.3s ease-in-out;

/* Formulário de criação de personagens */

border: 1px solid #ccc;

padding: 10px 20px;

@media (max-width: 768px) {

padding: 30px 5%;

<h1>Guia de RPG Interativo</h1>

<p>Crie personagens, aprenda regras e role dados!</p>

<a href="#character-creation">Criação de Personagem</a>

<a href="#dice-roller">Rolagem de Dados</a>

<h3>Preencha para Criar seu Personagem</h3>

<label for="name">Nome do Personagem</label>

<input type="text" id="name" placeholder="Nome do seu personagem">

<input type="text" id="class" placeholder="Exemplo: Guerreiro, Mago">

<input type="number" id="level" placeholder="Nível" min="1" max="20">

<p>Para determinar o sucesso ou falha em ações, role o dado

<p>Em combate, os jogadores e inimigos se alternam em turnos. O sucesso de

<button class="roll-dice-btn" onclick="rolarDado()">Role um D20</button>

<p id="dice-result" class="dice-result"></p>

// Função para criar o personagem

const nome = document.getElementById('name').value;

const classe = document.getElementById('class').value;

const nivel = document.getElementById('level').value;

const info = `Personagem: ${nome} \nClasse: ${classe} \nNível: ${nivel}`;

const resultado = Math.floor(Math.random() * 20) + 1;

document.getElementById('dice-result').textContent = `Você rolou: ${resultado}`;

Você também pode gostar