[Duda] No ocurre los mismos cambios en el video al rehacer la página | HTML5 y CSS3 parte 4: Avanzando en CSS

Solucionado (ver solución)

Solucionado
(ver solución)

2
respuestas

Referente al curso HTML5 y CSS3 parte 4: Avanzando en CSS, en el capítulo Adaptando la página inicial y actividad Rehaciendo la página inicial

por Washington Ricardo Vega Eras

| 112.6k xp | 25 posts

Saludos compañeros, Realice todos los pasos para reahacer la página como lo hace el profesor, pero no me queda igual que en los videos. ¿Me pueden ayudar en donde está el error?

<!DOCTYPE html> 

    <html lang="es"> 

        <head>
            <meta charset="UTF-8"> 

            <title>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="Home.html">Home</a></li>
                            <li><a href="Productos barbería.html">Productos</a></li>
                            <li><a href="Contacto.html">Contactos</a></li>
                        </ul>    
                    </nav>
                </div>

            </header>

            <img class="Banner" src="Banner/Banner.jpg">

            <main>

                <section class="principal">

                    <h2 class="tituloprincipal">Sobre la Barbería Alura</h2>

                    <img class="utensilios" src="imagenes/utensilios[1].jpg" alt="Estos son los utensilios de un barbero.">

                    <p>Ubicada en el corazón de la ciudad, la Barbería Alura trae para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020, la <strong> Barbería Alura </strong>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="diferenciales">
                    <h3 class="tituloprincipal">Diferenciales</h3>
                    <ul>
                        <li class="items">Atención personalizada</li>
                        <li class="items">Espacio diferenciado</li>
                        <li class="items">Localización</li>
                        <li class="items">Profesionales calificados</li>
                    </ul>

                    <img src="diferenciales/diferenciales.jpg" class="imagenDiferenciales">
                </section>
            </main>

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

        </body>

    </html>

![]( Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad )

2 respuestas

solución!

por MANUEL GONZALO AGUSTIN CARMONA

| 34k xp | 14 posts

22/01/2023

Que tal compañero, podrías anexar el código de la hoja de estilo que estas ocupando en mi caso el archivo se llama

<link href="style.css" rel="stylesheet" />

Anexo mi codigo para que lo tomes como referencia, espero y te sirva

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;
}
/* recuperando el movimiento del mouse*/
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;
}

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

.enviar:hover{
    background-color: 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;
}

Visualmente asi queda

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

por Washington Ricardo Vega Eras

| 112.6k xp | 25 posts

22/01/2023

Gracias compañero, ya lo solucione. El problema era que no estaban agregadas las propiedades del selector .main..