[Proyecto] Haz lo que hicimos en el aula

Html

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

            <img class="utelsilios" src="images/utensilios.jpg" alt="utelsilios 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>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="mapa">
            <h3 class="titulo-principal">Nuestar Ubicación</h3>
            <p>Nuestor establecimiento esta ubicado en el corazón de la ciudad</p>
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3318.886870741765!2d-74.08420455950095!3d4.864973777119045!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e3f877db4f0e035%3A0x6a246e4683ffe932!2sNido%20de%20aguilas!5e0!3m2!1ses!2sco!4v1681695978871!5m2!1ses!2sco" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

        </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 calificados</li>
            </ul>

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

        <div class="video">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </div>

    </main>

CSS

/*CSS para nuestra home*/

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

.utelsilios{
    width: 120px;
    float: left;
    border-radius: 5px;
    margin: 0 20px 20px 0;
    box-shadow: 0px 1px 10px rgba(196, 27, 27, 0.3);
}

.mapa p{
    margin: 0 0 2em;
    text-align: center;
}

.mapa{
    padding: 3em 0;
}

.imagenDiferenciales{
    width: 60%;
}

.video{
    width: 560px;
    margin: 1em auto;

}