Blockmaker-StackBlitz/index.html at main · ElWaje/Blockmaker-StackBlitz · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="styles.css" />
  <title>Mi Primera Página HTML</title>
</head>
<body>
  <header>
    <h1>Bienvenido a mi primera página HTML</h1>
    <audio id="audio" src="https://www.royaltyfreemusicclips.com/pir/libs/media/Walking_Music_1.wav" loop></audio>
    <div id="audio-controls">
      <button id="play-button">Play</button>
      <button id="pause-button">Pause</button>
      <input id="volume-control" type="range" min="0" max="1" step="0.1" value="1">
    </div>
  </header>
  <nav>
    <button type="button" id="nav-index" class="nav-actual" onclick="window.location.href = 'index.html';">Inicio</button>
    <button type="button" id="nav-seccion1" class="nav-button">Sección 1</button>
    <button type="button" id="nav-seccion2" class="nav-button">Sección 2</button>
    <button type="button" id="nav-page2" class="nav-button" onclick="window.location.href = 'page2.html';">Página 2</button>
  </nav>
  <main>
    <div class="secciones-container">
      <section id="seccion1" class="seccion seccion-oculta">
        <div class="contenido">
          <h2>Sección 1</h2>
          <div class="media-container">
            <p>Este es el contenido de la sección 1</p>
            <img src="seccion1.jpg" alt="Campillin" class="media">
            <video class="videoMedia" poster="seccion1.jpg" controls>
              <source src="seccion1.mp4" type="video/mp4">
            </video>
          </div>
        </div>
      </section>

      <div class="separador">
        <div class="separador-linea"></div>
      </div>

      <section id="seccion2" class="seccion seccion-oculta">
        <div class="contenido">
          <h2>Sección 2</h2>
          <div class="media-container">
            <p>Este es el contenido de la sección 2</p>
            <img src="seccion2.jpg" alt="Obra" class="media">
            <video class="videoMedia" poster="seccion2.jpg" controls>
              <source src="seccion2.mp4" type="video/mp4">
            </video>
          </div>
        </div>
      </section>
    </div>
    <div></div>
  </main>
  <footer>
    <div id="footer-container">
      <p id="footer-text">Derechos reservados &copy; 2023 Enrique Solís</p>
    </div>
  </footer>
  <script src="script.js"></script>
</body>
</html>