Skip to content

Santiago #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 36 commits into
base: main
Choose a base branch
from
Open

Santiago #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
41e838c
Creamos la rama
Santy149 Oct 1, 2022
2f02189
Primeros cambios realizados en el area del Asteroide
Santy149 Oct 1, 2022
7f45436
Cambio basico al titulo Noticias
Santy149 Oct 1, 2022
054fae7
Primeros cambios en css de rama desarrollo_luis
LuisGomezTrujillo Oct 1, 2022
62c0d6f
Colores encabezados
LuisGomezTrujillo Oct 1, 2022
4f315b7
Se agregaron cambios a los archivos EjemploDOM.html y estilos.css
Jeisonlopez259911 Oct 2, 2022
bd82c90
Nav y head azul, padding 25px, Font Rubik
LuisGomezTrujillo Oct 3, 2022
d7ebd8f
Estilos con Font Rubik
LuisGomezTrujillo Oct 3, 2022
b5fbf3e
Realizando cambios basicos
Santy149 Oct 3, 2022
b63e159
Cambio de color a los 2 titulos con js
LuisGomezTrujillo Oct 3, 2022
65b9e97
Se agregaron nuevos cambios a los archivos EjemploDOM.html, estilos.…
Jeisonlopez259911 Oct 4, 2022
bf82bc4
Merge pull request #1 from LuisGomezTrujillo/desarrollo_luis
LuisGomezTrujillo Oct 4, 2022
d349f41
se hicieron nuvos cambios a la pagina y se agreagaron imagenes
Jeisonlopez259911 Oct 5, 2022
62bad8a
Se agrego nuevos parrafos con texto a las noticias y se agrego un ico…
Jeisonlopez259911 Oct 5, 2022
3436142
Se agregaron nuevos cambios en las imagenes
Jeisonlopez259911 Oct 5, 2022
077ce2d
Se modifico el footer
Jeisonlopez259911 Oct 5, 2022
40d29e6
Corrigiendo gran problema, se me borro todo el proceso y se monta nue…
Santy149 Oct 5, 2022
6b72171
Proceso casi terminedo, solo falta el footer
Santy149 Oct 6, 2022
6517853
Se agrego logo, falta footer
Santy149 Oct 6, 2022
aef860c
Antes de realizar pruebas con el push
Santy149 Oct 6, 2022
d7ede6c
Se agrego un nuevo cambio
Jeisonlopez259911 Oct 6, 2022
1c6f397
Listo para hacer el push
Santy149 Oct 6, 2022
52d9b16
Agregado logo menu mobile y media querys
LuisGomezTrujillo Oct 10, 2022
89b69a2
Agregada carpeta de iconos con icono de menu hamburgesa
LuisGomezTrujillo Oct 10, 2022
5781888
Funciones js para responsive menu-mobile y menu-ham, cambio JumpForce…
LuisGomezTrujillo Oct 10, 2022
3e29645
Sin estilos de background color mediante comentario de código
LuisGomezTrujillo Oct 10, 2022
f49a239
Sin estilos en menu-mobile
LuisGomezTrujillo Oct 10, 2022
18a9eac
Merge branch 'main' of https://github.com/LuisGomezTrujillo/DOM_Javas…
LuisGomezTrujillo Oct 10, 2022
aa7cea8
Quitado backgraund-color del menu de navegacion
LuisGomezTrujillo Oct 10, 2022
4299296
Quitado backgraund-color del menu de navegacion y color a iconos
LuisGomezTrujillo Oct 10, 2022
a959448
Se agregó´contenido al footer con texto, enlace al repositorio y logo…
LuisGomezTrujillo Oct 11, 2022
4dae29e
Merge branch 'develop' of https://github.com/LuisGomezTrujillo/DOM_Ja…
LuisGomezTrujillo Oct 11, 2022
2e1e8db
Primer commit
Santy149 Oct 12, 2022
e1ac37b
Merge branch 'develop' of https://github.com/LuisGomezTrujillo/DOM_Ja…
Santy149 Oct 12, 2022
0d25923
Se agregaron los estilos de la nasa
Santy149 Oct 20, 2022
3cd7543
Merge branch 'santiago' into santiago
Santy149 Oct 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 161 additions & 11 deletions EjemploDOM.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,21 @@
<html lang="en">
<head>
<title>Practica Javacript Prospercity</title>
<link rel="shortcut icon" href="#">
<link rel="shortcut icon" href="./img/periodico.png">
<link rel="stylesheet" href="css/estilos.css">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;900&display=swap" rel="stylesheet">

</head>
<body>

