forked from gabrielalencs/Starbucks-Coffee-Company
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
410 lines (391 loc) · 23.7 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
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
<!DOCTYPE html>
<html lang="pt-br">
<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">
<title>Starbucks Coffee Company - Home</title>
<!-- Favicon -->
<link rel="shortcut icon" href="imagens/favicon-16x16.png" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&family=Lato:wght@400;700;900&display=swap"
rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<!-- Js Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"
defer></script>
<!-- Bootstrap Icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Style Starbucks -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header_starbucks mb-3">
<nav class="navbar navbar-expand-md pt-3 ps-1">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="imagens/starbucks-nav-logo.svg" alt="Logo Starbucks"></a>
<button class="navbar-toggler border-0 button" type="button" data-bs-target="#offcanvas"
aria-expanded="false" aria-label="Toggle navigation" data-bs-toggle="offcanvas"
aria-controls="offcanvasExample">
<i class="bi bi-list"></i>
</button>
<div class="collapse navbar-collapse justify-content-evenly" id="navbarSupportedContent">
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link text-black text-uppercase">Menu
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link text-black text-uppercase">Rewards
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-black text-uppercase">Nosso café
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-black text-uppercase">Impacto Social
</a>
</li>
</ul>
<div class="container-fluid w-auto gap-3 m-0 p-0">
<img src="imagens/sb-historias-logo.svg" alt="Logotipo Starbucks Histórias"
class="logotipo-history">
<a href="#" class="text-decoration-none text-dark fw-bolder">
<i class="bi bi-geo-alt-fill text-dark icon me-2 icon"></i>
<span class="text-icon">Encontre uma loja</span>
</a>
<button class="btn btn-light rounded-pill border-black bg-white py-1 px-3">Entrar</button>
<button class="btn btn-dark rounded-pill border-black bg-dark px-3">Participe agora</button>
</div>
</div>
</div>
</nav>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header p-0">
<ul class="nav flex-column w-100">
<li class="nav-item w-100 ps-3 pb-2 pb-1 pt-1">
<a href="#" class="nav-link text-dark">Menu</a>
</li>
<li class="nav-item w-100 ps-3 pb-2 pb-1 pt-1">
<a href="#" class="nav-link text-dark">Rewards</a>
</li>
<li class="nav-item w-100 ps-3 pb-2 pb-1 pt-1">
<a href="#" class="nav-link text-dark">Nosso Café</a>
</li>
<li class="nav-item w-100 ps-3 pb-2 pb-1 pt-1">
<a href="#" class="nav-link text-dark">Impacto Social</a>
</li>
</ul>
</div>
<hr class="mt-2">
<div class="offcanvas-body d-flex flex-column align-items-center">
<a href="#"><img src="imagens/sb-historias-logo.svg" alt="Logotipo Starbucks Histórias"
width="130px"></a>
<button
class="btn btn-light text-dark rounded-pill w-100 border-black bg-white py-2 mt-4 mb-2">Entrar</button>
<button class="btn btn-dark rounded-pill w-100 border-black bg-dark py-2">Participe agora</button>
<a href="#" class="text-decoration-none text-dark fw-bolder mt-4 align-self-start ms-3">
<i class="bi bi-geo-alt-fill text-dark icon mt-5 me-2 icon"></i>
<span class="text-icon">Encontre uma loja</span>
</a>
</div>
</div>
</header>
<main class="starbucks_main">
<div class="container-fluid p-0 d-none d-md-inline-block carousel-desktop">
<div id="carouselExampleIndicators2" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="imagens/banner_195590685_desktop.jpg" class="d-block img-fluid w-100"
alt="Imagem das promoções e dos produtos oferecidos no starbucks">
</div>
<div class="carousel-item">
<img src="imagens/banner_1244459907_desktop.jpg" class="d-block img-fluid w-100"
alt="Imagem das promoções e dos produtos oferecidos no starbucks">
</div>
<div class="carousel-item">
<img src="imagens/banner_1238876046_desktop.jpg" class="d-block img-fluid w-100"
alt="Imagem das promoções e dos produtos oferecidos no starbucks">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators2"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Prev</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators2"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="container-fluid p-0 d-inline-block d-md-none">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="imagens/banner_1868687486_mobile (1).jpg" class="d-block img-fluid w-100"
alt="Imagem das promoções e dos produtos oferecidos no starbucks">
</div>
<div class="carousel-item">
<img src="imagens/banner_1244459907_mobile.jpg" class="d-block img-fluid w-100"
alt="Imagem das promoções e dos produtos oferecidos no starbucks">
</div>
<div class="carousel-item">
<img src="imagens/banner_1238876046_mobile.jpg" class="d-block img-fluid w-100"
alt="Imagem das promoções e dos produtos oferecidos no starbucks">
</div>
</div>
</div>
</div>
<section class="container-fluid primary-color section-1 text-center mt-4 mb-4">
<p>Conforme abrimos nossas lojas, permanecemos no compromisso com a saúde e bem-estar de nossos partners e
consumidores.</p>
<button class="btn text-dark rounded-pill border-black py-1">Saiba mais</button>
</section>
<section class="container-fluid primary-color section-2 mb-4">
<div class="row">
<div class="col-12 p-0 col-md-6 d-flex align-items-center">
<img src="imagens/sb-dia-do-fotografo.jpg" alt="Promoção do Dia do Fotógrafo na Starbucks"
class="img-fluid w-100">
</div>
<div class="col-12 text-center col-md-6">
<h3>Voltando ao que amamos juntos</h3>
<p>Queridos clientes, partners e amigos, estamos acompanhando a situação atual do Brasil em relação
ao COVID-19, focados na segurança e bem estar dos nossos partners (como chamamos os nossos
colaboradores) e clientes. Seguimos os critérios de quarentena de cada munícipo que temos lojas.
As lojas abertas ou com entrega via delivery, através do nosso parceiro Rappi, estão seguindo as
orientações das autoridades de saúde.</p>
<button class="btn text-dark rounded-pill border-black p-md-2 px-4">Baixe nosso App e verifique as
lojas em
funcionamento</button>
</div>
</div>
</section>
<section class="container-fluid primary-color section-3 mb-4">
<div class="row">
<div class="col-12 col-md-6 order-md-2 p-0">
<img src="imagens/featured-drinks.jpg" alt="Drinks em destaque da Starbucks"
class="img-fluid w-100">
</div>
<div
class="col-12 col-md-6 d-flex justify-content-center align-items-center flex-column text-center p-4">
<h3>Saboreie uma pausa</h3>
<p>Saboreie uma pausa com uma de nossas bebidas</p>
<button class="btn text-dark rounded-pill border-black py-1 mb-2">Saiba mais</button>
</div>
</div>
</section>
<section class="container-fluid primary-color section-4 mb-4">
<div class="row">
<div class="col-12 col-md-6 p-0 d-flex align-items-center">
<img src="imagens/donate.jpg" alt="Drinks em destaque da Starbucks" class="img-fluid w-100">
</div>
<div
class="col-12 col-md-6 d-flex justify-content-center align-items-center flex-column text-center p-4">
<h3>Esperança e união</h3>
<p>Em parceria com ONGs, Partners da Starbucks se mobilizam para entregar café às comunidades.</p>
<button class="btn text-dark rounded-pill border-black py-1 mb-2 mt-3">Saiba mais</button>
</div>
</div>
</section>
<section class="container-fluid primary-color section-5">
<div class="row">
<div class="col-12 col-md-6 p-0 order-md-2 d-flex align-items-center">
<img src="imagens/partners.jpg" alt="Drinks em destaque da Starbucks" class="img-fluid w-100">
</div>
<div
class="col-12 col-md-6 d-flex justify-content-center align-items-center flex-column text-center p-4">
<h3>Coisas boas estão acontecendo</h3>
<p>Um gesto de carinho àqueles que estão na linha de frente todos os dias.</p>
<button class="btn text-dark rounded-pill border-black py-1 mb-2 mt-2">Saiba mais</button>
</div>
</div>
</section>
</main>
<footer class="footer-starkbucks">
<div class="accordion d-md-none footer-accordion" id="accordionExample">
<div class="accordion-item border-0">
<h2 class="accordion-header">
<button class="accordion-button text-dark" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Sobre nós
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<ul class="nav flex-column gap-4">
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Nossa
empresa</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Nosso
café</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Atendimento
ao cliente</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Compliance
e Privacidade</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Código de
Ética e Conduta SouthRock</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion-item border-0">
<h2 class="accordion-header">
<button class="accordion-button text-dark" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
Carreira
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<ul class="nav flex-column gap-4">
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Central de
carreiras</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion-item border-0">
<h2 class="accordion-header">
<button class="accordion-button text-dark" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseOne">
Impacto Social
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<ul class="nav flex-column gap-4">
<li class="nav-item"><a href="#"
class="text-decoration-none text-dark-emphasis">Comunidade</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Meio
Ambiente</a></li>
<li class="nav-item"><a href="#"
class="text-decoration-none text-dark-emphasis">Fornecimento ético</a></li>
<li class="nav-item"><a href="#"
class="text-decoration-none text-dark-emphasis">Histórias</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion-item border-0">
<h2 class="accordion-header">
<button class="accordion-button text-dark" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFour" aria-expanded="true" aria-controls="collapseOne">
Starbucks Rewards
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<ul class="nav flex-column gap-4">
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Baixe o
aplicativo</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Termos &
Condições do Starbucks Card</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Termos &
Condições do Starbucks Rewards</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Termos &
Condições do Gift Card</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Código de
Ética e Conduta SouthRock</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Termos &
Condições Peça e Pague pelo Celular e Retire na Loja</a></li>
</ul>
</div>
</div>
</div>
<a href="#"><img src="imagens/sb-historias-logo.svg" alt="Logotipo Starbucks Histórias"
class="footer-img-logo ms-3 mt-3"></a>
</div>
<div class="container-fluid d-none d-md-flex footer-links justify-content-between">
<ul class="nav flex-column gap-4">
<li class="nav-item">Sobre nós</li>
<li class="nav-item mt-2"><a href="#" class="text-decoration-none text-dark-emphasis">Nossa empresa</a>
</li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Nosso café</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Atendimento ao
cliente</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Compliance e
Privacidade</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Código de Ética e
Conduta SouthRock</a></li>
</ul>
<ul class="nav flex-column gap-4">
<li class="nav-item nav-title">Carreira</li>
<li class="nav-item mt-2"><a href="#" class="text-decoration-none text-dark-emphasis">Central de
carreiras</a></li>
</ul>
<ul class="nav flex-column gap-4">
<li class="nav-item nav-title">Impacto Social</li>
<li class="nav-item mt-2"><a href="#" class="text-decoration-none text-dark-emphasis">Comunidade</a>
</li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Meio Ambiente</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Fornecimento ético</a>
</li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Histórias</a></li>
</ul>
<ul class="nav flex-column gap-4 mb-3">
<li class="nav-item nav-title">Starbucks Rewards</li>
<li class="nav-item mt-2"><a href="#" class="text-decoration-none text-dark-emphasis">Baixe o
aplicativo</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Termos & Condições do
Starbucks Card</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Termos & Condições do
Starbucks Rewards</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Termos & Condições do
Gift Card</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Código de Ética e
Conduta SouthRock</a></li>
<li class="nav-item"><a href="#" class="text-decoration-none text-dark-emphasis">Termos & Condições Peça
e Pague pelo Celular e Retire na Loja</a></li>
</ul>
<a href="#"><img src="imagens/sb-historias-logo.svg" alt="Logotipo Starbucks Histórias"
class="footer-img-logo ms-3 mt-3"></a>
</div>
<hr class="m-lg-auto">
<div class="container-fluid">
<div class="social-media d-flex gap-3">
<i class="bi bi-spotify"></i>
<i class="bi bi-facebook"></i>
<i class="bi bi-linkedin"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-youtube"></i>
<i class="bi bi-twitter"></i>
</div>
<ul class="nav flex-column mt-4 d-md-none">
<li class="nav-item"><a href="#" class="nav-link text-dark">Política de privacidade</a></li>
<li class="nav-item"><a href="#" class="nav-link text-dark">Política de troca de produto</a></li>
<li class="nav-item"><a href="#" class="nav-link text-dark">Termos de uso</a></li>
<li class="nav-item"><a href="#" class="nav-link text-dark">Política de Cookies</a></li>
</ul>
<div class="politicas ps-2 p-lg-0 d-none d-md-inline-block">
<span>Política de privacidade</span>
<span>Política de troca de produto</span>
<span>Termos de uso</span>
<span>Política de Cookies</span>
</div>
<p class="text-dark-emphasis text-copyright">© 2023 Starbucks Coffee Company. Todos os direitos reservados.
</p>
</div>
</footer>
</body>
</html>