Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
7
respuestas

[Duda] SOCORRO!!!! Se me ha desconfigurado mi proyecto. NO SE QUE HACER!

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

por Estudiante
| 89.7k xp | 46 posts

Hola amigos, quisiera que me ayudaran. Estuve modificando mi CSS, pero no se por que, cuando navego entre las páginas de HOME, PRODUCTO y CONTACTO, se ve como si la página se hiciera más pequeña. Es decir, el panel de navegación de la página HOME es más pequeño, el de PRODUCTO es más grande, y el de CONTACTO se hace aun más grande. Les comparto mis códigos para que aprecien el comportamiento. No se si alguien por favor, o el Equipo de Alura me pueden ayudar, ya no se que hacer. Parece que mi Body tiene diferentes tamaños para cada una de las páginas.

LO COLOCARE POR PARTES EN LOS COMENTARIOS. SE QUE ES UN POCO EXTENSO, PERO LES COMPATO TODOOO MI CÓDIGO.

ME ACABO DE FIJAR, QUE UNICAMENTE ME SUCEDE CON EL NAVEGADOR CHROME!!!!

7 respuestas
por Estudiante
| 89.7k xp | 46 posts

PÁGINA HOME

<!DOCTYPE html>

<html lang="es">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Barbería Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300&display=swap" rel="stylesheet">
    </head>

    <body>

        <header>
            <div class="caja">
                <h1><img id="logo" src="imagenes/logo.png"></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>

        <img class="banner" src="banner1.jpeg">

        <main>
            <section class="principal">
                <h2 class="título-principal">Acerca de la Barbería Alura</h2>

                <img class="utensilios" src="imagenes/utensilios[1].jpg" alt="utensilios de la barbería">

                <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> finalmente ha llegado a la capital, trayendo consigo al mercado lo mejor que hay para su cabello y barba. Fundada en 2005, la <strong>Barbería Alura</strong> ya es una insigina en cuento al cuidado del cabello, contando con la experiencia durante años en el cuidado masculino del cual nuestros clientes son testigos, conquistando de esta forma nuevos clientes diariamente.</p>

                <p id="mision"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a nuestros clientes"</strong>.</em></p>

                <p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el mundo de la moda, para así ofrecer a nuestros clientes las últimas tendencias. La atención hacia nuestro publico posee un padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes, generando con esto la innovación y excelencia que nuestro clientes bucan en el día a día.</p>

            </section>

            <section class="mapa">
                <h3 class="título-principal">Nuestra Ubicación</h3>
                <p>Nuestra Barbería esta ubicada en el centro de la ciudad</p>
                <div class="mapa-contenido">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d42576.3410784619!2d-84.18937930669578!3d9.945029661748617!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8fa0fba83fcce847%3A0xc1ec5c1f6638df7a!2sAlura%20Center!5e0!3m2!1ses-419!2ssv!4v1673309143147!5m2!1ses-419!2ssv" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </section>

            <section class="diferenciales">

                <h3 class="título-principal">Lo que nos diferencia</h3>

                <div class="contenido-diferenciales">
                    <ul class="lista-diferenciales">
                        <li class="items">Atención personalizada a nuestro clientes</li>
                        <li class="items">Amplio Espacio</li>
                        <li class="items">Excelente ubicación</li>
                        <li class="items">Profesionales calificados</li>
                        <li class="items">Barbería con Aire acondicionado</li>
                        <li class="items">Precios accesibles</li>
                        <li class="items">Puntualidad y limpieza</li>
                    </ul> <img class="imagen-diferenciales" src="diferenciales/diferenciales.jpg">
                </div>

                <div class="video">
                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                </div>

                <p class="slogan">Somos lo mejor que le puede pasar a tu cabello</p>
                <p class="frase">Visitanos y descubrelo</p>
           </section>
        </main>

        <footer>
            <img src="imagenes/logo-blanco.png">
            <p class="derechos">© Copyright Barbería Alura - 2023</p>
        </footer>

    </body>

</html>
por Estudiante
| 89.7k xp | 46 posts

PÁGINA PRODUCTOS

<!DOCTYPE html>

