El titulo y la imagen no se modifican | HTML5 y CSS3 parte 4: Avanzando en CSS | Alura Latam

7
respuestas

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

por Blanca Nelly Restrepo Sepúlveda

| 41.4k xp | 6 posts

Hola,

Cuando realizo a la par con el profe las actividades veo que tengo algo mal, porque no se me modifica el titulo y la imagen, me pueden ayudar por favor.

Muchas Gracias. `

<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="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="C:\Users\blane\OneDrive - uniminuto.edu\Curso Alura\Página Web\servicios-salon-barberia-1536x1020.jpeg">

        <main>
            <section class="principal">

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

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

                <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura </strong> trae para el mercado lo mejor para su cabello y barba. Fundada en 2020, la Barberia Alura ya se destaca en la ciudad y conquista nuevos clientes diariamente.</p>

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

                <p>Ofrecemos profesionales  experimentados que están constantemente observando los cambios y movimientos del mundo de la moda, para así ofrecer a nuestros clientes las ultimas tendencias. La atención es excelente y ágil, garantizando calidad y satisfacción de nuestros clientes.</p>

            </section>

         <section class="diferenciales">

            <h3 class="titulo-principal">Diferenciales </h3>
            <ul>
                <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 </li> 
            </ul>
            <img src="C:\Users\blane\OneDrive - uniminuto.edu\Curso Alura\Página Web\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>

7 respuestas

por Joseph Yael Riveron González

| 107.3k xp | 6 posts

Administrativo

20/01/2023

Estoy en las mismas, avisame si pudiste solucionarlo xc

por Orlando Gámez Gámez

| 175.8k xp | 105 posts

21/01/2023

Hola compañeros, para tratar de ayudarlos deben también compartir el código q tienen en el CSS...

por Juan Jose

| 37.9k xp | 1 posts

21/01/2023

Deberiamos ver como esta el CSS.

por Joseph Yael Riveron González

| 107.3k xp | 6 posts

Administrativo

21/01/2023



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

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

.copy{
    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: 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%;
}

.tituloprincipal{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;

}

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

.principal strong{
    font-weight: bold;
}

.principal em{
    font-style: italic;
}

.Barberia{
    width: 60%;
}

asi es como lo tengo escrito el codigo y casi igual que lo que publico la compañera, (cambian algunos nombres pero nada mas)

por Joseph Yael Riveron González

| 107.3k xp | 6 posts

Administrativo

21/01/2023

Ya entendi el porque no realiza los cambios, y eso fue porque el reset se sobrepone a el style, por lo que no encontré como hacerlo de manera contraria asi que escribi el codigo de style (lo que iba indicando el profe), en el de reset y pude continuar con las actividades.

por Blanca Nelly Restrepo Sepúlveda

| 41.4k xp | 6 posts

22/01/2023

Tomando en cuenta la respuesta de Joseph, también revise lo que indica sobre el reset, pero no entendí muy bien como logro solucionarlo, yo simplemente no agregue el reset, mi codigo Style es el siguiente. `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; }

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-descripción{ 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: 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; }`

por Blanca Nelly Restrepo Sepúlveda

| 41.4k xp | 6 posts

22/01/2023

A continuación comparto las imagenes de como se ve la pagina web ) A continuación comparto las imagenes de como se ve la pagina web página web 2