<header>
<div class="logo-menu-ham">
<img src="./img/logo_jumpforce.png" class="logo" alt="Logo Jump Force" >
<img src="./icons/icon_menu.svg" alt="menu" class="menu-ham">
</div>

<header class="header">

<nav class="slidemenu">

<!-- Item 1 -->
Expand All @@ -32,42 +42,182 @@
<div class="bar"></div>
</div>

</nav>
</nav>

<div class="mobile-menu inactive">
<ul>
<li>
<a href="/">HOME</a>
</li>
<li>
<a href="/">About</a>
</li>
<li>
<a href="/">Folio</a>
</li>
<li>
<a href="/">Blog</a>
</li>
</ul>
</div>

</header>
<main>

<main class="principal">
<h1>Bienvenidos a las noticias</h1>



<div class="container">
<section class="section-a">
<h2>
<h2 id="titulo1">
Hubble y Webb capturan el momento en el que misión de la NASA impacta contra un asteroide
</h2>
<img class="img" id="img" src="./img/imagen.jpg" alt="Es una imagen">
<p>

<main>
<div class="divTitleGeneral">
<div class="imgGeneral">
<img src="./img/logo_jump-force.png" alt="">
</div>
<div class="titleGeneral">
<h1 >Bienvenidos a las noticias</h1>
</div>
</div>

<nav >
<ol class="nav">
<li><button> <a href="https://www.lapatria.com/">Principales</a> </button></li>
<li><button> <a href="https://www.lapatria.com/nacional">Nacionales</a> </button></li>
<li><button> <a href="https://www.lapatria.com/politica">Política</a> </button></li>
<li><button> <a href="https://www.lapatria.com/tecnologia">Tecnología</a> </button></li>
</ol>
</nav>

<div >
<section>
<div class="container">
<div class="tituloDerecha">
<div class="h2-a">
<h2 >
Hubble y Webb capturan el momento en el que misión de la NASA impacta contra un asteroide
</h2>
</div>
</div>
<div class="divText-a">
<p class="text-a">

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="clasButtoma">
<button class="buttoma">Leer Mas</button>
</div>
</p>
<button>Leer Mas</button>

<div class="mas_texto" id="mas_texto">
<p>
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.
</p>
<p>
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.
</p>
</div>
<button class="leer" id="leer">Leer Mas</button>

</div>
</div>


</section>


<section class="section-b">
<h2>

<h2 id="titulo2">
Explotarlos vs. desviarlos: ¿qué opciones existen para evitar que un asteroide choque con la Tierra?
</h2>
<p>

<p class="parrafoSectionB">

<div class="h2-b">
<h2 >
Explotarlos vs. desviarlos: ¿qué opciones existen para evitar que un asteroide choque con la Tierra?
</h2>
</div>
<div class="container-b">
<div class="divText">
<p class="text-b">

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.

</p>
<button>Read More</button>
<div class="more_text " id="more_text">
<img class="img2" id="img2" src="./img/imagen-2.webp" alt="Es una imagen">
<p class="parrafoMore1">
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.
</p>
<p class="parrafoMore2">
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.
</p>
</div>
<button class="read" id="read">Read More</button>
</section>
<section class="section-c">
<p id="para">Cualquier texto que cambiará de color</p>
<button onclick="changeColor('blue');">Azul</button>
<button onclick="changeColor('red');">Rojo</button>
<p id="para" class="para">Cualquier texto que cambiará de color</p>
<button class="blue" onclick="changeColor('blue');">Azul</button>
<button class="red" onclick="changeColor('red');">Rojo</button>

</p>
</div>
<div class="imgAsteroide">
<img class="imgAsteroide1" src="./img/asteroide.png" alt="">
</div>
</div>

<div class="clasButtomb">
<button class="buttomb">Read More</button>
</div>




</section>
<section class="section-c">

<div id="para">
<p class="textFooter">Este texto cambiará a el colo que tu escojas</p>

<button class="button1 buttonFooter" onclick="changeColor('blue');">Azul</button>
<button class="button2 buttonFooter" onclick="changeColor('white');">Blanco</button>
<button class="button3 buttonFooter" onclick="changeColor('yellow');">Amarillo</button>

</div>


</section>

</div>
</main>

<script src="js/main.js"></script>
<footer class="footer">
<div>
<ul class="ul">
<li><a href="https://github.com/LuisGomezTrujillo/DOM_Javascript">Repositorio Manipulación del DOM con Javacript</a></li>
<li>Equipo JumpForce</li>
<li><a href="https://www.prospercity.co/">Prospercity</a> Cohorte 3</li>
<li>2022</li>
</ul>
</div>
<div>
<img src="./img/logo_prospercity.png" alt="Logo Prospercity" class="logo">
</div>

</footer>
</body>
</html>
Loading