-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
254 lines (219 loc) · 13 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="assets/logo-icono.ico" type="image/x-icon">
<title>Cervercería Sierra Mágica</title>
</head>
<body>
<div id="ageVerification">
<div id="ageVerificationBox">
<p>¿SOS MAYOR DE EDAD?</p>
<label for="age" class="form-label">Ingresa tu fecha de nacimiento para continuar:</label>
<input type="text" inputmode="numeric" pattern="[0-9]*" value="" id="age" name="age" required placeholder="Año de nacimiento">
<button onclick="verifyAge()">INGRESAR</button>
<p id="ageError">No tienes la edad suficiente para ver este contenido</p>
</div>
</div>
<header>
<div class="container-menu">
<div class="logo">
<a id="logo-SM" href="/">
<img src="assets/logo-sierra mágica 2.jpg" alt="logo de la marca">
</a>
</div>
<nav class="menu-burger">
<input type="checkbox" id="menu-toggle" class="menu-toggle">
<label for="menu-toggle" class="menu-icon">
<img class="beer-icon" src="assets/beer.png" alt="icono de cerveza">
</label>
<div class="menu">
<div class="container-menu-close">
<label for="menu-toggle" class="menu-close">X</label>
</div>
<div class="container-img-menu">
<a href="/">
<img src="assets/logo-sin-fondo.png" alt="Logo de la marca">
</a>
</div>
<ul>
<li><a href="#inicio">inicio</a></li>
<li><a href="#nosotros">nosotros</a></li>
<li class="cervezas"><a href="#cervezas">cervezas</a></li>
<li class="cuenta"><a href="#cuenta">mi cuenta</a></li>
<li><a href="#contacto">contacto</a></li>
<li><a href="#comprar">comprar</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main>
<section id="inicio">
<h1>Bienvenidos a nuestra cervecería artesanal</h1>
<p class="text-inicio">Te invitamos a explorar y experimentar el deseo por una buena cerveza hecha en
familia</p>
<div class="inicio-registro">
<p>Únete a nosotros para más novedades o inicia sesión desde aquí:</p>
<a href="login.html" class="btn-link">
<button class="btn">Iniciar sesión</button>
</a>
<a href="registro.html" class="btn-link">
<button class="btn">Registrarse</button>
</a>
</div>
</section>
<section id="nosotros">
<div class="nosotros-wrapper">
<div class="nosotros-text1">
<h2>Nuestra Historia</h2>
<p>Bienvenidos a Sierras Mágicas, donde la pasión por lo artesanal se encuentra con la excelencia en
cada sorbo. Desde nuestros humildes comienzos en 1990, nos embarcamos en un viaje dedicado a la
creación de cervezas artesanales que capturan la esencia de la autenticidad y la tradición.</p>
<h2>La Magia de lo Artesanal y la familia</h2>
<p>En Sierras Mágicas, somos más que una marca; somos una familia dedicada a compartir la alegría de lo artesanal.
Cada botella cuenta una historia de dedicación,los primeros días en que nuestras recetas eran experimentos en la cocina hasta hoy, donde la creatividad y amor por la calidad se reflejan como tributo en cada creación.
Nos apasiona explorar los límites de la cerveza artesanal y llevar a tu vaso una experiencia única e inolvidable.</p>
</div>
<div class="video-nosotros1">
<video class="responsive-video" autoplay loop muted>
<source src="assets/comercial cerveza artesanal.mp4" type="video/mp4">
</video>
</div>
<div class="nosotros-text2">
<h2>Sabor Inigualable</h2>
<p>Nuestras cervezas son más que simplemente bebidas; son obras maestras cuidadosamente elaboradas
que despiertan tus sentidos. Cada ingrediente es seleccionado con esmero, y cada lote se crea
con la atención meticulosa que solo lo artesanal puede ofrecer. El resultado es un sabor
inigualable que refleja la verdadera esencia de la cerveza de calidad.</p>
<h2>Más Allá de la Cerveza</h2>
<p>En Sierras Mágicas, celebramos lo artesanal en todas sus formas. Nuestro video no solo destaca la
magia de nuestras cervezas, sino también el encanto de otras creaciones artesanales. Creemos en
el valor de lo hecho a mano, en la conexión con nuestras raíces y en la belleza de lo auténtico.
</p>
</div>
<div class="video-nosotros2">
<iframe class="responsive-iframe"
src="https://www.youtube.com/embed/_UOw1jSMXZE?autoplay=1&mute=1&controls=0"
title="video cerveza" frameborder="0">
<p>El video no puede ser cargado. Pero puedes verlo <a href="https://www.youtube.com/watch?v=_UOw1jSMXZE" target="_blank">aquí</a>.</p>
</iframe>
</div>
</div>
</section>
<section id="cervezas">
<div class="text-variedad">
<h2>Nuestra variedad</h2>
</div>
<div class="row row-cols-1 row-cols-md-2 g-4 d-flex flex-row flex-wrap vw-100 ">
<div class="col mw-25 d-flex justify-content-center align-items-center">
<div class="card w-75">
<img src="assets/Cerveza-Rubia-Pan-de-azúcar.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Rubia Pan de Azúcar</h5>
<p class="card-text">Disfruta de la frescura y suavidad de nuestra Rubia Pan de Azúcar. Con notas refrescantes y un toque ligero de malta, perfecta para aquellos que buscan una experiencia cervecera suave y deliciosa.</p>
<!-- <small class="text-body-secondary">Last updated 3 mins ago</small>
<a href="#" class="btn btn-primary">Go somewhere</a> -->
</div>
</div>
</div>
<div class="col mw-25 d-flex justify-content-center align-items-center">
<div class="card w-75">
<img src="assets/Cerveza-Roja-Los-Gigantes.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Roja Los Gigantes</h5>
<p class="card-text">Deja que la intensidad de nuestra Roja Los Gigantes te conquiste. Esta cerveza artesanal, como las imponentes montañas que le dan nombre, despierta tus sentidos con su color rojo profundo y su sabor robusto.</p>
</div>
</div>
</div>
<div class="col mw-25 d-flex justify-content-center align-items-center">
<div class="card w-75">
<img src="assets/Cerveza-IPA-Uritorco.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">IPA Uritorco</h5>
<p class="card-text">Embárcate en un viaje de sabores intensos con nuestra IPA Uritorco. Esta cerveza artesanal te lleva a nuevas alturas sensoriales. Con un perfil lupulado pronunciado y un amargor equilibrado.</p>
</div>
</div>
</div>
<div class="col mw-25 d-flex justify-content-center align-items-center">
<div class="card w-75">
<img src="assets/Cerveza-Negra-Champaquí.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Negra Champaquí</h5>
<p class="card-text">Sumérgete en la oscuridad de las noches estrelladas sobre la montaña más alta de Córdoba, Cerro Champaquí.Cerveza artesanal que cautiva con su color oscuro y su sabor complejo, teñida de notas tostadas de la malta y matices de chocolate.</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<section id="contacto">
<div class="text-contacto">
<h2>Contacto</h2>
</div>
<div class="contacto-redes">
<div class="info-contacto">
<p>Ante cualquier duda o reclamo no dudes en contactarnos</p>
<address>
<p>dirección: calle de la cervecería 987</p>
<p>telefono: (123) 150000000</p>
<p>Email: cerveceriartesanal@camail.com</p>
</address>
<div class="redes">
<h3>Nuestras Redes</h3>
<a href="https://www.instagram.com/" target="_blank">
<img src="assets/instagram.png" alt="icono instagram enlace">
</a>
<a href="https://www.facebook.com" target="_blank">
<img src="assets/facebook.png" alt="icono facebook enlace">
</a>
<a href="https://twitter.com" target="_blank">
<img src="assets/twitter.png" alt="icono twitter enlace">
</a>
</div>
</div>
<div class="form-consultas">
<form action="https://formspree.io/f/mgejbzgg" method="POST">
<div class="form-group">
<label for="nombre" class="form-label">Nombre:</label>
<input type="text" id="nombre" name="nombre" required
placeholder="Escribe tu nombre"><br><br>
</div>
<div class="form-group">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" required
placeholder="Tu dirección de correo electrónico"><br><br>
</div>
<div class="form-group">
<label for="telefono" class="form-label">Teléfono:</label>
<input type="tel" id="telefono" name="telefono"
placeholder="Tu número de teléfono"><br><br>
</div>
<div class="form-group">
<label for="comentarios" class="form-label">Comentarios:</label><br>
<textarea id="comentarios" name="comentarios"
placeholder="Escribe tus comentarios aquí"></textarea><br><br>
</div>
<input type="submit" value="Enviar">
</form>
</div>
</div>
</section>
<div class="derechos">
<p>
<p>Beber con moderación. Prohibida su venta a menores de 18 años</p>
© 2023 Cervecería "Nombre". Todos los derechos reservados.
</p>
</div>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>