-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
755 lines (754 loc) · 55.9 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
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
<!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">
<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=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/fullpage.css">
<link rel="stylesheet" href="css/animate-min.css">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/config.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="images/portugal-brasao.png" type="image/x-icon">
<title>Portugal - 1DSA</title>
</head>
<body>
<nav>
<div class="nav-wrapper">
<div class="left-side logo">
<div class="logo-container"></div>
<div class="brasao">
<a href="#section1">
<img src="images/portugal-brasao.png">
</a>
</div>
</div>
<div class="navigation-container">
<ul>
<li><a href="#section2">Cultura</a></li>
<li><a href="#section5">Tecnologia</a></li>
<li><a href="#section6">História</a></li>
<li><a href="#section7">Linguística</a></li>
<li><a href="#section8">Turismo</a></li>
</ul>
<button class="btn ham" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
<span class="material-symbols-outlined">menu</span>
</button>
<div class="offcanvas offcanvas-end" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasRightLabel">Portugal</h5>
<button type="button" data-bs-dismiss="offcanvas" aria-label="Close">
<span class="material-symbols-outlined">
close
</span>
</button>
</div>
<div class="offcanvas-body">
<hr>
<div class="body-g">
<div class="first-col">
<ul>
<li><a href="#section2" data-bs-dismiss="offcanvas" onclick="window.location='#section2'">Cultura</a></li>
<li><a href="#section5" data-bs-dismiss="offcanvas" onclick="window.location='#section5'">Tecnologia</a></li>
<li><a href="#section6" data-bs-dismiss="offcanvas" onclick="window.location='#section6'">História</a></li>
</ul>
</div>
<div class="second-col">
<ul>
<li><a href="#section7" data-bs-dismiss="offcanvas" onclick="window.location='#section7'">Linguística</a></li>
<li><a href="#section8" data-bs-dismiss="offcanvas" onclick="window.location='#section8'">Turismo</a></li>
</ul>
</div>
</div>
<hr>
<div>
<ul>
<li>
<a href="https://github.com/TheBrunno/portugal" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#fff" class="bi bi-github" viewBox="0 0 16 16" style="margin-right: 10px;">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
GitHub
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="fullpage">
<div class="section">
<h1 class="animate__animated animate__fadeInDown">
Trabalho sobre <span class="portugal">Portugal</span>
</h1>
<h2>1DSA</h2>
</div>
<div class="section">
<div class="section-container culinaria">
<h3 class="green-text">Culinária</h3>
<div class="slide" data-anchor="slide1">
<div class="slide-container">
<div class="left-side">
<h4>Do que é composta?</h4>
</div>
<div class="right-side">
<ul class="green-flag">
<li>Regada a muito <span class="green-text">azeite</span>, a culinária portuguesa é variada, sendo composta, principalmente, de <span class="green-text">peixes</span>, <span class="green-text">frutos do mar</span>, <span class="green-text">carne de caça</span>, <span class="green-text">azeitonas</span>, <span class="green-text">frutas</span> e <span class="green-text">legumes diversos</span>, seguindo a <span class="green-text">dieta mediterrânea</span>.</li>
<li>Além do <span class="green-text">bacalhau </span>e do clássico <span class="green-text">pastel de Belém</span>, a cozinha de Portugal tem muito mais a oferecer aos seus visitantes, como o <span class="green-text">pão</span> e o <span class="green-text">vinho</span>.</li>
<li><span class="respons">Com novas descobertas territoriais, </span><span class="uppercase">o</span>utros alimentos, como a <span class="green-text">batata</span> e o <span class="green-text">feijão</span> também foram incorporados aos pratos.</li>
</ul>
</div>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="slide-container">
<div class="left-side">
<h4>Influência na nossa culinária</h4>
</div>
<div class="right-side">
<p>
Algumas das receitas com influência portuguesa são:
</p>
<ul class="green-flag">
<li>Bacalhoada.</li>
<li>Caldo verde.</li>
<li class="respons">Quindim.</li>
<li style="padding-bottom: 0;">Cachaça.</li>
</ul>
<p>
No entanto, alguns pratos, como a <span class="green-text">Feijoada</span>, <span class="green-text">ganharam novas versões</span> que incorporaram os <span class="green-text">ingredientes encontrados</span> no Brasil.
</p>
<p>
Frutas como a <span class="green-text">manga</span>, a <span class="green-text">fruta-do-conde</span> e a <span class="green-text">jaca</span> têm origem portuguesa, <span class="respons">assim como a <span class="green-text">cebola</span>, a <span class="green-text">alface</span>, a <span class="green-text">couve</span> e <span class="green-text">outras ervas</span> que também </span>foram trazidas para o nosso país e <span class="green-text">cultivadas em nossas terras</span>.
</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide3">
<div class="slide-container culinaria">
<div class="left-side">
<img src="images/main-images/arroz-de-pato.png">
</div>
<div class="right-side">
<h4>Arroz de pato</h4>
<p>
O Arroz de Pato também está entre os mais <span class="green-text">famosos</span> da culinária do país, conhecido também como <span class="green-text">Arroz de Braga</span>, já que a comida foi criada nesta região.
</p>
<p>
O <span class="green-text">arroz é cozido em um caldo</span> que, anteriormente, cozinhou o <span class="green-text">pato</span> junto com <span class="green-text">presunto</span>, <span class="green-text">chouriço</span> e vários temperos.
</p>
<p>
Depois de ser cozida, a <span class="green-text">carne de pato é desfiada</span> e<span class="green-text"> misturada com o arroz</span> e levada ao forno.
</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide4">
<div class="slide-container culinaria">
<div class="left-side">
<img src="images/main-images/bacalhau.png">
</div>
<div class="right-side">
<h4>Bacalhau</h4>
<p>
O Bacalhau é, na maioria das vezes, o <span class="green-text">protagonista</span> de pratos carregados de sabores únicos e tradições.
</p>
<p>
Entre os mais populares está o <span class="green-text" style="font-weight: 600;">Gomes de Sá</span>, feito com bacalhau cortado em <span class="green-text">pequenos pedaços amaciados com leite</span> e <span class="green-text">cozidos com alho</span>, <span class="green-text">cebola</span> e <span class="green-text">azeite</span>. Após ficar pronto, ele é servido com <span class="green-text">salsicha</span>, <span class="green-text">ovos cozidos</span> e <span class="green-text">azeitonas pretas</span>.
</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide5">
<div class="slide-container culinaria">
<div class="left-side">
<img src="images/main-images/pastel-de-nata.png">
</div>
<div class="right-side">
<h4>Pastel de Nata</h4>
<p>
O Pastel de Nata é um verdadeiro clássico da culinária do país, conhecido em todo o mundo e uma <span class="green-text">verdadeira atração turística</span>.
Criado no século XIX, nos mosteiros de Jerônimo, ele é feito com <span class="green-text">massa folhada caseira</span>, crocante e bem fininha, e leva em sua receita açúcar, gemas de ovos e <span class="green-text">creme de leite</span>.
</p>
<p>
Inclusive, esse prato tradicional está na lista das <span class="green-text">7 Maravilhas da Culinária Portuguesa</span>.
</p>
<p class="mobile-padding-bottom">
O mais famoso por lá é o <span class="green-text">Pastel de Belém</span>, que é feito, justamente, na região que dá nome a este delicioso doce.
</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide6">
<div class="slide-container culinaria">
<div class="left-side">
<img src="images/main-images/ovos-moles.png">
</div>
<div class="right-side">
<h4>Ovo Mole</h4>
<p>
O Ovo Mole também é um clássico que todo turista deve experimentar na cidade de <span class="green-text" style="font-weight: 600;">Aveiro</span>, onde o prato teve origem nos conventos, no século XIX.
</p>
<p>
Ao percorrer as pastelarias e barraquinhas da cidade é fácil encontrar esse doce, feito com <span class="green-text">gema</span> e coberto por uma espécie de <span class="green-text">suspiro</span>.
</p>
<p>
O Ovo Mole é tão tradicional, que tem até uma <span class="green-text"><a href="images/main-images/monumento-ovos-moles-de-aveiro.jpg" data-lightbox="ovo">estátua em sua homenagem</a></span>.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-container musicas">
<h3 class="red-text">Música</h3>
<div class="slide" data-anchor="slide1">
<div class="slide-container">
<div class="left-side">
<a href="images/main-images/Fado_Guitarra.png" data-lightbox="fado">
<img src="images/main-images/Fado_Guitarra.png">
</a>
</div>
<div class="right-side">
<h4>Fado</h4>
<ul class="red-flag">
<li>
Estilo musical <span class="red-text">lírico</span> e <span class="red-text">sentimental</span>, com <span class="red-text">letras melancólicas</span> que retratam o <span class="red-text">amor</span>, surgido em <span class="red-text">Lisboa</span> em <span class="red-text">1830</span>.
</li>
<li>
Existe o <span class="red-text">Fado de Lisboa</span>, que é mais <span class="red-text">sentimental</span>, e o <span class="red-text">Fado de Coimbra</span>, que é mais <span class="red-text">acadêmico</span> por refletir as tradições <span class="red-text">universitárias</span> da região.
</li>
<li>
Uma das mais importantes cantoras de Fado é <span class="red-text">Amália Rodrigues</span> (conhecida como a <span class="red-text">Rainha do Fado</span>).
</li>
<li style="">
Em <span class="red-text">2011</span>, o Fado foi considerado um <span class="red-text">Patrimônio Imaterial</span> da Humanidade pela <span class="red-text">UNESCO</span>.
</li>
</ul>
</div>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="slide-container">
<div class="left-side">
<a href="images/main-images/Cante-Alentejano.png" data-lightbox="cante">
<img src="images/main-images/Cante-Alentejano.png">
</a>
</div>
<div class="right-side">
<h4>Cante Alentejano</h4>
<ul class="red-flag">
<li>
É cantado em <span class="red-text">coro</span>, por homens e mulheres, <span class="red-text">sem acompanhamento de instrumentos</span>. É bastante característico de concelhos do distritos de <span class="red-text">Beja</span>, na província de Baixo Alentejo, em Portugal.
</li>
<li>
Sua origem vem de <span class="red-text">contextos informais</span>, como no campo ou em festas dos concelhos.
</li>
<li>
As letras falam de <span class="red-text">sentimentos e momentos do cotidiano</span>. O primeiro grupo de Cante Alentejano surgiu no ano de 1926, associado aos <span class="red-text">trabalhadores de minas</span> em Minas de São Domingos.
</li>
</ul>
</div>
</div>
</div>
<div class="slide" data-anchor="slide3">
<div class="slide-container">
<div class="left-side">
<a href="images/main-images/hip-hop-tuga-ggg.png" data-lightbox="hip-hop">
<img src="images/main-images/hip-hop-tuga-ggg.png">
</a>
</div>
<div class="right-side">
<h4>
Hip-Hop Tuga
</h4>
<ul class="red-flag">
<li>
O Hip-Hop chegou em Portugal na <span class="red-text">década de 80</span>, mas só se popularizou na década seguinte. Surgiu nos <span class="red-text">subúrbios</span> de Lisboa (Maia, Amadora e Vila Nova de Gaia).
</li>
<li>
Veio tudo que tem relação com Hip-Hop americano: <span class="red-text">DJs</span>, <span class="red-text">MCs</span>, o "<span class="red-text">breakdance</span>" e o <span class="red-text">grafite</span>.
</li>
<li>
A principal plataforma de divulgação do estilo musical entre 1980 e 1990 foi a <span class="red-text">rádio</span>. <span class="red-text">Sam The Kid</span> foi um dos artistas do estilo musical mais marcante do estilo musical.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section festividades">
<div class="section-container">
<h3 class="green-text">Festividades</h3>
<div class="slide" data-anchor="slide1">
<div class="slide-container">
<div class="left-side">
<a href="images/main-images/medieval.png" data-lightbox="medieval">
<img src="images/main-images/medieval.png">
</a>
<a href="images/main-images/medieval3.png" data-lightbox="medieval"></a>
<a href="images/main-images/medieval2.png" data-lightbox="medieval"></a>
<a href="images/main-images/medieval4.png" data-lightbox="medieval"></a>
<a href="images/main-images/medieval5.png" data-lightbox="medieval"></a>
<a href="images/main-images/medieval6.png" data-lightbox="medieval"></a>
</div>
<div class="right-side">
<h4>Viagem Medieval em Terra de Santa Maria da Feira</h4>
<p>
No norte do país, em <span class="green-text">Santa Maria da Feira</span>, a cidade fica com o cenário medieval da Europa. Os participantes se vestem com <span class="green-text">vestimentas medievais</span> e se reúnem ao redor do castelo de Santa Maria da Feira. Começa do <span class="green-text">dia 3 até 14 de agosto</span>, e inclui espetáculos, shows e várias atividades para a família.
</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="slide-container">
<div class="left-side">
<a href="images/main-images/romaria2.png" data-lightbox="romaria">
<img src="images/main-images/romaria2.png">
</a>
<a href="images/main-images/romaria3.png" data-lightbox="romaria"></a>
<a href="images/main-images/romaria4.png" data-lightbox="romaria"></a>
<a href="images/main-images/romaria.png" data-lightbox="romaria"></a>
</div>
<div class="right-side">
<h4>Romaria de Nossa Senhora D'Agonia</h4>
<p>
Acontece em <span class="green-text">Viana do Castelo</span>. Sua origem foi no século XIII, com a devoção à Nossa Senhora D'Agonia, na Capela de Bom Jesus (Capela de Nossa Senhora D'Agonia). Durante os <span class="green-text">quatros dias do mês de agosto</span>, há o Cortejo Histórico-Etnográfico, Cortejo da Mordomia e outras atividades.
</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide3">
<div class="slide-container">
<div class="left-side">
<a href="images/main-images/porto5.png" data-lightbox="porto">
<img src="images/main-images/porto5.png">
</a>
<a href="images/main-images/porto3.png" data-lightbox="porto"></a>
<a href="images/main-images/porto4.png" data-lightbox="porto"></a>
<a href="images/main-images/porto.png" data-lightbox="porto"></a>
<a href="images/main-images/porto2.png" data-lightbox="porto"></a>
</div>
<div class="right-side">
<h4>Festa de São João do Porto</h4>
<p>
É a maior celebração do norte de Portugal. No início, era uma <span class="green-text">festa pagã</span>, celebrando o início das colheitas e do solstício. Depois, por causa da <span class="green-text">Igreja Católica</span>, passou a celebrar o nascimento de <span class="green-text">São João Batista</span> e, assim, concentrou a missa de procissão no <span class="green-text">dia 24 de Junho</span>.
</p>
<p>
A noite de São João é comemorada na <span class="green-text">madrugada do dia 23</span> para o <span class="green-text">dia 24 de junho</span>.
</p>
<p class="mobile-padding-bottom">
Na festividade, há a brincadeira do <span class="green-text">alho-poró</span> ou do <span class="green-text">martelinho de brinquedo para bater nas cabeças das pessoas</span>, a <span class="green-text">tradição de pular a fogueira em número ímpar</span>, (para estar <span class="green-text">protegido</span> o ano todo), e a de <span class="green-text">soltar balões à noite</span>.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="section tecnologia">
<div class="section-container">
<h3 class="red-text">Tecnologia</h3>
<div class="slide" data-anchor="slide1">
<div class="slide-container">
<div class="left-side">
<img src="images/main-images/phone.png">
</div>
<div class="right-side">
<h4>Herrmann Wall Phone</h4>
<ul class="red-flag">
<li>Criado por <span class="red-text">Maximiliano Augusto Herrman</span>, em <span class="red-text">1880</span>.</li>
<li>Foi considerado extremamente importante para a <span class="red-text">difusão</span> do uso dos aparelhos telefônicos.</li>
<li>Tal feito, possibilitou que as centrais Portuguesas <span class="red-text">abrissem linhas públicas</span> para seus habitantes.</li>
</ul>
</div>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="slide-container">
<div class="left-side">
<img src="images/main-images/pirelioforo.png">
</div>
<div class="right-side">
<h4>Pirelióforo</h4>
<ul class="red-flag">
<li>Invenção atribuída a <span class="red-text">Manuel Antonio Gomes</span>.</li>
<li>Foi um grande sucesso no final do <span class="red-text">séc. XIX</span>.</li>
<li>De forma geral, tratava-se de uma <span class="red-text">imensa estrutura com centenas de espelhos</span> que refletiam a luz para um <span class="red-text">único ponto</span>, gerando uma <span class="red-text">imensa fonte de calor</span><span class="respons"> (forno solar)</span>, podendo derreter quase todos os <span class="red-text">tipos de materiais</span>. Seu desfecho é curioso pois <span class="respons">relatos apontam que </span>após seu inventor recusar vender seu invento, ele <span class="red-text">sumiu</span> misteriosamente.</li>
</ul>
</div>
</div>
</div>
<div class="slide" data-anchor="slide3">
<div class="slide-container">
<div class="left-side">
<img src="images/main-images/prepago.png">
</div>
<div class="right-side">
<h4>Telefone pré-pago</h4>
<p>
<span class="respons">Sim, isso mesmo que você está lendo (ou ouvindo). Se hoje, escutamos todo dia a frase “Chip da Ti...”, ou melhor, </span><span class="uppercase">s</span>e possuímos internet na rua através de um plano pré-pago e de um <span class="red-text">pequeno chip</span> dentro de nossos celulares, parte dos “créditos” dessa invenção se devem aos portugueses que tiveram essa ideia.
</p>
<ul class="red-flag">
<li>O primeiro cartão desse modelo se chamava <span class="red-text">Mimo</span> e foi uma criação da <span class="red-text">TMN</span> (responsável pelas operações da Telecom Portuguesa), em <span class="red-text">setembro de 1995</span>.</li>
</ul>
</div>
</div>
</div>
<div class="slide" data-anchor="slide4">
<div class="slide-container">
<div class="left-side">
<h4>Grandes navegações</h4>
</div>
<div class="right-side">
<p>
Saindo da área de curiosidades e entrando na <span class="red-text">História</span>, temos a presença de um dos maiores países colonizadores da Idade Média e de todos os tempos. E consequentemente um dos <span class="red-text">mais ricos</span>, permitindo o investimento na <span class="red-text">cultura</span> e <span class="red-text">tecnologia</span>. Graças a isso surgem inventos que tornariam Portugal cada vez mais forte, e <span class="red-text">mudaria o destino de diversos povos</span> espalhados pelo mundo.
</p>
<p>
As principais criações possuem suas origens durante o período de desenvolvimento náutico mundial, sendo elas:
</p>
<ul class="red-flag" style="display: flex; width: 100%; justify-content: space-around; margin-top: 10px; flex-wrap: wrap;">
<li>Bússola</li>
<li>Astrolábio</li>
<li>Quadrante</li>
<li>Caravelas</li>
</ul>
</div>
</div>
</div>
<div class="slide" data-anchor="slide5">
<div class="slide-container">
<div class="left-side">
<h4>Grandes navegações</h4>
</div>
<div class="right-side">
<p>
Por mais que essas criações não possuam interferência portuguesa, elas foram <span class="red-text">fundamentais</span> para a criação de duas ferramentas extremamente poderosas para aquela época:
</p>
<ul class="red-flag" style="margin: 20px 0 0 20px;">
<li><span class="red-text" style="font-weight: 500;">Técnicas Marítimas</span>: Conjunto de estratégias de navegação que permitiam a <span class="red-text">redução do tempo de viagem</span>, <span class="red-text">sucesso em expedições</span> e <span class="red-text">aceleração do domínio Portugues</span>.</li>
<li><span class="red-text" style="font-weight: 500;">Cartografia Ibérica</span>: Cartografia náutica da região Ibérica e dos pontos para os quais navegaram (incluindo a <span class="red-text">África</span>, <span class="red-text">América</span> e <span class="red-text">Ásia</span>). Equivalente ao <span class="red-text">Google Maps</span> de hoje.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-container">
<h3 class="green-text">História</h3>
<div class="slide" data-anchor="slide1">
<div class="slide-container desc">
<div class="left-side">
</div>
<div class="right-side bandeiras">
<img src="images/main-images/brasil.png">
<img src="images/main-images/angola.png">
<img src="images/main-images/timorleste.png">
<div class="x-container">
<img src="images/main-images/x.png" class="x x-hidden">
<img src="images/main-images/x.png" class="x x-hidden">
<img src="images/main-images/x.png" class="x x-hidden">
</div>
</div>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="slide-container">
<div class="left-side">
<img src="images/main-images/brasil.png">
</div>
<div class="right-side">
<h4>Brasil</h4>
<p> O português foi introduzido ao Brasil por causa do <span class="green-text">“descobrimento”</span> do Brasil durante o século XVI, com o primeiro contato entre os <span class="green-text">indígenas</span> e os <span class="green-text">portugueses</span> sendo através da navegação de <span class="green-text">Pedro Álvares Cabral</span>. </p>
<p> Nos primeiros anos, as expedições eram limitadas ao <span class="green-text">litoral do Brasil</span>, buscando <span class="green-text">extrair</span> o <span class="green-text">pau-brasil</span>. No entanto, por volta de 1530, começaram a efetuar medidas mais efetivas para a colonização do país, enviando Martin Afonso de Souza para uma expedição no Brasil. A partir dali, as capitanias foram criadas, eventualmente sendo centralizadas.</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide3">
<div class="slide-container">
<div class="left-side">
</div>
<div class="right-side bandeiras">
<img src="images/main-images/brasil.png">
<img src="images/main-images/angola.png">
<img src="images/main-images/timorleste.png">
<div class="x-container">
<img src="images/main-images/x.png" class="x">
<img src="images/main-images/x.png" class="x x-hidden">
<img src="images/main-images/x.png" class="x x-hidden">
</div>
</div>
</div>
</div>
<div class="slide" data-anchor="slide4">
<div class="slide-container">
<div class="left-side">
<img src="images/main-images/angola.png">
</div>
<div class="right-side">
<h4>Angola</h4>
<p> O primeiro contato entre Portugal e Angola foi por volta de <span class="green-text">1483</span>, através de navegações de <span class="green-text">Diogo Cão</span>. Em 1575 foi começado o processo da colonização, liderada por <span class="green-text">Paulo Dias Novais</span> que visava <span class="green-text">explorar</span> os recursos naturais do país, como o <span class="green-text">petróleo</span>.</p>
<p class="mobile-padding-bottom"> O regime de <span class="green-text">capitanias hereditárias</span> também foi <span class="green-text">implantado</span> em Angola, assim como o sistema de colonização baseado no comércio de <span class="green-text">escravos</span>, a maioria de quais era transportada para o Brasil. Apenas centenas de anos após a colonização conseguiram <span class="green-text">abolir o tráfico de escravos</span> (<span class="green-text">1836</span>) e <span class="green-text">ganhar a independência</span> (<span class="green-text">1975</span>).</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide5">
<div class="slide-container">
<div class="left-side">
</div>
<div class="right-side bandeiras">
<img src="images/main-images/brasil.png">
<img src="images/main-images/angola.png">
<img src="images/main-images/timorleste.png">
<div class="x-container">
<img src="images/main-images/x.png" class="x">
<img src="images/main-images/x.png" class="x">
<img src="images/main-images/x.png" class="x x-hidden">
</div>
</div>
</div>
</div>
<div class="slide" data-anchor="slide6">
<div class="slide-container">
<div class="left-side">
<img src="images/main-images/timorleste.png">
</div>
<div class="right-side">
<h4>Timor-Leste</h4>
<p> Seu primeiro contato com os portugueses foi no século <span class="green-text">XVI</span>, com a primeira referência à ilha sendo em uma carta de 1514 para o rei <span class="green-text">D. Manuel</span>. Começaram a governar o país ao fim do século <span class="green-text">XVII</span> e começo do século XVIII, sendo chamado de <span class="green-text">Timor Português</span>.</p>
<p class="mobile-padding-bottom"> Em <span class="green-text">1975</span>, o Timor-Leste ganhou a independência como resultado da <span class="green-text">Revolução dos Cravos</span> em Portugal.</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide7">
<div class="slide-container">
<div class="left-side">
</div>
<div class="right-side bandeiras">
<img src="images/main-images/brasil.png">
<img src="images/main-images/angola.png">
<img src="images/main-images/timorleste.png">
<div class="x-container">
<img src="images/main-images/x.png" class="x">
<img src="images/main-images/x.png" class="x">
<img src="images/main-images/x.png" class="x">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-container">
<h3 class="red-text">Linguística</h3>
<div class="slide" data-anchor="slide1">
<div class="slide-container">
<div class="left-side">
<h4 class="desktop-margin-top">O porquê da diferença</h4>
</div>
<div class="right-side">
<p>
Por causa de vários imigrantes e nativos vivendo no Brasil, a língua portuguesa foi <span class="red-text">influenciada pelo sotaque e vocabulário de várias outras línguas e povos</span>. Por exemplo, o sotaque caipira, falada no interior de São Paulo, teve como origem uma relação entre <span class="red-text">povos indígenas</span>. O sotaque do Português Brasileiro também foi afetado por <span class=" red-text">povos africanos</span> que eram escravizados e levados para o Brasil, além dos imigrantes de outros países para o Brasil.
</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="slide-container">
<div class="left-side">
<h4 class="desktop-margin-top">Fonética / Pronúncia</h4>
</div>
<div class="right-side">
<p>
Diferente do Português Brasileiro, o Português de Portugal costuma enfatizar em sua fala as <span class="red-text">vogais tônicas</span>, enquanto as <span class="red-text">átonas são mais fracas</span> e podem acabar sendo <span class="red-text">puladas</span> na pronúncia. <br> <div class="indent red-text">menino -> m’nino <br>esperança -> esp’rança.</div>
</p>
<p>
A <span class="red-text">letra <span style="font-weight: 700;" class="red-text">L</span></span> no final das palavras também é <span class="red-text">enfatizado</span> no português de Portugal, assim como o <span class="red-text"><span style="font-weight: 700;" class="red-text">R</span> vibrante</span> é visto com maior frequência.
</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide3">
<div class="slide-container">
<div class="left-side">
<h4 class="desktop-margin-top">Sintaxe</h4>
</div>
<div class="right-side">
<p>
No português de Portugal, o gerúndio é usado de forma <span class="red-text">infinitiva</span> com uma preposição, diferente do português brasileiro.<br><br>
</p>
<ul class="red-flag">
<li>Estou prepara<span class="red-text">ndo</span> o almoço. -> Estou <span class="red-text">a preparar</span> o almoço.</li>
<li>Estou escreve<span class="red-text">ndo</span> uma poesia. -> Estou <span class="red-text">a escrever</span> uma poesia.</li>
<li>Estou fala<span class="red-text">ndo</span> com meu amigo. -> Estou <span class="red-text">a falar</span> com meu amigo.</li>
<li>Estou come<span class="red-text">ndo</span> um pastel. -> Estou <span class="red-text">a comer</span> um pastel.</li>
<li>Estou brinca<span class="red-text">ndo</span> com as crianças. -> Estou <span class="red-text">a brincar</span> com as crianças.</li>
</ul>
</div>
</div>
</div>
<div class="slide" data-anchor="slide4">
<div class="slide-container">
<div class="left-side">
<h4 class="desktop-margin-top">Sintaxe</h4>
</div>
<div class="right-side">
<p>
<br> Pronomes no português de Portugal costumam ser ditos <span class="red-text">após o verbo</span>, diferentemente do Brasil, onde são usados no início da frase.
<ul class="red-flag">
<li><span class="red-text">Me</span> faz um favor? -> Faz-<span class="red-text">me</span> um favor?</li>
<li><span class="red-text">Me</span> dá um presente? -> Dá-<span class="red-text">me</span> um presente?</li>
</ul>
</p>
<p>
Além disso, o pronome “<span class="red-text">tu</span>” e o “<span class="red-text">vós</span>” é muito mais comum em Portugal durante conversas informais.
</p>
</div>
</div>
</div>
<div class="slide" data-anchor="slide5">
<div class="slide-container">
<div class="left-side">
<h4 class="desktop-margin-bottom">Vocabulário</h4>
</div>
<div class="right-side">
<p>
Como qualquer dialeto, o português de Portugal também tem suas próprias <span class="red-text">palavras</span> e <span class="red-text">gírias</span> que não costumam ser faladas no Brasil, ou possuem um significado diferente.
</p>
<br>
<ul class="red-flag">
<li>Apostila -> Sebenta.</li>
<li>Celular -> Telemóvel.</li>
<li>Ônibus -> Autocarro.</li>
<li>Trem -> Comboio.</li>
<li>Sorvete -> Gelado.</li>
<li>Café da Manhã -> Pequeno Almoço.</li>
<li>Legal -> Fixe/Giro.</li>
<li>Muito -> Bué.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-container turismo">
<h3 class="green-text">Turismo</h3>
<div class="slide" data-anchor="slide1">
<div class="slide-container">
<div class="left-side">
<a href="images/main-images/torre-de-belem-m.png" data-lightbox="torre">
<img src="images/main-images/torre-de-belem-p.png">
</a>
<a href="images/main-images/belem1-m.png" data-lightbox="torre" class="hidden"></a>
<a href="images/main-images/belem2-m.png" data-lightbox="torre" class="hidden"></a>
<a href="images/main-images/belem3-m.png" data-lightbox="torre" class="hidden"></a>
<a href="images/main-images/belemi1-m.png" data-lightbox="torre" class="hidden"></a>
<a href="images/main-images/belemi2-m.png" data-lightbox="torre" class="hidden"></a>
</div>
<div class="right-side">
<h4>Torre de Belém</h4>
<ul class="green-flag">
<li>
Foi construída em <span class="green-text">1520</span> pelo <span class="green-text">arquiteto e escultor Francisco de Arruda</span>.
</li>
<li>
É um monumento super tradicional e histórico em <span class="green-text">Lisboa</span>, ela é uma fortificação que se destaca pela sua arquitetura.
</li>
<li>
Ela é oficialmente chamada de <span class="green-text">Torre de São Vicente</span>.
</li>
<li>
Por dentro, a torre é composta por cinco andares, eles contam com: <span class="green-text">sala do governador</span>, <span class="green-text">sala do reis</span>, <span class="green-text">sala das audiências</span>, <span class="green-text">capela</span> e o <span class="green-text">terraço da torre</span>, de onde se tem uma bela vista de Lisboa.
</li>
</ul>
</div>
</div>
</div>
<div class="slide" data-anchor="slide2">
<div class="slide-container">
<div class="left-side">
<a href="images/main-images/santuario-fatima-m.png" data-lightbox="fatima">
<img src="images/main-images/santuario-fatima-p.png">
</a>
<a href="images/main-images/fatima1-m.png" data-lightbox="fatima" class="hidden"></a>
<a href="images/main-images/fatima2-m.png" data-lightbox="fatima" class="hidden"></a>
<a href="images/main-images/fatima3-m.png" data-lightbox="fatima" class="hidden"></a>
<a href="images/main-images/fatimai1-m.png" data-lightbox="fatima" class="hidden"></a>
<a href="images/main-images/fatimai2-m.png" data-lightbox="fatima" class="hidden"></a>
</div>
<div class="right-side">
<h4>Santuário de Fátima</h4>
<ul class="green-flag">
<li>Considerado um dos <span class="green-text">mais visitados destinos religiosos do mundo</span>, o Santuário de Fátima recebe turistas de diversas nacionalidades durante todo o ano.</li>
<li>Inicialmente, em 1917, o monumento havia sido construído <span class="green-text">apenas como uma simples capela</span>.</li>
<li>Contudo, após a <span class="green-text">mística aparição de Nossa Senhora</span>, a construção tomou proporções maiores e uma arquitetura mais elaborada. <span class="respons">Por esses motivos, não só os turistas mais religiosos visitam o local, como também pessoas que desejam apreciar a construção.</span></li>
</ul>
</div>
</div>
</div>
<div class="slide" data-anchor="slide3">
<div class="slide-container">
<div class="left-side">
<a href="images/main-images/mosteiro-dos-jeronimos-m.png" data-lightbox="mosteiro">
<img src="images/main-images/mosteiro-dos-jeronimos-p.png">
</a>
<a href="images/main-images/mosteiro1-m.png" data-lightbox="mosteiro" class="hidden"></a>
<a href="images/main-images/mosteiro2-m.png" data-lightbox="mosteiro" class="hidden"></a>
<a href="images/main-images/mosteiro3-m.png" data-lightbox="mosteiro" class="hidden"></a>
<a href="images/main-images/mosteiro4-m.png" data-lightbox="mosteiro" class="hidden"></a>
<a href="images/main-images/mosteiroi1-m.png" data-lightbox="mosteiro" class="hidden"></a>
<a href="images/main-images/mosteiroi2-m.png" data-lightbox="mosteiro" class="hidden"></a>
</div>
<div class="right-side">
<h4>Mosteiro dos Jerónimos</h4>
<ul class="green-flag">
<li>Localizado em Lisboa, <span class="green-text">o Mosteiro dos Jerónimos é tão antigo quanto nosso país</span>, com suas obras iniciando em <span class="green-text">1501</span>.</li>
<li>Foi construído de acordo com o desejo do rei <span class="green-text">D. Manuel I</span> de eternizar o seu governo, perpetuando as glórias alcançadas durante a <span class="green-text">Era das Descobertas</span>.</li>
<li>O nome oficial é <span class="green-text">Real Mosteiro de Santa Maria de Belém</span>.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-container">
<h3 class="red-text">Sobre o site</h3>
<div class="slide" data-anchor="slide1">
<div class="slide-container">
<div class="right-side" style="align-items: center; justify-content: center; text-align: center;">
<img src="images/frame.png" id="qr-code">
<p>
<a href="https://portugal-alpha.vercel.app/">https://portugal-alpha.vercel.app/</a>
</p>
<a href="https://github.com/TheBrunno/portugal" target="_blank" style="color: #000; font-weight: 600; display: block; text-align: center; margin-top: 25px;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000" class="bi bi-github" viewBox="0 0 16 16" style="margin-right: 10px;">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
GitHub
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/lightbox-plus-jquery.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/fullpage.js"></script>
<script src="js/init-fullpage.js"></script>
<script src="js/bootstrap-min.js"></script>
</body>
</html>