<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="formulario.css" media="">
<title>cadastro</title>
</head>
<body>
<div>
<h1 id="titulo">Cadastro de DEVs</h1>
<p id="subtitulo">complete suas informaçoes</p>
<br>
</div>
<form>
<fieldset class="grupo">
<div class="campo">
<label for="nome"> nome</label>
<input type="text" name="nome" id="nome" required>
</div>
<div class="campo">
<label for="sobrenome"> sobrenome</label>
<input type="text" name="sobrenome" id="sobrenome" required>
</div>
</fieldset>
<div class="campo">
<label for="email">Email</label>
<input type="email" name="Email" id="email" required>
</div>
<div class="campo">
<label>De qual lado da apicação você dessenvolve</label>
<label>
<input type="radio" name="devweb" value="Frontend" checked>Frond-end
</label>
<label>
<input type="radio" name="devweb" value="Backend">Back-end
</label>
<label>
<input type="radio" name="devweb" value="Fullstack">Full stack
</label>
</div>
<div class="campo">
<label for="Senioridade"> Senioridade</label>
<select id=" Senioridade">
<option selected disabled value="">Selecione </option>
<option>Junior</option>
<option>Pleno</option>
<option>Senior</option>
</select>
</div>
<fieldset class="grupo">
<div id="check">
<label> Selecione as tecnologias que utiliza</label><br><br>
<input type="checkbox" id="teenologia1" name="tecnologia1" value="html">
<label for="tecnologia1">HTML</label>
<input type="checkbox" id="teenologia2" name="tecnologia2" value="CSS">
<label for="tecnologia2">CSS</label>
<input type="checkbox" id="teenologia3" name="tecnologia3" value="javascript">
<label for="tecnologia3">JavaScript</label>
<input type="checkbox" id="teenologia4" name="tecnologia4" value="PHP">
<label for="tecnologia4">PHP</label>
<input type="checkbox" id="teenologia5" name="tecnologia5" value="C#">
<label for="tecnologia5">C#</label>
<input type="checkbox" id="teenologia6" name="tecnologia6" value="python">
<label for="tecnologia6">Python</label>
<input type="checkbox" id="teenologia7" name="tecnologia7" value="Java">
<label for="tecnologia7">Java</label>
</div>
</fieldset>
<div class="campo">
<br>
<label for="experiencia"> Conte um pouco da sua histoiria</label>
<textarea row="6" style="width: 26em" id="experiencia" name="experiencia"></textarea>
</div>
<button id="btn" type="submit" onsubmit="">Concluído</button>
</form>
</body>
</html>
<--! CSS PART-->
*{
margin: 0;
padding: 0;
}
#titulo{
font-family: sans-serif;
color: #380B61;
margin-left: 7%;
}
#subtitulo{
font-family: sans-serif;
color: #380B61;
margin-left: 10%;
}
#check{
display: inline-block;
}
fieldset{
border: 0;
}
body{
background-color:#f0f8ff;
font-family: sans-serif;
font-size: 1em;
color: #59429D;
margin-left: 36%;
margin-top: 2%;
justify-content: center;
}
input, select, textarea,button{
border-radius: 5px;
}
.grupo:before, .grupo:after{
display: table;
}
.grupo:after{
clear: both;
}
.campo{
margin-bottom: 1em;
}
.campo label{
margin-bottom: 0.2em;
color: #59429d;
display: block ;
}
fieldset.grupo .campo{
float: left;
margin-right: 1em;
}
.campo input[type="text"}, .campo input[type="email"], .campo select, .campo textarea{
padding: 0.2em;
border: 1px solid #59429d;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
display: block;
}
.campo select option{
padding-right: 1em;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
background: #E0E0F8;
}
.botao {
font-size: 1.2em;
background: #59429d;
border: 0;
margin-bottom: 1em;
color: #ffffff;
padding: 0.2em 0.6em;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
position: absolute;
top: 90%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.botao:hover {
background: transparent;
box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
text-shadow: none;
}
.botao, select{
cursor: pointer;
}
What I have tried:
my button dont change i have tried so much forms to change and i dont find one soluction, any can help me to see where i'm going wrong, sorry for my bad english im brazilian