├── .gitattributes ├── LICENSE ├── README.md ├── elements.js ├── images ├── elementos │ ├── Conhecimento.webp │ ├── Energia.webp │ ├── Medo.webp │ ├── Morte.webp │ └── Sangue.webp └── socials │ ├── discord.png │ ├── github.png │ └── twitter.png ├── index.html ├── questions.js ├── results.html ├── styles ├── elementos.css ├── index.css ├── quiz.css └── results.css └── teste.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 04Elementos 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 4Elementos 2 | 3 | ## O que é? 4 | 5 | 4Elementos é uma comunidade não oficial feito por fãs de Ordem Paranormal, atualmente desenvolvendo um teste de personalidade com 20 perguntas para relacionar suas respostas a um dos quatro elementos do universo de [Ordem Paranormal](https://ordemparanormal.com.br/). 6 | 7 | ## Como chegamos no resultado? 8 | 9 | São utilizados quatro espectros diferentes: Emoção (Sangue), Solidão (Morte), Ordem (Conhecimento) e Caos (Energia); Cada elemento tem uma sequência específica de espectros, o resultado é obtido depois de aproximar o seu espectro (obtido no final das suas 20 respostas) com o espectro de um dos elementos. Importante ressaltar que o resultado não é oficial e as associações das respostas é de responsabilidade da 4Elementos, logo, seu resultado é um resultado aproximado considerando a descrição disponível de cada um dos elementos. 10 | 11 | ## Discordo do meu resultado 12 | 13 | Se você acredita fielmente que o seu resultado deveria ter sido outro, entre em contato com a gente pelo GitHub ou no [Discord](https://discord.com/invite/YD4a9FPxh9) para que a gente possa avaliar se o erro foi causado por um erro de código. 14 | 15 | ## Quero ajudar no projeto 16 | 17 | Entre no nosso [Servidor do Discord](https://discord.com/invite/YD4a9FPxh9) e procure um membro da equipe! Lembre-se: Não somos uma comunidade oficial, não temos nenhum contato fixo com o Cellbit ou qualquer membro da equipe de Ordem Paranormal. Todos os créditos dos elementos, imagens dos elementos e o universo vão para seus respectivos donos. -------------------------------------------------------------------------------- /elements.js: -------------------------------------------------------------------------------- 1 | elements = { 2 | "Morte": { 3 | "desc": "Morte é a entidade do tempo. Ela busca os momentos vivenciados, distorcendo a percepção egóica da existência de cada indivíduo para seu próprio agrado.

A distorção temporal da Morte arruína a percepção carnal do Sangue.", 4 | "fraseGuia": "Tudo tem um começo e um fim, e o Tempo leva todas as coisas. Nada que é levado pela Morte pode voltar ao que era antes.", 5 | "outrasInfo": { 6 | "agts": { 7 | "agt_1": "Dante, cujo nome original é Gaspar, é um dos protagonistas da série Ordem Paranormal, presente em Desconjuração e Calamidade. Ele era um ocultista que foi preso por sua participação em um ritual envolvendo Luciano Carvalho.", 8 | "agt_2": "Boris Lukic foi um dos protagonistas da série Ordem Paranormal, presente em Calamidade. Ele era um dos Marcados, anteriormente, do lado de Kian, trabalhando junto de outros Escriptas por conta de um acordo que fez com Kian envolvendo o próprio Diabo.", 9 | "agt_3": "GuaGuazinho, o Guaxinim (interpreta o personagem Arthur Cervero) e Kalera (interpretou Erin Parker, atualmente interpreta Yuki) realizaram nosso teste e eles originalmente possuiriam afinidade com Morte, porém mudanças no balanceamento fizeram com que seus resultados atualmente sejam Conhecimento.", 10 | } 11 | } 12 | }, 13 | 14 | "Sangue": { 15 | "desc": "Sangue é a entidade do sentimento. Ele busca a intensidade: dor, obsessão, paixão, amor, fome, ódio - tudo que envolve sentir uma emoção extrema agrada a entidade de Sangue.

