72 |
73 |
74 |
--------------------------------------------------------------------------------
/styles/formulario.css:
--------------------------------------------------------------------------------
1 | #title{
2 | color: #380B61;
3 | margin-left: 10%;
4 | margin-top: 10%;
5 | padding-left: 10%;
6 | }
7 | .fundo{
8 | width: 40%;
9 | background-color: white;
10 | border-radius: 5%;
11 | margin-top: 3%;
12 | padding: 6px 0% 3% 5%; /* Simplifiquei o padding de várias linhas em uma linha | ORDEM: padding-top - padding-right - padding-bottom - padding-left */
13 | top: 80%;
14 | left: 50%;
15 | justify-content: center;
16 | justify-items: center;
17 | }
18 |
19 | #subtitulo{
20 | color: #380B61;
21 | margin: 3% 0 0 13%; /* Simplifiquei o margin | ORDEM: margin-top - margin-right - margin-bottom - margim-left */
22 | padding-left: 12%;
23 | }
24 |
25 | #check {
26 | display: inline-block;
27 | }
28 |
29 | fieldset{
30 | border: 0;
31 | }
32 |
33 | body{
34 | background: linear-gradient(to left, rgb(140, 0, 255),#360353);
35 | font-size: 1em;
36 | color: #59429d;
37 | margin: 2% 0 0 36%;
38 | justify-content: center;
39 | justify-items: center;
40 | justify-self: center;
41 | border: rgb(159, 123, 224);
42 | }
43 |
44 | input, select, textarea,button{
45 | font-size: 1em;
46 | color: #59429d;
47 | border-radius: 5px;
48 | }
49 | .grupo:before, .grupo:after {
50 | display: table;
51 | }
52 |
53 | .grupo:after {
54 | clear: both;
55 | }
56 |
57 | .campo {
58 | margin-bottom: 1em;
59 | }
60 | .campo label{
61 | margin-bottom: 0.2em;
62 | color: #59429d;
63 | display: block;
64 | }
65 |
66 | fieldset.grupo .campo{
67 | float: left;
68 | margin-right: 1em;
69 | }
70 |
71 | .campo input[type="text"], .campo input[type="email"], .campo select, .campo textarea{
72 | padding: 0.2em;
73 | border: 1px solid #59429d;
74 | box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
75 | display: block;
76 | }
77 |
78 | .campo select option{
79 | padding-right: 1em;
80 | }
81 |
82 | .campo input:focus, .campo select:focus, .campo textarea:focus{
83 | background: #E0E0F8;
84 | }
85 |
86 | .botao{
87 | font-size:1.2em;
88 | background: #59429d;
89 | border: 0;
90 | margin: 2% 0 1em 50%; /* Simplifiquei o margin | ORDEM: margin-top - margin-right - margin-bottom - margim-left */
91 | color: #ffffff;
92 | padding:0.2em 0.6em;
93 | box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
94 | text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
95 | transform: translate(-50%, -50%);
96 | }
97 |
98 | .botao:hover{
99 | background: #CCBBFF;
100 | box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
101 | text-shadow: none;
102 | }
103 |
104 | #experiencia {
105 | width: 85%; /* Defini a largura da TEXTAREA pelo CSS, é o mais recomendado */
106 | height: 80px; /* Defini a altura da TEXTAREA pelo CSS, é o mais recomendado */
107 | resize: none; /* Removi a possibilidade do usuário alterar o tamanho da TEXTAREA direto pelo navegador */
108 | outline: none; /* Removi o OUTLINE - Linha preta que surge quando você clica no TEXTAREA */
109 | }
110 |
111 | .nome {
112 | outline: none; /* Removi o OUTLINE - Linha preta que surge quando você clica */
113 | }
--------------------------------------------------------------------------------
/styles/reset.css:
--------------------------------------------------------------------------------
1 | /* Aplicando a estratégia de Cross-browser */
2 |
3 | *{
4 | margin: 0;
5 | padding: 0;
6 | border: none;
7 | font-family: sans-serif; /* Apliquei a fonte para todo documento, já que você estava utilizando ela como padrão. Isso evita a repetição do font-family. */
8 | }
--------------------------------------------------------------------------------