<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Productos - Barbería Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300&display=swap" rel="stylesheet">
    </head>

    <body class="contact">

        <header>
            <div class="caja">
                <h1><img id="logo" src="imagenes/logo.png"></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>
            <ul class="productos">
                <li>
                    <h2>Cabello</h2>
                    <img src="imagenes/cabello.jpg">
                    <p class="productos-descripcion">Corte con tijera o máquina, a gusto del cliente</p>
                    <p class="productos-precio">$ 10.00 USD</p>
                </li>
                <li>
                    <h2>Barba</h2>
                    <img src="imagenes/barba.jpg">
                    <p class="productos-descripcion">Corte y diseño profesional de barba</p>
                    <p class="productos-precio">$ 8.00 USD</p>
                </li>
                <li>
                    <h2>Cabello + Barba</h2>
                    <img src="imagenes/cabello+barba.jpg">
                    <p class="productos-descripcion">Paquete completo de corte de cabello y recorte de barba</p>
                    <p class="productos-precio">$ 15.00 USD</p>
                </li>
            </ul>      
        </main>

        <footer>
            <img src="imagenes/logo-blanco.png">
            <p class="derechos">© Copyright Barbería Alura - 2023</p>
        </footer>

    </body>

</html>
por Estudiante
| 89.7k xp | 46 posts

PÁGINA CONTACTO

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Contacto - Barbería Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300&display=swap" rel="stylesheet">
    </head>

    <body class="contact">
        <header>
            <div class="caja">
                <h1><img id="logo" src="imagenes/logo.png" alt="Logo_Barbería"></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 class="pag-contact">
            <form>
                <label for="nombres">Nombres</label>
                <input type="text" id="nombres" class="input-padron" required> 

                <label for="Apellidos">Apellidos</label>
                <input type="text" id="Apellidos" class="input-padron" required>

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

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

                <label for="mensaje">Mensaje</label>
                <textarea cols="63" rows="10" id="mensaje" class="input-padron" placeholder="Escribe un mensaje adicional..." maxlength="1000"></textarea>
                <p id="maxcaracteres">*1000 caractéres máximos</p>

            <fieldset>
                <legend>¿Como le gustaría ser contactado?</legend>
                <label for="radio-email"><input type="radio" name="contacto" value="Correo Electónico" id="radio-email">Correo Electónico</label>
                <label for="radio-telefono"><input type="radio" name="contacto" value="telefono" id="radio-telefono" checked>Teléfono</label>
                <label for="radio-whatsapp"><input type="radio" name="contacto" value="whatsapp" id="radio-whatsapp">Whatsapp</label>

            </fieldset>

            <div class="fecha">
                <p>¿Cuando le gustaría ser atendido?</p>
                <input id="seleccion_fecha" type="date">
                <p id="horario">*Consultar horario de la Barbería</p>
            </div>

            <div class="lista">
                <p>¿En que horario prefiere ser atendido?</p>
                <select>
                    <option>Mañana</option>
                    <option>Tarde</option>
                    <option>Noche</option>
                </select>
            </div>

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

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

            </form>

            <p class="horario_barberia">Horario Barbería Alura</p>
            <table>
                <thead>
                    <tr>
                        <th>Día</th>
                        <th>Horario</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>Lunes</td>
                        <td>08:30 am ~ 05:30 pm</td>
                    </tr>
                    <tr>
                        <td>Martes</td>
                        <td>08:30 am ~ 05:30 pm</td>
                    </tr>
                    <tr>
                        <td>Jueves</td>
                        <td>08:30 am ~ 05:30 pm</td>
                    </tr>
                    <tr>
                        <td>Viernes</td>
                        <td>08:30 am ~ 05:30 pm</td>
                    </tr>
                    <tr>
                        <td>Sabado</td>
                        <td>08:30 am ~ 05:30 pm</td>
                    </tr>
                    <tr>
                        <td>Domingo</td>
                        <td>08:30 am ~ 03:00 pm</td>
                    </tr>
                </tbody>
            </table>
        </main>

        <footer>
            <img src="imagenes/logo-blanco.png" alt="Logo_Barbería">
            <p class="derechos">© Copyright Barbería Alura - 2023</p>
        </footer>

    </body>

</html>
por Estudiante
| 89.7k xp | 46 posts

ESTA ES MI HOJA DE ESTILOS.

/* Se aplicara el siguiente tipo de letra al body, es decir a toda la pagina */

body{
    font-family: 'Montserrat', sans-serif;
}
.contact{
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

/*CSS para nuestra página de Productos*/

header{
    background-color: cadetblue;
}

#logo{
    width: 10%;
}
.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav{
    position: absolute;
    top: 52.5px;
    right: 0;
}
nav li{
    display: inline-block;
    margin: 0 0 0 15px;    
}
nav a{
    text-transform: uppercase;
    color: black;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}