Os sentimentos extremos do Sangue superam a razão e a calmaria do Conhecimento.", 16 | "fraseGuia": "Tudo começa pelo Sangue. O Sangue é o fluxo que banha a eternidade do Outro Lado", 17 | "outrasInfo": { 18 | "agts": { 19 | "agt_1": "Agatha Volkomenn é uma personagem secundária presente em A Ordem Paranormal, Desconjuração e Calamidade. Ela foi uma peça-chave para a solução do caso da Escola Nostradamus de Ensino Médio, na qual era aluna.", 20 | "agt_2": "Arthur Cervero é um dos protagonistas da série Ordem Paranormal, presente em O Segredo na Floresta, Desconjuração e Calamidade. Ele era um músico e membro de uma gangue de motoqueiros em Carpazinha, Rio Grande do Sul, que se juntou a Ordo Realitas após perder seus colegas numa luta contra uma criatura paranormal.", 21 | "agt_3": "Rakin (interpretou Thiago e Arnaldo Fritz, atualmente interpreta Dante) e Bastet (interpreta o Henri) originalmente tiraram Energia, porém após mudanças no balanceamento, ambos os resultados atualmente seriam Sangue.", 22 | } 23 | } 24 | }, 25 | 26 | "Energia": { 27 | "desc": "Energia é a entidade do caos. Tudo que não pode ser explicado, o intangível, a anarquia. A constante mudança, o calor e o frio, a luz e as trevas. Tudo que envolve a imprevisibilidade e a transformação agrada a entidade de Energia.

A transformação da Energia sobrecarrega os efeitos da Morte", 28 | "fraseGuia": "O Caos é inevitável.", 29 | "outrasInfo": { 30 | "agts": { 31 | "agt_1": "Rubens Naluti é um dos protagonistas da série Ordem Paranormal, presente em Desconjuração e Calamidade. Ele é um agente da Ordo Realitas e parceiro de longa data de Johnny Tabasco.", 32 | "agt_2": "Cesar 'Kaiser' Oliveira Cohen foi um dos protagonistas da série Ordem Paranormal, presente em O Segredo na Floresta e Desconjuração. Cesar era um programador e hacker brasileiro, residente de São Paulo. Após se juntar à Ordo Realitas, é um dos membros designados ao Caso de Carpazinha.", 33 | "agt_3": "Júlio Victor (responsável pela trilha sonora em Ordem Paranormal) e Orenjiro (ilustrador de Ordem Paranormal) realizaram o nosso teste e ambos possuem afinidade com Energia.", 34 | } 35 | } 36 | }, 37 | 38 | "Conhecimento": { 39 | "desc": "Conhecimento é a entidade da consciência. Descobrir, aprender, conhecer, decifrar. Ter a própria percepção do Outro Lado e suas entidades agrada o elemento de Conhecimento.

A razão e lógica do Conhecimento reintegram e suprimem o caos da Energia", 40 | "fraseGuia": "Saber tudo é perder tudo.", 41 | "outrasInfo": { 42 | "agts": { 43 | "agt_1": "Carina Leone é uma das protagonistas da série Ordem Paranormal, presente em Calamidade. Ela é uma italiana formada em moda, pertencente a uma família de justiceiros clandestinos que lutam contra o Paranormal, levando o nome Leone.", 44 | "agt_2": "Gal é um dos protagonistas da série Ordem Paranormal, presente em Desconjuração e Calamidade. Gal foi apresentado primeiramente como um antagonista em Desconjuração, sendo o líder dos Escriptas, também conhecidos como Culto do Conhecimento. ", 45 | "agt_3": "Felipe Della Corte (autor de Ordem Paranormal RPG), o Luis (LJoga) (interpretou Alexsander Kothe, Cristopher Cohen, Fernando/Luciano Carvalho, atualmente interpreta Damir Lukic), Over (João) (programador em Ordem Paranormal) realizaram o nosso teste e eles possuem afinidade com Conhecimento.", 46 | } 47 | } 48 | }, 49 | 50 | "Medo": { 51 | "desc": "Você ouve uma música impossível, lê a descrição do elemento, mas você não entende o que leu. O Medo é impossível de entender. Seus 4 espectros são únicos, assim como o Medo.", 52 | "fraseGuia": "O Medo é infinito.", 53 | "outrasInfo": { 54 | "agts": { 55 | "agt_1": "???", 56 | "agt_2": "???", 57 | "agt_3": "???", 58 | } 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /images/elementos/Conhecimento.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/04Elementos/4elementos/bd06b2e42a6f1a2cd9e7304ceea952d94c262d03/images/elementos/Conhecimento.webp -------------------------------------------------------------------------------- /images/elementos/Energia.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/04Elementos/4elementos/bd06b2e42a6f1a2cd9e7304ceea952d94c262d03/images/elementos/Energia.webp -------------------------------------------------------------------------------- /images/elementos/Medo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/04Elementos/4elementos/bd06b2e42a6f1a2cd9e7304ceea952d94c262d03/images/elementos/Medo.webp -------------------------------------------------------------------------------- /images/elementos/Morte.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/04Elementos/4elementos/bd06b2e42a6f1a2cd9e7304ceea952d94c262d03/images/elementos/Morte.webp -------------------------------------------------------------------------------- /images/elementos/Sangue.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/04Elementos/4elementos/bd06b2e42a6f1a2cd9e7304ceea952d94c262d03/images/elementos/Sangue.webp -------------------------------------------------------------------------------- /images/socials/discord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/04Elementos/4elementos/bd06b2e42a6f1a2cd9e7304ceea952d94c262d03/images/socials/discord.png -------------------------------------------------------------------------------- /images/socials/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/04Elementos/4elementos/bd06b2e42a6f1a2cd9e7304ceea952d94c262d03/images/socials/github.png -------------------------------------------------------------------------------- /images/socials/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/04Elementos/4elementos/bd06b2e42a6f1a2cd9e7304ceea952d94c262d03/images/socials/twitter.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 4Elementos 19 | 20 | 21 | 22 |
23 |
24 |

