diff --git a/EjemploDOM.html b/EjemploDOM.html index 1951eb6..a0b88dd 100644 --- a/EjemploDOM.html +++ b/EjemploDOM.html @@ -2,11 +2,21 @@ Practica Javacript Prospercity - + + + +
+
+ + menu +
+ +
+ + + +
+ +
+
-
+ +

Bienvenidos a las noticias

+ +
-

+

Hubble y Webb capturan el momento en el que misión de la NASA impacta contra un asteroide

+ Es una imagen

+ +

+
+
+ +
+
+

Bienvenidos a las noticias

+
+
+ + + +
+
+
+
+
+

+ Hubble y Webb capturan el momento en el que misión de la NASA impacta contra un asteroide +

+
+
+
+

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

+ +

- + +
+

+ Este lunes, 26 de septiembre, la Nasa protagonizó un hecho sin precedentes: el choque planeado de una de sus misiones contra un asteroide no peligroso. El objetivo era convertirse en la primera prueba de defensa planetaria del mundo. +

+

+ Esta misión, explicó la Nasa, “ayudará a determinar si estrellar deliberadamente una nave espacial contra un asteroide es una forma efectiva de desviar dicho asteroide”. La misión viajó millones de kilómetros de forma autónoma antes de impactar deliberadamente contra Dimorphos. +

+
+ + +
+
+ +
+ +
-

+ +

Explotarlos vs. desviarlos: ¿qué opciones existen para evitar que un asteroide choque con la Tierra?

-

+ +

+ +

+

+ Explotarlos vs. desviarlos: ¿qué opciones existen para evitar que un asteroide choque con la Tierra? +

+
+
+
+

+ Si en algún momento un asteroide amenaza con impactar la Tierra, ¿por qué no los hacemos explotar en el espacio, como ocurrió en la película de ciencia ficción "Armageddon"? Expertos de la NASA opinan que es más favorable tratar de desviarlos. Hace poco, un foro internacional denominado Comisión de Planificación Espacial reunió a 18 agencias espaciales para evaluar qué sería lo mejor para desviar un asteroide, en función de su tamaño y trayectoria. +

- +
+ Es una imagen +

+ Los dos grandes telescopios espaciales de la NASA, Hubble y James Webb trabajaron juntos para capturar el momento en el que una nave espacial se estrelló contra un asteroide como parte de la primera prueba de DART, con la que buscan redireccionar un cuerpo celeste. +

+

+ Esta es la primera vez que ambos aparatos observan simultáneamente el mismo objeto y, además de arrojar increíbles imágenes, otorgan nuevos datos sobre el experimento en el que se busca tener una forma de defensa planetaria. +

+
+
-

Cualquier texto que cambiará de color

- - +

Cualquier texto que cambiará de color

+ + + +

+
+
+ +
+
+ +
+ +
+ + + + +
+ +
+

Este texto cambiará a el colo que tu escojas

