diff --git a/EjemploDOM.html b/EjemploDOM.html
index 1951eb6..f9db704 100644
--- a/EjemploDOM.html
+++ b/EjemploDOM.html
@@ -11,19 +11,29 @@
   
             <!-- Item 1 -->
             <input type="radio" name="slideItem" id="slide-item-1" class="slide-toggle" checked/>
-            <label for="slide-item-1"><p class="icon">♬</p><span>Home</span></label>
+            <label for="slide-item-1"><p class="icon">🌌</p><span>via lactea</span></label>
             
             <!-- Item 2 -->
             <input type="radio" name="slideItem" id="slide-item-2" class="slide-toggle"/>
-            <label for="slide-item-2"><p class="icon">★</p><span>About</span></label>
+            <label for="slide-item-2"><p class="icon">🪐</p><span>saturno</span></label>
             
             <!-- Item 3 -->
             <input type="radio" name="slideItem" id="slide-item-3" class="slide-toggle"/>
-            <label for="slide-item-3"><p class="icon">✈</p><span>Folio</span></label>
+            <label for="slide-item-3"><p class="icon">🛸</p><span>ovni</span></label>
             
             <!-- Item 4 -->
             <input type="radio" name="slideItem" id="slide-item-4" class="slide-toggle"/>
-            <label for="slide-item-4"><p class="icon">✎</p><span>Blog</span></label>
+            <label for="slide-item-4"><p class="icon">☄️</p><span>meteorito</span></label>
+
+            <!-- Item 5 -->
+            <input type="radio" name="slideItem" id="slide-item-5" class="slide-toggle"/>
+            <label for="slide-item-5"><p class="icon">👨🏻‍🚀</p><span>astronauta</span></label>
+        
+            <!-- Item 6 -->
+            <input type="radio" name="slideItem" id="slide-item-6" class="slide-toggle"/>
+            <label for="slide-item-6"><p class="icon">🚀</p><span>cohete</span></label>
+
+                
             
             <div class="clear"></div>
             
@@ -31,12 +41,14 @@
             <div class="slider">
               <div class="bar"></div>
             </div>
-            
+                        
           </nav>
     </header>
     <main>
+        <div class="titulo">
         <h1>Bienvenidos a las noticias</h1>
-
+        <br></br>
+        </div>
         <div class="container">
             <section class="section-a">
                 <h2>
@@ -44,13 +56,15 @@ <h2>
                 </h2>
                 <p>
                     Por primera vez en la historia, los telescopios Hubble y Webb capturaron un evento astrológico 
-                    al mismo momento. Fue la misión de la NASA que impactó contra un asteroide para cambiar su recorrido.
+                    al mismo momento. Fue la misión de la NASA que impactó contra un asteroide para cambiar su recorrido. 
                 </p>
                 <button>Leer Mas</button>
             </section>
             <section class="section-b">
+                <br></br>
                 <h2>
                     Explotarlos vs. desviarlos: ¿qué opciones existen para evitar que un asteroide choque con la Tierra?
+                
                 </h2>
                 <p>
                     Si en algún momento un asteroide amenaza con impactar la Tierra, ¿por qué no los hacemos explotar en 
@@ -62,6 +76,7 @@ <h2>
                 <button>Read More</button>
             </section>
             <section class="section-c">
+                <br></br>
                 <p id="para">Cualquier texto que cambiará de color</p>
                 <button onclick="changeColor('blue');">Azul</button>
                 <button onclick="changeColor('red');">Rojo</button>
diff --git a/css/estilos.css b/css/estilos.css
index 4258008..6a738c9 100644
--- a/css/estilos.css
+++ b/css/estilos.css
@@ -1,6 +1,7 @@
 *{
     margin: 0;
     padding: 0;
+    background-color: rgb(63, 93, 129);
   }
   
   .clear{
@@ -14,21 +15,28 @@
   
   .slidemenu{
     font-family: arial, sans-serif;
-    max-width: 600px;
-    margin: 50px auto;
+    max-width: 800px;
+    margin: 70px auto;
     overflow: hidden;
   }
   
   .slidemenu label{
-    width: 25%;
+    width: 15%;
     text-align: center;
-    display: block;
-    float: left;
-    color: #333;
+    display:inline-block;
+    float:left;
+    color: white;
     opacity: 0.2;
   
   }
+   /*titulo*/
+   .titulo{
+    color: white;
+    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  }
   
+
+
   .slidemenu label:hover{
     cursor: pointer;
     color: #666;
@@ -50,22 +58,24 @@
     line-height: 50px;
     border-radius: 50%;
   }
-  
+
+ 
   /*Bar Style*/
   
   .slider{
-    width: 100%;
+    width: 90%;
     height: 5px;
     display: block;
     background: #ccc;
     margin-top: 10px;
     border-radius: 5px;
+    
   }
   
   .slider .bar{
-    width: 25%;
+    width: 10%;
     height: 5px;
-    background: #333;
+    background: rgb(68, 3, 94);
     border-radius: 5px;
   }
   
@@ -81,11 +91,17 @@
   .slidemenu .slide-toggle:checked + label{
     opacity: 1;
   }
+
+ .imagen {
+  display: inline-block;
+ }
   
   
   
   .slidemenu #slide-item-1:checked ~ .slider .bar{ margin-left: 0; }
-  .slidemenu #slide-item-2:checked ~ .slider .bar{ margin-left: 25%; }
-  .slidemenu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; }
-  .slidemenu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; }
+  .slidemenu #slide-item-2:checked ~ .slider .bar{ margin-left: 20%; }
+  .slidemenu #slide-item-3:checked ~ .slider .bar{ margin-left: 37%; }
+  .slidemenu #slide-item-4:checked ~ .slider .bar{ margin-left: 53.4%; }
+  .slidemenu #slide-item-5:checked ~ .slider .bar{ margin-left: 70.3%; }
+  .slidemenu #slide-item-6:checked ~ .slider .bar{ margin-left: 90%; }
   
\ No newline at end of file