-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
243 lines (221 loc) · 18 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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Porquería que requiere el navegador de microsoft -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css"> <!-- Hoja de estilo local -->
<!-- Estas dos líneas cargando "dependencias" son necesarias para el consumo de la API de leaflet (mapa) -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<title>Degustaciones Gourmet</title> <!-- Texto que aparece en la pestaña del navegador -->
<link rel="icon" type="image/x-icon" href="images/fast-food_invertido.png"> <!-- Ícono que aparece en la pestaña del navegador -->
</head>
<body>
<!-- Se crean dos contenedores <div> uno llamado 'frente' y otro llamado 'fondo' -->
<!-- 'frente' contiene todo el documento visible como se tendría siempre... pero con algunas transparencias -->
<!-- Lo cierto es que hasta casi último momento toda la web se diseñó con el contenido de 'frente' directamente puesto en body -->
<!-- Pero luego se agregó un 'fondo' que contiene un vídeo que se carga con un iframe -->
<div id="frente">
<!-- En el .css se configura todo para dejar header y footer fijos -->
<header>
<div id="logo"> <!-- El título y una pequeña leyenda constituyen una especie de "logo" -->
<h1 class="titulos" id="tituloEncabezado"> <!-- Única etiqueta h1 representa el nombre de la página -->
Pampa y la vía
</h1>
<div id="leyendaEncabezado">
<p id="textoEncabezado">Un lugar que sí existe</p>
<img id="iconoEncabezado1" src="images/restaurant_invertido.png"> <!-- Ícono descargado de flaticon-->
<img id="iconoEncabezado2" src="images/fast-food_invertido.png"> <!-- Ícono descargado de flaticon-->
</div>
</div>
<nav class="navegadoras" id="navegadoraPrincipal">
<button onClick="saltar('pagina1')">Inicio</button>
<button onClick="saltar('pagina2')">Presentación</button>
<button onClick="saltar('pagina3')">Ubicación</button>
<button onClick="saltar('pagina4')">Reserva</button>
</nav>
</header>
<main> <!-- El contenido principal del este sitio -->
<section id="filaDePaginas">
<section class="paginas" id="pagina1">
<h2 class="titulos" id="titulo1">
¡Bienvenid@! <!-- No, no, no... No es lenguaje inclusivo, es jerga de foros de los años 200X -->
</h2>
<article class="articulos" id="articulo1">
<!--<p>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</p>-->
<p>Sentite como en casa pero con la atención más distinguida</p>
<p>Nos honraría que recorrieses nuestro sitio y nos conocieras mejor</p>
</article>
<nav class="navegadoras" id="navegadoraPagina1">
<p>Disfrutá la experiencia</p>
<div>
<button onClick="deslizar('avanzar')">Comenzar</button>
</div>
</nav>
</section>
<section class="paginas" id="pagina2">
<h2 class="titulos" id="tituloPagina2">
¿Quiénes somos?
</h2>
<article class="articulos" id="articulo2">
<p> Somos un conjunto de emprendedores con una pasión por el buen gusto culinario. Nuestro objetivo es deleitar tu paladar con los más refinados platos de la alta cocina callejera y chatarra. Vos te lo merecés, vos lo querés, vos lo necesitás. Nosotros te lo proveemos.</p>
<div id="album">
<img class="fotos" id="foto1" src="images/vista-frontal-hamburguesa-stand.jpg">
<img class="fotos" id="foto2" src="images/bodegon-deliciosa-hamburguesa-americana.jpg">
<img class="fotos" id="foto3" src="images/captura-pantalla-cocinero-que-coloca-tocino-frito-sobre-rebanada-queso-mientras-prepara-hamburguesa.jpg">
<img class="fotos" id="foto4" src="images/sandwich-grande-varios-tipos-carne-maiz-algunas-hamburguesas-alrededor.jpg">
<img class="fotos" id="foto5" src="images/vista-frontal-mujer-comiendo-hamburguesas-carne.jpg">
<img class="fotos" id="foto6" src="images/tendir-doner-pollo-mesa.jpg">
<img class="fotos" id="foto7" src="images/tipos-sandwich-mixto-varios-alimentos-tabla-madera.jpg">
<img class="fotos" id="foto8" src="images/arreglo-deliciosos-hot-dogs.jpg">
<img class="fotos" id="foto9" src="images/vista-frontal-hot-dog-fondo-negro-espacio-copia.jpg">
<img class="fotos" id="foto10" src="images/hot-dog-alta-vista-encurtidos-patatas-fritas.jpg">
</div>
</article>
<nav class="navegadoras" id="navegadoraPagina2">
<button onClick="deslizar('retroceder')">Previo</button>
<button onClick="deslizar('avanzar')">Siguiente</button>
</nav>
</section>
<section class="paginas" id="pagina3">
<h2 class="titulos" id="tituloPagina3">
Ubicación
</h2>
<article class="articulos" id="articulo3">
<p id="parrafo3">
¿No lo podés creer? ¡Pero es así!. Luego de conocernos vas a decirle a todos que Pampa y la vía es un lugar que sí existe. Nos encontramos ubicados en un punto clave y exclusivo de la ciudad de Mar del Plata. Justo justito en la calle <em>La Pampa</em>, sobre los rieles de un ramal abandonado, frente a la entrada de la estación ferroautomora. El mejor puesto improvisado, no registrado, ilegal y callejero de la ciudad. Aprovechá a visitarnos antes que nos corran. ¡Vos te lo merecés!
</p>
<div id="mapaUbicacion"></div> <!-- Acá va mapa con locación de la empresa, insertado con código javascript -->
</article>
<nav class="navegadoras" id="navegadoraPagina3">
<div>
<button onClick="deslizar('retroceder')">Previo</button>
<button onClick="deslizar('avanzar')">Siguiente</button>
</div>
</nav>
</section>
<section class="paginas" id="pagina4">
<h2 class="titulos" id="tituloPagina4">
Reservá antes que nadie
</h2>
<article class="articulos" id="articulo4">
<form action="mailto:[email protected]" method="post" enctype="text/plain" target="_blank" id="formulario">
<!-- Curioso, Chrome y Firefox agregan 5 espacios al especificado por "size" -->
<!-- Restando esa cantidad a la usada en maxlength quedan iguales -->
<div>
<label for="nombreInput">(*) Tu nombre: </label>
<input type="text" size="20" maxlength="25" name="nombre" id="nombreInput">
</div>
<div>
<p id="preguntaPlato">(*) ¿Qué plato base desearías degustar?: </p>
<input type="radio" name="plato" id="plato1" class="platos" value="Pancho">
<label for="plato1">Pancho Clásico - XX$</label><br>
<input type="radio" name="plato" id="plato2" class="platos" value="Moby Dick">
<label for="plato2">Pancho Moby Dick - XX$</label><br>
<input type="radio" name="plato" id="plato3" class="platos" value="Hamburguesa">
<label for="plato3">Hamburguesa Clásica - XX$</label><br>
<input type="radio" name="plato" id="plato4" class="platos" value="Rueda de tractor">
<label for="plato4">Hamburguesa "Rueda de tractor" - XX$</label><br>
<input type="radio" name="plato" id="plato5" class="platos" value="Pollo">
<label for="plato5">Sandwich de Pollo - XX$</label><br>
<input type="radio" name="plato" id="plato6" class="platos" value="Bondiola">
<label for="plato6">Sandwich de Bondiola - XX$</label><br>
<input type="radio" name="plato" id="plato7" class="platos" value="Lomo">
<label for="plato7">Sandwich de Lomo - XX$</label>
</div>
<div>
<p id="preguntaPotenciado">¿Quizás desearías acompañar tu plato con un "potenciador"?: </p>
<input type="checkbox" name="potenciador" id="potenciador1" value="Vegano">
<label for="potenciador1">Pepinillos+Morrón - XX$</label><br>
<input type="checkbox" name="potenciador" id="potenciador2" value="Suave">
<label for="potenciador2">Jamón+Queso - XX$</label><br>
<input type="checkbox" name="potenciador" id="potenciador3" value="Power">
<label for="potenciador3">Cebolla+Panceta+Huevo - XX$</label>
</div>
<div>
<p id="preguntarMultiplicador">¿Sos de buen apetito? permitinos sugerirte un multiplicador (de cantidad y precio): </p>
<input type="radio" name="multiplicador" id="multiplicador1" value="x1" checked>
<label for="multiplicador1">Simple</label><br>
<input type="radio" name="multiplicador" id="multiplicador2" value="x2">
<label for="multiplicador2">Duplicar</label><br>
<input type="radio" name="multiplicador" id="multiplicador3" value="x3">
<label for="multiplicador3">Triplicar</label>
</div>
<div>
<p id="preguntarHorario">(*) ¿A qué horario pensás arribar al establecimiento?: </p>
<input type="radio" name="horario" id="horario1" class="horarios" value="turno 1">
<label for="horario1">11:00-11:30</label><br>
<input type="radio" name="horario" id="horario2" class="horarios" value="turno 2">
<label for="horario2">11:30-12:00</label><br>
<input type="radio" name="horario" id="horario3" class="horarios" value="turno 3">
<label for="horario3">12:00-12:30</label><br>
<input type="radio" name="horario" id="horario4" class="horarios" value="turno 4">
<label for="horario4">12:30-13:00</label>
</div>
<div>
<p id="preguntaPago">(*) ¿Por cuál medio de pago preferirías abonar? </p>
<input type="radio" name="medioDePago" id="medioDePago1" class="mediosDePago" value="solo-efectivo">
<label for="medioDePago1">Efectivo</label><br>
<input type="radio" name="medioDePago" id="medioDePago2" class="mediosDePago" value="solo-efectivo">
<label for="medioDePago2">Cash</label><br>
<input type="radio" name="medioDePago" id="medioDePago3" class="mediosDePago" value="solo-efectivo">
<label for="medioDePago3">Físico</label>
</div>
<div>
<p id="preguntaPeticiones">Consideraciones especiales: </p>
<textarea name="peticiones" rows="2" cols="50" maxlength="60" id="peticionesInput">Ninguna</textarea>
</div>
<div>
<input type="submit" value="Enviar reserva" id="botonReserva">
</div>
</form>
</article>
<nav class="navegadoras" id="navegadoraPagina4">
<div>
<button onClick="deslizar('retroceder')">Previo</button>
</div>
</nav>
</section>
</section>
</main>
<footer>
<p id="reconocimientos">Esta web utiliza los siguientes assets:
<a href="https://www.flaticon.com/free-icons/restaurant" title="restaurant icons">Restaurant icons created by Freepik - Flaticon</a>;
<a href="https://www.flaticon.com/free-icons/fast-food" title="fast food icons">Fast food icons created by Smashicons - Flaticon</a>;
Vídeo <a href="https://youtu.be/uMktbiDm8x8">"Hamburguesa Paro Cardiaco!" - YouTube</a>;
Copyright 2010 The Lobster Project Authors (<a href="https://github.com/impallari/The-Lobster-Font">Fuentes Lobster</a>), with Reserved Font Name "Lobster";
Autores varios, imágenes de Freepik (
<a href="https://www.freepik.es/foto-gratis/tipos-sandwich-mixto-varios-alimentos-tabla-madera_5543017.htm#page=2&query=hot%20dog&position=20&from_view=search&track=ais">1</a>,
<a href="https://www.freepik.es/foto-gratis/vista-frontal-hot-dog-fondo-negro-espacio-copia_10102456.htm#page=2&query=hot%20dog&position=31&from_view=search&track=ais">2</a>,
<a href="https://www.freepik.es/foto-gratis/sandwich-grande-varios-tipos-carne-maiz-algunas-hamburguesas-alrededor_17234089.htm#page=2&query=hot%20dog&position=47&from_view=search&track=ais">3</a>,
<a href="https://www.freepik.es/foto-gratis/tendir-doner-pollo-mesa_6285309.htm#page=3&query=hot%20dog&position=19&from_view=search&track=ais">4</a>,
<a href="https://www.freepik.es/foto-gratis/bodegon-deliciosa-hamburguesa-americana_31051708.htm#page=2&query=hamburger&position=43&from_view=search&track=sph">5</a>,
<a href="https://www.freepik.es/foto-gratis/captura-pantalla-cocinero-que-coloca-tocino-frito-sobre-rebanada-queso-mientras-prepara-hamburguesa_27573241.htm#query=hamburger&position=29&from_view=search&track=sph">6</a>,
<a href="https://www.freepik.es/foto-gratis/vista-frontal-mujer-comiendo-hamburguesas-carne_9593137.htm#query=hamburger&position=11&from_view=search&track=sph">7</a>,
<a href="https://www.freepik.es/foto-gratis/vista-frontal-hamburguesa-stand_9523079.htm#query=hamburger&position=0&from_view=search&track=sph">8</a>,
<a href="https://www.freepik.es/foto-gratis/hot-dog-alta-vista-encurtidos-patatas-fritas_10102918.htm#query=hot%20dog&position=43&from_view=search&track=ais">9</a>,
<a href="https://www.freepik.es/foto-gratis/arreglo-deliciosos-hot-dogs_21744888.htm#query=hot%20dog&position=5&from_view=search&track=ais">10</a>
).
<!--Realmente la fuente la descargué de https://fonts.google.com/specimen/Lobster pero en la documentación decía eso-->
</p>
</footer>
</div>
<div id="fondo"> <!-- Un fondo con un video, termina de configurarse en la hoja de estilo -->
<!-- Con esta configuración el video comienza (autoplay), mudo, sin controles -->
<!-- Está en bucle y la 1ra vez reproduce un fragmento particular pero no tiene soporte para hacer bucle solo del fragmento -->
<!-- Eso podría refinarse vía java script (pero acá yo no lo he implementado) -->
<iframe
id="videoFondo"
src="https://www.youtube.com/embed/uMktbiDm8x8?loop=1&playlist=uMktbiDm8x8&start=215&end=479&autoplay=1&mute=1&controls=0"
frameBorder="0"
allowFullScreen
allow="autoplay">
</iframe>
</div>
<!--El script se coloca acá, al final,
por que en este define una constante que depende de la clase "paginas".
Parece que esa definición no se puede hacer antes que dicha clase exista-->
<script src="js/script.js"></script>
</body>
</html>