-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
306 lines (279 loc) · 10.3 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- SEO tags -->
<meta
name="description"
content="Vení al mejor café coworking de Buenos Aires. El más amplio espacio para trabajar mientras disfrutás de nuestra cafetería y pastelería. Envíos a toda CABA."
/>
<meta
name="keywords"
content="coffee, café, coworking, trabajo, work, Palermo, Buenos Aires, pastelería, tortas"
/>
<!-- Title -->
<title>Café Palermo</title>
<!-- Bootstrap 5.3 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous"
/>
<!-- Bootstrap Icons CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
/>
<!-- style.css -->
<link rel="stylesheet" href="assets/css/style.css" />
<!-- Favicon -->
<link
rel="shortcut icon"
href="./assets/img/logo.svg"
type="image/x-icon"
/>
</head>
<body>
<div class="index__body__navbar-main-bg pb-5" id="index">
<!-- Navbar -->
<header>
<nav class="navbar navbar-expand-md navbar-custom">
<div class="container-fluid container-lg">
<a
class="navbar-brand active navbar-brand-custom"
aria-current="page"
href="index.html"
><img
src="./assets/img/logo.svg"
alt="Logo (Taza de café)"
class="navbar-logo"
/>Café Palermo</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarNavAltMarkup"
>
<div class="navbar-nav navbar-nav-custom">
<!-- Link to Coworking -->
<a
class="nav-link nav-link-custom hover-underline-animation"
href="./assets/pages/coworking.html"
>Coworking</a
>
<!-- Link to Tienda -->
<a
class="nav-link nav-link-custom hover-underline-animation"
href="./assets/pages/tienda.html"
>Tienda</a
>
<!-- Cart dropdown menu -->
<div class="dropdown-center">
<a
class="nav-link nav-link-cart dropdown-toggle py-1"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="bi bi-cart fs-5" title="Ver carrito"></i>
</a>
<div
class="dropdown-menu dropdown-menu-end dropdown-menu-custom"
>
<ul class="mb-0" id="cart-icon">
<!-- Cart products will be listed here with JavaScript -->
</ul>
<div class="justify-content-end mx-3 fs-5 cart-icon-footer">
<span class="me-4" id="cart-icon-total"></span>
<a href="./assets/pages/carrito.html">Ver carrito</a>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<!-- Main -->
<main class="index__body__main">
<div class="index__body__main__title fadein-index-title">
<h1 class="mb-2">Tu café coworking favorito</h1>
<h2>¡Ahora cuenta con delivery!</h2>
</div>
</main>
</div>
<!-- Section -->
<section class="index__body__section py-5">
<!-- First <div> -->
<div
class="index__body__section__div d-flex flex-md-row flex-column-reverse justify-content-evenly"
>
<figure
class="col-md-6 my-5 d-md-flex flex-md-column figure-index1-img fadein-js-left"
>
<img
src="./assets/img/index1.webp"
alt="Imagen de café y croissants"
class="figure-img img-fluid rounded index1-img"
/>
<figcaption class="figure-caption">
Fuente:
<a href="https://unsplash.com/es/fotos/z3em1GBRhvY" target="_blank"
>Nathan Dumlao (Unsplash)</a
>
</figcaption>
</figure>
<div class="col-1"></div>
<div
class="col-md-5 d-md-flex flex-md-column flex-md-wrap justify-content-md-center text-center text-md-end index__body__section__text balance fadein-js-right"
>
<h2 class="w-100 fs-1 mb-4">El lugar ideal para todo</h2>
<h3 class="fs-3">
Nunca pensaste disfrutar tanto un desayuno, desear que llegue YA la
hora de la merienda o trabajar en un ambiente tan ameno.
</h3>
</div>
</div>
<!-- Second <div> -->
<div
class="index__body__section__div d-flex flex-md-row flex-column pt-5 justify-content-evenly"
>
<div
class="col-md-5 d-md-flex flex-md-column flex-md-wrap justify-content-md-center text-center text-md-start index__body__section__text balance fadein-js-left"
>
<h2 class="w-100 fs-1 mb-4">Coworking al máximo nivel</h2>
<h3 class="fs-3">
Nuestra cafetería cuenta con el más amplio espacio de coworking de
la ciudad, perfecto para trabajar solo o acompañado.
</h3>
</div>
<div class="col-1"></div>
<figure class="col-md-6 my-5 d-md-flex flex-md-column fadein-js-right">
<img
src="./assets/img/index2.webp"
alt="Imagen de mesa amplia con personas trabajando"
class="figure-img img-fluid rounded"
/>
<figcaption class="figure-caption">
Fuente:
<a href="https://unsplash.com/es/fotos/SYTO3xs06fU" target="_blank"
>Marvin Meyer (Unsplash)</a
>
</figcaption>
</figure>
</div>
</section>
<!-- Cart icon for mobile -->
<div class="fixed-bottom d-none d-md-none cart-icon-mobile-container">
<div class="cart-icon-mobile-amount"></div>
<div class="cart-icon-mobile">
<a href="./assets/pages/carrito.html">
<i class="bi bi-cart-fill"></i>
</a>
</div>
</div>
<!-- Footer -->
<footer>
<!-- Up floating button -->
<a href="#" class="up-floating-icon"><i class="bi bi-arrow-up"></i></a>
<div class="container-fluid container-lg py-5">
<div
class="d-flex flex-row justify-content-between justify-content-sm-evenly"
>
<div>
<a
href="./index.html"
class="d-flex mx-auto mb-3 link-body-emphasis text-decoration-none footer-logo"
>
<img src="./assets/img/logo.svg" alt="Logo (Taza de café)" />
</a>
<p class="text-body-secondary d-flex align-items-center">
<i class="bi bi-c-circle"></i
><a
href="https://github.com/alexiscirmi/javascript-ecommerce-coderhouse"
target="_blank"
class="nav-link-footer ps-1"
>Alexis Cirmi</a
>
</p>
<p>Sitio de fantasía</p>
</div>
<div class="mb-2">
<h3 class="mb-3 fs-5">Secciones</h3>
<ul class="nav flex-column">
<li class="nav-item mb-3">
<a
href="./index.html"
class="nav-link d-inline-block p-0 text-body-secondary nav-link-footer"
>Inicio</a
>
</li>
<li class="nav-item mb-3">
<a
href="./assets/pages/coworking.html"
class="nav-link d-inline-block p-0 text-body-secondary nav-link-footer"
>Coworking</a
>
</li>
<li class="nav-item mb-3">
<a
href="./assets/pages/tienda.html"
class="nav-link d-inline-block p-0 text-body-secondary nav-link-footer"
>Tienda</a
>
</li>
</ul>
</div>
<div class="mb-2">
<h3 class="mb-3 fs-5">Redes sociales</h3>
<ul class="nav flex-column">
<li class="nav-item mb-3">
<a
onclick="alert('(Link a página de Facebook del negocio)')"
class="nav-link d-inline-block p-0 text-body-secondary nav-link-footer"
>Facebook</a
>
</li>
<li class="nav-item mb-3">
<a
onclick="alert('(Link a página de Instagram del negocio)')"
class="nav-link d-inline-block p-0 text-body-secondary nav-link-footer"
>Instagram</a
>
</li>
<li class="nav-item mb-3">
<a
onclick="alert('(Link a teléfono de WhatsApp del negocio)')"
class="nav-link d-inline-block p-0 text-body-secondary nav-link-footer"
>WhatsApp</a
>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Bootstrap 5.3 JS -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"
></script>
<!-- JavaScript files -->
<script src="./assets/js/animations.js"></script>
<script src="./assets/js/cart.js" type="module"></script>
</body>
</html>