4Elementos

25 |
26 | 27 |
28 |

Descrição

29 |

30 | Esse é um teste feito por fãs de Ordem Paranormal para que os espectadores consigam descobrir seus possíveis elementos de 31 | afinidade baseado em 20 questões sobre sua personalidade. Sinta-se livre para usar os resultados desse teste como quiser! 32 |

33 |
34 | 35 |
36 |

Avisos

37 |

38 | Os direitos das imagens e descrições dos elementos vão para seus respectivos donos, apenas atribuímos perguntas de personalidade para cada um dos elementos 39 | baseado na descrição de cada um. 40 |

41 | É muito importante ressaltar: Não somos um projeto oficial de Ordem Paranormal, somos uma comunidade feita por fãs para fãs. Não temos nenhum contato fixo com o Cellbit ou sua equipe. 42 |

43 | Quer entrar em contato conosco? Entre no nosso Discord! Você também pode procurar a gente no Twitter. 44 |

45 |
46 | 47 |
48 |

Outras Informações

49 |

50 | Nenhuma informação pessoal sobre você será divulgada, ao responder o teste você pode opcionalmente divulgar ele com seus amigos. Você também pode se voluntariar 51 | para ajudar a tornar o teste mais efetivo, sugerir novas perguntas ou edições nas atuais. 52 |

53 |
54 | 55 |
56 |
57 | Símbolo de Conhecimento 58 | Símbolo de Sangue 59 | Símbolo de Energia 60 | Símbolo de Morte 61 |
62 | 63 | 64 | 65 |

66 |
67 | 68 |
69 |

Se você realizou o teste previamente, clique no botão abaixo para acessar seu último resultado. Você pode repetir o teste clicando no botão "Começar" (substituirá o teste anterior).

