Site de Dungeons and Dragons

Sumário

🔹 Descrição do Projeto

🔹 Deploy

🔹 Tecnologias Utilizadas

🔹 Instituição de Ensino

🔹 Desenvolvedor

Descrição do Projeto

Para treinar os conceitos aprendidos durantes os cursos de HTML5, CSS3 e JavaScrpit da Alura, resolvi desenvolver esse site sobre um RPG (role-playing game) chamado Dungeons and Dragons (abreviado como D&D). Essa temática foi escolhida por ser um tema que vem crescendo nos últimos anos e se tornando um hobbie cada vez mais popular e presente na culturar pop. Exemplo desse crescimento e importância é sua aplicação na área escolar como um método de ensino, onde os professorers podem inserir conteúdos e testar habilidades na sala de aula de forma mais lúdica. Outro motivo para escolha desse tema é a facilidade de encontrar conteúdo e imagens sobre D&D para compor a identidade visual do site.

Cada página tem o seguinte foco:

• Home: Nessa página encontra-se uma breve apresentação sobre RPG e D&D, contendo informações como quem criou o D&D e as vantagems de jogar D&D. A página home também possui um vídeo falando sobre o futuro do D&D e um mapa mostrando a localização da empresa que pública os livros;
• Jogo: Nessa página faz uma introdução de como é jogar D&D e quais os papeis desempenhados pelos jogadores e pelo mestre;
• Personagem: Nessa página é a apresentada os aspectos para a criação de personagem, além de informações sobre raças, classes e antecedentes disponíveis para os jogadores escolherem para construir seus personagens;
• Enquete: Uma pequena enquete para colher algumas informações de quem visita o site, como nome, telefone e e-mail, além de saber se já jogaram D&D antes e quais sua raça e sua classe favorita.

Para criar essas páginas várias funcionalidades foram aplicadas, por exemplo:

• Criação de cabeçalho e rodapé para manter uma identidade visual nas páginas;
• Texto e formatação;
• Adição de imagens e configurações de suas dimensões;
• Uso e formatação de listas;
• Adição de elementos externos como vídeos e mapas;
• Adição de links para permitir a navegação entre as páginas;
• Introdução de formulário para coletar informações dos usuários do site;
• Interações dos elementos da página com o cursor do mouse;
• Elementos de edição, como o uso de degradê, opacidade e sombra.
• Uso do JavaScript para poder conferir um novo estilo para a caixa de seleção de opções presente na enquete.

Deploy

https://diegosxe.github.io/DnD-HTML5-CSS3-JavaScript/

Tecnologias Utilizadas

• HTML5
• CSS3
• JavaScript

Instituição de Ensino

Desenvolvedor

Diego Borelli Dias