-
Notifications
You must be signed in to change notification settings - Fork 1
/
loja.html
291 lines (261 loc) · 14.8 KB
/
loja.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Define a codificação de caracteres para UTF-8, que suporta uma ampla gama de caracteres -->
<!-- Define a configuração de visualização inicial da página para o tamanho do dispositivo e escala inicial -->
<title>Nossa loja</title>
<!-- Define o título da página como "Nossa Equipe" -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Preconecta-se ao serviço do Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<!-- Importa a fonte Poppins do Google Fonts com diferentes pesos e estilos -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- Importa o arquivo CSS do Font Awesome para utilizar ícones -->
<link rel="stylesheet" href="./css/loja.css">
<!-- Importa um arquivo CSS local chamado equipe.css -->
</head>
<body>
<header>
<!-- Início do cabeçalho -->
<div class="container-navbar">
<!-- Um contêiner para a barra de navegação -->
<div class="logo">
<!-- Logotipo da página -->
<img src="./img/slide/logo2.png" alt="Logo cozinha20">
<!-- Imagem do logotipo com um texto alternativo -->
<h2>Cozinha20</h2>
<!-- <h2>Cozinha20</h2> -->
</div>
<button class="hamburger">☰</button>
<!-- Um botão para a versão mobile do menu -->
<nav class="navbar">
<!-- Navegação principal -->
<ul class="nav-menu">
<!-- Lista de itens do menu -->
<li class="nav-item"><a href="index.html">Home</a></li>
<!-- Item do menu "Home" -->
<li class="nav-item"><a href="equipe.html">Equipe</a></li>
<!-- Item do menu "Equipe" com uma classe para indicar que está ativo -->
<li class="nav-item"><a href="receitas.html">Receitas</a></li>
<!-- Item do menu "Receitas" -->
<li class="nav-item active"><a href="loja.html">Loja</a></li>
<!-- Item do menu "Loja" -->
<li class="nav-item login-item"><a href="login.html" class="login-btn">Entrar</a></li>
<!-- Item do menu "Entrar" -->
</ul>
</nav>
</div>
<!-- Fim do cabeçalho -->
</header>
<main class="controle">
<div class="container-livros">
<div class="product">
<img src="./img/livros/1 segredos da cozinha.png" alt="Capa do Livro">
<h2>Segredos da cozinha</h2>
<p>Explore os mistérios culinários com este guia abrangente, repleto de dicas e truques de chefs renomados para elevar suas habilidades na cozinha.</p>
<p>R$50,00</p>
<input type="number" id="quantity1" placeholder="Quantidade">
<button class="comprar-btn" data-preco="50" data-nome= "Segredos da cozinha" data-input="quantity1">Comprar</button>
</div>
<div class="product">
<img src="./img/livros/16 delícias á mesa.png" alt="Capa do Livro">
<h2>Delícias á mesa</h2>
<p> Descubra uma variedade de pratos irresistíveis neste livro que combina técnicas tradicionais, garantindo momentos memoráveis à mesa no seu dia a dia.</p>
<p>R$75,00</p>
<input type="number" id="quantity2" placeholder="Quantidade">
<button class="comprar-btn" data-preco="75" data-nome="Delícias á mesaa" data-input="quantity2">Comprar</button>
</div>
<div class="product">
<img src="./img/livros/3secreto das especiarias.png" alt="Capa do Livro">
<h2>Secreto das especiarias</h2>
<p>Desvende os segredos por trás das especiarias mais exóticas do mundo e aprenda como utilizá-las para criar pratos que encantam.</p>
<p>Preço: R$60,00</p>
<input type="number" id="quantity3" placeholder="Quantidade">
<button class="comprar-btn" data-preco="60" data-nome="Secreto das especiarias" data-input="quantity3">Comprar</button>
</div>
<div class="product">
<img src="./img/livros/4 a magia dos temperos.png" alt="Capa do Livro">
<h2>A magia dos temperos</h2>
<p> Transforme suas refeições cotidianas em experiências extraordinárias com este livro que revela o poder dos temperos.</p>
<p>R$35,00</p>
<input type="number" id="quantity4" placeholder="Quantidade">
<button class="comprar-btn" data-preco="35" data-nome="A magia dos temperos" data-input="quantity4">Comprar</button>
</div>
<div class="product">
<img src="./img/livros/5 cozinhando com amor.png" alt="Capa do Livro">
<h2>cozinhando com amor</h2>
<p>Explore o amor como ingrediente principal em cada receita deste livro, onde cada prato é especial.</p>
<p>R$40,00</p>
<input type="number" id="quantity5" placeholder="Quantidade">
<button class="comprar-btn" data-preco="40" data-nome="Cozinhando com amor" data-input="quantity5">Comprar</button>
</div>
<div class="product">
<img src="./img/livros/6aroma &sabor.png" alt="Capa do Livro">
<h2>Aroma & Sabor</h2>
<p> Deixe-se envolver pelos aromas e sabores incríveis apresentados neste livro, que celebra a diversidade culinária ao redor do mundo.</p>
<p>R$45,00</p>
<input type="number" id="quantity6" placeholder="Quantidade">
<button class="comprar-btn" data-preco="45" data-nome="Aroma & Sabor" data-input="quantity6">Comprar</button>
</div>
<div class="product">
<img src="./img/livros/17 cozinha simples.png" alt="Capa do Livro">
<h2>Cozinha Simples</h2>
<p>Simplifique sua vida na cozinha com este livro repleto de receitas práticas e deliciosas, perfeito para iniciantes e chefs experientes.</p>
<p>R$50,00</p>
<input type="number" id="quantity7" placeholder="Quantidade">
<button class="comprar-btn" data-preco="50" data-nome="Cozinha Simples" data-input="quantity7">Comprar</button>
</div>
<div class="product">
<img src="./img/livros/8 sabor do tempo.png" alt="Capa do Livro">
<h2>Sabor do Tempo</h2>
<p> Viaje através do tempo e saboreie as tradições culinárias de diversas culturas, capturadas nas páginas deste livro inspirador.</p>
<p>R$55,00</p>
<input type="number" id="quantity8" placeholder="Quantidade">
<button class="comprar-btn" data-preco="55" data-nome="Sabor do tempo" data-input="quantity8">Comprar</button>
</div>
<div class="product">
<img src="./img/livros/9cozinhando com amor2.png" alt="Capa do Livro">
<h2>Cozinhando com amor2</h2>
<p> Uma continuação do sucesso anterior, este livro apresenta novas receitas repletas de amor e paixão pela culinária moderna.</p>
<p>R$60,00</p>
<input type="number" id="quantity9" placeholder="Quantidade">
<button class="comprar-btn" data-preco="60" data-nome="Cozinhando com amor" data-input="quantity9">Comprar</button>
</div>
<div class="product">
<img src="./img/livros/13 sobremesas sem fronteiras.png" alt="Capa do Livro">
<h2>Sobremesas sem Fronteiras</h2>
<p>Explore um mundo de sobremesas deliciosas e sem limites, garantindo um final doce para qualquer refeição para seu dia.</p>
<p>R$65,00</p>
<input type="number" id="quantity10" placeholder="Quantidade">
<button class="comprar-btn" data-preco="65" data-nome="sobremesa sem fronteiras" data-input="quantity10">Comprar</button>
</div>
<div class="product">
<img src="./img/livros/11 cozinha criativa.png" alt="Capa do Livro">
<h2>Cozinha Criativa</h2>
<p> Liberte sua criatividade na cozinha com este livro que desafia convenções e oferece novas perspectivas sobre a arte de cozinhar,com receitas inovadoras.</p>
<p>R$70,00</p>
<input type="number" id="quantity11" placeholder="Quantidade">
<button class="comprar-btn" data-preco="70" data-nome="Cozinha Criativa" data-input="quantity11">Comprar</button>
</div>
<div class="product">
<img src="./img/livros/12 sabores do mundo.png" alt="Capa do Livro">
<h2>Sabores do Mundo</h2>
<p>Embarque em uma jornada gastronômica global com este livro que apresenta uma variedade de pratos autênticos tradicionais e conteporâneos.</p>
<p>R$75,00</p>
<input type="number" id="quantity12" placeholder="Quantidade">
<button class="comprar-btn" data-preco="75" data-nome="Sabores do mundo" data-input="quantity12">Comprar</button>
</div>
</div>
<div id="resumo"> <!-- Div que contém o resumo da compra -->
<h3>Resumo da Compra</h3> <!-- Título do resumo -->
<p>Quantidade Total: <span id="quantidadeTotal">0</span></p> <!-- Parágrafo que mostra a quantidade total de itens -->
<p>Valor Total: R$<span id="valorTotal">0.00</span></p> <!-- Parágrafo que mostra o valor total da compra -->
<button id="limparHistorico">Limpar Histórico</button> <!-- Botão para limpar o histórico de compras -->
</div>
</main>
<footer>
<!-- Conteúdo do rodapé -->
<div id="footer_content">
<!-- Informações sobre "Cozinha20" -->
<div id="footer_contacts">
<h1>Cozinha20</h1>
<p>As melhores receitas na sua mão.</p>
<!-- Links para redes sociais -->
<div id="footer_social_media">
<a href="https://www.instagram.com/" target="_blank" class="footer-link" id="instagram">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="https://www.facebook.com/" target="_blank" class="footer-link" id="facebook">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="https://web.whatsapp.com/" target="_blank" class="footer-link" id="whatsapp">
<i class="fa-brands fa-whatsapp"></i>
</a>
</div>
</div>
<!-- Lista de links de contato -->
<ul class="footer-list">
<li>
<h3>Contatos</h3>
<!-- Título da lista -->
</li>
<!-- Item da lista -->
<li>
<a href="https://web.whatsapp.com/" target="_blank" class="footer-link">whatsapp</a>
<!-- Link para o WhatsApp -->
</li>
<li>
<a href="https://www.facebook.com/" target="_blank" class="footer-link">Facebook</a>
<!-- Link para o Facebook -->
</li>
<li>
<a href="https://www.instagram.com/" target="_blank" class="footer-link">Instagram</a>
<!-- Link para o Instagram -->
</li>
</ul>
<!-- Lista de serviços -->
<ul class="footer-list">
<!-- Lista de links -->
<li>
<h3>Serviços</h3>
<!-- Título da lista -->
</li>
<!-- Item da lista -->
<li>
<a href="receitas.html" class="footer-link">Receitas</a>
<!-- Link para a página de receitas -->
</li>
<!-- Item da lista -->
<li>
<a href="loja.html" class="footer-link">Loja</a>
<!-- Link para a página da loja -->
</li>
<!-- Item da lista -->
<li>
<a href="cadastro.html" class="footer-link">Trabalhe conosco</a>
<!-- Link para a página de cadastro para trabalhar -->
</li>
<!-- Item da lista -->
</ul>
<!-- Fim da lista de serviços -->
<!-- Formulário de inscrição -->
<div id="footer_subscribe">
<h3>Inscreva-se!</h3>
<!-- Título -->
<p>
Deixe seu e-mail para receber atualizações.
</p>
<!-- Descrição -->
<div id="input_group">
<!-- Grupo de entrada -->
<label for="email"></label>
<!-- Rótulo para o campo de e-mail -->
<input type="email" id="email" name="email" required>
<!-- Campo de e-mail -->
<button type="submit">
<i class="fas fa-envelope"></i>
</button>
<!-- Botão de envio -->
</div>
<!-- Fim do grupo de entrada -->
</div>
<!-- Fim do formulário de inscrição -->
</div>
<!-- Fim do conteúdo do rodapé -->
<!-- Direitos autorais -->
<div id="footer_copyright">
@2024 Direitos reservados ao grupo3
</div>
<!-- Fim dos direitos autorais -->
</footer>
<button onclick="scrollToTop()" id="btnTopo" title="Voltar ao Topo"></button>
<!-- Botão para voltar ao topo -->
<script src="./js/loja.js"></script>
<!-- Script JavaScript -->
</body>
</html>