70 | 71 | 72 | 73 |
74 |
75 | 76 |
77 | Ícone do GitHub 78 | Ícone do Discord 79 | Ícone do Twitter 80 |
81 | 82 | 83 | -------------------------------------------------------------------------------- /questions.js: -------------------------------------------------------------------------------- 1 | questions = [ 2 | { 3 | "id": 1, 4 | "question": "Você permanece calmo e concentrado mesmo sob pressão.", 5 | "effect": { 6 | "emocao": -1, 7 | "solidao": 1, 8 | "ordem": 2, 9 | "caos": -2, 10 | } 11 | }, 12 | { 13 | "id": 2, 14 | "question": "Você raramente reflete as consequências das suas ações.", 15 | "effect": { 16 | "emocao": 1, 17 | "solidao": -1, 18 | "ordem": -2, 19 | "caos": 2, 20 | } 21 | }, 22 | { 23 | "id": 3, 24 | "question": "Suas emoções mandam em você mais do que você manda nelas.", 25 | "effect": { 26 | "emocao": 2, 27 | "solidao": -2, 28 | "ordem": -1, 29 | "caos": 1, 30 | } 31 | }, 32 | { 33 | "id": 4, 34 | "question": "Você baseia suas ações por seus impactos no presente, não no futuro.", 35 | "effect": { 36 | "emocao": -2, 37 | "solidao": 2, 38 | "ordem": 1, 39 | "caos": -1, 40 | } 41 | }, 42 | { 43 | "id": 5, 44 | "question": "Você prefere trabalhar em um time onde todos tem funções específicas.", 45 | "effect": { 46 | "emocao": -1, 47 | "solidao": 1, 48 | "ordem": 2, 49 | "caos": -2, 50 | } 51 | }, 52 | { 53 | "id": 6, 54 | "question": "Você tende a respeitar as posições hierárquicas.", 55 | "effect": { 56 | "emocao": -1, 57 | "solidao": 1, 58 | "ordem": 2, 59 | "caos": -2, 60 | } 61 | }, 62 | { 63 | "id": 7, 64 | "question": "Você frequentemente fica preso em seus próprios pensamentos.", 65 | "effect": { 66 | "emocao": -2, 67 | "solidao": 2, 68 | "ordem": 1, 69 | "caos": -1, 70 | } 71 | }, 72 | { 73 | "id": 8, 74 | "question": "Lealdade é uma das qualidades mais admiráveis em um indivíduo.", 75 | "effect": { 76 | "emocao": 2, 77 | "solidao": -2, 78 | "ordem": -1, 79 | "caos": 1, 80 | } 81 | }, 82 | { 83 | "id": 9, 84 | "question": "Você enxerga as regras como uma referência, não uma obrigação.", 85 | "effect": { 86 | "emocao": 1, 87 | "solidao": -1, 88 | "ordem": -2, 89 | "caos": 2, 90 | } 91 | }, 92 | { 93 | "id": 10, 94 | "question": "Você geralmente conta a verdade mesmo que ela machuque alguém.", 95 | "effect": { 96 | "emocao": -1, 97 | "solidao": 1, 98 | "ordem": 2, 99 | "caos": -2, 100 | } 101 | }, 102 | { 103 | "id": 11, 104 | "question": "Você não seguiria uma ordem se ela ferisse os seus valores morais.", 105 | "effect": { 106 | "emocao": 2, 107 | "solidao": -2, 108 | "ordem": -1, 109 | "caos": 1, 110 | } 111 | }, 112 | { 113 | "id": 12, 114 | "question": "Planejamento não é a parte mais importante de uma missão.", 115 | "effect": { 116 | "emocao": 1, 117 | "solidao": -1, 118 | "ordem": -2, 119 | "caos": 2, 120 | } 121 | }, 122 | { 123 | "id": 13, 124 | "question": "Não existem inocentes do lado inimigo, todos devem ser julgados igualmente.", 125 | "effect": { 126 | "emocao": 2, 127 | "solidao": -2, 128 | "ordem": -1, 129 | "caos": 1, 130 | } 131 | }, 132 | { 133 | "id": 14, 134 | "question": "Pessoas que são menos efetivas que você te estressam.", 135 | "effect": { 136 | "emocao": -2, 137 | "solidao": 2, 138 | "ordem": 1, 139 | "caos": -1, 140 | } 141 | }, 142 | { 143 | "id": 15, 144 | "question": "Você tem dificuldade em sentir empatia pelo seu inimigo.", 145 | "effect": { 146 | "emocao": 2, 147 | "solidao": -2, 148 | "ordem": -1, 149 | "caos": 1, 150 | } 151 | }, 152 | { 153 | "id": 16, 154 | "question": "Você acredita que não deve explicar suas ações se você tomou a ação correta.", 155 | "effect": { 156 | "emocao": -1, 157 | "solidao": 1, 158 | "ordem": 2, 159 | "caos": -2, 160 | } 161 | }, 162 | { 163 | "id": 17, 164 | "question": "Você tem dificuldade em trabalhar com novos grupos.", 165 | "effect": { 166 | "emocao": -2, 167 | "solidao": 2, 168 | "ordem": 1, 169 | "caos": -1, 170 | } 171 | }, 172 | { 173 | "id": 18, 174 | "question": "Você tende a tomar ações práticas.", 175 | "effect": { 176 | "emocao": -2, 177 | "solidao": 2, 178 | "ordem": 1, 179 | "caos": -1, 180 | } 181 | }, 182 | { 183 | "id": 19, 184 | "question": "Se o resultado for positivo, pouco importa o meio.", 185 | "effect": { 186 | "emocao": 1, 187 | "solidao": -1, 188 | "ordem": -2, 189 | "caos": 2, 190 | } 191 | }, 192 | { 193 | "id": 20, 194 | "question": "Você não se esforça em planejar ações.", 195 | "effect": { 196 | "emocao": 1, 197 | "solidao": -1, 198 | "ordem": -2, 199 | "caos": 2, 200 | } 201 | }, 202 | ] -------------------------------------------------------------------------------- /results.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 4Elementos 19 | 20 | 21 | 22 |
23 |
24 |

