A Pen by Leonardo Marçal on CodePen.
[Descubra Aqui] (https://cdpn.io/leonnmarshall/debug/NWdGxdK/bZMQWKdpyjxA)
<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> |
A Pen by Leonardo Marçal on CodePen.
[Descubra Aqui] (https://cdpn.io/leonnmarshall/debug/NWdGxdK/bZMQWKdpyjxA)
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); | |
}); | |
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; | |
} |
**Descubra aqui **https://cdpn.io/leonnmarshall/debug/NWdGxdK/bZMQWKdpyjxA