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

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Contacto - Barberia Alura </title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <div class="caja">
            <h1><img src="imagenes/logo.png" alt="Logo de la barberia alura"></h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a> </li>
                    <li><a href="productos.html">Productos</a></li>
                    <li><a href="contacto.html">Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <form>
            <label for="nombreapellido">Nombre y Apellido</label>
            <input type="text" id="nombreapellido" class="input-padron" required>

            <label for="correoelectronico">Correo Electronico</label>
            <input type="email" id="correoelectronico" class="input-padron" required placeholder="email@dominio.com">

            <label for="telefono">Telefono</label>
            <input type="tel" id="telefono" class="input-padron" required placeholder="(XX) XXXX XXXX">

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

            <fieldset>
                <legend>Como le guataria que lo contactemos?</legend>

                <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"
                        checked>WhatsApp</label>
            </fieldset>


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

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

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

        </form>

    </main>

    <footer>
        <img src="imagenes/logo-blanco.png" alt="Logo de la barberia alura">
        <p class="copyright">&copy Copyright Barberia Alura - 2023</p>
    </footer>
</body>

</html>

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 {
    border-color: #c78c19;
}

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

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

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

.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: 0 auto;
}

form {
    margin: 40px 0;
}

form label, form legend {
    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;
}

¡Hola! Espero que estés muy bien.

¡Muchas gracias por tu aporte! Es genial ver los puntos de vista y maneras de hacer los ejercicios de nuestros estudiantes, ya que esto enriquece mucho nuestros conocimientos.

¡Si tienes alguna pregunta sobre el contenido de los cursos, no dudes en preguntarnos! Por favor, recuerda utilizar las etiquetas para indicarnos si tu consulta es una duda, sugerencia o cualquier otro tema. De esta manera, podremos filtrar y procesar las dudas y consultas de manera más eficiente, mejorando aún más nuestro desempeño y tiempo de respuesta.

Además, te recomiendo que te unas a nuestra comunidad en Discord. ¡Allí podrás interactuar con otros compañeros, compartir tus ideas y aprender aún más! La interacción es instantánea y te permitirá llegar a muchas más personas. Así que si tienes algún comentario, opinión, recomendación o simplemente quieres compartir tus pensamientos y como hiciste tus ejercicios con la comunidad, ¡no dudes en hacerlo por Discord!

Estamos seguros de que tu aporte será muy valioso para todos nosotros. ¡Un saludo! :)

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!