A Pen by Leonardo Marçal on CodePen.
[Descubra Aqui] (https://cdpn.io/leonnmarshall/debug/NWdGxdK/bZMQWKdpyjxA)
Last active
March 27, 2021 02:15
-
-
Save Leonnmarshall/f0396021cd1f4ebb1c01aebb623a7d09 to your computer and use it in GitHub Desktop.
Mentalista - Descobrindo minha casa em Hogwarts.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title> | |
| Imersão Dev - Aula 03 | |
| </title> | |
| <div class="caixa"> | |
| <img id= "logo" src="http://3.bp.blogspot.com/-C2Q9q06Bn0w/U5TFRxAW4KI/AAAAAAAAFWY/grd0uZgNJtU/s1600/__8912092_orig.gif"> | |
| </div> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="page-title">Em qual casa de Hogwarts você entraria?</h1> | |
| <p class="page-subtitle">O Chapéu Seletor descobrirá!</p> | |
| <section class="perguntas"> | |
| <form id="form"> | |
| <h2 id= "tit">Clique na opção que mais pareça com você:</h2> | |
| <div class="conteudo-perfil"> | |
| <ul class="perfil"> | |
| <li class="itens"><input type="radio" name="q1" value="Lufa-Lufa">Paciente e pleno.</li> | |
| <li class="itens"><input type="radio" name="q1" value="Sonserina">Imperativo, quero tudo na hora. </li> | |
| <li class="itens"><input type="radio" name="q1" value="Corvinal">Lento, gosto de dormir.</li> | |
| <li class="itens"><input type="radio" name="q1" value="Grifinória">Proativo, amo estudar. </li> | |
| </ul> | |
| </div> | |
| <button id="btn-salvar" type="submit">Enviar Pensamento</button> | |
| </form> | |
| </section> | |
| </div> | |
| <a href="https://github.com/Leonnmarshall" target="_blank"> | |
| <img id= "git" src="https://dshedd.com/wp-content/uploads/2020/05/github-e1588812098492.png" alt="" class="git-logo"> | |
| </a> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var form = document.querySelector('#form'); | |
| var botao = document.querySelector('#btn-salvar'); | |
| botao.addEventListener('click', function (event) { | |
| event.preventDefault(); | |
| alert("Hum deixa eu ver........ sua casa é: " + form.q1.value); | |
| }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| fontfamily:'helvetica',monospace; | |
| min-height: 600px; | |
| background: linear-gradient(#8B8989,#4F4F4F,#8B8682); | |
| background-color: black; | |
| background-size: contain; | |
| background-position: center bottom; | |
| background-repeat: no-repeat; | |
| } | |
| #logo { | |
| width: 25%; | |
| } | |
| .caixa { | |
| text-align: center; | |
| margin-block-end: 20px; | |
| } | |
| .container { | |
| text-align: center; | |
| padding: 20px; | |
| height: 100vh; | |
| } | |
| .page-title { | |
| margin: 0 0 5px; | |
| font-size:40px; | |
| color: #1C1C1C; | |
| } | |
| .img{ | |
| text-align:center; | |
| margin-block-end:30px; | |
| } | |
| .page-subtitle { | |
| color: #FEFEFE; | |
| margin-top: 5px; | |
| font-size:30px; | |
| font-style: italic | |
| } | |
| .conteudo-perfil{ | |
| width: 640px; | |
| margin: 0 auto; | |
| } | |
| .perguntas { | |
| background:#8B8682; | |
| padding: 20px; | |
| } | |
| .itens { | |
| font-style: italic; | |
| color: #FEFEFE; | |
| } | |
| .itens{ | |
| line-height: 1.8; | |
| list-style: none | |
| } | |
| .itens:before{ | |
| content: " "; | |
| } | |
| ul{ | |
| width: 20%; | |
| margin-right: 15%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 6em | |
| } | |
| #tit { | |
| text-align:center; | |
| } | |
| #form { | |
| margin: 40px 0; | |
| display:block; | |
| font-size: 20px; | |
| margin: 10px; | |
| } | |
| #btn-salvar { | |
| widht : 40%; | |
| padding: 15px 0; | |
| background: #4F4F4F; | |
| color: white; | |
| font-weight: bold; | |
| font-size: 18px; | |
| border: none; | |
| border-radius: 5px; | |
| transition: 1s all; | |
| cursor: pointer; | |
| background-position: center bottom; | |
| } | |
| #btn-salvar:hover { | |
| background: black; | |
| transform: scale(1.2); | |
| } | |
| .git-logo { | |
| width: 40px; | |
| position: absolute; | |
| top: 10px; | |
| right:10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
**Descubra aqui **https://cdpn.io/leonnmarshall/debug/NWdGxdK/bZMQWKdpyjxA