[Duda] Sobre Página de Formulario [Error] | HTML5 y CSS3 parte 4: Avanzando en CSS | Alura Latam

2
respuestas

Referente al curso HTML5 y CSS3 parte 4: Avanzando en CSS, en el capítulo Diseño responsivo y actividad Proyecto Final

por Augusto René Ajalla

| 51.3k xp | 43 posts

🔸Lic. Ciencias de la Computación

Buenas!

Estoy teniendo un problema con mi página web, a la hora de terminar el ultimo curso, revise las pestañas y observe que la pestaña de Contacto se había desconfigurado, que puede haber pasado?

( Adjunto captura con zoom disminuido )

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

Trate de solucionarlo agregando el selector de clase "productos" al main para que tomara un aspecto parecido al de las otras pestañas, pero esto modificaba la distancia con el footer y el nav

( Adjunto captura aplicando class="productos" )

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

Por último, envío mi código html y css para revisión, espero me puedan ayudar, saludos

HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Productos - 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="imagenes/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 >
            <section >
                <form>
                    <label for="nombreapellido">Nombre y Apellido</label>
                    <input type="text" id="nombreapellido" class="input-padron" required >

                    <label for="correoelectronico">Correo Electrónico</label>
                    <input type="email" id="correoelectronico" 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) XXXX XXXX">

                    <label for="mensaje">Mensaje</label>
                    <textarea cols="70" rows="10" id="mensaje" 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-telefono"><input type="radio" name="contacto" value="telefono" id="radio-telefono">Teléfono</label>


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


                    </fieldset>

                    <fieldset>
                        <legend>¿En cúal horario prefiere ser atendido?</legend>
                        <select>
                            <option>Mañana</option>
                            <option>Tarde</option>
                            <option>Noche</option>
                        </select>
                    </fieldset>


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

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

            <section >
                <table>
                    <thead>
                        <tr>
                            <th>Día</th>
                            <th>Horario</th>
                        </tr>
                    </thead>
                   <tbody>
                        <tr>
                            <td>Lunes</td>
                            <td>08h - 20h</td>
                        </tr>
                        <tr>
                            <td>Miércoles</td>
                            <td>08h - 20h</td>
                        </tr>
                        <tr>
                            <td>Viernes</td>
                            <td>08h - 20h</td>
                        </tr>
                   </tbody>

                </table>
            </section>


        </main>
        <footer>
            <img src="imagenes/logo-blanco.png" alt="Logo de la Barbería Alura">
            <p class="copyright">&copy Copyright Barbería Alura 2023</p>
        </footer>
    </body>
    </html>

2 respuestas

por Augusto René Ajalla

| 51.3k xp | 43 posts

🔸Lic. Ciencias de la Computación

23/05/2023

CSS :

body {
    font-family: 'Montserrat', sans-serif;

}


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

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


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

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

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

table{
    margin: 40px 40px;
}

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

td, th {
    border: 1px solid #000000;
    padding: 8px 15px;
}

/*css para nuestra home*/

.banner {
    width: 100%;

}

.principal{
    padding: 3em 0;
    background: #fefefe;
    width: 940px;
    margin: 0 auto;
}

.titulo-principal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear:left;
}


.principal p{
    margin: 0 0 1em;

}

.principal strong{
    font-weight: bold;

}

.principal em{
    font-style: italic;
}

.utensilios{
    width: 120px;
    float:left;
    margin:0 20px 20px 0;

}

.mapa{
    padding: 3em 0;
    background: linear-gradient(#fefefe,#888888);
}

.mapa p{
    margin: 0 0 2em;
    text-align: center;
}

.mapa-contenido{
    width: 940px;
    margin: 0 auto;
}

.diferenciales{
    padding: 3em 0;
    background: #888888;
}

.contenido-diferenciales{
    width: 640px;
    margin: 0 auto;

}

.lista-diferenciales{
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.items {
    line-height: 1.5;
}

.items:before{
    content:"★";
}

.items:first-child{
    font-weight: bold;
}

.imagen-diferenciales {
    width: 60%;
    transition: 400ms;
    box-shadow: 10px 10px 30px 25px #000000 ;
}

.imagen-diferenciales:hover {
    opacity: 0.3;
}

.video{
    width: 560px;
    margin: 1em auto;
}

@media screen and (max-width:480px){

    h1{
        text-align: center;
    }
    nav{
        position: static;
    }
    .caja, .principal, .mapa-contenido, .contenido-diferenciales, .video{
        width:auto;
    }
    .lista-diferenciales, .imagen-diferenciales{
        width: 100%;
    }
}

por Marianna Costa

| 614.8k xp | 1826 posts

Alura Scuba Team Scuba Team Front-end

23/05/2023

¡Hola Augusto!

Al revisar tu código, noté que en la sección de contacto no tienes un selector de clase "productos" en el div principal, como lo tienen las otras secciones. Por lo tanto, el estilo que se aplica a las otras secciones no se está aplicando a la sección de contacto.

Para solucionar esto, simplemente agrega la clase "productos" al div principal de la sección de contacto, de la siguiente manera:

<section class="productos">

Con esto, deberías poder aplicar el estilo que deseas a la sección de contacto sin afectar la distancia con el footer y el nav.

Espero haber ayudado y buenos estudios!

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