[Proyecto] Haga lo que hicimos en aula | HTML5 y CSS3 parte 4: Avanzando en CSS | Alura Latam

PARTE HTML

    <body>

        <main>
            <section class="principal">

                <h2 class="titulo_principal"> 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 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>

            </section>

            <div class="diferencial">
                <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">Profesionales calificados</li>
                </ul>
                <img class="imagendiferenciales" src="diferenciales/diferenciales.jpg">
            </div>
        </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>

PARTE CSS

.banner {
    width: 100%;
}

.titulo_principal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

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

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

.utensilios {
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.imagendiferenciales {
    width: 60%;
}