Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Pagina terminada

<!DOCTYPE html>

<html lang="es">

    <head>

        <meta charset="UTF-8">
        <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> en el corazón de la ciudad, la <strong>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>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>

        </div>

        <div class="diferenciales">

            <h3 class="titulo-centralizado">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 calificados</li>
            </ul>

            <img src="diferenciales.jpg" class="imagenDiferenciales">

        </div>

    </body>

</html>
.titulo-principal{
   padding-left: 30px;
}

.titulo-centralizado{
    text-align: center;
}

#banner{
    width: 100%;
}

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

p{
    text-align: center;   
}

em strong{
    color: red;
}

#mision{
    font-size: 20px;
}

.diferenciales{
    background: #ffffff;
    padding: 30px;
}

.items{
    font-style: italic;
}

ul{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

.imagenDiferenciales{
    width: 50%;
}

1 respuesta

Hola Johann, espero 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 códigos, actividades y ejercicios, creamos un canal en Discord (#compartatucodigo) donde puedes compartir, dar y sugerir mejoras con el resto de tus compañeros.

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