Lo que hicimos en clase | HTML5 y CSS3 parte 4: Avanzando en CSS | Alura Latam

/* css home */ .banner { width: 100%; object-fit: fill; }

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

.imagenDiferencial { width: 60%; }

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

<section class="principal">
  <h2 class="titulo-principal">Sobre la Barbería Alura</h2>
  <img src="imagenes/utensilios[1].jpg" alt="utensilios" class="utensilios">
  <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="diferenciales">

  <h2 class="titulo-principal">Diferenciales</h2>
  <ul>
    <li class="items">Atencion personalizada</li>
    <li class="items">Espacio diferenciado</li>
    <li class="items">Localizacion</li>
    <li class="items">profesionales calificados</li>
  </ul>
  <img src="https://img.lalr.co/cms/2017/03/25014033/barberia2703.jpg?size=xl" alt="" class="imagenDiferencial">
</section>