Ops... Algo deu errado!

25 |

26 | Parece que de alguma forma você chegou na página de resultados sem responder o teste, logo, não existem resultados. Se você respondeu o teste e está vendo essa mensagem 27 | significa que o seu navegador provavelmente não tem suporte a algumas tecnologias necessárias para o funcionamento do site. Recomendamos você atualizar seu navegador e tentar novamente! 28 |

29 | 30 | 33 |
34 | 35 |
36 |

Boas vindas!

37 |

38 | 39 |

Você possui afinidade com...

40 |

41 | 42 | Imagem do elemento resultado no teste 43 |

44 | 45 |

Seu Espectro

46 |
47 |
48 |

Emoção

49 |

50 |
51 | 52 |
53 |

Tempo

54 |

55 |
56 | 57 |
58 |

Razão

59 |

60 |
61 | 62 |
63 |

Caos

64 |

65 |
66 |
67 | 68 |

Descrição

69 |


70 |
71 | 72 |
73 |
74 |

Outros Agentes

75 |

ALERTA DE SPOILERS: A partir de aqui você pode encontrar spoilers sobre a situação atual de algum personagem, recomendamos ler apenas se você assistiu até o episódio mais recente de Ordem Paranormal: Calamidade


76 |


77 |


78 |

79 |
80 |
81 | 82 |

Obrigado por realizar o teste!

83 |

Quer conhecer mais sobre o universo? Clique aqui ou no símbolo do Elemento para ser redirecionado para a página oficial da Wiki! E para ser redirecionado para a página oficial de Ordem Paranormal clique aqui.

