Untitled

<html>
<head>
<meta charset="UTF8">
<style>
body {
    background-color: #FFFFA6;
}
h1 {
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size: 25pt;
    text-align: center;
}
div.novaLinha {
    display: table;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
div.novaLinha:nth-child(even) {
    background: rgba(192, 192, 192, .4);
}
div.novaLinha:nth-child(odd) {
    background: rgba(192, 192, 192, .3);
}
div.novaLinha:hover {
    background: rgba(200, 200, 100, 1);
}
div.novaLinha div {
    display: table-cell;
}
div.novaLinha div:first-child {
    width: 140px;
    vertical-align: middle;
    border: 1px black;
}
div.novaLinha  div:first-child label {
    font-weight: bold;
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size: 16pt;
}
input, textarea, select,  div.novaLinha div:nth-child(2) label,  div.novaLinha div:nth-child(2) span,  div.novaLinha div:nth-child(2) p {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 16pt;
}
input[type=text],  textarea,  select {
    padding: 15px;
    border: 5px solid white;
5  background: rgba(240, 240, 240, .4);
}
div.novaLinha div.centralizado {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
div.novaLinha div:nth-child(2) p.aviso {
    color: red;
}
div.novaLinha div:nth-child(2) p {
    margin: 0;
}
</style>
</head>
<body>
<h1>Formulário de Cadastro</h1>
<form>
  <div class="novaLinha">
    <div>
      <label for="txtNome">Nome:</label>
    </div>
    <div>
      <input type="text" id="txtNome" name="txtNome" size="50" maxlength="100">
      <p class="aviso" id="avisoTxtNome" style="display:none;">Este campo não pode ficar vazio!</p>
    </div>
  </div>
  <div class="novaLinha">
    <div>
      <label>Sexo:</label>
    </div>
    <div>
      <input type="radio" id="radSexoM" name="radSexo">
      <label for="radSexoM">Masculino</label>
      <input type="radio" id="radSexoF" name="radSexo">
      <label for="radSexoF">Feminino</label>
      <p id="avisoRadSexo" class="aviso" style="display:none;">Devese escolher o sexo!</p>
    </div>
  </div>
  <div class="novaLinha">
    <div>
      <label for="txtCidade">Cidade:</label>
    </div>
    <div>
      <input type="text" id="txtCidade" name="txtCidade" size="50" maxlength="100">
      <p id="avisoTxtCidade" class="aviso" style="display:none;">O campo "Cidade" não pode ficar vazio!</p>
    </div>
  </div>
  <div class="novaLinha">
    <div>
      <label for="selProf">Profissão:</label>
    </div>
    <div></div>
    <select name="selProf" id="selProf">
      <option value="1">Professor</option>
      <option value="2">Estudante</option>
      <option value"3">TécnicoAdministrativo</option>
    </select>
  </div>
  </div>
  <div class="novaLinha">
    <div>
      <label>Interesses:</label>
    </div>
    <div id="chkInteresses">
      <input type="checkbox" id="chkIntEsp" name="chkIntEsp">
      <label for="chkIntEsp">Esportes</label>
      <input type="checkbox" id="chkIntFil" name="chkIntFil">
      <label for="chkIntFil">Filmes</label>
      <input type="checkbox" id="chkIntCul" name="chkIntCul">
      <label for="chkIntCul">Culinária</label>
      <input type="checkbox" id="chkIntVia" name="chkIntVia">
      <label for="chkIntVia">Viagens</label>
      <input type="checkbox" id="chkIntAut" name="chkIntAut">
      <label for="chkIntAut">Automóveis</label>
      <p class="aviso" id="avisoChkInt" style="display:none;">Deve-se escolher, ao menos, um interesse!</p>
    </div>
  </div>
  <div class="novaLinha">
    <div>
      <label for="txtVoce">Faleme sobre você:</label>
    </div>
    <div>
      <textarea id="txtVoce" name="txtVoce" cols="40" rows="10"></textarea>
      <p><span id="carResTxtVoce" style="font-weight: bold;">400</span> caracteres restantes</p>
      <p class="aviso" id="avisoTxtVoce" style="display:none;">Este campo não pode ficar vazio!</p>
    </div>
  </div>
  <div class="novaLinha">
    <div class="centralizado">
      <input type="button" name="btnEnviar" id="btnEnviar" value="Enviar">
      <input type="reset" name="btnLimpar" id="btnLimpar" value="Limpar">
    </div>
  </div>
</form>
</body>
</html>