Skip to content

Commit

Permalink
arrumando o estilo
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rayane-Araujo
Rayane-Araujo committed Jul 17, 2023
1 parent 5d7fc4e commit 5a70de1
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 147 deletions.
197 changes: 104 additions & 93 deletions assests/formulario.css → assets/formulario.css
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,105 @@
*{
margin: 0;
padding: 0;
}

#titulo{
font-family: sans-serif;
color: #380B61;
margin-left: 7%;
}

#subtitulo{
font-family: sans-serif;
color: #380B61;
margin-left: 10%;
}

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;
}

.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: plum;
box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
text-shadow: none;
}

#check{
display: inline-block;
}

#senioridade{
color: #59429d;
*{
margin: 0;
padding: 0;
outline: 0;
}

#titulo {
font-family: sans-serif;
color: #380B61;
margin-left: 7%;
}

#subtitulo {
font-family: sans-serif;
color: #380B61;
margin-left: 10%;
}

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;
}

textarea {
padding-left: 15px;
}

.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;
height: 40px;
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: 95%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

.botao:hover {
background: #ccbbff;
box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
text-shadow: none;
cursor: pointer;
}

#check {
display: inline-block;
}

#senioridade {
color: #59429d;
padding: 5px;
cursor: pointer;
}
103 changes: 49 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="assests/formulario.css">
<link rel="stylesheet" type="text/css" href="assets/formulario.css">
<title>Cadastro</title>
</head>
<body>
Expand All @@ -12,72 +12,67 @@ <h1 id="titulo">Cadastro de DEVs</h1>
<p id="subtitulo">Complete suas informações</p>
<br>
</div>

<form>
<fieldset class="grupo">
<div class="campo">
<label for="nome"><strong>Nome</strong></label>
<input type= "text" name= "nome" id="nome" required>

<label for="nome"><strong>Nome</strong></label>
<input type="text" name="nome" id="nome" required>
</div>

<div class="campo">
<label for="sobrenome"><strong>Sobrenome</strong></label>
<input type="text" name="sobrenome" id="sobrenome" required>
</div>
</fieldset>
</fieldset>

<div class="campo">
<div class="campo">
<label for="email"><strong>Email</strong></label>
<input type="email" name="email" id="email" required>
</div>
<input type="email" name="email" id="email" required>
</div>

<div class="campo">
<label><strong>De qual lado da aplicação você desenvolve?</strong></label>
<div class="campo">
<label><strong>De qual lado da aplicação você desenvolve?</strong></label>
<label>
<input type="radio" name="devweb" value="frontend" checked>Front-end</label>
<label>
<input type="radio" name="devweb" value="backend">Back-end</label>
</label>
<input type="radio" name="devweb" value="fullstack">FullStack</label>
</div>

<label>
<input type="radio" name="devweb" value="frontend" checked>Front-end</label>

<label>
<input type="radio" name="devweb" value="backend">Back-end</label>

</label>
<input type="radio" name="devweb" value="fullstack">FullStack</label>
</div>

<div>
<strong><label for="senioridade">Senioridade</label></strong><br>
<select id="senioridade">
<option selected disabled value="">Selecione</option>
<option>Junior</option>
<option>Pleno</option>
<option>Senior</option>
</select>
</div><br>
<div>
<strong><label for="senioridade">Senioridade</label></strong><br>
<select id="senioridade">
<option selected disabled value="">Selecione</option>
<option>Junior</option>
<option>Pleno</option>
<option>Senior</option>
</select>
</div><br>

<fieldset class="grupo">
<div id="check">
<strong><label>Selecione as tecnologias que utiliza:</label><br></strong>
<input type="checkbox" id="tecnologia1" name= "tecnologia1" value="HTML"
<label for="tecnologia1">HTML</label>
<input type="checkbox" id=tecnologia2 name=tecnologia2 value="CSS">
<label for="tecnologia2">CSS</label>
<input type="checkbox" id=tecnologia3 name=tecnologia3 value="javascript">
<label for="tecnologia3">javascript</label>
<input type="checkbox" id=tecnologia4 name=tecnologia4 value="PHP">
<label for="tecnologia4">PHP</label>
<input type="checkbox" id=tecnologia5 name=tecnologia5 value="C#">
<label for="tecnologia5">C#</label>
<input type="checkbox" id=tecnologia6 name=tecnologia6 value="phyton">
<label for="tecnologia6">Phyton</label>
<input type="checkbox" id=tecnologia7 name=tecnologia7 value="java">
<label for="tecnologia7">Java</label>
</div>
</fieldset>
<br>
<br><label for="Fale"><strong>Conte um pouco da sua experiência:</strong></label><br>
<textarea rows="5" cols="50" maxlength="100" placeholder="Digite no máximo 300 caracteres"></textarea>
<button class="botao" type="submit">Concluído</button>
</form>
<fieldset class="grupo">
<div id="check">
<strong><label>Selecione as tecnologias que utiliza:</label></strong>
<br><br>
<input type="checkbox" id="tecnologia1" name="tecnologia1" value="HTML">
<label for="tecnologia1">HTML</label>
<input type="checkbox" id="tecnologia2" name="tecnologia2" value="CSS">
<label for="tecnologia2">CSS</label>
<input type="checkbox" id="tecnologia3" name="tecnologia3" value="javascript">
<label for="tecnologia3">javascript</label>
<input type="checkbox" id="tecnologia4" name="tecnologia4" value="PHP">
<label for="tecnologia4">PHP</label>
<input type="checkbox" id="tecnologia5" name="tecnologia5" value="C#">
<label for="tecnologia5">C#</label>
<input type="checkbox" id="tecnologia6" name="tecnologia6" value="phyton">
<label for="tecnologia6">Phyton</label>
<input type="checkbox" id="tecnologia7" name="tecnologia7" value="java">
<label for="tecnologia7">Java</label>
</div>
</fieldset>
<br><label for="Fale"><strong>Conte um pouco da sua experiência:</strong></label><br>
<textarea rows="5" cols="50" maxlength="100" placeholder="Digite no máximo 300 caracteres"></textarea>
<button class="botao" type="submit">Concluído</button>
</form>
</body>
</html>

0 comments on commit 5a70de1

Please sign in to comment.