Haz lo que hicimos en el aula

HTML


     <!-- Formulario -->

     <main>
            <form>                
                <label for="">Nombre y apellidos </label>
                <input type="text" id="nombreyapellido" class="imput-patron">

                <label for="correo">Correo Electronico</label>
                <input type="email" id="correoelectronico" class="imput-patron" placeholder="nombreusuario@dominio">

                <label for="telefono">Telefono</label>
                <input type="tel" id="telefono" class="imput-patron" placeholder="XXX-XXXXXXX">

                <label for="mensaje">Mensaje</label>
                <textarea name="" id="" cols="70" rows="10"></textarea>

                <div class="contactenos">
                    <h1>Como le gustaria que lo contactemos?</h1>

                    <label for="radio-mensaje"><input type="radio" name="contacto" value="Email" id="radio-mensaje" class="label-contactos"> Email</label>
                    <label for="radio-mensaje"><input type="radio" name="contacto" value="Email" id="radio-mensaje" class="label-contactos">Telefono</label>
                    <label for="radio-mensaje"><input type="radio" name="contacto" value="Email" id="radio-mensaje" class="label-contactos">Whastsapp</label>
                </div>

                <div class="horario-atencion">
                    <h2>En cual horario prefiere ser atendido:</h2>
                    <select>
                        <option>Mañana</option>
                        <option>Tarde</option>
                        <option>Noche</option>
                    </select>
                </div>

                <label for="" class="checkbox"><input type="checkbox">Le gustaria recibir notificaciones sobre la barberia alura?</label>

                <input type="submit" value="Enviar Formulario">
            </form>
     </main>

CSS


/* Formulario */

main{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;

}


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

.inptu_patron{
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 90vh;

}

.contactenos {
    padding: 20px;
}

.contactenos h1{
    color: #333;
    margin-bottom: 20px;
}

.contactenos label{
    margin: 20px 0;
}

.imput-patron{
    width: 300px;
    font-size: 15px;
    border-radius: 6px;
    color: #333;
    padding: 5px;
    border: 3px solid gray;
}

.horario-atencion{
   margin: 20px 0;
}

.horario-atencion h2{
    margin-bottom: 13px;
}

.checkbox{
    margin: 20px 0 ;
}