lo que hicimos en aula

HTML

<header>
  <h1 class="titulo-principal">Barberia Alura</h1>
</header>

<img id="banner" src="img/banner.jpg" alt="banner" />

<div class="principal">
  <h2 class="titulo-centralizado">Sobre la barbería Azura</h2>

  <p id="mision">
    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>
    <em>
      Nuestra misión:
      <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>
</div>

<div class="diferenciales">
  <h3 class="titulo-centralizado">Diferenciales</h3>

  <ul class="items">
    <li>Atenciión personalizada a los clientes.</li>
    <li>Espacio diferenciado</li>
    <li>Localización</li>
    <li>Profesioanles calificados</li>
  </ul>

  <img src="img/diferenciales.jpg" alt="" class="i-diferenciales">
</div>

CSS

.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: white; padding: 30px; }

.items li{ font-style: italic; }

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

.i-diferenciales{ width: 50%; }