├── formulario.css └── formulario.html /formulario.css: -------------------------------------------------------------------------------- 1 | /* Todos os elementos da página */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | /* Elementos com o ID "titulo" */ 8 | #titulo { 9 | font-family: sans-serif; 10 | color: #380B61; 11 | margin-left: 7%; 12 | } 13 | 14 | /* Elementos com o ID "subtitulo" */ 15 | #subtitulo { 16 | font-family: sans-serif; 17 | color: #380B61; 18 | margin-left: 10%; 19 | } 20 | 21 | #check{ 22 | display: inline-block; 23 | } 24 | 25 | /* Elementos de tag

*/ 26 | fieldset { 27 | border: 0; 28 | } 29 | 30 | /* Elemento de tag */ 31 | body{ 32 | background-color: #F0F8FF; 33 | font-family: sans-serif; 34 | font-size: 1em; 35 | color: #59429d; 36 | margin-left: 36%; 37 | margin-top: 2%; 38 | justify-content: center; 39 | } 40 | 41 | /* Elementos de tags , ,

e <button> */
 42 | input, select, textarea, button {
 43 |     font-family: sans-serif;
 44 |     font-size: 1em;
 45 |     color: #59429d;
 46 |     border-radius: 5px;
 47 | }
 48 | 
 49 | /* Elementos de classe "grupo" nos estados das pseudoclasses "before" e "after" */
 50 | .grupo:before, .grupo:after {
 51 |     display: table;
 52 | }
 53 | 
 54 | /* Elementos de classe "grupo" no estado da pseudoclasse "after" */
 55 | .grupo:after {
 56 |     clear: both;
 57 | }
 58 | 
 59 | /* Elementos de classe "campo" */
 60 | .campo {
 61 |     margin-bottom: 1em;
 62 | }
 63 | 
 64 | /* Elementos de classe "campo" de tag <label> */
 65 | .campo label {
 66 |     margin-bottom: 0.2em;
 67 |     color: #59429d;
 68 |     display: block;
 69 | }
 70 | 
 71 | /* Elementos de classe "campo" ou "grupo" de tag <fieldset> */
 72 | fieldset.grupo .campo {
 73 |     float:  left;
 74 |     margin-right: 1em;
 75 | }
 76 | 
 77 | /* Elementos de classe "campo" das tags <input> com atributo text e email, da tag <select> e da tag <textarea>*/
 78 | .campo input[type="text"], .campo input[type="email"], .campo select, .campo textarea {
 79 |     padding: 0.2em;
 80 |     border: 1px solid #59429d;
 81 |     box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
 82 |     display: block;
 83 | }
 84 | 
 85 | /* Elementos de classe "campo" de tag <select> e <option>*/
 86 | .campo select option {
 87 |     padding-right: 1em;
 88 | }
 89 | 
 90 | /* Elemento de classe "campo" com tag <input>, <select> e <textarea> tocas com estado da pseudoclasse "focus"*/
 91 | .campo input:focus, .campo select:focus, .campo textarea:focus {
 92 |     background: #E0E0F8;
 93 | }
 94 | 
 95 | /* Elemento de classe "botao" */
 96 | .botao {
 97 |     font-size: 1.2em;
 98 |     background: #59429d;
 99 |     border: 0;
100 |     margin-bottom: 1em;
101 |     color: #ffffff;
102 |     padding: 0.2em 0.6em;
103 |     box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
104 |     text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
105 |     position: absolute;
106 |     top: 90%;
107 |     left: 50%;
108 |     margin-right: -50%;
109 |     transform: translate(-50%, -50%)
110 | }
111 | 
112 | /* Elemento de classe "botao" com o estado da pseudoclasse "hover" */
113 | .botao:hover {
114 |     background: #CCBBFF;
115 |     box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
116 |     text-shadow: none;
117 | }
118 | 
119 | /* Elementos de classe botão e de tag <select> */
120 | .botao, select{
121 |     cursor: pointer;
122 | }

99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | --------------------------------------------------------------------------------