Solucionado (ver solución)
Solucionado
(ver solución)
5
respuestas

Sobre el diseño responsivo

Referente al curso HTML5 y CSS3 parte 4: Avanzando en CSS, en el capítulo Diseño responsivo y actividad Haga lo que hicimos en aula

por Yeimer Alberto Márquez
| 137.8k xp | 101 posts

index.html

<!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:ital,wght@1,300&display=swap" rel="stylesheet">
    </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>
        <div>
            <h1 class="titulo-principal">Barbería Alura</h1>
        </div>  
        <img class="banner" src="Banner/banner.jpg">

        <main>
            <section class="principal">

                <h2 class="titulo-semantico">Sobre la Barbería Alura</h1>

                <img class="utensilios" src="imagenes/utensilios.jpg" alt="Utensilios de Barbería">

                <p>Ubicada en el corazón de la ciudad, <strong>la Barbería Alura</strong>  trae para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020, la Barbería Alura ya es destaque en la ciudad y conquista 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. El atendimiento posee un padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes.</p>    
            </section>

            <section class="mapa">
                <h2 class="titulo-semantico">Nuestra Ubicación</h2>
                <p>Nuestro establecimiento está ubicado en el corazón de la ciudad</p>

                <div class="mapa-contenido">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29251.599819732175!2d-46.649841363577075!3d-23.5881898684683!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1ses!2sar!4v1649502219055!5m2!1ses!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </section>          

            <section class="diferenciales">
                <h2 class="titulo-semantico">Diferenciales</h2>

                <div class="contenido-diferenciales">
                    <ul class="lista-diferenciales">
                        <li class="items">Atención personalizada a los clientes.</li>
                        <li class="items">Espacio diferenciado.</li>
                        <li class="items">Localización.</li>
                        <li class="items">Profesionales calificados.</li>
                        <li class="items">Puntualidad.</li> 
                        <li class="items">Limpieza.</li>            
                    </ul><img src="diferenciales/diferenciales.jpg" class="imagen-diferenciales">
                </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" allowfullscreen></iframe>
                </div>
            </section>            
        </main>

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

</html>
5 respuestas
por Yeimer Alberto Márquez
| 137.8k xp | 101 posts

productos.html

<!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:ital,wght@1,300&display=swap" rel="stylesheet">
    </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>
            <ul class="productos">
                <li>
                    <h2>Cabello</h2>
                    <img src="imagenes/cabello.jpg">
                    <p class="producto-descripcion">Con tijera o máquina, a gusto del cliente</p>
                    <p class="producto-precio">$10.00</p>                    
                </li>
                <li>
                    <h2>Barba</h2>
                    <img src="imagenes/barba.jpg">
                    <p class="producto-descripcion">Corte y diseño profesional de barba</p>
                    <p class="producto-precio">$8.00</p>
                </li>
                <li>font-size: 2em;
                    font-weight: bold;
                    text-align: center;
                    <h2>Cabello + Barba</h2>
                    <img src="imagenes/cabello+barba.jpg">
                    <p class="producto-descripcion">Paquete completo de cabello y barba</p>
                    <p class="producto-precio">$15.00</p>

                </li>               
            </ul>

        </main>

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

</html>
por Yeimer Alberto Márquez
| 137.8k xp | 101 posts

contacto.html

<!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:ital,wght@1,300&display=swap" rel="stylesheet">
    </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>
            <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 le contactemos?</legend>

                    <label for="radio-email"><input type="radio" name="contacto" value="email" id="radio-email">E-mail</label>                    

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

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

                <fieldset>
                    <legend>¿En qué horario prefiere ser atendido?</legend>

                    <select>
                        <option>Mañama</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>       

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

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

</html>
por Yeimer Alberto Márquez
| 137.8k xp | 101 posts

style.css de las tres páginas en diseño recursivo.

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

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

.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav{
    position: absolute;
    top: 150px;
    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: 22px;
    font-weight: bold;
    margin-top: 10px;
}

footer{
    text-align: center;
    background: url(imagenes/bg.jpg);
    padding: 45px;
}

.copyright{
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px;
}

form{
    margin: 40px 40px;
}

form label, form legend{
    display: block;
    font-size: 28px;
    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: 19px;
    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;
}

/*Aquí inicia el CSS para nuestro home.*/

.titulo-principal{
    padding-left: 60px;
    font-size: 3em;
    font-weight: bold;
}

.banner{
    padding: 3em 0;
    width: 100%;
}

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

.titulo-semantico{
    text-align: center;
    font-size: 2em;
    padding: 10px;
    clear: left; /*Esto le va a decir, que cualquier configuración que venga después del título-semántico que la alinee, solo aplica para ese bloque.
    */
}

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

.principal strong{
    font-weight: bold;
}

#misión{
    font-size: 20px;
}

.principal em{
    font-style: italic;
}

.utensilios{
    width: calc(30% - (40px * 4));
    float: left;
    margin: 0 20px 20px 0;
}

.mapa{
    padding: 3em 0; /*3em es tres veces la referencia al tipo de fuente, entonces queremos un tamaño tres veces el tamaño de la fuente */
    background: linear-gradient(#FEFEFE, #888888);
}

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

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

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

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

.lista-diferenciales{
    width: 40%;
    display: inline-block;/*El inline-block, hace una lectura del html tal como se encuentra, y nuestro HTML tiene un espacio entre la lista e imagen, que el inline-block considera como salto de linea.*/
    vertical-align: top;
}

.items{
    line-height: 1.5; /*Uno más el cincuenta por ciento*/
}

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

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

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

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

.video{
    width: 560px;
    margin: 1em auto;/* con el automático a los laterales se centralizó el video en la página web*/
}

@media screen and (max-width:480px){
    h1{
        text-align: center;
    }

    nav{
        position: static;
    }

    .titulo-principal{
        padding-left: 10px;
    }

    .principal{
        padding: 0 1em;
    }

    .utensilios{
        width: calc(40% - 30px);
    }

    .caja, .principal, .mapa-contenido, .contenido-diferenciales, .video, .productos{
        width: auto;
    }

    .lista-diferenciales, .imagen-diferenciales, .productos li{
        width: 100%;
    }

    .lista-diferenciales{
        padding-left: 10px;
    }

    .input-padron{
        width: 80%;
    }
    .enviar{
        width: 60%;
    }
}
por Yeimer Alberto Márquez
| 137.8k xp | 101 posts

Estaba analizando el diseño en la compu y me di cuenta que el header y el banner no estaban comfigurados a 940px, como el main. Por lo cual quedan más amplios, puedo configurar el header a esas medidas; pero el banner no. Se desconfigura. He trabajado con el margen igual que el header y el main, pero pareciera que no lo toma, no doy como arreglarlo, además, que me queda alineado a la izquierda y no lo logro centralizarlo, usando text-aline.

solución!
por Ingrid Silva
| 1460.2k xp | 4637 posts
Instructor

Hola Yeimer , espero que estés muy bien.

Felicitaciones por tu aprendizaje. Estamos priorizando el foro para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Para no dejar de compartir los códigos, actividades y ejercicios que realizas, creamos un canal en Discord (#compartatucodigo) donde puedes compartirlos, dar y sugerir mejoras con el resto de tus compañeros.

Un saludo.

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