-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
369 lines (325 loc) · 22.2 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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Bienvenido a Unlock Me If You Can. Sumérgete en desafiantes juegos en nuestra variedad de salas temáticas. Reserva ahora y vive una aventura inolvidable con amigos y familiares.">
<link rel="icon" type="image/svg" href="img/Logo.svg">
<title>Unlock Me If You Can...</title>
<link rel="stylesheet" href="src/output.css">
<link rel="stylesheet" href="src/styles.css">
<link rel="stylesheet" href="src/modal-salas.css">
<link rel="stylesheet" href="src/form.css">
</head>
<body class="bg-background-color">
<header class="p-6 flex justify-between">
<nav id="nav" class="main-nav">
<ul class="nav-links">
<li class="link-item font-inter text-2xl font-bold"><a href="contacto.html" target="_blank">Contacto</a></li>
<li class="link-item font-inter text-2xl font-bold link-salas"><a href="salas.html" target="_blank">Nuestras salas</a></li>
<li class="link-item font-inter text-2xl font-bold"><a href="preguntas.html" target="_blank">Preguntas frecuentes</a></li>
</ul>
</nav>
<button id="button-menu" class="button-menu">
<span></span>
<span></span>
<span></span>
</button>
<a href="index.html" class="logo"><img src="img/Logo.svg" alt="llave como logo de Unlock Me If You Can"></a>
<div class="visible-nav">
<ul class="primary-light-10 flex justify-end text-primary-light-10">
<li class="border-accent p-1"><a href="regalo.html" target="_blank">Bono Regalo</a></li>
</ul>
</div>
</header>
<main>
<section class="bg-cover text-center">
<div class="capa-home h-screen ">
<img src="img/image-background.jpg" class="h-screen bg-cover background-home " alt="imagen de una sala de escape room">
<h1 class="text-accent-secondary font-bold font-title text-5xl md:text-7xl title-transition pt-28 md:pt-80 text-shadow pb-4">Unlock Me
<br>If You Can...</h1>
<p class=" text-primary-light-20 font-inter text-lg py-14 container mx-auto w-10/12">Si estás aquí, es porque estás listo
para
sumergirte en nuestros desafíos. <br>Prepárate para poner a prueba tus habilidades.</p>
<p class="font-inter font-semibold text-accent-secondary mt-12">Know More</p>
<img class="flex mx-auto mt-4 mb-10" src="img/flecha.svg" alt="flecha apuntando hacia abajo">
</div>
</section>
<section class="text-center">
<h3 class="text-secondary-light-10 text-shadow text-3xl font-subtitle text-center mx-12 my-20">¡Elige la aventura
que se adapte a tus necesidades! </h3>
<p class=" text-primary-light-20 font-inter mt-14 mx-12">Descubre una de nuestras 5 salas o pasa un inolvidable
fin de semana en la Mansión más enigmática de
todas</p>
<div class="flex items-center justify-center py-24 sm:py-8 px-4 lg:px-20 text-center ">
<div class="flex items-center justify-center md:w-11/12 mx-auto">
<button aria-label="slide backward"
class="hidden md:block prev-button absolute z-30 left-0 ml-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 cursor-pointer"
id="prev">
<svg class="text-primary-00" width="8" height="14" viewBox="0 0 8 14" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M7 1L1 7L7 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
<div class=" mx-auto overflow-x-hidden ">
<div id="slider" class=" h-full flex flex-col md:flex-row md:gap-6 items-center justify-start transition ease-out duration-700">
<article
class=" gallery-item flex flex-col mx-6 flex-shrink-0 relative max-w-96 bg-primary-light-20 p-4 mb-6 shadow transition duration-300 group transform hover:-translate-y-2 hover:shadow-2xl rounded-2xl border">
<div class="relative mb-4 rounded-2xl">
<img class="max-h-80 rounded-2xl w-full transition-transform duration-300 transform group-hover:scale-105"
src="img/piratadekstop.webp" alt="imagen de un pirata sentado en una sala">
<div class="photo-card capa-card">
<h5 class="font-pirata text-6xl">LA MAZMORRA DE GARFIO</h5>
<p class="absolute bottom-2 font-title text-white opacity-85 text-lg flex flex-row justify-center"><img src="img/RelojArena.svg" alt="reloj de arena">60 min</p>
</div>
</div>
<p class="font-inter font-semibold text-primary-dark-20">Dificultad
Media</p>
<p class=" font-light text-sm py-1">2-6 personas</p>
<p class="font-semibold py-2">Arriesgate y prueba nuestra sala 4D y
siente el vaivén del navío del Capitán Garfio. </p>
<p class="font-light pt-2">(A partir de 14)</p>
<h3 class="font-medium text-xl leading-8">
<button class="btn-card"><a href="salas/mazmorra.html">Reserva ya</a></button>
</h3>
<div>
</div>
</article>
<article
class=" gallery-item flex flex-col mx-6 flex-shrink-0 relative max-w-96 bg-primary-light-20 p-4 mb-6 shadow transition duration-300 group transform hover:-translate-y-2 hover:shadow-2xl rounded-2xl border">
<div class="relative mb-4 rounded-2xl">
<img
class="max-h-80 rounded-2xl w-full object-cover transition-transform duration-300 transform group-hover:scale-105"
src="img/EscapeSherlock.webp" alt="grupo de personas haciendo un escape room de Sherlock">
<div class="photo-card capa-card">
<h5 class="font-sherlock text-6xl">Misterio en Baker Street</h5>
<p class="absolute bottom-2 font-title text-white opacity-85 text-lg flex flex-row justify-center"><img src="img/RelojArena.svg" alt="reloj de arena">60 min</p>
</div>
</div>
<p class="font-inter font-semibold text-primary-dark-20">Dificultad
Alta</p>
<p class=" font-light text-sm py-1">2-6 personas</p>
<p class="font-semibold py-2">En 221B de Baker Street vivirás la
misteriosa atmósfera de la neblinosa Londres victoriana. </p>
<p class="font-light pt-2">(A partir de 18)</p>
<h3 class="font-medium text-xl ">
<button class="btn-card"><a href="salas/sherlock.html">Reserva ya</a></button>
</h3>
<div>
</div>
</article>
<article
class=" gallery-item flex flex-col mx-6 flex-shrink-0 relative max-w-96 sm:w-auto bg-primary-light-20 p-4 mb-6 shadow transition duration-300 group transform hover:-translate-y-2 hover:shadow-2xl rounded-2xl border">
<div class="relative mb-4 rounded-2xl">
<img
class="max-h-80 rounded-2xl w-full object-cover transition-transform duration-300 transform group-hover:scale-105"
src="img/EscapePesadillas.webp" alt="Niños haciendo un escape room con temática de Pesadilla antes de Navidad">
<div class="photo-card capa-card">
<h5 class="font-pesadillas text-6xl md:text-7xl">PESADILLAS</h5>
<p class="absolute bottom-2 font-title text-white opacity-85 text-lg flex flex-row justify-center"><img src="img/RelojArena.svg" alt="reloj de arena">60 min</p>
</div>
</div>
<p class="font-inter font-semibold text-primary-dark-20">Dificultad
Baja</p>
<p class=" font-light text-sm py-1">2-6 personas</p>
<p class="font-semibold py-2">¡Vive la magia de Pesadilla antes de
Navidad en nuestro escape room para niños! </p>
<p class="font-light pt-2">(De 6 a 13)</p>
<h3 class="font-medium text-xl leading-8">
<button class="btn-card"><a href="salas/pesadillas.html">Reserva ya</a></button>
</h3>
<div>
</div>
</article>
<article
class=" gallery-item flex flex-col mx-6 flex-shrink-0 relative max-w-96 sm:w-auto bg-primary-light-20 p-4 mb-6 shadow transition duration-300 group transform hover:-translate-y-2 hover:shadow-2xl rounded-2xl border">
<div class="relative mb-4 rounded-2xl">
<img
class="max-h-80 rounded-2xl w-full object-cover transition-transform duration-300 transform group-hover:scale-105"
src="img/laboratorio.webp" alt="Pareja realizando un escape room en un laboratorio">
<div class="photo-card capa-card">
<h5 class="font-laboratorio text-4xl md:text-5xl font-bold">El laboratorio del Dr. Pandemium</h5>
<p class="absolute bottom-2 font-title text-white opacity-85 text-lg flex flex-row justify-center"><img src="img/RelojArena.svg" alt="reloj de arena">60 min</p>
</div>
</div>
<p class="font-inter font-semibold text-primary-dark-20">Dificultad
Media</p>
<p class=" font-light text-sm py-1">2 personas</p>
<p class="font-semibold py-2">Atrévete a escapar de nuestra sala para dos personas antes de que lo haga la mutación.</p>
<p class="font-light pt-2">(A partir de 16)</p>
<h3 class="font-medium text-xl leading-8">
<button class="btn-card"><a href="salas/laboratio.html">Reserva ya</a></button>
</h3>
<div>
</div>
</article>
<article
class=" gallery-item flex flex-col mx-6 flex-shrink-0 relative max-w-96 sm:w-auto bg-primary-light-20 p-4 mb-6 shadow transition duration-300 group transform hover:-translate-y-2 hover:shadow-2xl rounded-2xl border">
<div class="relative mb-4 rounded-2xl">
<img
class="max-h-80 rounded-2xl w-full object-cover transition-transform duration-300 transform group-hover:scale-105"
src="img/mansion.webp" alt="">
<div class="photo-card capa-card">
<h5 class="font-mansion text-5xl">La mansión de la Orden Luna Negra</h5>
<p class="absolute bottom-2 font-title text-white opacity-85 text-lg flex flex-row justify-center"><img src="img/RelojArena.svg" alt="reloj de arena">60 min</p>
</div>
</div>
<p class="font-inter font-semibold text-primary-dark-20">Dificultad
Alta</p>
<p class=" font-light text-sm py-1">16-20 personas</p>
<p class="font-semibold py-2">Adéntrate en el frondoso bosque durante un fin de semana con tu grupo.</p>
<p class="font-light pt-2">(A partir de 18)</p>
<h3 class="font-medium text-xl leading-8">
<button class="btn-card"><a href="salas/mansion.html">Reserva ya</a></button>
</h3>
<div>
</div>
</article>
<article
class= "hidden gallery-item lg:flex flex-col flex-shrink-0 mx-6 relative w-full max-w-96 sm:w-auto bg-primary-light-20 p-4 mb-6 shadow transition duration-300 group transform hover:-translate-y-2 hover:shadow-2xl rounded-2xl border">
<div class="relative mb-4 rounded-2xl">
<img
class="max-h-80 rounded-2xl w-full object-cover transition-transform duration-300 transform group-hover:scale-105"
src="img/escape-room.webp" alt="imagen de una sala de escape room">
<div class=" absolute inset-x-0 top-1/3 transform -translate-y-1/2 text-center">
</div>
<div class="photo-card capa-card">
<h5 class="font-title text-5xl">¿Tienes un plan de escape?</h5>
</div>
</div>
<p class="font-inter font-semibold text-primary-dark-20">¿Te gustaría crear tu propio Escape Room pero no sabes como?</p>
<p class="font-semibold py-6">Nosotros podemos ayudarte a convertir tus ideas en realidad.</p>
<h3 class="font-medium text-xl leading-8">
<button class="btn-card"><a href="contacto.html">Cuéntanos</a></button>
</h3>
<div>
</div>
</article>
</div>
</div>
<button aria-label="slide forward"
class="hidden md:block next-button absolute z-30 right-0 mr-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400"
id="next">
<svg class="text-primary-00" width="8" height="14" viewBox="0 0 8 14" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L7 7L1 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
</section>
<section class="text-center mx-12">
<h3 class="text-secondary-light-10 text-shadow text-3xl font-subtitle my-6">¡El regalo perfecto: Una
experiencia inolvidable!</h3>
<p class=" text-primary-light-20 font-inter my-10">¿Quieres hacer un regalo divertido, único y excitante?
Regala un Bono Regalo de 'Unlock Me If You Can' y <br> convierte cualquier ocasión en una aventura
emocionante llena de misterio y diversión para tus amigos y familiares.</p>
<img src=" img/iconoregalo.png" class="flex mx-auto mt-24 md:mt-32 w-52 md:w-auto lg:animate-bounce" alt="icono de un regalo">
<button class="btn"><a href="regalo.html">Regala un bono</a></button>
</section>
<section class="text-center mx-12 lg:mx-40">
<h3 class="text-secondary-light-10 text-shadow text-3xl font-subtitle my-3 mt-32">Algunas de nuestras
Preguntas más frecuentes</h3>
<p class="pregunta-frecuente border-accent"><button>+ ¿Qué es un escape room?</button></p>
<p class="text-primary-light-20 tracking-wide text-lg oculto">Un escape room es una experiencia inmersiva donde un grupo de jugadores resuelve acertijos y rompecabezas
en una habitación temática para escapar antes de que se agote el tiempo, generalmente en unos 60
minutos. Fomenta la colaboración, la comunicación y la resolución de problemas bajo presión, mientras
los participantes se sumergen en una emocionante historia. Es una actividad divertida y desafiante,
perfecta para grupos que buscan aventura y trabajo en equipo.</p>
<p class="pregunta-frecuente border-accent"><button>+ ¿Cuánto dura la actividad?</button></p>
<p class="text-primary-light-20 tracking-wide text-lg oculto">La duración de la mayoría de nuestros escape room es de alrededor de 60 minutos. Este tiempo se establece
como un desafío para los jugadores, quienes deben resolver los acertijos y rompecabezas dentro de esa
ventana de tiempo para lograr escapar de la habitación temática. Sin embargo, tenemos escape en una
montaña, "La mansión de la Orden Luna Negra", que transcurre durante todo un fin de semana donde los
jugadores viven el juego desde el momento de su llegada.</p>
<p class=" pregunta-frecuente border-accent"><button>+ ¿Qué pasa si llegamos tarde?</button></p>
<p class="text-primary-light-20 tracking-wide text-lg oculto">Si llegas tarde a tu reserva en un escape room, es posible que te veas afectado por una serie de
situaciones dependiendo de la política del lugar específico.
En muchos casos, el tiempo de juego se reducirá para compensar el tiempo perdido, ya que es posible que
otros grupos tengan reservas después de la tuya. Por ejemplo, si llegas 15 minutos tarde a una reserva
de una hora, es probable que solo tengas 45 minutos para completar el escape room.
Sin embargo, si llegas demasiado tarde y el escape room no puede acomodarte, es posible que pierdas tu
reserva y no se te reembolse el dinero. Por eso es importante llegar a tiempo para poder disfrutar
completamente de la experiencia.
Para evitar cualquier inconveniente, siempre es recomendable comunicarse con el escape room si prevés
que llegarás tarde, ya que algunas ubicaciones podrían ser más flexibles dependiendo de las
circunstancias.</p>
<p class="pregunta-frecuente border-accent"> <button>+ ¿Se puede ir en grupo a realizar Team Building?</button></p>
<p class="text-primary-light-20 tracking-wide text-lg oculto">Sí, ¡definitivamente! Los escape rooms son una opción ideal para actividades de Team Building. Al trabajar juntos para resolver acertijos y completar desafíos en un ambiente divertido y emocionante, los participantes fortalecen la comunicación, la colaboración y el trabajo en equipo. La experiencia compartida en un escape room crea vínculos entre los miembros del grupo y fomenta un sentido de camaradería mientras trabajan hacia un objetivo común: escapar de la habitación en el tiempo asignado. ¡Prepárate para una aventura inolvidable que impulsará el espíritu de equipo de tu grupo!</p>
<p class="pregunta-frecuente border-accent"><button>+ ¿Tengo que llevar alguna vestimenta especial?</button></p>
<p class="text-primary-light-20 tracking-wide text-lg oculto">No es necesario llevar ninguna vestimenta especial para participar en un escape room. Sin embargo, se recomienda vestirte cómodamente para disfrutar al máximo de la experiencia. Lo más importante es que estés listo para divertirte y sumergirte en la experiencia del escape room junto con tu equipo.</p>
<a href="preguntas.html" class="btn">¿Tienes más preguntas?</a>
</section>
<section class="text-center">
<div class="capa-contact h-screen">
<img src="img/image-background.jpg" class="h-screen bg-cover background-contact " alt="imagen de fondo difuminado de una sala de escape room">
<h3 class="text-secondary-light-10 text-shadow text-3xl font-subtitle my-3 mt-32">Contacto</h3>
<p class=" text-primary-light-20 font-inter my-10 mx-12 ">¿Quieres sesiones personalizadas, tienes preguntas
que no se responden en nuestras FAQs o te gustaría crear una sala con nosotros? Escribenos y te
ayudaremos lo antes posible.</p>
<form action="#" method="post" id="form" class="grid sm:grid-cols-1 lg:grid-cols-2 my-10 mx-14 md:mx-40">
<div class="flex-col w-auto">
<div class="form-control">
<label for="name" class="flex justify-start mb-4 text-white">Nombre</label>
<input type="text" name="name" id="name" class="border-accent bg-transparent text-white">
<small></small>
</div>
<div class="form-control">
<label for="email" class="flex justify-start my-4 text-white">Correo electrónico</label>
<input type="email" name="email" id="email" class="border-accent bg-transparent text-white">
<small></small>
</div>
<div class="form-control">
<label for="telephone" class="flex justify-start my-4 text-white">Teléfono</label>
<input type="tel" name="telephone" id="telephone" class="border-accent bg-transparent text-white">
<small></small>
</div>
<div class="flex lg:justify-end lg:align-bottom">
<button id="button" class="btn btn-modal font-inter text-white bg-primary-dark-10 mt-10 mx-auto lg:mx-0">Enviar</button>
</div>
</div>
<div class="mb-9 lg:col-span-1 mt-10 lg:ml-14">
<textarea name="campo" id="campo" placeholder="Escribe tu mensaje aquí." class="border-accent bg-transparent font-subtitle p-2 text-white"></textarea>
</div>
</form>
<div class="modal text-center">
<div class="modal__container">
<h2 class="modal_title font-subtitle text-xl mb-4">Hemos recibido tu mensaje</h2>
<img src="img/Logo.svg" alt="Logo" class="modal__img">
<p class="modal__paragraph font-subtitle">Pronto nos pondremos en contacto contigo.</p>
<a href="#" class="modal__close btn">Entendido</a>
</div>
</div>
</div>
</section>
</main>
<footer class="flex flex-col md:flex-row justify-between w-full">
<div class="flex items-center justify-center">
<ul class="text-primary-light-20 flex flex-col md:flex-row items-center justify-between text-center m-3 w-72">
<li><a href="">Aviso legal</a></li>
<li><a href="">Política de privacidad</a></li>
<li><a href="">Política de cookies</a></li>
</ul>
</div>
<div class="flex flex-col mx-auto items-center w-72 m-3">
<a href="index.html" class="logo">
<img class="mx-auto" src="img/Logo.svg" alt="Logo">
</a>
<h4 class="text-secondary-light-10 text-shadow text-lg font-subtitle text-center">¡Copyright © 2024 Unlock Me
If you can!</h4>
</div>
<div class="flex items-center justify-center m-3">
<ul class="flex items-center justify-around w-72">
<li><a href=""><img src="img/instagram.svg" alt="logo instagram"></a></li>
<li><a href=""><img src="img/whatsapp.svg" alt="logo whatsapp"></a></li>
<li><a href=""><img src="img/tiktok.svg" alt="logo tiktok"></a></li>
</ul>
</div>
</footer>
<script src="js/burger.js"></script>
<script src="js/app.js"></script>
<script src="js/form.js"></script>
</body>
</html>