DOM_Javascript/EjemploDOM.html at main · isabel2000/DOM_Javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Practica Javacript Prospercity</title>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <header>
        <nav class="slidemenu">

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

            <!-- Bar -->
            <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>
                    Hubble y Webb capturan el momento en el que misión de la NASA impacta contra un asteroide
                </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.
                </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
                    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>
            </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>
            </section>
        </div>
    </main>
    <script src="js/main.js"></script>
</body>
</html>