diff --git a/004_primeras_paginas/html_css_parte2/banner/banner.jpg b/004_primeras_paginas/html_css_parte2/banner/banner.jpg
new file mode 100644
index 0000000..a5198bc
Binary files /dev/null and b/004_primeras_paginas/html_css_parte2/banner/banner.jpg differ
diff --git a/004_primeras_paginas/html_css_parte2/diferenciales/diferenciales.jpg b/004_primeras_paginas/html_css_parte2/diferenciales/diferenciales.jpg
new file mode 100644
index 0000000..5b15eec
Binary files /dev/null and b/004_primeras_paginas/html_css_parte2/diferenciales/diferenciales.jpg differ
diff --git a/004_primeras_paginas/html_css_parte2/index.html b/004_primeras_paginas/html_css_parte2/index.html
new file mode 100644
index 0000000..3e12d0f
--- /dev/null
+++ b/004_primeras_paginas/html_css_parte2/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Barbería Alura</title>
+        <link rel="stylesheet" href="./style.css">
+    </head>
+    <body>
+        <div class="header">
+            <header><h1 id="header">Barbería Alura</h1></header>
+        </div>
+        <img id="banner"
+             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
+            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="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>
diff --git a/004_primeras_paginas/html_css_parte2/productos.css b/004_primeras_paginas/html_css_parte2/productos.css
index e69de29..5a2a20b 100644
--- a/004_primeras_paginas/html_css_parte2/productos.css
+++ b/004_primeras_paginas/html_css_parte2/productos.css
@@ -0,0 +1,16 @@
+header {
+    background: #046dfc;
+}
+
+nav li{
+    display: inline;
+    margin: 0 0 0 15px;
+}
+
+nav a{
+    text-transform: uppercase;
+    color: #000000;
+    font-weight: bold;
+    font-size: 22px;
+    text-decoration: none;
+}
diff --git a/004_primeras_paginas/html_css_parte2/productos.html b/004_primeras_paginas/html_css_parte2/productos.html
index 975664e..c76ff64 100644
--- a/004_primeras_paginas/html_css_parte2/productos.html
+++ b/004_primeras_paginas/html_css_parte2/productos.html
@@ -9,11 +9,13 @@
     <body>
         <header>
             <h1><img src="./imagenes/logo.png"></h1>
-            <ul>
-                <li>Home</li>
-                <li>Productos</li>
-                <li>Contacto</li>
-            </ul>
+            <nav>
+                <ul>
+                    <li><a href="./index.html">Home</a></li>
+                    <li><a href="./productos.html">Productos</a></li>
+                    <li><a href="./contacto.html">Contacto</a></li>
+                </ul>
+            </nav>
         </header>
         
     </body>
diff --git a/004_primeras_paginas/html_css_parte2/style.css b/004_primeras_paginas/html_css_parte2/style.css
new file mode 100644
index 0000000..470ab5d
--- /dev/null
+++ b/004_primeras_paginas/html_css_parte2/style.css
@@ -0,0 +1,71 @@
+body{
+    background-color: #1a1c1d;
+}
+
+#banner{
+    width: 100%;
+}
+
+.header {
+    padding-top: 2px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 2px;
+}
+
+#header {
+    font-size: 64px;
+    font-family: monospace;
+}
+
+p{
+    color: #FFFCC6;
+    text-align: center;
+    /*background: #fc9304;*/
+    /*background: #df28f6;*/
+}
+
+h1{
+    text-align: center;
+    background: #046dfc;
+}
+
+/* selección de diferentes selectores de stilo*/
+em strong{
+    color: red;
+}
+
+/* selector de id */
+#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%;
+}
