HTML y CSS parte 1: mi primera página - 05

tag <div> y selector de clase 'class' para estilo

004_primeras_paginas/index.html

@@ -11,6 +11,7 @@
              src="./banner/banner.jpg"
              alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
 
+        <div class="principal">
             <h1>Sobre Barbería Alura</h1>
 
             <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae
@@ -25,5 +26,19 @@
             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="diferencias">
+            <h2>Lo que nos diferencia</h2>
+            <ul>
+                <li class="items">Atención personalizada para cada cliente</li>
+                <li class="items">Espacio diferenciado</li>
+                <li class="items">Localización</li>
+                <li class="items">Profesionales calificados</li>
+            </ul>
+
+            <img class="imagen_diferencias"
+                 src="diferenciales/diferenciales.jpg"
+                 alt="hombre sentado en barbería al que le cortan la barba con tijeras"/>
+        </div>
     </body>
 </html>

004_primeras_paginas/style.css

@@ -27,3 +27,33 @@ em strong{
 #mision {
     font-size: 20px;
 }
+
+h2{
+    text-align: center;
+    padding: 25px;
+}
+
+.items {
+    font-style: italic;
+}
+
+ul{
+    display: inline-block;
+    vertical-align: top;
+    width: 30%;
+    margin-right: 15%;
+}
+
+.principal {
+    background: #0e384b;
+    padding: 20px;
+}
+
+.diferencias {
+    background: #cd4f39;
+    padding: 20px;
+}
+
+.imagen_diferencias{
+    width: 50%;
+}