diff --git a/EjemploDOM.html b/EjemploDOM.html
index 1951eb6..8300bd7 100644
--- a/EjemploDOM.html
+++ b/EjemploDOM.html
@@ -1,9 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" /
     <title>Practica Javacript Prospercity</title>
     <link rel="shortcut icon" href="#">
     <link rel="stylesheet" href="css/estilos.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
     <header>
@@ -45,6 +48,18 @@ <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.
+                <div class = "zoom">
+                    <figure class = "figure">
+                        <img src="https://e.rpp-noticias.io/xlarge/2022/10/01/164616_1323550.jpg" alt="Imagen Asteroide">
+                    </figure>
+                </div>
+                <p>Haga click en el icono para decir si le gusto o no esta noticia:</p>
+                <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>
+                <script>
+                function myFunction(x) {
+                x.classList.toggle("fa-thumbs-down");
+                }
+                </script>
                 </p>
                 <button>Leer Mas</button>
             </section>
diff --git a/css/estilos.css b/css/estilos.css
index 4258008..21af7da 100644
--- a/css/estilos.css
+++ b/css/estilos.css
@@ -82,10 +82,62 @@
     opacity: 1;
   }
   
-  
-  
   .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%; }
-  
\ No newline at end of file
+
+  h2{
+    color: rgb(0, 21, 255);
+    font-size: 30px;
+
+  }
+
+  p {
+    color: blue;
+    font-size: 20px;
+    font-family: 'Times New Roman', Times, serif;
+  }
+  
+  /* class */
+  .parrafo {
+    color: red;
+  }
+  
+  /* class */
+  .container
+  parrafo {
+    color: red;
+  }
+  
+  main {
+    background-color: rgba(0, 217, 255, 0.079);
+    width: 600px;
+    height: 500px;
+  }
+  main {
+  width: 100%;
+  height: auto;
+  border: 10px solid grey;
+  padding: 20px 35px;
+  }
+  p {
+    font-size: 20px;
+  }
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+   }
+   .zoom {
+    padding: 5px;
+    background-color: rgb(173, 194, 173);
+    transition: transform .2s;
+    width: 200px;
+    height: 150px;
+    margin: 5px;
+  }
+  
+  .zoom:hover {
+    transform: scale(1.3);
+  }
\ No newline at end of file
