Repository navigation
Expand file tree
/
Copy pathdom.html
More file actions
149 lines (149 loc) · 8.79 KB
/
Copy pathdom.html
File metadata and controls
149 lines (149 loc) · 8.79 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Importa la fuente Playfair Display desde Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/dom.css">
<script src="scripts/dom.js" defer></script>
</head>
<body>
<!-- Contenedor principal de la imagen hero con logo y título superpuestos -->
<div class="hero-image-wrapper">
<div class="hero-content">
<img src="images/logo.webp" alt="Logo" class="overlay-image">
<h1 class="hero-title">Modo Burger</h1>
</div>
<img src="images/hero_image.webp" alt="Hero Image" class="hero-image">
</div>
<!-- Contenedor del mapa de Google Maps debajo de la imagen hero -->
<div class="map-container">
<!-- Mapa de Google Maps embebido mostrando Valencia, España -->
<iframe
src="https://www.google.com/maps?q=39.4699,-0.3763&z=14&output=embed"
width="100%"
height="250"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="Mapa de Valencia, España"></iframe>
</div>
<!-- Panel inferior dinámico con menú desplegable -->
<div class="bottom-section" id="bottomSection">
<!-- Botón amarillo redondo con flecha negra para expandir o contraer el panel -->
<button class="expand-btn" id="expandBtn" aria-label="Expandir">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 8l-6 6h12l-6-6z" fill="#111"/>
</svg>
</button>
<!-- Contenedor del menú y acordeón dentro del panel inferior -->
<div class="menu-container">
<h1>Nuestro Menú</h1>
<div class="accordion">
<!-- Categoría de Hamburguesas -->
<div class="accordion-item">
<button class="accordion-trigger" aria-expanded="false">
Signature Burgers
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="accordion-content" role="region">
<div> <!-- Este div es necesario -->
<!-- Primer ítem de hamburguesas -->
<div class="menu-item">
<img src="https://www.shutterstock.com/image-photo/smash-burger-irresistible-delicacy-260nw-2555291033.jpg" alt="Classic Bliss">
<div class="item-details">
<div class="item-header">
<h3>Classic Bliss</h3>
<p>€12.99</p>
</div>
<p class="item-description">Una jugosa hamburguesa de ternera, queso cheddar, lechuga, tomate y nuestra salsa secreta bliss.</p>
</div>
</div>
<!-- Segundo ítem de hamburguesas -->
<div class="menu-item">
<img src="https://www.shutterstock.com/image-photo/burger-double-cutlet-cheddar-cheese-260nw-1999854623.jpg" alt="Bacon BBQ Blast">
<div class="item-details">
<div class="item-header">
<h3>Bacon BBQ Blast</h3>
<p>€14.99</p>
</div>
<p class="item-description">Bacon ahumado, aros de cebolla crujientes, salsa BBQ y queso pepper jack en un pan brioche.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Categoría de Acompañamientos -->
<div class="accordion-item">
<button class="accordion-trigger" aria-expanded="false">
Sides & Fries
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="accordion-content" role="region">
<div> <!-- Este div es necesario -->
<!-- Primer ítem de acompañamientos -->
<div class="menu-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKnmnYlm83V7fCpxJf0d2FlSmF7tb9gg1tbA&s" alt="Classic Bliss">
<div class="item-details">
<div class="item-header">
<h3>Classic Bliss</h3>
<p>€12.99</p>
</div>
<p class="item-description">Una jugosa hamburguesa de ternera, queso cheddar, lechuga, tomate y nuestra salsa secreta bliss.</p>
</div>
</div>
<!-- Segundo ítem de acompañamientos -->
<div class="menu-item">
<img src="https://recipe30.com/wp-content/uploads/2017/06/French-fries-848x477.jpg" alt="Bacon BBQ Blast">
<div class="item-details">
<div class="item-header">
<h3>Bacon BBQ Blast</h3>
<p>€14.99</p>
</div>
<p class="item-description">Bacon ahumado, aros de cebolla crujientes, salsa BBQ y queso pepper jack en un pan brioche.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Categoría de Bebidas -->
<div class="accordion-item">
<button class="accordion-trigger" aria-expanded="false">
Bebidas
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="accordion-content" role="region">
<div> <!-- Este div es necesario -->
<!-- Primer ítem de bebidas -->
<div class="menu-item">
<img src="https://minuman.com/cdn/shop/articles/Everything-You-Need-to-Know-About-Beer-2_84f4045b-b7e1-4b56-a72b-46b79b065088.jpg?v=1758167419" alt="Classic Bliss">
<div class="item-details">
<div class="item-header">
<h3>Classic Bliss</h3>
<p>€12.99</p>
</div>
<p class="item-description">Una jugosa hamburguesa de ternera, queso cheddar, lechuga, tomate y nuestra salsa secreta bliss.</p>
</div>
</div>
<!-- Segundo ítem de bebidas -->
<div class="menu-item">
<img src="https://cdn.computerhoy.com/sites/navi.axelspringer.es/public/media/image/2020/02/coca-cola-portada-1877741.jpg?tf=3840x" alt="Bacon BBQ Blast">
<div class="item-details">
<div class="item-header">
<h3>Bacon BBQ Blast</h3>
<p>€14.99</p>
</div>
<p class="item-description">Bacon ahumado, aros de cebolla crujientes, salsa BBQ y queso pepper jack en un pan brioche.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>