84 |
85 | 86 |
87 | Ícone do GitHub 88 | Ícone do Discord 89 | Ícone do Twitter 90 |
91 | 92 | 182 | 183 | 184 | -------------------------------------------------------------------------------- /styles/elementos.css: -------------------------------------------------------------------------------- 1 | .morte:hover { 2 | filter: drop-shadow(8px 8px 10px rgb(152, 148, 174)); 3 | transition-duration: 200ms; 4 | } 5 | 6 | .sangue:hover { 7 | filter: drop-shadow(8px 8px 10px rgb(245, 57, 57)); 8 | transition-duration: 200ms; 9 | } 10 | 11 | .energia:hover { 12 | filter: drop-shadow(8px 8px 10px rgb(169, 94, 255)); 13 | transition-duration: 200ms; 14 | animation: 0.1s linear infinite forwards shake-animation; 15 | } 16 | 17 | .conhecimento:hover { 18 | filter: drop-shadow(8px 8px 10px rgb(242, 210, 29)); 19 | transition-duration: 200ms; 20 | } 21 | 22 | .SangueResult { 23 | animation: 10s infinite forwards sangue-animation; 24 | } 25 | 26 | @keyframes sangue-animation { 27 | 50% { filter: drop-shadow(8px 8px 10px rgb(245, 57, 57)); } 28 | } 29 | 30 | .ConhecimentoResult { 31 | animation: 10s infinite forwards conhecimento-animation; 32 | } 33 | 34 | @keyframes conhecimento-animation { 35 | 50% { filter: drop-shadow(8px 8px 10px rgb(242, 210, 29)); } 36 | } 37 | 38 | .EnergiaResult { 39 | animation: 10s infinite forwards energia-animation; 40 | } 41 | 42 | @keyframes energia-animation { 43 | 50% { filter: drop-shadow(8px 8px 10px rgb(169, 94, 255)); } 44 | } 45 | 46 | .MorteResult { 47 | animation: 10s infinite forwards morte-animation; 48 | } 49 | 50 | @keyframes morte-animation { 51 | 50% { filter: drop-shadow(8px 8px 10px rgb(152, 148, 174)); } 52 | } 53 | 54 | .MedoResult { 55 | animation: 10s infinite forwards medo-animation; 56 | } 57 | 58 | @keyframes medo-animation { 59 | 50% { filter: drop-shadow(8px 8px 10px rgb(76, 118, 255)); } 60 | } 61 | -------------------------------------------------------------------------------- /styles/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background-color: black; 7 | font-family: 'Space Mono', monospace; 8 | } 9 | 10 | a { 11 | color: goldenrod; 12 | } 13 | 14 | h2 { 15 | color: goldenrod; 16 | font-family: 'Special Elite', cursive; 17 | } 18 | 19 | h3 { 20 | color: goldenrod; 21 | margin-bottom: 5px; 22 | margin-top: 30px; 23 | font-family: 'Special Elite', cursive; 24 | } 25 | 26 | p { 27 | text-align:justify; 28 | text-justify:inter-word; 29 | margin: 5px; 30 | } 31 | 32 | img { 33 | filter: drop-shadow(8px 8px 10px gray); 34 | } 35 | 36 | img:hover { 37 | transition-duration: 200ms; 38 | transform: translateY(-0.2rem); 39 | } 40 | 41 | .lastResult { 42 | display: none; 43 | } 44 | 45 | .imgSocial { 46 | margin: 25px; 47 | width: 60px; 48 | height: 60px; 49 | filter: drop-shadow(4px 4px 10px rgb(128, 128, 128)); 50 | } 51 | 52 | .imgSocial:hover{ 53 | transition-duration: 200ms; 54 | transform: translateY(-0.2rem); 55 | } 56 | 57 | .imgSocial:hover{ 58 | transition-duration: 200ms; 59 | transform: translateY(-0.2rem); 60 | } 61 | 62 | .container { 63 | width: 65%; 64 | margin: auto; 65 | padding: 20px; 66 | border: 2px solid goldenrod; 67 | text-align: center; 68 | color: white; 69 | } 70 | 71 | .socials { 72 | width: 65%; 73 | margin: auto; 74 | text-align: center; 75 | color: white; 76 | } 77 | 78 | .simbolosHome { 79 | margin: 20px; 80 | max-width: 100%; 81 | height: auto; 82 | } 83 | 84 | .start { 85 | background-color: black; 86 | border: 2px solid white; 87 | color: white; 88 | padding: 10px 28px; 89 | text-align: center; 90 | text-decoration: none; 91 | display: inline-block; 92 | font-family: 'Special Elite', cursive; 93 | font-size: 16px; 94 | margin: 4px 2px; 95 | cursor: pointer; 96 | } 97 | 98 | .start:hover { 99 | background-color: white; 100 | color: black; 101 | } 102 | 103 | @media only screen and (max-width: 768px) { 104 | .container { 105 | width: 100%; 106 | margin: auto; 107 | margin-top: none; 108 | padding: 10px; 109 | border: 2px solid goldenrod; 110 | text-align: center; 111 | color: white; 112 | } 113 | 114 | h3 { 115 | margin-top: 20px; 116 | font-size: 16px; 117 | } 118 | 119 | p { 120 | font-size: 14px; 121 | text-align: justify; 122 | text-justify: inter-word; 123 | margin: 2px; 124 | } 125 | 126 | img { 127 | width: 65px; 128 | height: 75px; 129 | filter: drop-shadow(8px 8px 10px gray); 130 | } 131 | 132 | .imgSocial { 133 | margin-top: 40px; 134 | width: 40px; 135 | height: 40px; 136 | filter: drop-shadow(4px 4px 10px gray); 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /styles/quiz.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | font-family: 'Space Mono', monospace; 4 | } 5 | 6 | h2 { 7 | color: goldenrod; 8 | font-family: 'Special Elite', cursive; 9 | } 10 | 11 | p { 12 | text-align:justify; 13 | text-justify:inter-word; 14 | margin: 5px; 15 | } 16 | 17 | .quiz-container { 18 | width: 70%; 19 | margin: auto; 20 | padding: 15px; 21 | border: 2px solid goldenrod; 22 | text-align: center; 23 | color: white; 24 | } 25 | 26 | .endTest { 27 | display: none; 28 | width: 70%; 29 | margin: auto; 30 | padding: 15px; 31 | border: 2px solid goldenrod; 32 | text-align: center; 33 | color: white; 34 | } 35 | 36 | .question { 37 | border: 2px solid white; 38 | margin: 50px; 39 | padding: 15px; 40 | } 41 | 42 | #b1, #b2, #b3, #b4, #b5, .previous, .sendButton { 43 | background-color: black; 44 | border: 2px solid white; 45 | width: 300px; 46 | color: white; 47 | padding: 10px 28px; 48 | text-align: center; 49 | text-decoration: none; 50 | display: inline-block; 51 | font-family: 'Special Elite', cursive; 52 | font-size: 16px; 53 | margin: 7px; 54 | cursor: pointer; 55 | } 56 | 57 | #b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, .previous:hover, .sendButton:hover { 58 | background-color: white; 59 | color: black; 60 | } 61 | 62 | .inputName { 63 | background-color: black; 64 | border: 2px solid white; 65 | width: 300px; 66 | color: white; 67 | font-family: 'Special Elite', cursive; 68 | font-size: 16px; 69 | text-align: center; 70 | padding: 10px 28px; 71 | margin-top: 25px; 72 | margin-bottom: 25px; 73 | } 74 | 75 | .previous { 76 | margin-top: 30px; 77 | } 78 | 79 | @media only screen and (max-width: 768px) { 80 | .quiz-container { 81 | width: 90%; 82 | margin: auto; 83 | padding: 15px; 84 | text-align: center; 85 | color: white; 86 | } 87 | 88 | .previous { 89 | margin-top: 20px; 90 | } 91 | 92 | #b1, #b2, #b3, #b4, #b5, .previous, .sendButton { 93 | background-color: black; 94 | border: 2px solid white; 95 | width: 90%; 96 | color: white; 97 | padding: 10px 28px; 98 | text-align: center; 99 | text-decoration: none; 100 | display: inline-block; 101 | font-family: 'Special Elite', cursive; 102 | font-size: 16px; 103 | margin: 7px; 104 | cursor: pointer; 105 | } 106 | 107 | #b1:active, #b2:active, #b3:active, #b4:active, #b5:active, .previous:active, .sendButton:active { 108 | background-color: white; 109 | color: black; 110 | } 111 | } 112 | 113 | @media only screen and (max-width: 690px) { 114 | h3 { 115 | margin-top: 20px; 116 | font-size: 16px; 117 | } 118 | 119 | p { 120 | font-size: 16px; 121 | text-align: justify; 122 | text-justify: newspaper; 123 | margin: 2px; 124 | } 125 | 126 | .quiz-container { 127 | width: 90%; 128 | margin: auto; 129 | padding: 15px; 130 | text-align: center; 131 | color: white; 132 | } 133 | 134 | .previous { 135 | margin-top: 20px; 136 | } 137 | 138 | #b1, #b2, #b3, #b4, #b5, .previous, .sendButton { 139 | background-color: black; 140 | border: 2px solid white; 141 | width: 90%; 142 | color: white; 143 | padding: 10px 28px; 144 | text-align: center; 145 | text-decoration: none; 146 | display: inline-block; 147 | font-family: 'Special Elite', cursive; 148 | font-size: 16px; 149 | margin: 7px; 150 | cursor: pointer; 151 | } 152 | 153 | #b1:active, #b2:active, #b3:active, #b4:active, #b5:active, .previous:active, .sendButton:active { 154 | background-color: white; 155 | color: black; 156 | } 157 | 158 | .endTest { 159 | width: 90%; 160 | margin: auto; 161 | padding: 15px; 162 | text-align: center; 163 | color: white; 164 | } 165 | 166 | .inputName { 167 | background-color: black; 168 | border: 2px solid white; 169 | width: 70%; 170 | color: white; 171 | font-family: 'Special Elite', cursive; 172 | font-size: 16px; 173 | text-align: center; 174 | padding: 10px 28px; 175 | margin-top: 25px; 176 | margin-bottom: 25px; 177 | } 178 | } -------------------------------------------------------------------------------- /styles/results.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | font-family: 'Space Mono', monospace; 4 | } 5 | 6 | a { 7 | color: goldenrod; 8 | } 9 | 10 | h2 { 11 | color: goldenrod; 12 | font-family: 'Special Elite', cursive; 13 | } 14 | 15 | h3 { 16 | color: goldenrod; 17 | margin-bottom: 5px; 18 | margin-top: 30px; 19 | font-family: 'Special Elite', cursive; 20 | } 21 | 22 | .whiteH3 { 23 | color: white; 24 | margin-bottom: 25px; 25 | margin-top: 10px; 26 | font-family: 'Special Elite', cursive; 27 | } 28 | 29 | p { 30 | text-align:justify; 31 | text-justify:inter-word; 32 | margin: 5px; 33 | } 34 | 35 | .centerP { 36 | margin-top: 10px; 37 | text-align: center; 38 | text-justify: none; 39 | margin: none; 40 | } 41 | 42 | img { 43 | margin-bottom: 15px; 44 | filter: drop-shadow(8px 8px 10px gray); 45 | width: 150px; 46 | height: 150px; 47 | } 48 | 49 | img:hover { 50 | transition-duration: 200ms; 51 | transform: translateY(-0.2rem); 52 | } 53 | 54 | button { 55 | background-color: black; 56 | border: 2px solid white; 57 | color: white; 58 | padding: 10px 28px; 59 | text-align: center; 60 | text-decoration: none; 61 | display: inline-block; 62 | font-family: 'Special Elite', cursive; 63 | font-size: 16px; 64 | margin: 4px 2px; 65 | cursor: pointer; 66 | } 67 | 68 | button:hover { 69 | background-color: white; 70 | color: black; 71 | } 72 | 73 | .container { 74 | width: 65%; 75 | margin: auto; 76 | padding: 20px; 77 | border: 2px solid goldenrod; 78 | text-align: center; 79 | color: white; 80 | } 81 | 82 | .socials { 83 | width: 65%; 84 | margin: auto; 85 | text-align: center; 86 | color: white; 87 | } 88 | 89 | .imgSocial { 90 | margin: 25px; 91 | width: 60px; 92 | height: 60px; 93 | filter: drop-shadow(4px 4px 10px gray); 94 | } 95 | 96 | .imgSocial:hover{ 97 | transition-duration: 200ms; 98 | transform: translateY(-0.2rem); 99 | } 100 | 101 | .userEspectro { 102 | width: 100%; 103 | text-align: center; 104 | } 105 | 106 | .userRow { 107 | width: 100px; 108 | display: inline-block; 109 | } 110 | 111 | .espectroValue { 112 | text-align: center; 113 | text-justify: none; 114 | margin: 0; 115 | } 116 | 117 | .errorDiv { 118 | display: none; 119 | } 120 | 121 | @media only screen and (max-width: 768px) { 122 | .container { 123 | width: 90%; 124 | margin: auto; 125 | margin-top: none; 126 | padding: 10px; 127 | border: 2px solid goldenrod; 128 | text-align: center; 129 | color: white; 130 | } 131 | 132 | h3 { 133 | margin-top: 20px; 134 | font-size: 16px; 135 | } 136 | 137 | p { 138 | font-size: 14px; 139 | text-align: justify; 140 | text-justify: newspaper; 141 | margin: 2px; 142 | } 143 | 144 | img { 145 | width: 80px; 146 | height: 80px; 147 | filter: drop-shadow(8px 8px 10px gray); 148 | } 149 | 150 | .imgSocial { 151 | margin-top: 40px; 152 | width: 40px; 153 | height: 40px; 154 | filter: drop-shadow(4px 4px 10px gray); 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /teste.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 4Elementos 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |

4Elementos - Teste de Afinidade

27 |
28 |
29 |

Recomendamos fortemente que você evite em marcar a opção "neutro" para um resultado mais preciso do teste. Utilize o botão voltar para mudar sua ÚLTIMA resposta, se precisar.

30 |
31 | 32 |
33 |

34 |
35 |
36 | 37 |
38 |
41 | 42 |
45 | 46 |
49 | 50 |
53 | 54 |
57 |
58 | 59 |
60 | 61 |
62 |
63 | 64 |
65 |

4Elementos - Fim do teste

66 |

Digite seu nome para uma personalização na página de resultados. Essa é uma etapa opcional, essa informação será registrada apenas no seu próprio navegador.

67 | 68 |
69 | 70 |
71 | 72 | 272 | 273 | 274 | --------------------------------------------------------------------------------