/
index.html
127 lines (122 loc) · 5.78 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
<!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">
<meta name="description" content="Página do Starbucks refeita por mim, estudante de desenvolvimento web, para exercitar os conhecimentos básicos em front-end">
<title>StarBucks Coffe Company</title>
<!-- Favicon -->
<link rel="shortcut icon" href="assets/starbucks-nav-logo.svg" type="image/x-icon">
<!-- Estilos -->
<link rel="stylesheet" href="css/index.css">
<!-- Fonte Roboto -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">
</head>
<body onscroll="onScroll()" id="topo">
<div id="menuResponsivo" class="">
<a id="logo" href="#"><img src="assets/starbucks-nav-logo.svg" alt="starbucks-nav-logo" width="50"></a>
<nav id="nav">
<button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">
<span id="hamburger"></span>
</button>
<ul id="menu" role="menu">
<li><a href="#">Sobre</a></li>
<li><a href="#">Rewards</a></li>
<li><a href="#">Nosso café</a></li>
<li><a href="#">Impacto Social</a></li>
</ul>
</nav>
</div>
<header class="header">
<nav class="header-nav">
<img src="assets/starbucks-nav-logo.svg" alt="starbucks logo" width="50">
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Rewards</a></li>
<li><a href="#">Nosso café</a></li>
<li><a href="#">Impacto Social</a></li>
</ul>
</nav>
<div class="header-div">
<img src="assets/sb-historias-logo.svg" alt="starbucks histórias" width="120">
<img src="assets/pin.png" alt="pin location" width="40">
<a href="#">Encontre uma loja</a>
<button class="header-div-button1">Entrar</button>
<button class="header-div-button2">Participe agora</button>
</div>
</header>
<section class="logo-desktop"></section>
<main class="main">
<section class="main-section1">
<p>Conforme abrimos nossas lojas, permanecemos no compromisso com a saúde e bem-estar de<br>nossos partners e consumidores.</p>
<a href="#">Saiba mais</a>
</section>
<section class="main-section2">
<div class="main-section2-div1"></div>
<div class="main-section2-div2">
<h2>Voltando ao que amamos juntos</h2>
<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>
<a href="#">Baixe nosso App</a>
</div>
</section>
<section class="main-section3">
<div class="main-section3-div1">
<h2>Saboreie uma pausa</h2>
<p>Saboreie uma pausa com uma de nossas bebidas.</p>
<a href="#">Saiba mais</a>
</div>
<div class="main-section3-div2"></div>
</section>
</main>
<section class="links">
<dl>
<dt>Sobre nós</dt>
<dd><a href="#">Nossa empresa</a></dd>
<dd><a href="#">Nosso café</a></dd>
<dd><a href="#">Atendimento ao cliente</a></dd>
</dl>
<dl>
<dt>Carreira</dt>
<dd><a href="#">Central de carreiras</a></dd>
</dl>
<dl>
<dt>Impacto social</dt>
<dd><a href="#">Comunidade</a></dd>
<dd><a href="#">Meio Ambiente</a></dd>
<dd><a href="#">Fornecimento ético</a></dd>
<dd><a href="#">Histórias Starbucks</a></dd>
</dl>
<dl>
<dt>Starbucks Rewards</dt>
<dd><a href="#">Baixe o aplicativo</a></dd>
<dd><a href="#">Termos & Condições do StarBucks Card</a></dd>
<dd><a href="#">Termos & Condições do Starbucks Rewards</a></dd>
<dd><a href="#">Termos & Condições de Promoções Starbucks</a></dd>
</dl>
</section>
<footer class="footer">
<div class="footer-div1">
<a href="#"><img src="assets/icon-spotify.svg" alt="icon-spotify"></a>
<a href="#"><img src="assets/icon-facebook.svg" alt="icon-facebook"></a>
<a href="#"><img src="assets/icon-linkedin.svg" alt="icon-linkedin"></a>
<a href="#"><img src="assets/icon-instagram.svg" alt="icon-instagram"></a>
<a href="#"><img src="assets/icon-youtube.svg" alt="icon-youtube"></a>
<a href="#"><img src="assets/icon-twitter.svg" alt="icon-twitter"></a>
</div>
<div class="footer-div2">
<a href="#">Política de privacidade</a> |
<a href="#">Política de troca de produto</a> |
<a href="#">Termos de uso</a> |
<a href="#">Política de Cookies</a>
</div>
<p>© 2022 Starbucks Coffee Company. Todos os direitos reservados.</p>
<div id="botaoTopo">
<a href="#topo"><img src="assets/arrow-up.png" alt="arrow-up" width="35"></a>
</div>
</footer>
<script src="scripts/main.js"></script>
</body>
</html>