minha resposta | HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

HTML:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <title>Contato - Barbearia Alura</title>

    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <div class="caixa">
        <h1><img src="logo.png" alt="Logo da Barbearia Alura"/></h1>

        <nav>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="produtos.html">Produtos</a></li>
            <li><a href="contato.html">Contato</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main>
      <form>
        <label for="nomesobrenome">Nome e Sobrenome</label>
        <input type="text" id="nomesobrenome" class="input-padrao" required>  

        <label for="email">Email</label>
        <input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com">

        <label for="telefone">Telefone</label>
        <input type="tel" id="telefone" class="input-padrao" required placeholder="(xx) xxxxx-xxxx">

        <label for="mensagem">Mensagem</label>
        <textarea cols="70" rows="10" id="mensagem" class="input-padrao" required></textarea>

        <fieldset>
          <legend>Como prefere o nosso contato?</legend>
          <label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>


          <label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone</label>


          <label for="radio-watsapp"><input type="radio" name="contato" value="watsapp" id="radio-watsapp" checked>Watsapp</label>

        </fieldset>
        <fieldset> 
          <legend>Qual horário prefere ser atentido?</legend>
          <select>
            <option>Manhã</option>
            <option>Tarde</option>
            <option>Noite</option>
          </select>
        </fieldset>
          <label class="checkbox"><input type="checkbox" checked>Gostaria de receber nossas novidades por email?</label>

          <input type="submit" value="Enviar" class="submit">

      </form>
    </main>
  </body>
  <footer>
    <img src="logo-branco.png" alt="Logo da Barbearia Alura">
    <p class="copyright">&copy; Copyright Barbearia Alura - 2022</p>
  </footer>
</body>
</html>

CSS:

header {
  background: #bbbbbb;
  padding: 20px 0;
}

.caixa {
  position: relative;
  width: 940px;
  margin: 0 auto;
}

nav {
  position: absolute;
  top: 110px;
  right: 0;
}

nav li {
  display: inline;
  margin: 0 0 0 15px;
}

nav a {
  text-transform: uppercase;
  color: #000000;
  font-weight: bold;
  font-size: 22px;
  text-decoration: none;
}

nav a:hover {
  color: #c78c19;
  text-decoration: underline;
}

.produtos {
  width: 940px;
  margin: 0 auto;
  padding: 50px 0;
}

.produtos li {
  display: inline-block;
  text-align: center;
  width: 30%;
  vertical-align: top;
  margin: 0 1.5%;
  padding: 30px 20px;
  box-sizing: border-box;
  border: 2px solid #000000;
  border-radius: 10px;
}

.produtos h2 {
  font-size: 30px;
  font-weight: bold;
}

.produtos li:hover {
  border-color: #c78c19;
}

.produtos li:active {
  border-color: #088c19;
}

.produtos li:hover h2 {
  font-size: 35px;
}

.produto-descricao {
  font-size: 18px;
}

.produto-preco {
  font-size: 22px;
  font-weight: bold;
  margin-top: 10px;
}

footer {
  text-align: center;
  background: url('bg.jpg');
  padding: 40px 0;
}

.copyright {
  color: #ffffff;
  font-size: 13px;
  margin: 20px 0;
}

main {
  width: 940px;
  margin: 0 auto;
}

form {
  margin: 40px 0;
}

form label,
form legend {
  display: block;
  font-size: 20px;
  margin: 0 0 10px;
}

.input-padrao {
  display: block;
  margin: 0 0 20px;
  padding: 10px 25px;
  width: 50%;
}

.checkbox {
  margin: 20px 0;
}