[Proyecto] Pagina Barbería Alura - Contacto | HTML5 y CSS3 parte 3: Trabajando con formularios y tablas | Alura Latam

2
respuestas

Referente al curso HTML5 y CSS3 parte 3: Trabajando con formularios y tablas

por Estudiante

| 46.8k xp | 4 posts

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Contacto - Barbería Alura</title>
            <link rel="stylesheet" href="reset.css">
            <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <header>
        <div class="caja">
            <h1><img src="img/logo.png" alt="Logo de la Barbería 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="nombreAp">Nombre y Apellido</label>
                <input type="text" id="nombreAp" class="input-padron" required>


                <label for="correoElec">Correo electrónico</label>
                <input type="email" id="correoElec" class="input-padron" required placeholder="email@dominio.com">

                <label for="telefono">Teléfono</label>
                <input type="tel" id="telefono" class="input-padron" required
                placeholder="(xx)XXX XXXX">

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


                <fieldset>
                    <legend>¿Cómo le gustaría que lo contactemos?</legend>
                    <label for="radio-email"><input type="radio" name="contacto"  value="email" id="radio-email">Email</label>


                    <label for="radio-tel"><input type="radio" name="contacto"  value="telefono" id="radio-tel">Teléfono</label>


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


                <fieldset>
                    <legend>¿En cuál horario prefiere ser atendido?</legend>
                <select>
                    <option> Mañana</option>
                    <option> Tarde</option>
                    <option> Noche</option>
                </select>
                </fieldset>

                <label class="check"> <input type="checkbox" checked> ¿Le gustaría recibir novedades de la Barbería Alura?</label>

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

            </form>


            <table>

                <thead>
                    <tr>
                        <th>Día</th>
                        <th>Horario</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>Lunes</td>
                        <td>08 - 20 HRS</td>
                    </tr>
                    <tr>
                        <td>Miércoles</td>
                        <td>08 - 20 HRS</td>
                    </tr>
                    <tr>
                        <td>Viernes</td>
                        <td>08 - 20 HRS</td>
                    </tr>
                 </tbody>
            </table>
        </main>



        <footer>
            <img src="img/logo-blanco.png" alt="Logo de la Barbería Alura">
            <p> &#169 Copyright Barbería Alura - 2020 </p>
        </footer>


    </body>
</html>

2 respuestas

por Estudiante

| 46.8k xp | 4 posts

20/04/2023

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

header{
    background-color: #BBBBBB;
    paddding: 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-color: #000000;
    border: 2px solid #000000;
    border-radius: 10px;
}

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

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

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

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

.pro-desc{
    font-size: 18px;
}

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


footer{
    background: url(img/bg.jpg);
    text-align: center;
    color: white;
    padding: 15px;
}



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%;
}

.check{
    margin: 20px 0;
}

.enviar{
    width: 40%;
    padding: 15px 0;
    font-size: 19px;
    font-weight: bold;
    color: white;
    background: orange;
    border: none;
    border-radius: 5px
    transition: 5s all;
    cursor:  pointer;
}

.enviar:hover{
    background: darkorange;
    transform: scale(1.2);
}

table{
    margin: 40px 40px;
}

thead{
    background: #555555;
    color: whitesmoke;
    font-weight: bold;
}

td, th{
    border: 1px solid #000000;
    padding: 10px 20px;
}

por Marianna Costa

| 615.8k xp | 1826 posts

Alura Scuba Team

24/04/2023

¡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!