nav a:hover{
    color: #98de16;
    text-shadow: 2px 2px 5px black;
}
.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 black;
    border-radius: 15px;
}
.productos li:hover{
    border-color: #98de16;
}
.productos li:hover h2{
    font-size: 28px;
}
.productos li:hover .productos-precio{
    font-size: 22px;
}
.productos li:active{
    border-color: blueviolet;
}
.productos h2{
    font-size: 25px;
    font-weight: bold; 
}
.productos-descripcion{
    font-size: 15px;
}
.productos-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}
footer{
    text-align: center;
    background: url(imagenes/bg.jpg);
    padding-bottom: 20px;
}
.derechos{
    color: white;
    font-size: 13px;
    margin: 20px;
}

/*CSS para nuestra página de Contacto*/

.pag-contact{
    width: 940px;
    margin: 0 auto;
}

textarea{
    resize: vertical;
    font-family: 'Montserrat', sans-serif;
}

form{
    margin: 40px 0;
}

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

#mensaje{
    margin-bottom: 0;
}

#maxcaracteres{
    margin-top: 0;
    margin: 0 0 1% 33.3%;
    font-size: 14px;
    color: darkred;
}

#horario{
    margin-top: 0;
    margin: 0 0 1% 27.5%;
    font-size: 14px;
    color: darkred;
}

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

.fecha, .checkbox{
    margin: 20px 0;
}

.lista{
    margin: 20px 0;
}

#seleccion_fecha{
    width: 49.4%;
    padding: 6px 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

select{
    width: 51%;
    padding: 6px 6px;
    font-family:'Montserrat', sans-serif;
    font-size: 16px;
}

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

.enviar:hover{
    background: red;
    transform: scale(1.1);
}

.horario_barberia{
    font-size: 18px;
    font-weight: bold;
}

table{
    margin: 10px 0 40px;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    width: 45%;
}

thead{
    background-color: #555555;
    font-weight: bolder;
    color: white;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
}

td, th{
    border: 2px solid black;
    padding: 8px 15px;
}

/*CSS para nuestra página Home*/

.banner{
    width: 50%;
    padding: 10px 0;
    margin-left: 25%;
}

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

undefined

solución!
por Estudiante
| 89.7k xp | 46 posts

CONTINUACIÓN HOJA DE ESTILOS

.título-principal{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
    font-weight: bold;    
}

.principal p{
    margin: 0 0 1em;
}

.principal strong{
    font-weight: bold;
}

.utensilios{
    width: 150px;
    float: left;
    margin: 30px 20px 30px 0;
    box-shadow: 0 0 25px 2px black;
}

.principal p em{
    font-style: italic;
    margin: 0 0 0 60px;
}

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

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

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

.diferenciales{
   background: #888888;
   margin: 0 auto;
}

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

.lista-diferenciales{
    width: 45%;
    display: inline-block;
    vertical-align: top;
    margin-left: 7.5%;
}

.items{
    line-height: 2.0;
}

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

.imagen-diferenciales{
    width: 40%;
    margin-left: 1%;
    opacity: 100%; /*aqui se puede quitar, pero como ejemplo, lo dejo*/
    box-shadow: 0 0 20px black;
}

.video{
    width: 560px;
    margin: 4em auto 1em;
    opacity: 40%;
}

.video:hover{
    opacity: 100%;
    transition: 500ms;
    box-shadow: 0 0 30px 5px  black;
}

.slogan{
    text-align: center;
    font-family: 'Great Vibes', cursive;
    line-height: 2.0;
    font-size: 40px;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgb(204, 38, 38);
}

.frase{
    text-align: center;
    font-family: 'Great Vibes', cursive;
    font-size: 40px;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgb(204, 38, 38);
    padding-bottom: 40px;
}

`

por Rafaela Rocha
| 2876.2k xp | 8758 posts
Alura Scuba Team Scuba Team

Hola Alumno, espero que estés bien! ¡Muchas gracias por su contribución! ¡Para cualquier duda, estoy disponible! Nos alegra mucho tu entusiamo, te deseamos exito en esta nueva aventura, que puedas sacar el maximo provecho! ¡Vamos juntos! ¡No desanimes! :)

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)
por Estudiante
| 89.7k xp | 46 posts

Perdon. Había configurado mal el zoom de mi navegador jeje!!