From 0c1b84c835391f83755758a784b9e6caeba18b0d Mon Sep 17 00:00:00 2001 From: Jose Date: Wed, 5 Oct 2022 17:16:19 -0500 Subject: [PATCH 1/3] se agregan metadatos y se agrega una imagen al parrafo del titulo h2 --- EjemploDOM.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/EjemploDOM.html b/EjemploDOM.html index 1951eb6..e20145a 100644 --- a/EjemploDOM.html +++ b/EjemploDOM.html @@ -1,6 +1,8 @@ + + Practica Javacript Prospercity @@ -45,6 +47,11 @@

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. +

+
+ Imagen Asteroide +
+

From ba25dfd48e0cb3c6ec528dcea6c01a1751814ef0 Mon Sep 17 00:00:00 2001 From: Jose Date: Wed, 5 Oct 2022 17:49:20 -0500 Subject: [PATCH 2/3] se agregan estilos al index --- EjemploDOM.html | 4 ++-- css/estilos.css | 43 ++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/EjemploDOM.html b/EjemploDOM.html index e20145a..4b6ae6e 100644 --- a/EjemploDOM.html +++ b/EjemploDOM.html @@ -47,11 +47,11 @@

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. -

+
Imagen Asteroide
-
+

diff --git a/css/estilos.css b/css/estilos.css index 4258008..759aab1 100644 --- a/css/estilos.css +++ b/css/estilos.css @@ -82,10 +82,47 @@ 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 + + p { + color: blue; + font-size: 20px; + } + + /* 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: 16px; + } + img { + height: 100%; + width: 100%; + object-fit: contain; + } + .imagen { + height: 500px; + width: 500px; + } From a8ead91df123300f525b05b3ee91779f99b8497e Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 6 Oct 2022 10:26:52 -0500 Subject: [PATCH 3/3] se agregan efectos a la imagen y un boton de interaccion --- EjemploDOM.html | 14 +++++++++++--- css/estilos.css | 25 ++++++++++++++++++++----- 2 files changed, 31 insertions(+), 8 deletions(-) diff --git a/EjemploDOM.html b/EjemploDOM.html index 4b6ae6e..8300bd7 100644 --- a/EjemploDOM.html +++ b/EjemploDOM.html @@ -6,6 +6,7 @@ Practica Javacript Prospercity +
@@ -47,11 +48,18 @@

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. -

-
+
+
Imagen Asteroide
-
+ +

Haga click en el icono para decir si le gusto o no esta noticia:

+ +

diff --git a/css/estilos.css b/css/estilos.css index 759aab1..21af7da 100644 --- a/css/estilos.css +++ b/css/estilos.css @@ -87,9 +87,16 @@ .slidemenu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; } .slidemenu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; } + h2{ + color: rgb(0, 21, 255); + font-size: 30px; + + } + p { color: blue; font-size: 20px; + font-family: 'Times New Roman', Times, serif; } /* class */ @@ -115,14 +122,22 @@ padding: 20px 35px; } p { - font-size: 16px; + font-size: 20px; } img { height: 100%; width: 100%; object-fit: contain; } - .imagen { - height: 500px; - width: 500px; - } + .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