Mi primera pagina web css - html | HTML5 y CSS3 parte 1: Mi primera página web | Alura Latam

!DOCTYPE html>

<html lang="es">

  <head>
    <meta charset="UTF-8">

    <litle> Barberia Alura </litle>

    <link rel="stylesheet" href="style.css"

  </head>
<body>

  <header>

    <h1 class="titulo-principal" > Barbería Alura</h1>
</header>

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

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

       <p>Ubicada en el corazón de la <strong> la Barberia Alura</strong> trae para el mercado lo mejor para su cabello y barba. Fundada en 2020, la Barbería ya se destaca en la ciudad y conquista nuevos clientes diariamente.</p>

      <p id="mision"></p><em> Nuestra Misión es:<strong>“proporcionar autoestima y calidad de vida a nuestros clientes”</strong>.</em></p>


      <p> profesionales experimentados que están constantemente observando los cambios y movimientos 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>
        <li class="items"> Atención personalizada </li>
        <li class="items"> Espacio diferenciado</li>
        <li class="items"> Localización</li>
        <li class="items"> Profesionales calificados</li>
    </ul> 


  </div>

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

</div>

</body>
</html>


.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: #ffffff;

}

h3{
  text-align:center;
}

 .items{
  font-style: italic;
 }

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


 }

 .imagenDiferenciales {

width: 50%;

 }