+ + + + + +
+ + +
+
+ + diff --git a/css/estilos.css b/css/estilos.css index 4258008..f184f34 100644 --- a/css/estilos.css +++ b/css/estilos.css @@ -1,7 +1,38 @@ -*{ - margin: 0; - padding: 0; - } +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + font-size: 62.5%; +} + + +.inactive { + display: none; +} + +.logo { + width: 150px; +} + +.logo-menu-ham { + padding: 20px; + +} + +.menu_ham { + display: none; +} + + +.principal{ + margin: 5rem; + padding: 5rem; + font-size: 2rem; + +} .clear{ clear: both; @@ -13,10 +44,13 @@ } .slidemenu{ + font-size: 3rem; font-family: arial, sans-serif; - max-width: 600px; - margin: 50px auto; + max-width: 125rem; + margin: 5rem auto; overflow: hidden; + padding: 20px; + } .slidemenu label{ @@ -31,23 +65,23 @@ .slidemenu label:hover{ cursor: pointer; - color: #666; + color: #666; } .slidemenu label span{ display: block; - padding: 10px; + padding: 1rem; } .slidemenu label .icon{ - font-size: 20px; - border: solid 2px #333; + font-size: 2rem; + border: solid 0.2rem #333; text-align: center; - height: 50px; - width: 50px; + height: 5rem; + width: 5rem; display: block; margin: 0 auto; - line-height: 50px; + line-height: 5rem; border-radius: 50%; } @@ -55,18 +89,17 @@ .slider{ width: 100%; - height: 5px; display: block; background: #ccc; - margin-top: 10px; - border-radius: 5px; + margin-top: 1rem; + border-radius: 0.5rem; } .slider .bar{ width: 25%; - height: 5px; + height: 0.5rem; background: #333; - border-radius: 5px; + border-radius: 0.5rem; } /*Animations*/ @@ -81,11 +114,357 @@ .slidemenu .slide-toggle:checked + label{ opacity: 1; } + + .divTitleGeneral { + display: flex; + margin: auto; + text-align: center; + background-color: rgb(216, 50, 50); + font-size: 3rem; + color: white; + padding: auto; + } + .imgGeneral { + width: 40%; + background-color: black; + } + .titleGeneral { + align-self: center; + width: 75%; + } + + + + +li { + display: inline; +} + +li button { + width: 420px; + height: 60px; + background-color: #666; + border: 0; + font-size: 2rem; + + .blue { + color: #FCFEFF; + background-color: #222673; + border-radius: 4rem; + width: 10rem; + } + + .red { + color: #FCFEFF; + background-color: #D40600; + border-radius: 4rem; + width: 10rem; + } + + .leer { + color: #FCFEFF; + background-color: #314259; + border-radius: 4rem; + width: 10rem; + } + + .read { + color: #FCFEFF; + background-color: #314259; + border-radius: 4rem; + width: 10rem; + } + + .footer { + margin: 5rem; + padding: 5rem; + font-size: 2rem; + } + + .ul { + list-style-type: none; + } + .mas_texto { + display: none; + } +.more_text { + display: none; +} + .show { + display: block; + } + + .img { + width: 50%; + margin: 1rem; + padding: 1rem; + } + + .img2 { + width: 50%; + margin: 1rem; + padding: 1rem; + } + +} + + + + + + + .container { + display: flex; + border-bottom:4px solid white; + } + + .tituloDerecha { + text-align: center; + width: 40%; + height: 240px; + background-color: rgb(216, 50, 50); + border: 0; + } + + .h2-a{ + margin: auto; + color: white; + font-size: 2.0rem; + } + + .divText-a { + display: flex; + width: 60%; + height: 240px; + border: 0; + background-color: black; + } + + .text-a { + text-align: center; + margin: auto; + font-size: 2rem; + color: white; + margin-left: 10px; + } + + .clasButtoma { + padding: 10px; + align-self:flex-end; + } + + .buttoma { + height: 50px; + width: 150px; + font-size: 1.5rem; + background-color: rgb(216, 50, 50); + color: white; + border: 0; + } + + + + + + + + + + + + .container-b { + position: relative; + display: flex; + color: white; + background-color: black; + margin: auto; + } + + .h2-b { + background-color: rgb(216, 50, 50); + font-size: 2.3rem; + text-align: center; + border-bottom: 2px solid black; + color: white; + } + + .text-b { + text-align: center; + margin-top: 180px; + margin-left: 85px; + width: 75%; + font-size: 2rem;} + + + + .divText{ + border-right: 4px solid white; + } + + .buttomb { + height: 50px; + width: 150px; + font-size: 1.5rem; + background-color: rgb(216, 50, 50); + color: white; + border: 0; + } + + .clasButtomb { + display: flex; + justify-content: center; + background-color:black; + padding: 10px; + } + + + + + .section-c { + background-color:#666; + height: 250px; + background-color: rgb(216, 50, 50); + } + + #para { + text-align: center; + padding-top: 60px; + } + + .textFooter { + font-size: 2.5rem; + margin-bottom: 30px; + } + + .buttonFooter { + height: 80px; + width: 150px; + display: inline; + + } + + + + + + .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 + + + .mobile-menu { + position: absolute; + top: 120px; + padding: 24px; + } + .mobile-menu a { + text-decoration: none; + font-weight: bold; + } + .mobile-menu ul { + padding: 0; + margin: 24px 0 0; + list-style: none; + } + .mobile-menu ul:nth-child(1) { + border-bottom: 1px solid; + } + .mobile-menu ul li { + margin-bottom: 24px; + } + + + .section-b { + background-color: #333; + } + + #titulo2 { + color: white; + text-align: center; + background-color: #FC3C23 ; + font-size: 3.5rem; + margin: 30px; + padding: 5px; + } + + .parrafoSectionB { + color: white; + font-size: 2.5rem; + } + + .parrafoMore1{ + color: white ; + font-size: 2.5rem; + + } + + .parrafoMore2{ + color: white; + font-size: 2.5rem; + } + + .more_text { + text-align: center; + + } + + .read { + + background-color: #BA1E68 ; + } + + + + .section-c { + font-size: 2.5rem; + color: white; + text-align: center; + background-color: #FC3C23; + height: auto; + padding: 15px; + margin: 0px 300px; + + } + + .img2 { + + border: 4px solid #FC3C23; + } + + + + + @media (max-width: 640px) { + + .encabezado { + display: grid; + grid-template-columns: 12fr; + } + + .slidemenu { + display: none; + } + + .menu-ham{ + display: flex; + align-items: center; + justify-content: center; + } + + + } + + @media (min-width: 641px){ + .mobile-menu { + display: none; + } + + .menu-ham{ + display: none; + } + } \ No newline at end of file diff --git a/icons/icon_menu.svg b/icons/icon_menu.svg new file mode 100644 index 0000000..8dc7898 --- /dev/null +++ b/icons/icon_menu.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/icon_menu1.svg b/icons/icon_menu1.svg new file mode 100644 index 0000000..5b375ee --- /dev/null +++ b/icons/icon_menu1.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/asteroide.png b/img/asteroide.png new file mode 100644 index 0000000..26b8722 Binary files /dev/null and b/img/asteroide.png differ diff --git a/img/imagen-2.webp b/img/imagen-2.webp new file mode 100644 index 0000000..fa7b82f Binary files /dev/null and b/img/imagen-2.webp differ diff --git a/img/imagen.jpg b/img/imagen.jpg new file mode 100644 index 0000000..551521d Binary files /dev/null and b/img/imagen.jpg differ diff --git a/img/logo_jump-force.png b/img/logo_jump-force.png new file mode 100644 index 0000000..c7c8529 Binary files /dev/null and b/img/logo_jump-force.png differ diff --git a/img/logo_jumpforce.png b/img/logo_jumpforce.png new file mode 100644 index 0000000..21ad516 Binary files /dev/null and b/img/logo_jumpforce.png differ diff --git a/img/logo_prospercity.png b/img/logo_prospercity.png new file mode 100644 index 0000000..4c59bdb Binary files /dev/null and b/img/logo_prospercity.png differ diff --git a/img/periodico.png b/img/periodico.png new file mode 100644 index 0000000..aadca39 Binary files /dev/null and b/img/periodico.png differ diff --git a/img/top-circle.svg b/img/top-circle.svg new file mode 100644 index 0000000..0c4a24b --- /dev/null +++ b/img/top-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/js/main.js b/js/main.js index db67841..c90fc9d 100644 --- a/js/main.js +++ b/js/main.js @@ -1,7 +1,50 @@ +let mas_texto = document.getElementById("mas_texto"); +let leer = document.getElementById("leer"); + +let more_text = document.getElementById("more_text"); +let read = document.getElementById("read") + +leer.addEventListener("click", toggleText1); +read.addEventListener("click", toggleText2); + +function toggleText1() { + mas_texto.classList.contains("show"); + if(mas_texto.classList.toggle("show")){ + leer.innerHTML = "Leer Menos" + }else { + leer.innerHTML = "Leer Mas" + } + +} + +function toggleText2() { + more_text.classList.contains("show"); + if(more_text.classList.toggle("show")){ + read.innerHTML = "Read Less" + }else { + read.innerHTML = "Read More" + } +} + + + function changeColor(newColor) { const elem = document.getElementById('para'); elem.style.color = newColor; - } +} + + +const menuHamIcon=document.querySelector('.menu-ham'); +const mobileMenu=document.querySelector('.mobile-menu'); + + +menuHamIcon.addEventListener('click', toggleMobileMenu); +mobileMenu.addEventListener('click', toggleMobileMenu); + +function toggleMobileMenu(){ + + mobileMenu.classList.toggle('inactive'); +} let firstHeading = document.querySelector('h1');