-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
211 lines (201 loc) · 11.7 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Primer Servicio</title>
<meta name="description" content="Pagina web sobre Tenis">
<meta name="keywords" content="Tenis">
<meta name="author" content="japoveda10">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="shortcut icon" href="favicon.ico" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/imageMapResizer.min.js"></script>
<script src="js/main.js"></script>
</head>
<body id="miPagina" data-spy="scroll" data-target=".navbar" data-offset="60">
<!-- NAVBAR -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="logoPS" class="navbar-brand" href="#miPagina">PS</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#sobreNosotros">SOBRE NOSOTROS</a></li>
<li><a href="#porqueJugar">PORQUE JUGAR</a></li>
<li><a href="#queNecesito">QUE NECESITO</a></li>
<li><a href="#comoJugar">COMO JUGAR</a></li>
<li><a href="#dondeJugar">DONDE JUGAR</a></li>
</ul>
</div>
</div>
</nav>
<!-- JUMBOTRON -->
<div class="jumbotron text-center">
<h1>Primer Servicio</h1>
<p>Dale una oportunidad al tenis</p>
</div>
<!-- SOBRE NOSOTROS -->
<div id="sobreNosotros" class="container-fluid">
<div class="row">
<div class="col-sm-7 welcomeMessage">
<h2 class="titulo">Bienvenido</h2>
<p class="parrafo">Primer Servicio no pretende que te conviertas en un super fanático al tenis,
pero que sí le des una oportunidad!
</p>
<p class="parrafo">El vídeo de la derecha no fue creado por el autor de esta página web. El vídeo fue publicado por <a href="https://www.youtube.com/user/2pauloedu">paulo eduardo</a> y está disponible en <a href="https://www.youtube.com/watch?v=Xt7xZiXvB20">este enlace de YouTube</a>.
</p>
</div>
<div class="col-sm-5 welcomeVideo">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/Xt7xZiXvB20" allowfullscreen>
</iframe>
</div>
</div>
</div>
<!-- PORQUE JUGAR -->
<div id="porqueJugar" class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span><img src="images/tennis_ball.png" alt="pelota de tenis" height="150" width="150"/></span>
</div>
<div class="col-sm-8">
<h2 class="titulo">¿Porqué jugar al tenis?</h2>
<ol>
<li class="parrafo">Ayuda a quemar grasas y mejorar salud cardiovascular</li>
<li class="parrafo">Mejora la coordinación</li>
<li class="parrafo">Reduce el estrés</li>
<li class="parrafo">Se puede jugar a cualquier edad</li>
<li class="parrafo">Los implementos deportivos para jugar no son costosos</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-8">
<button id="masBeneficios" class="btn btn-lg" type="button" onclick="window.open('https://www.eltiempo.com/deportes/tenis/beneficios-para-la-salud-fisica-y-mental-de-jugar-tenis-220506')">Ver más</button>
</div>
</div>
</div>
<!-- QUE NECESITO -->
<div id="queNecesito" class="container-fluid">
<div class="text-center">
<h2 class="titulo">¿Qué necesito para jugar?</h2>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Raqueta</h1>
</div>
<div class="panel-body">
<img src="images/tennis_racquet.png" alt="raqueta de tenis azul" height="200" width="200"/>
</div>
<div class="panel-footer">
<button class="btn btn-lg" onclick="window.open('http://www.tenniswarehouse-europe.com/TennisRackets.html')">Buscar raquetas</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Ropa deportiva</h1>
</div>
<div class="panel-body">
<img src="images/tennis_player.jpg" alt="jugador de tenis vestido de blanco" height="200" width="150"/>
</div>
<div class="panel-footer">
<button class="btn btn-lg" onclick="window.open('http://www.tenniswarehouse-europe.com/equipment.html')">Buscar ropa deportiva</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Agua</h1>
</div>
<div class="panel-body">
<img src="images/water_bottle.png" alt="botella de agua" height="200" width="150"/>
</div>
<div class="panel-footer">
<button class="btn btn-lg" onclick="window.open('https://www.nutriresponse.com/blog/nutricion-deportiva-para-tenis/')">Dieta de un tenista</button>
</div>
</div>
</div>
</div>
</div>
<!-- COMO JUGAR -->
<div id="comoJugar" class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-12 text-center">
<h2 class="titulo">¿Cómo jugar?</h2>
<p class="parrafo">Dale click a las partes de la cancha para aprender sobre ellas.<p>
<img src="images/tennis_court.png" alt="cancha de tenis" usemap="#mapacancha" width="100%" height="400">
<map id="mapacancha" name="mapacancha">
<area id="malla" shape="rect" coords="293,495,983,574" data-toggle="popover" title="Malla" data-placement="top" data-content="Su altura es de 0,914m">
<area shape="poly" coords="418,326,216,903,313,898,462,326" data-toggle="popover" title="Corredor de dobles" data-placement="top" data-content="Si juegas la modalidad de sencillos, las pelotas que caigan en ésta zona son malas. Pero si juegas la modalidad de dobles, las pelotas que entren a ésta zona son buenas">
<area shape="poly" coords="782,326,932,903,1041,903,836,327" data-toggle="popover" title="Corredor de dobles" data-placement="top" data-content="Si juegas la modalidad de sencillos, las pelotas que caigan en ésta zona son malas. Pero si juegas la modalidad de dobles, las pelotas que entren a ésta zona son buenas.">
<area shape="poly" coords="439,410,417,492,821,488,801,412" data-toggle="popover" title="Cuadros de saque" data-placement="top" data-content="Si estás sirviendo, tu pelota tiene que entrar en el cuadro diagonal a donde te pares.">
<area shape="poly" coords="398,576,354,755,890,755,846,578" data-toggle="popover" title="Cuadros de saque" data-placement="top" data-content="Si estás sirviendo, tu pelota tiene que entrar en el cuadro diagonal a donde te pares.">
<area shape="rect" coords="460,317,788,339" data-toggle="popover" title="Linea de fondo" data-placement="top" data-content="Normalmente a los jugadores les gusta posicionarse sobre ésta zona para jugar.">
<area shape="rect" coords="306,892,950,908" data-toggle="popover" title="Linea de fondo" data-placement="top" data-content="Normalmente a los jugadores les gusta posicionarse sobre ésta zona para jugar.">
</map>
</div>
</div>
<div class="row text-center">
<p class="parrafo">Si quieres aprender más sobre cómo jugar tenis, visita <a href="http://es.wikihow.com/jugar-tenis" target="_blank">ésta página</a></p>
</div>
</div>
<!-- DONDE JUGAR -->
<div id="dondeJugar" class="container-fluid">
<div class="text-center">
<h2 class="titulo">¿Dónde jugar?</h2>
</div>
<div class="row text-center">
<p id="instruccionesDondeJugar" class="parrafo">Selecciona tu ciudad:</p>
</div>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Bogotá</a></li>
<li><a data-toggle="tab" href="#menu1">Medellín</a></li>
<li><a data-toggle="tab" href="#menu2">Cali</a></li>
<li><a data-toggle="tab" href="#menu3">Pereira</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<p class="parrafo text-center parrafoMapa">Para más información, visita la página de la <a href="https://www.ligadetenisdebogota.com/" target="_blank"> Liga de Tenis de Bogotá</a></p>
<iframe id="mapaBogota" src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d31813.765235256746!2d-74.07972545100591!3d4.643836319810645!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1stenis+de+campo+bogota!5e0!3m2!1ses!2ses!4v1503454788433" width="100%" height="450" style="border:0" allowfullscreen></iframe>
</div>
<div id="menu1" class="tab-pane fade">
<p class="parrafo text-center parrafoMapa">Para más información, visita la página de la <a href="http://www.lattenis.com/" target="_blank"> Liga Antioqueña de Tenis de Campo</a></p>
<iframe id="mapaMedellin" src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d38972.91316502933!2d-75.60371005843058!3d6.246172870672464!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sliga+de+tenis+medellin!5e0!3m2!1ses!2ses!4v1503531883799" width="100%" height="450" style="border:0" allowfullscreen></iframe>
</div>
<div id="menu2" class="tab-pane fade">
<p class="parrafo text-center parrafoMapa">Para más información, visita la página de la <a href="https://es-la.facebook.com/Liga-Vallecaucana-de-Tenis-De-Campo-1691899034433186/" target="_blank"> Liga Vallecaucana de Tenis de Campo</a></p>
<iframe id="mapaCali" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3982.6963299349713!2d-76.53771178580394!3d3.423941897507812!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e30a6bd61938ad9%3A0xf77f453f4e4f3cdb!2sLiga+Vallecaucana+de+Tenis!5e0!3m2!1ses!2ses!4v1503531940268" width="100%" height="450" style="border:0" allowfullscreen></iframe>
</div>
<div id="menu3" class="tab-pane fade">
<p class="parrafo text-center parrafoMapa">Para más información, visita la página de la <a href="https://es-la.facebook.com/liritenis" target="_blank"> Liga Risaraldense de Tenis</a></p>
<iframe id="mapaPereira" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1017940.5503775867!2d-75.52446040821542!3d4.712572066658769!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e387a4b2f4675f5%3A0x17905f7e4591d970!2sClub+Campestre+Pereira!5e0!3m2!1ses!2ses!4v1503532030203" width="100%" height="450" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="container-fluid text-center">
<a href="#miPagina" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p>Website made by <a href="https://www.github.com/juliopovedacs" target="_blank">juliopovedacs</a></p>
</footer>
</body>
</html>