HTML-FOR-JS/index.html at main · Niko21x/HTML-FOR-JS · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="Gym, Entrenamiento, Entrenamiento muscular, Entrenamiento libre, Entrenamiento casa, gym music">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/estilo.css">
    <link rel="shortcut icon" href="./images/Logo1.png" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <title>PowerGrooveFitness</title>
</head>
<body class="index">
    <div class="FONDO">
     <header class="header">
      <div class="logo-boton"> <!-- Logo a la izquierda -->
        <img src="./images/Logo1.png" alt="Logo">
        <h1 class="slogan_i">Vive como un Campeon</h1>
    </div>
    <div class="center-container">
      <nav class="navbar navbar-expand-lg navbar-dark bg-transparent"">
        <div class="container-fluid">
          <a class="navbar-brand" href="./index.html">Home</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <a class="nav-link active" aria-current="page" href="./Pages/e_pesas.html">E. Pesas</a>
              <a class="nav-link" href="./Pages/e_casa.html">E.Casa</a>
              <a class="nav-link" href="./Pages/e_libre.html">E.Libre</a>
              <a class="nav-link" href="./Pages/playlist.html">Playlist</a>
              <a class="nav-link" href="./Pages/p_frecuentes.html">P.Frecuentes</a>
              <a class="nav-link" href="./Pages/contacto.html">¿Quien Soy?</a>
            </div>
          </div>
        </div>
      </nav>
    </div>
    <img class="gohan" src="./images/gohan.jpg" alt="No Pain No Gain">
    </header>
    <div class="frase">
        <h1>READY FOR THE NEXT LEVEL</h1>
        <h2>NO HAY EXCUSAS</h2>
    </div>
    </div>
    <main>
      <!-- ------------Tarjetas--------------------------- -->
      <section>
      <div class="my-custom-font">
     <div class="grid-container">
        <div class="card card-1 c-p">
            <div class="imagen_personaje_1">
              <div class="detalle_1">
                <h2>Programa de Entrenamiento</h2>
                <p>En el camino del fitness, cada paso hacia tus metas demuestra tu determinación. Cada repetición, elección saludable y gota de sudor te acercan a tu mejor versión. Mantén viva tu pasión, visualiza tus objetivos y trabaja incansablemente. Eres el arquitecto de tu éxito en este desafiante viaje.</p>
                <div class="boton_extra1"><a href="./Pages/e_pesas.html"><h6>Leer Mas</h6></a></div>
              </div>
            </div>
        </div>
        <div class="card card-2 c-p">
            <div class="imagen_personaje_2">
              <div class="detalle_2">
                <h2>Playlist</h2>
                <p> ¿Sabías que el tipo de música que elijas durante ejercicios repetitivos está directamente relacionado con un incremento en tu rendimiento? La elección musical adecuada puede ser la chispa que impulse tus logros en tu Entrenamiento</p>
                <div class="boton_extra2"><a href="./Pages/playlist.html"><h6>Leer Mas</h6></a></div>
              </div>
            </div>
        </div>
        <div class="card card-3 c-p">

            <div class="imagen_personaje_3">
              <div class="detalle_3">
                <h2>Preguntas Frecuentes</h2>
                <p>En el viaje hacia el éxito en el fitness, las preguntas actúan como guías esenciales. Cada pregunta nos lleva un paso más cerca de comprender cómo lograr nuestros objetivos.  Desde la elección de rutinas hasta la dieta y suplementos, cada respuesta es una herramienta para el progreso. </p>
                <div class="boton_extra3"><a href="./Pages/p_frecuentes.html"><h6>Leer Mas</h6></a></div>
              </div>
            </div>
        </div>

      </div>
    </div>
  </section>
  <section>
    <div class="never_give_up">
      <img src="./images/never.jpg" alt="NEVER GIVE UP">
    </div>
  </section>
      <!-- ---------Final tarjetas------------------------ -->
    </main>
    <!-- ----------------Pie de pagina---------- -->
    <footer class="footer">
      <div class="contenedor">
        <div class="footer-row">
            <div class="footer-links">
                <h4 class="inicio">Inicio</h4>
                <ul class="animacion">
                    <li><a href="./index.html">Menu Principal</a></li>
                    <li><a href="./Pages/e_pesas.html">Entrenamiento con pesas</a></li>
                    <li><a href="./Pages/e_libre.html">Entrenamiento libre</a></li>
                    <li><a href="./Pages/e_casa.html">Entrenamiento En Casa</a></li>
                </ul>
            </div>
            <div class="footer-links">
                <h4 class="ayuda">Ayuda</h4>
                <ul class="animacion">
                    <li><a href="./Pages/p_frecuentes.html">Preguntas Frecuentes</a></li>
                    <li><a href="./Pages/contacto.html">¿Quien soy?</a></li>
                    <li><a href="./Pages/playlist.html">Playlist para Entrenamiento</a></li>
                    <li><a href="#">Experiencias</a></li>
                </ul>
            </div>
            <div class="footer-links">
                <h4 class="sigueme">Sigueme</h4>
                <div class="social-link">
                  <ul>
                    <a href="https://www.facebook.com/nicolas.lozano.9083"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                  </ul>
                  </div>
        </div>
    </div>
</footer>
</div>
    <!-- final pie de pagina------------------- -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
</body>
</html>