-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
351 lines (335 loc) · 17.5 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Home page">
<meta name="keywords" content="Brugge, cerveza, cerveza artesanal">
<meta name="author" content="Maria Eugenia Costa">
<!------- Mi CSS------->
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<!---- Start WOWSlider.com HEAD section ---->
<link rel="stylesheet" type="text/css" href="./engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!---- End WOWSlider.com HEAD section ---->
<title>Brugge cerveza artesanal</title>
</head>
<body>
<!----Header---------->
<header>
<div id="marca">
<img src="./img/logo_horizontal.png" alt="logo de Brugge cerveza artesanal">
</div>
<nav id="botonera">
<ul>
<li><a href="#" onclick="mostrarLista('opciones')">
<img class="copa" src="./img/copa.png" alt="imagen de una copa">
</a> </li>
<ul id="opciones" style="display:none;">
<li> <a href="#nosotros_historia">
<h2>Nosotros y nuestra historia</h2>
</a> </li>
<li> <a href="#estilos">
<h2>Nuestros Estilos</h2>
</a> </li>
<li> <a href="#producto">
<h2>Nuestros Productos</h2>
</a> </li>
<li> <a href="#contactos">
<h2>Contactanos</h2>
</a> </li>
</ul>
</ul>
</nav>
<!-----Carrito de compras fijo en margin top right------>
<div id="carrito_de_compras">
<a href="https://api.whatsapp.com/send/?phone=5491165896401&text&app_absent=0" target="_blank"><img
src="./img/carrito.png" alt="icono de carro de compra"> </a>
</div>
</header>
<!---- Agrego esta nueva sección con ID mensaje para agregar un mensaje de bienvenida mediante el DOM con JavaScript---->
<section id="mensaje">
<div id="bienvenidaa"></div>
</section>
<section>
<!-----Nosotros y nuestra historia------->
<div id="nosotros_historia">
<h2> Nosotros y nuestra historia</h2>
</div>
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="./img/el_equipo.jpg" alt="EN EL EQUIPO DE BRUGGE" title="EN EL EQUIPO DE BRUGGE"
id="wows1_0" /></li>
<li><a href="http://wowslider.net" target="_self"><img src="./img/chopera.jpg" alt="css slideshow"
title="TENEMOS LAS CHOPERAS PARA TU EVENTO" id="wows1_1" /></a></li>
<li><img src="./img/honey.jpg" alt="DISFRUTA DE UNA BRUGGE BIEN FRIA ! ACORDATE DEL DELIVERY."
title="DISFRUTA DE UNA BRUGGE BIEN FRIA ! ACORDATE DEL DELIVERY." id="wows1_2" /></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#" title="EN EL EQUIPO DE BRUGGE"><span><img src="data1/tooltips/el_equipo.jpg"
alt="EN EL EQUIPO DE BRUGGE" />1</span></a>
<a href="#" title="TENEMOS LAS CHOPERAS PARA TU EVENTO"><span><img src="data1/tooltips/chopera.jpg"
alt="TENEMOS LAS CHOPERAS PARA TU EVENTO" />2</span></a>
<a href="#" title="DISFRUTA DE UNA BRUGGE BIEN FRIA ! ACORDATE DEL DELIVERY."><span><img
src="data1/tooltips/honey.jpg"
alt="DISFRUTA DE UNA BRUGGE BIEN FRIA ! ACORDATE DEL DELIVERY." />3</span></a>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.net">html slideshow</a>
by WOWSlider.com v9.0</div>
<div class="ws_shadow">
</div>
</div>
<script type="text/javascript" src="./engine1/wowslider.js"></script>
<script type="text/javascript" src="./engine1/script.js"></script>
<!---- End WOWSlider.com BODY section ---->
<!----Foto del equipo---->
<figure id="fila1_izq">
<img src="./img/el_equipo.jpg" alt="foto del equipo de Brugge">
</figure>
<!----Texto sobre el equipo---->
<article id="fila1_centro">
<p> <strong> Brugge </strong> está conformado por 3 <strong> emprendedores </strong>, cuya misión es la
producción de <strong> cerveza artesanal de una manera natural y sin aditivos</strong>. <br />En el
2018, luego de 5 años de homebrew, decidimos convertir nuestro hobby en una forma de vida. Es así como
nace Cervecería Brugge, una fábrica de cerveza artesanal conformada por amigos.<br /> La cervecería se
ubica en Martínez con una capacidad instalada de 10.000 litros mensuales, con más de 7 estilos fijos y
con innovaciones estacionales. <br /> Estamos en constante capacitación y mejora de nuestros procesos a
fin de obtener una cerveza con buenos estándares de calidad.</p>
</article>
<!--Google maps-->
<figure id="fila1_der">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3287.997846099655!2d-58.532084185150794!3d-34.502938880485736!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcb0f4e7279b63%3A0x9990a672a49168f1!2sHip%C3%B3lito%20Yrigoyen%202731%2C%20B1640HGC%20Mart%C3%ADnez%2C%20Provincia%20de%20Buenos%20Aires!5e0!3m2!1ses-419!2sar!4v1613245209926!5m2!1ses-419!2sar"
width="288" height="216" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0"></iframe>
</figure>
<figure id="linea_de_tiempo">
<img src="./img/linea_de_tiempo.png" alt="imagen con línea de tiempo">
</figure>
<!----Sección Nuestros estilos---->
<article id="estilos">
<h2> Nuestros estilos</h2>
</article>
<!---- Tabla de productos---->
<div id="tabla_de_productos">
<div class="marco">
<div class="submarco">
<div id="foto_session_ipa"> </div>
<article class="detalle_producto">
<h4 class="estilonombre">SESSION IPA</h4>
<p>Cerveza donde el lúpulo es protagonista tanto en sabor como en aroma, tiene un moderado nivel
de amargor acompañado por un bajo cuerpo y una baja maltosidad. Presenta notas a frutas
tropicales y cítricas.<br /> Color: dorado intenso<br />Amargor: bajo<br /> ABV: 5%</p>
</article>
</div>
<div class="submarco">
<div id="foto_honey"> </div>
<article class="detalle_producto">
<h4 class="estilonombre">HONEY</h4>
<p>Cerveza ligera con agregado de miel de la flor de alfalfa durante la cocción que aporta
dulzor y mayor graduación alcohólica. </p>
<p>Color: dorada intensa <br /> ABV: 6% <br /> Amargor: Bajo</p>
</article>
</div>
</div>
<div class="marco">
<div class="submarco">
<div id="foto_irish_red"> </div>
<article class="detalle_producto">
<h4 class="estilonombre">IRISH RED</h4>
<p>Cerveza de origen Irlandés, fácil de tomar con sabores sutiles, ligeramente maltosa con un
suave dulzor inicial, leve final seco y tostado. El aroma y sabor a lúpulo no están
presente.<br /> Color: ambar profundo (rojizo)<br /> Amargor: bajo <br /> ABV: 4,1% </P>
</article>
</div>
<div class="submarco">
<div id="foto_new_england_ipa"> </div>
<article class="detalle_producto">
<h4 class="estilonombre">NEW ENGLAND IPA</h4>
<P>Cerveza fácil de tomar, con gran aroma a lúpulo pero de bajo amargor, de sabores a frutas
tropicales y críticas. Con mucho cuerpo y un aspecto turbio. </P>
<p> Color: dorado <br /> Amargor: bajo <br /> ABV: 5% </P>
</article>
</div>
</div>
<div class="marco">
<div class="submarco">
<div id="foto_golden_wheat"> </div>
<article class="detalle_producto">
<h4 class="estilonombre">GOLDEN WHEAT</h4>
<p>Cerveza refrescante ideal para cualquier momento, presenta un perfecto balance entre el
dulzor de la malta y el amargor del lúpulo, de aromas limpios y sin sabores agresivos.</p>
<p> Color: dorado <br /> Amargor: bajo <br /> ABV: 4,5% </p>
</article>
</div>
<div class="submarco">
<div id="foto_oatmeal"> </div>
<article class="detalle_producto">
<h4 class="estilonombre">OATMEAL STOUT</h4>
<p>Cerveza de origen Irlandés, de sabor y aroma tostado que recuerda al café.</p>
<p>Color: negro <br /> Amargor: medio <br /> ABV: 6%</p>
</article>
</div>
</div>
<div class="marco">
<div class="submarco">
<div id="foto_summer_ipa"> </div>
<article class="detalle_producto">
<H4 class="estilonombre">SUMMER IPA</H4>
<p>Cerveza lupulada, súper refrescante, de bajo cuerpo y de alta tomabilidad, con un 40% menos
de calorías, ideal para el verano.</p>
<p>Color: dorado pálido<br /> Amargor: medio <br /> ABV: 3,8% <br />
</article>
</div>
<div class="submarco">
<div id="foto_old_ale"> </div>
<article class="detalle_producto">
<h4 class="estilonombre">OLD ALE</h4>
<p>Cerveza de alta complejidad de maltas caramelo, en aroma presenta una combinación de frutos
secos como nuez, caramelo y melaza. Tiene un agregado de chips de roble macerados en Jim
Bean.<br /> Color: ambar oscuro <br /> Amargor: bajo <br /> ABV: 8%</p>
</article>
</div>
</div>
</div>
<!----Seccion Nuestros productos---->
<div id="producto">
<h2> Nuestros productos</h2>
</div>
<!----Títulos de los propductos ---->
<div class="fila1">
<h3> Barriles</h3>
</div>
<div class="fila1">
<h3> Botellas</h3>
</div>
<div class="fila1">
<h3> Choperas </h3>
</div>
<!----Fotos e imágenes de los productos---->
<div id="fila2_barril_foto">
</div>
<div id="fila2_botellas_video">
<video id="mivideo" src="./video/botellas_video.mp4"></video>
<nav id="botonera_video">
<ul>
<li><a id="reproducir" onclick="reproducir()" href="#botonera_video"><img src="./img/play.png"
alt="icono de reproducir"></a></li>
<li><a id="frenar" onclick="detener()" href="#botonera_video"><img src="./img/pause.png"
alt="icono de pausar"></a></li>
<li><a id="atras" onclick="saltar(-5)" href="#botonera_video"><img src="./img/previous.png"
alt="icono de atrasar"></a></li>
<li><a id="adelante" onclick="saltar(5)" href="#botonera_video"><img src="./img/next.png"
alt="icono de adelantar"></a></li>
</ul>
</nav>
</div>
<div id="fila2_choperas_foto">
</div>
<!----Info de cada producto---->
<article id="fila3_barril">
<p>Te ofrecemos todos nuestros estilos en barriles retornables de 50l de acero inoxidable y conector G.
Entregamos en 48hs dentro de CABA y GBA, hacemos envíos al interior del país.
Anímate y contáctanos!</p>
</article>
<article id="fila3_botellas">
<p>Tenemos disponibles todos nuestros estilos en botellas de vidrio de 500 cc. </p>
<p>Consultar por precios mayoristas para comercios</p>
</article>
<article id="fila3_choperas">
<p> No te preocupes más por tener que enfriar 20 lts de cerveza. Tenemos la solución para tu evento: BIRRA
HELADA todo el evento. Te alquilamos la chopera, a partir de los 20lts., el servicio consiste en la
entrega
de la chopera, puesta a punto y retiro. </p>
</article>
<div class="fila4">
<a href="https://api.whatsapp.com/send/?phone=5491165896401&text&app_absent=0" target="_blank">
<p>Consultar <br />promociones vigentes! </p>
</a>
</div>
<div class="fila4">
<a href="https://api.whatsapp.com/send/?phone=5491165896401&text&app_absent=0" target="_blank">
<p>Hacemos entregas en <br />CABA, GBA y al interior del país!</p>
</a>
</div>
<div class="fila4">
<a href="https://api.whatsapp.com/send/?phone=5491165896401&text&app_absent=0" target="_blank">
<p>Consultar <br /> promociones vigentes!</p>
</a>
</div>
<!----Contacto---->
<div id="contactos">
<h2>Contactanos</h2>
</div>
<div id="botonera_de_frases">
<ul>
<li>
<a href="https://www.instagram.com/bruggecerveza" target="_blank"> <br />
<img src="./img/instagram.png" alt="logo de instagram" class="icono1">
<figcaption>
<h3> Unite a nuestro <br />Instagram </h3>
</figcaption>
</a>
</li>
<li>
<a href="donde_estamos.html" target="_blank"> <br />
<img src="./img/copa.png" alt="icono de copa" class="icono1">
<figcaption>
<h3> Dónde <br /> estamos? </h3>
</figcaption>
</a>
</li>
<li>
<a href="mailto:info@brugge.com.ar" target="_blank"> <br />
<img src="./img/email.png" alt="icono de email" class="icono1">
<figcaption>
<h3> Mandanos un <br /> mensaje </h3>
</figcaption>
</a>
</li>
<li>
<a href="https://api.whatsapp.com/send/?phone=5491165896401&text&app_absent=0"
target="_blank"><br />
<img src="./img/whatsapp.png" alt="icono de whatsapp" class="icono1">
<figcaption>
<h3> Consultanos por <br /> Whatsapp </h3>
</figcaption>
</a>
</li>
</ul>
</div>
</section>
<!-------Cupon----->
<article>
<div id="cupon">
<button type="submit" id="submit" class="submit-button submit-button2"> <a href="formulario.html"
onmouseover="masInfo('texto-mouse')" onmouseout="menosInfo('texto-mouse')"
alt="formulario de Brugge para obetener cupon de descuento" target="_blank">
Obtener mi cupón de descuento </a> </button>
</div>
<div id="texto-mouse" style="display:none;">
<p>Aprovechalo que quedan pocos!</p>
</div>
<article id="extra">
</article>
</article>
<footer>
<div class="footer-inner" id="derechos-izquierda">
<p> Beber con moderación. Prohibida su venta a menores de 18 años </p>
</div>
<div class="footer-inner" id="derechos-derecha">
<p> © 2021 Brugge. Todos los derechos reservados.</p>
</div>
</footer>
<script type="text/javascript" src="./js/bienvenida.js"></script>
<script type="text/javascript" src="./js/mensaje.js"></script>
<script type="text/javascript" src="./js/botonera.js"></script>
<script type="text/javascript" src="./js/cartel.js"></script>
<script type="text/javascript" src="./js/video.js"></script>
</body>
</html>