Haz lo que hicimos en el aula | HTML5 y CSS3 parte 3: Trabajando con formularios y tablas | Alura Latam

Nombre y Apellido

  <label for="correoelectronico">Correo Electronico</label>
  <input type="email" id="correoelectronico" class="input-padron">

  <label for="telefono">Telefono</label>
  <input type="number" id="telefono" class="input-padron">

  <label for="mensaje">Mensaje</label>
  <textarea name="" id="mensaje" cols="69" rows="10" class="input-padron"></textarea>

  <div>
    <p>Como le gustaria que lo contactemos?</p>

    <label for="radio-email"> <input type="radio" name="contacto" value="email" id="radio-email">Email</label>


    <label for="radio-telefono"><input type="radio" name="contacto" value="telefono"
        id="radio-telefono">Telefono</label>


    <label for="radio-whatsapp"><input type="radio" name="contacto" value="whatsapp"
        id="radio-whatsapp">Whatsapp</label>

  </div>

  <div>
    <p>En cual horario prefiere ser atendido</p>
    <select name="" id="">
      <option value="">Mañana</option>
      <option value="">Tarde</option>
      <option value="">Noche</option>
    </select>
  </div>

  <label>
    <input type="checkbox" class="checkbox"> Le gustaria recibir novedades de la Barberia Alura?
  </label>

  <input type="submit">Enviar formulario</input>
</form>

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

.caja { width: 940px; position: relative; 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; }

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

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

.productos li:hover { transform: scale(0.9); transition: ease-in-out 0.5s all; border-color: #c78c19; }

.productos li:hover h2 { font-size: 33px; }

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

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

.producto-descripcion { font-size: 18px; }

.producto-precio { font-size: 20px; font-weight: bold; margin-top: 10px; }

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

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

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

form { margin: 40px 0; }

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

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

.checkbox{ margin: 20px 0; }