[Proyecto] Lo que hicimos en el aula | HTML5 y CSS3 parte 1: Mi primera página web | Alura Latam

CODIGO HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Barberia Alura</title>
  </head>
  <body>
    <header><h1 class="titulo_principal">Barberia Alura</h1></header>
    <img id="banner" src="img/banner.jpg" />
    <div class="principal">
      <h2 class="titulo_centrado">Sobre la Barbería Alura</h2>
      <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>
    </div>
    <div class="diferenciales">
      <h3 class="titulo_centrado">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 src="img/diferenciales.jpg" class="imagenDiferenciales" />
    </div>
  </body>
</html>

CODIGO CSS

body {
}
#banner {
  width: 100%;
}
.titulo_principal{
  padding-left: 30px;
}
.principal {
  background: #cccccc;
  padding: 20px;
}
.titulo_centrado {
  text-align: center;
}
p {
  text-align: center;
}
em strong {
  color: red;
}
#mision {
  font-size: 20px;
}
.diferenciales {
  background: #ffffff;
  padding: 30px;
}

.items {
  font-style: italic;

}
ul {
  display: inline-block; /* ajustar el contenedor segun el contenido*/
  vertical-align: top; /* Alinear de forma vertical las listas */
  width: 20%;
  margin-right: 15%;
}
.imagenDiferenciales {
  width: 50%;
}