-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (145 loc) · 5.32 KB
/
index.html
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700|Poppins:300,400,500,700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/ffeacd7f28.js"></script>
<title>Fitness Gym</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header>
<div class="menu">
<div class="contenedor">
<p class="logo">Fitness Gym Home</p>
<i class="fas fa-bars menu-mobile"></i>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Pricing</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- INTRO -->
<section class="intro">
<div class="izquierda">
<p>BIGGER.FASTER.STRONGER</p>
<h1>DIVI FITNESS GYM</h1>
<a href="">GET STARTED TODAY</a>
</div>
<div class="derecha">
<div class="contenido">
<p>TRY A FREE 3 DAY GYM PASS</p>
<a href="">GET YOUR PASS</a>
</div>
</div>
</section>
<!-- PROGRAMS -->
<section class="programs">
<div class="contenedor">
<div class="rojo cero">0.000</div>
<div class="rojo ini">INITIATION FEE</div>
<h2>FEATURED PROGRAMS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
<a href="">ALL PROGRAMS</a>
<div class="contenedor-programs">
<div class="program" id="uno">
<h3>PERSONAL TRAINING</h3>
<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id</p>
</div>
<div class="program" id="dos">
<h3>PERSONAL TRAINING</h3>
<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id</p>
</div>
<div class="program" id="tres">
<h3>PERSONAL TRAINING</h3>
<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id</p>
</div>
</div>
</div>
</section>
<!-- VIDEO -->
<section class="video">
<div class="contenedor">
<video id="video" width="900px" height="700px" src="imagenes/video.mp4"></video>
<div class="botones">
<button id="boton" onclick="playVideo()">
<i class="far fa-play-circle"></i>
</button>
</div>
</div>
</section>
<!-- JOIN -->
<section class="join">
<div class="izquierda">
<a href="">JOIN NOW</a>
<img src="imagenes/izq.jpg" alt="" id="uno">
</div>
<div class="derecha">
<img src="imagenes/der1.jpg" alt="" id="dos">
<img src="imagenes/der2.jpg" alt="" id="tres">
</div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials">
<div class="contenedor">
<span class="comillas">"</span>
<h2>TESTIMONIALS</h2>
<a href="">JOIN THE MOVEMENT</a>
<div class="contenedor-testimonials">
<div class="testimonial">
<div class="contenido">
<div class="foto"></div>
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in”</p>
</div>
<p class="nombre">Marissa James</p>
</div>
<div class="testimonial">
<div class="contenido">
<div class="foto"></div>
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in”</p>
</div>
<p class="nombre">Marissa James</p>
</div>
</div>
</div>
</section>
<!-- CONTACTO -->
<section class="contacto">
<div class="izquierda">
<p>BIGGER.FASTER.STRONGER</p>
<h2>DIVINATION</h2>
<form action="">
<input type="text" placeholder="Nombre">
<input type="email" placeholder="Correo Electrónico">
<textarea placeholder="Mensaje"></textarea>
<input type="submit" value="SUBMIT">
</form>
</div>
<div class="derecha">
<div class="gym-hours">
<h3>GYM H0URS</h3>
<ul>
<li>Monday-Friday: 5am – 11pm</li>
<li>Monday-Friday: 5am – 11pm</li>
<li>Monday-Friday: 5am – 11pm</li>
</ul>
</div>
<div class="pass">
<h3>FREE 3 DAY GYM PASS</h3>
<a href="">GET STARTED</a>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="script/script.js"></script>
</body>
</html>