-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
331 lines (298 loc) · 14.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
<!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>Nhac!嗦嗦!</title>
<!-- * Estilos CSS -->
<link rel="stylesheet" href="./assets/css/styles.css">
<!-- * Fontes -->
<!--
_ Ma Shan Zheng -> para caracteres em mandarim
_ monoton -> título na primeira página (português)
_ Noto Sans JP -> texto geral
_ Girassol -> títulos internos
-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Girassol&family=Ma+Shan+Zheng&family=Noto+Sans+JP:wght@400;700;900&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">
</head>
<body>
<input type="checkbox" role="button" aria-label="close menu" id="close-menu" class="close-menu">
<label class="close-menu-label" for="close-menu" title="close menu"></label>
<Aside class="menu ">
<div class="sustein">
<div class="menu-content main-content ">
<div class="logo">
<h1 onclick="getElementById('close-menu').checked = false;"><a href="#logo">Nhac!</a></h1>
<h1 onclick="getElementById('close-menu').checked = false;" class="mandarim"><a href="#logo">嗦嗦!</a></h1>
</div>
<nav>
<ul onclick="getElementById('close-menu').checked = false;">
<!-- <div class="teste"><a href="#intro" class="nhac"></a></div>
<div class="teste"><a href="#salgados" class="nhac"></a></div>
<div class="teste"><a href="#doces" class="nhac"></a></div>
<div class="teste"><a href="#form" class="nhac"></a></div> -->
<li><a href="#intro" class="nhac">.</a></li>
<li><a href="#salgados" class="salgados">.</a></li>
<li><a href="#doces" class="doces">.</a></li>
<li><a href="#form" class="enviar">.</a></li>
</ul>
</nav>
</div>
</div>
</Aside>
<section class="section main-bg" id="logo">
<div class="intro main-content">
<div class="intro-tittle">
<h2 class="nhac-tittle">Nhac!</h2>
<h2 class="nhac-tittle">Nhac!</h2>
<h1 class="mandarim">嗦嗦!</h1>
<h1 class="mandarim">嗦嗦!</h1>
<p>
Um pequeno gostinho da culinária chinesa em qualquer lugar onde você estiver...
</p>
</div>
<div class="intro-img">
<img src="./assets/img/main-cook.svg"
alt="imagem centrar, um desenho de um chef de cozinha com uma faca e uma concha">
</div>
</div>
</section>
<section class="section main-bg" id="intro">
<div class="menu-spacing"></div>
<h2 class="mandarim intro2-tittle">真好吃!</h2>
<div class="intro main-content">
<div class="intro-img2">
<p>
A china possuí uma culinária muito variada, sendo umas das mais antigas e também exóticas do
planeta.
Em sua antiguidade, os grandes imperadores realizavam diversas festas, e nelas costumavam servir
grandes banquetes, como forma de oferenda para os deuses e espíritos, para que em retorno o povo
recebesse sucesso e prosperidade nas colheitas.
</p>
<img class="img-intro" src="./assets/img/cook-intro.svg"
alt="imagem centrar, um desenho de um chef de cozinha com uma faca e uma concha">
</div>
<div>
<p class="intro2-p">
Culinária essa que é muito famosa, devido a grande riquezas de detalhes, e muitas sutilezas
minuciosas, que tornam o prato uma riqueza de sabores, cores e texturas. Com isso vale ressaltam que
é muito comum encontrar comidas que combinam o doce e salgado, agridoce e picante, macio e crocante,
frio e quente e muitas outras combinações.
</p>
<p class="intro2-p">
Na cultura chinesa se busca o equilíbrio nas criações de pratos, envolvendo não só os cinco
elementos fogo (amargor), madeira (azedo), metal (picante), terra (doce) e a água (salgado), mas
também o Ying yang.
O Ying e Yang se complementam para equilibrar pólos opostos, já os elementos advém da crença que
estamos cercados por cinco campos de energia que devem estar equilibrados.
</p>
<p class="intro2-p">
E isso também se deve a medicina chinesa, que relaciona a saúde e tratamentos dos pacientes com os
estados dos cinco elementos dentro do corpo dessa pessoa. Sendo que a deficiência ou a demasia de
qualquer dos elementos pode levar o indivíduo a doença. Portanto a culinária chinesa é muito
profunda e diversa, contendo uma infinidade de pratos e sabores.
</p>
</div>
</div>
</section>
<section class="section secondary-bg salgados-sec" id="salgados">
<div class="menu-spacing"></div>
<div class="menu-spacing"></div>
<div class="main-content">
<h2>Últimos pratos salgados adicionados</h2>
<div class="grid-salgados">
<div class="card-prato um">
<div class="img-salgados">
<img src="./assets/img/lamen-chines.jpg" alt="prato pronto">
</div>
<div>
<div class="descricao">
<p>⏲45min</p>
<p>☑ 4 porções</p>
</div>
<h3><a href="#salgados">Lamen chinês</a></h3>
</div>
</div>
<div class="card-prato dois">
<div class="img-salgados">
<img src="./assets/img/bolinho-tofu.jpg" alt="prato pronto">
</div>
<div>
<div class="descricao">
<p>⏲45min</p>
<p>☑ 4 porções</p>
</div>
<h3><a href="#salgados">Bolinho de tofu</a></h3>
</div>
</div>
<div class="card-prato tres">
<div class="img-salgados">
<img src="./assets/img/camarao-chines.jpg" alt="prato pronto">
</div>
<div>
<div class="descricao">
<p>⏲30min</p>
<p>☑ 4 porções</p>
</div>
<h3><a href="#salgados">Camarão à moda chinesa</a></h3>
</div>
</div>
<div class="card-prato quatro">
<div class="img-salgados">
<img src="./assets/img/rolinho-primavera.jpg" alt="prato pronto">
</div>
<div>
<div class="descricao">
<p>⏲40min</p>
<p>☑ 8 porções</p>
</div>
<h3><a href="#salgados">ROLINHO PRIMAVERA</a></h3>
</div>
</div>
<div class="cinco">
<div class="img-salgados">
<img src="./assets/img/frango-xadrez.jpg" alt="prato pronto">
</div>
<div class="descricao">
<div >
<p>⏲30min</p>
<p>☑ 2 porções</p>
</div>
<h3><a href="#salgados">FRANGO XADREZ</a></h3>
<p>
Conta a história que o prato tem sua origem na província de Si Chuan, localizada na parte ocidental da China. Dentre os ingredientes que permanecem na receita até hoje estão o frango, o molho de soja (shoyu) e o amendoim. Os demais ingredientes podem variar de acordo com a região e o gosto do povo.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section secondary-bg doces-sec" id="doces">
<div class="menu-spacing"></div>
<div class="menu-spacing"></div>
<div class="main-content">
<h2>Últimos pratos doces adicionados</h2>
<div class="grid-doces">
<div class="card-prato um">
<div class="img-doces">
<img src="./assets/img/torta-de-ovos.jpg" alt="prato pronto">
</div>
<div>
<div class="descricao">
<p>⏲50min</p>
<p>☑ 12 porções</p>
</div>
<h3><a href="#doces">Torta de ovo</a></h3>
</div>
</div>
<div class="card-prato dois">
<div class="img-doces">
<img src="./assets/img/brioche-chines.jpg" alt="prato pronto">
</div>
<div>
<div class="descricao">
<p>⏲60min</p>
<p>☑ 10 porções</p>
</div>
<h3><a href="#doces">Brioche chinês</a></h3>
</div>
</div>
<div class="card-prato tres">
<div class="img-doces">
<img src="./assets/img/white-sugar-cake.jpg" alt="prato pronto">
</div>
<div>
<div class="descricao">
<p>⏲240min</p>
<p>☑ 8 porções</p>
</div>
<h3><a href="#doces">White Sugar Cake</a></h3>
</div>
</div>
<div class="card-prato quatro">
<div class="img-doces">
<img src="./assets/img/tang-yuan.jpg" alt="prato pronto">
</div>
<div>
<div class="descricao">
<p>⏲30min</p>
<p>☑ 2 porções</p>
</div>
<h3><a href="#doces">Tang yuan</a></h3>
</div>
</div>
<div class="cinco">
<div class="img-doces">
<img src="./assets/img/pao-de-feijao-vermelho.jpg" alt="prato pronto">
</div>
<div class="descricao">
<div >
<p>⏲35min</p>
<p>☑ 8 porções</p>
</div>
<h3><a href="#doces">Pão de feijão vermelho</a></h3>
<p>
É a versão doce do famoso baozi – pãozinho feito no vapor com recheios salgados como carne de porco. Ele pode ser feito em diferentes formatos e é popular em toda a China, principalmente nas províncias ao norte. Pode ser encontrado também com outros recheios, como pasta de semente de pinhão, pasta de taro ou mesmo pasta de feijão preto
</p>
</div>
</div>
</div>
</div>
</section >
<section class="section main-bg form" id="form">
<div class="menu-spacing"></div>
<div class="menu-spacing"></div>
<div class="enviar-prato main-content">
<div class="descrisao-form">
<h2>Envie seus pratos deliciosos</h2>
<p>
Participe e ajude a cada vez mais entregarmos diversidade em nossos bancos de receitas.
Tem aquela receita chinesa deliciosa? mande pra gente e cada vez mais as todos nos ajudamos
a achar aquele prato ideal para uma bela refeição.
</p>
<p class="mandarim">谢谢你！</p>
</div>
<div class="content-form">
<fieldset class="form-grid">
<legend>Submeter receita</legend>
<div class="form-group">
<label for="nome-receita">Qual o nome da sua receita?</label>
<input required type="text" name="nome-receita" id="nome-receita" placeholder="Frango xadrex, pão de feijão vermelho">
</div>
<div class="form-group">
<label for="porcoes">Rende quantas porções?</label>
<input type="number" name="porcoes" id="porcoes" placeholder="rendimento em porções">
</div>
<div class="form-group">
<label for="time">Tempo médio para fazer?</label>
<input type="time" name="time" id="time" placeholder="Leva aproximandamente quanto tempo?">
</div>
<div class="form-group full-width">
<label for="ingredientes">ingredientes</label>
<textarea required name="ingredientes" id="ingredientes" cols="30" rows="10" placeholder="ingredientes necessários"></textarea>
</div>
<div class="form-group full-width">
<label for="modo-preparo">Modo de preparo</label>
<textarea required name="modo-preparo" id="modo-preparo" cols="30" rows="10" placeholder="Descreva o modo de preparo"></textarea>
</div>
<div class="form-group full-width">
<div class="align">
<button type="submit" onclick="alert('Função ainda em desenvolvimento')">Enviar</button>
</div>
</div>
</fieldset>
</div>
</div>
</section>
<footer class="white-bg footer" id="footer">
<p><a target="_blank" rel="nofollow" href="https://jcdmeira.github.io">Feito com ❤ por Jean Carlos De Meira</a>
</p>
</footer>
<a class="back-to-top" href="#logo">TOP</a>
</body>
</html>