-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdeals.html
269 lines (218 loc) · 12.5 KB
/
deals.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
<!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>Meteora - promoções</title>
<!-- Tag Meta, for SEO max 160 characters -->
<meta name="description" content="Aproveite as promoções do momento!">
<meta name="author" content="Marcos Bento">
<!-- Link to Icon -->
<link rel="icon" type="image/png" href="assets/img/Favicon-64px.png">
<!-- Link to Reset CSS -->
<link rel="stylesheet" href="assets/css/reset.css">
<!-- Link to font: Inter -->
<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=Inter:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Link to style -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Connectin Font Awesome with my login to insert some icones -->
<script src="https://kit.fontawesome.com/e36fc46d40.js" crossorigin="anonymous"></script>
<!-- link to Swiper -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
</head>
<body>
<header>
<nav class="navbar_container">
<div class="left_components">
<figure class="logo"></figure>
<!-- Regular Menu -->
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="ourStores.html">Nossas Lojas</a></li>
<li><a href="deals.html">Promoções</a></li>
<li><a href="news.html">Novidades</a></li>
</ul>
</div>
<!-- Hamburguer Menu (mobile only)-->
<div class="hamb">
<i class="fa-sharp fa-solid fa-bars fa-lg" style="color: #daff01;"></i>
</div>
<div class="hamb_menu">
<i class="fa-sharp fa-regular fa-x fa-lg" style="color: #daff01;"></i>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="ourStores.html">Nossas Lojas</a></li>
<li><a class="menu_selected" href="deals.html">Promoções</a></li>
<li><a href="news.html">Novidades</a></li>
</ul>
</div>
<!-- Regular Search -->
<div class="search">
<form class="search_form" action="">
<input class="search_input" type="text" name="search" placeholder="Digite o produto" data-search>
</form>
<button class="search_button" data-search-button>
<p>Search</p>
</button>
</div>
</nav>
<!-- Search box (mobile only) -->
<div class="search_mobile">
<form class="search_form" action="">
<input class="search_input" type="text" name="search_mobile" placeholder="Digite o produto" data-search-mobile>
</form>
<button class="search_button_mobile" data-search-mobile-button>
<p>Search</p>
</button>
</div>
</header>
<main>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="banner banner_mobile" src="assets/img/Mobile/Banner_carousel 1 _ 375.png" alt="Uma mulher morena vestida com uma jaqueta rosa em pose em poderada, fundo roxo">
<img class="banner banner_tablet" src="assets/img/Tablet/Banner_carousel_1_768.png" alt="Uma mulher morena vestida com uma jaqueta rosa em pose em poderada, fundo roxo">
<img class="banner banner_desktop" src="assets/img/Desktop/Banner_carousel_1_1440.png" alt="Uma mulher morena vestida com uma jaqueta rosa em pose em poderada, fundo roxo">
</div>
<div class="swiper-slide">
<h2 class="swiper-title">COLEÇÃO ATEMPORAL</h2>
<p class="swiper-text">Estilo e qualidade para durar.</p>
<img class="banner banner_mobile" src="assets/img/Mobile/Banner_carousel 2 _ 375.png" alt="Uma mulher morena, de oculos escuros e roupa preta sentada em um sofá, fundo pink salmão">
<img class="banner banner_tablet" src="assets/img/Tablet/Banner_carousel_2_768.png" alt="Uma mulher morena vestida com uma jaqueta rosa em pose em poderada, fundo roxo">
<img class="banner banner_desktop" src="assets/img/Desktop/Banner_carousel_2_1440.png" alt="Uma mulher morena vestida com uma jaqueta rosa em pose em poderada, fundo roxo">
</div>
<div class="swiper-slide">
<h2 class="swiper-title swiper-title-2">COLEÇÃO ATEMPORAL</h2>
<p class="swiper-text swiper-text-2">Alto impacto visual, baixo impacto ambiental.</p>
<img class="banner banner_mobile" src="assets/img/Mobile/Banner_carousel 3 _ 375.png" alt="Um homem moreno vestido com camisa branca e blusa cinza, gravata borboleta e chapéu, fundo vermelho">
<img class="banner banner_tablet" src="assets/img/Tablet/Banner_carousel_3_768.png" alt="Uma mulher morena vestida com uma jaqueta rosa em pose em poderada, fundo roxo">
<img class="banner banner_desktop" src="assets/img/Desktop/Banner_carousel_3_1440.png" alt="Uma mulher morena vestida com uma jaqueta rosa em pose em poderada, fundo roxo">
</div>
</div>
<div class="swiper-button-next"><i class="fa-sharp fa-solid fa-caret-right fa-2xl custom-pagination" style="color: #ffffff;"></i></div>
<div class="swiper-button-prev"><i class="fa-sharp fa-solid fa-caret-left fa-2xl custom-pagination" style="color: #ffffff;"></i></div>
<div class="swiper-pagination"></i></div>
</div>
<section class="products products_deals">
<h3 class="products_title">Produtos com desconto:</h3>
<div class="products_container" data-products-promotional>
<!-- Promotional Products will be loaded here -->
</div>
</section>
<section class="product_modal">
<div id="modal" class="modal">
<div class="modal_content">
<div class="modal_header">
<i class="fa-regular fa-circle-check fa-2xl modal_icon" style="color: #daff01;"></i>
<p class="modal_header_title">Confira detalhes sobre o produto</p>
<span class="close">×</span>
</div>
<div class="modal_outer_content">
<!-- Modal Content goes here -->
</div>
</div>
</div>
</section>
<section class="newsletter_modal">
<div id="modal_newsletter" class="modal modal_newsletter">
<div class="modal_content_newsletter">
<div class="modal_header">
<i class="fa-regular fa-circle-check fa-2xl modal_icon" style="color: #daff01;"></i>
<p class="modal_header_title">E-mail cadastrado com sucesso!</p>
<span class="news_close">×</span>
</div>
<div class="modal_outer_content_newsletter">
<p>Em breve você receberá novidades exclusivas da Meteora.</p>
</div>
</div>
</div>
</section>
<section class="infos">
<h3 class="infos_title">Conheça todas as nossas facilidades</h3>
<div class="infos_container">
<div class="infos_topic">
<div class="infos_left">
<img class="infos_mobile" src="assets/img/Mobile/Ícones/x-diamond.png" alt="Ícone do PIX, sinalizando que a loja aceita pagamentos via PIX">
<img class="infos_tablet" src="assets/img/Tablet/Ícones/x-diamond (1).png" alt="Ícone do PIX, sinalizando que a loja aceita pagamentos via PIX">
<img class="infos_desktop" src="assets/img/Desktop/Ícones/x-diamond (2).png" alt="Ícone do PIX, sinalizando que a loja aceita pagamentos via PIX">
</div>
<div class="infos_right">
<h4 class="infos_label">PAGUE PELO PIX</h4>
<p class="infos_text infos_text_1">Ganhe 5% OFF em pagamentos via PIX</p>
</div>
</div>
<div class="infos_topic">
<div class="infos_left">
<img class="infos_mobile" src="assets/img/Mobile/Ícones/arrow-repeat.png" alt="Duas setas em circulo formando um loop">
<img class="infos_tablet" src="assets/img/Tablet/Ícones/arrow-repeat (1).png" alt="Duas setas em circulo formando um loop">
<img class="infos_desktop" src="assets/img/Desktop/Ícones/arrow-repeat (2).png" alt="Duas setas em circulo formando um loop">
</div>
<div class="infos_right">
<h4 class="infos_label">TROCA GRÁTIS</h4>
<p class="infos_text">Fique livre para trocar em até 30 dias.</p>
</div>
</div>
<div class="infos_topic">
<div class="infos_left">
<img class="infos_mobile" src="assets/img/Mobile/Ícones/flower1.png" alt="Uma flor, simbolizando o sentimento de responsabilidade ambiental">
<img class="infos_tablet" src="assets/img/Tablet/Ícones/flower1 (1).png" alt="Uma flor, simbolizando o sentimento de responsabilidade ambiental">
<img class="infos_desktop" src="assets/img/Desktop/Ícones/flower1 (3).png" alt="Uma flor, simbolizando o sentimento de responsabilidade ambiental">
</div>
<div class="infos_right">
<h4 class="infos_label">Sustentabilidade</h4>
<p class="infos_text">Moda responsável, que respeita o meio ambiente.</p>
</div>
</div>
</div>
</section>
<section class="newsletter">
<div class="newsletter_container">
<p class="newsletter_text">Quer receber nossas novidades, promoções exclusivas e 10% OFF na primeira compra? Cadastre-se!</p>
<div class="newsletter_form">
<input class="newsletter_input" type="email" name="email" id="" placeholder="Digite seu e-mail">
<button class="newsletter_button">Enviar</button>
</div>
<p class="newsletter_error_alert">E-mail inválido!</p>
</div>
</section>
<!-- link do scripts in body -->
<script src="assets/js/index.js"></script>
<!-- link do script showProducts (Conexão via API ao DB.JSON) -->
<script type='module' src="assets/js/pageDeals.js"></script>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
bulletClass: 'swiper-pagination-bullet',
bulletActiveClass: 'swiper-pagination-bullet-active',
bulletElement: 'span',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '"></span>';
}
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</main>
<footer>
<p class="footer_text">2023 © Desenvolvido por Marcos Bento | Projeto fictício sem fins comerciais.</p>
</footer>
</body>
</html>