-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcultura-2.html
161 lines (145 loc) · 9.43 KB
/
cultura-2.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
<!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="shortcut icon" href="images/favicon_io/favicon.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/color-pallete.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/inicio.css">
<link rel="stylesheet" href="css/inicio-section3.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/cultura.css">
<link rel="stylesheet" href="css/scroll-button.css">
<title>ÉGUAS, SIOW! │ Festas & Lendas</title>
<meta name="description" content="Nós iremos te guiar através da vasta e exuberante riqueza cultural do Maranhão.">
</head>
<body>
<div class="container-cultural">
<!-- Cabeçalho -->
<header>
<div class="container-cabecalho">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="Logo do Projeto Éguas Siow!"></a>
</div>
<div class="menu-mobile" onclick="clickMenuMobile()">
<i class="ri-menu-line"></i>
</div>
<nav>
<ul class="menu">
<li class="menu-option"><a href="index.html">INÍCIO</a></li>
<li class="menu-option">
<a class="active" id="eferv-cult">EFERVESCÊNCIA CULTURAL</a>
<i class="ri-arrow-down-s-fill ri-lg"></i>
<ul class="submenu">
<li class="submenu-option"><a href="cultura-1.html">BELEZAS NATURAIS</a></li>
<li class="submenu-option"><a href="cultura-1.html">PRATOS TÍPICOS</a></li>
<li class="submenu-option"><a href="cultura-2.html#festas-populares">FESTAS
POPULARES</a></li>
<li class="submenu-option"><a href="cultura-2.html#lendas-misterios">LENDAS E
MISTÉRIOS</a></li>
</ul>
</li>
<li class="menu-option"><a href="contato.html">CONTATO</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- Banner dinâmico -->
<section class="big-banner">
<div class="background-banner">
<img src="images/big-banner.jpg" alt="Mosaico em movimento, contendo várias fotografias que representam a cultura maranhense.">
</div>
<!-- Apresentação -->
<div class="text-box-cultural">
<h3 class="intro">Éguas, siow, que aventura massa, né? Ainda tem mais... 😳</h3>
<h1 class="headline">ENTÃO SENTA QUE LÁ VEM HISTÓRIA 📔</h1>
<h2 class="description">Está pronto para conhecer não só as festas populares do Maranhão, mas também as suas lendas e mistérios?</h2>
</div>
<div class="illustration-3 cultura-2">
<img src="images/Saly-16.png" alt="Garoto sentado ao pé de uma árvore, lendo sobre a história da cultura maranhense." style="margin-top: -155px;">
</div>
<!-- Scroll to top button -->
<button onclick="topFunction()" id="scroll-button" title="Vá para o início da página">
<i class="ri-arrow-up-circle-line"></i> Voltar ao topo
</button>
</section>
<!-- Conteúdo da página -->
<div class="content-container">
<!-- Seção sobre festas populares -->
<section id="festas-populares">
<!-- Música do Spotify -->
<div class="spotify-box">
<h3>🎧 PARA ENTRAR NO CLIMA:</h3>
<iframe title="Reprodutor do Spotify da música 'Maranhão meu tesouro meu torrão', do Bumba Boi de Maracanã" src="https://open.spotify.com/embed/track/3NLFwwnGHHl192imbfaF30?theme=0" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="culture-box">
<h2 class="title">FESTAS POPULARES</h2>
<p class="description">Mas é claro que não poderíamos deixar de falar da beleza e tradição das festas populares da cultura maranhense. São diversos espetáculos de cores, danças e ritmos, repletos de magia e religiosidade, com elementos culturais herdados de povos africanos e europeus. Seria impossível citar todos aqui, então fica a indicação desse vídeo do canal <a href="https://www.youtube.com/channel/UCfTsNf0Io3z9GJxaphGBjzw" rel="external" target="_blank">Tudo de Bom</a>, que retrata algumas das nossas festas e danças mais características:</p>
</div>
<!-- Vídeo do YouTube -->
<div class="yt-video">
<iframe src="https://www.youtube.com/embed/ppRm91MPwQ0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<!-- Seção sobre Lendas e Mistérios -->
<section id="lendas-misterios">
<div class="culture-box">
<h2 class="title">LENDAS E MISTÉRIOS</h2>
<p class="description">A cultura do Maranhão também é recheada de lendas e mistérios que circundam a história do estado há séculos, logo abaixo você encontrará algumas delas, mas vou logo te falando: são de arrepiar! Não diga que eu não lhe avisei...</p>
</div>
<!-- Cards dinâmicos com links para as lendas -->
<div class="cardbox-2">
<a href="https://portalamazonia.com/amazonia-az/letra-l/lendas-do-maranhao" rel="external"
target="_blank">
<figure><img src="images/card-serpente.png" alt="Serpente Encantada"></figure>
</a>
<a href="https://oimparcial.com.br/noticias/2018/02/oito-lendas-e-historias-de-terror-contadas-no-maranhao/"
rel="external" target="_blank">
<figure><img src="images/card-manguda.png" alt="Lenda da Manguda"></figure>
</a>
<a href="https://portalamazonia.com/amazonia-az/letra-l/lendas-do-maranhao" rel="external"
target="_blank">
<figure><img src="images/card-carruagem.png" alt="Carruagem Encantada"></figure>
</a>
<a href="https://oimparcial.com.br/noticias/2018/02/oito-lendas-e-historias-de-terror-contadas-no-maranhao/"
rel="external" target="_blank">
<figure><img src="images/card-olhodagua.png" alt="Lenda do Olho D'Água"></figure>
</a>
</div>
</section>
<!-- Continue explorando -->
<section class="continue">
<div class="illustration-dog">
<img src="images/Saly-18.png" alt="Cachorrinho saltando de felicidade ao descobrir que ainda há mais conteúdo a ser explorado no site">
</div>
<h3>Ei, rapá! Ainda não acabou, a jornada continua:</h3>
<div class="buttons-box">
<a href="cultura-1.html"><button class="primary-button">EXPLORAR</button></a>
<a href="contato.html"><button class="secundary-button">ENTRAR EM CONTATO</button></a>
</div>
</section>
</div>
</main>
<!-- Rodapé -->
<footer>
<div class="container">
<p>Site desenvolvido com propósito exclusivamente educacional.</p>
<h2>© Copyright 2021 - Powered by <strong>Gabriel C. Barros</strong></h2>
<h2>
<!-- Links para contato -->
<a href="https://github.com/gc-barros" target="_blank" title="GitHub"><i class="ri-github-fill"></i></a>
<a href="https://www.linkedin.com/in/gabriel-b-526ab7127/" target="_blank" title="Linkedin"><i class="ri-linkedin-box-fill"></i></a>
<a href="mailto:gc.barros81@gmail.com?subject=Oi, Gabriel! Gostei do seu site 'Éguas, Siow'...&body=Parabéns pelo seu site, ficou incrível!" target="_blank" title="E-mail"><i class="ri-mail-line"></i></a>
</h2>
</div>
</footer>
</div>
<script src="js/menu.js"></script>
<script src="js/scrollToTop.js"></script>
</body>
</html>