Haz lo que hicimos en aula

HTML

<div class="principal">
  <h1>Sobre la Barbería Alura</h1>

  <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 nuestrosclientes"</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">
  <h2>Diferenciales</h2>
  <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="imagen-diferenciales"
    src="diferenciales/diferenciales.jpg"
    alt="Barbero"
  />
</div>

CSS

body { }

#banner { width: 100%; }

h1 { text-align: center; }

h2 { text-align: center; }

p { text-align: center; }

em strong { color: red; }

#mision { font-size: 20px; }

.principal { background-color: #ccc; padding: 20px; }

.diferenciales { background-color: #fff; padding: 30px; }

.items { font-style: italic; }

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

.imagen-diferenciales { width: 50%; }