Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

qué tengo mal aquí?

El fondo gris no está bien. :

.titulo-principal{
    padding-left: 30px;
}
#banner{
    width: 100%
}
.principal{
    background: #CCCCCC;
    padding: 20px;
}
.titulo-centralizado{
    text-align: center;
}
p{
    text-align: center;
}
em strong{
    color: red;
}
#mision{
    font-size: 20px;
}
.diferenciales{
    background: #FFFFFF;
    padding: 30px;
}
ul{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}
.items{
    font-style: italic;
}
.imagenDiferenciales{
    width: 50%;
}

Código html

<!DOCTYPE html>
<html lang = "es">
    <head>
        <meta charset = "UTF-8"></html>
        <title>Barbería Alura</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header >
        <h1 class="titulo-principal">Barbería Alura</h1>
        </header>
        <img id="banner" src="banner.jpg"
        <div class="principal">
            <h2 class="titulo-centralizado">Sobre la Barbería Alura</h2>

            <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".</em></strong></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.</p>
        </div>
        <div class="diferenciales">
            <h3 class="titulo-centralizado">Diferenciales</h3>
            <ul>
                <li class="items">Excelente ubicación.</li>
                <li class="items">Atención personalizada.</li>
                <li class="items">Profesionales calificados.</li>
                <li class="items">Reserva online.</li>
            </ul>
            <img class="imagenDiferenciales" src="diferenciales.jpg">
        </div>
    </body> 
</html>
2 respuestas

Traté de subir la imagen de la página, pero no aparece...

¡Hola Fernanda!

Gracias por compartir tu código y explicar tu problema. Después de revisar tu código, noté que tienes una clase llamada "principal" que debería tener el fondo gris. Sin embargo, parece que no se está aplicando correctamente.

Una posible solución es asegurarte de cerrar correctamente la etiqueta <img id="banner" src="banner.jpg">. Actualmente, falta el cierre de la etiqueta >. Debería verse así: <img id="banner" src="banner.jpg">.

Además, en tu archivo CSS, asegúrate de que el selector de clase .principal tenga la propiedad background con el valor #CCCCCC. Aquí está el código corregido:

.principal {
    background: #CCCCCC;
    padding: 20px;
}

Con estos cambios, el fondo gris debería aplicarse correctamente en la sección principal de tu página.

Espero que esto resuelva tu problema. Si tienes alguna otra pregunta, ¡no dudes en preguntar! ¡Buena suerte con tu proyecto y sigue adelante!

¡Saludos!

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