-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (151 loc) · 9.18 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
<!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/[email protected]/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/scroll-button.css">
<title>ÉGUAS, SIOW! │ Cultura Maranhense</title>
<meta name="description" content="Nós iremos te guiar através da vasta e exuberante riqueza cultural do Maranhão. Está pronto para essa jornada?">
</head>
<body>
<div class="container-principal">
<!-- Cabeçalho -->
<header>
<div class="container-cabecalho">
<!-- Logo EGUAS, SIOW -->
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="Logo do Projeto Éguas Siow!"></a>
</div>
<!-- Botão menu mobile -->
<div class="menu-mobile" onclick="clickMenuMobile()">
<i class="ri-menu-line"></i>
</div>
<!-- Menu de navegação -->
<nav>
<ul class="menu">
<li class="menu-option"><a class="active" href="index.html">INÍCIO</a></li>
<li class="menu-option">
<a id="eferv-cult">EFERVESCÊNCIA CULTURAL</a>
<i class="ri-arrow-down-s-fill ri-lg"></i>
<ul class="submenu">
<!-- 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</a></li>
<li class="submenu-option"><a href="cultura-2.html">LENDAS E MISTÉRIOS</a></li>
</ul>
</li>
<li class="menu-option"><a href="contato.html">CONTATO</a></li>
</ul>
</nav>
</div>
</header>
<!-- Conteúdo principal -->
<main>
<!-- Primeira seção | Landing page -->
<section class="first-section">
<!-- Textos -->
<div class="text-box">
<h3 class="intro">Ei, pequeno! Tu já conhece a iniciativa "ÉGUAS, SIOW!"?</h3>
<h1 class="headline">O GUIA DEFINITIVO DA CULTURA MARANHENSE</h1>
<h2 class="description">Nós iremos te guiar através da vasta e exuberante riqueza cultural do Maranhão.</h2>
<p class="description">Está pronto para essa jornada?</p>
</div>
<!-- Botões -->
<div class="buttons-box">
<a href="cultura-1.html"><button class="primary-button">SÓ SE FOR AGORA</button></a>
<a href="#eguas-description-start"><button class="secundary-button">CONTE-ME MAIS</button></a>
</div>
<!-- Imagem Bumba-boi -->
<div class="bumba-boi">
<img src="images/bumba-boi.png" alt="Bumba meu boi, símbolo cultural do Maranhão">
</div>
</section>
<!-- 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>
<!-- Segunda seção | Blue -->
<section class="blue-section">
<!-- Background com curvas -->
<div class="background-blue"></div>
<!-- Descrição do projeto -->
<div id="eguas-description-start"></div>
<div class="blue-content">
<h2 class="blue-intro">
É uma honra te apresentar o projeto:
</h2>
<div class="extended-logo">
<img src="images/logo2.png" alt="Logo da 'Éguas, Siow!' com dois emojis com expressões de surpresa nas extremidades">
</div>
<p class="eguas-description">
Mas, calma! Não, não estamos falando da fêmea do cavalo! Quando um <strong>maranhense</strong> expressa admiração ou se surpreende com algo, é comum falarmos “<strong>éguas</strong>”, com o mesmo significado de “caramba” e “nossa”. Já o “<strong>siow</strong>” (ou “siô”) trata-se de uma diminuição da palavra “senhor”, mas usamos para nos referir a qualquer pessoa com quem estejamos conversando.
</p>
<p class="eguas-description">
Daí que vem a origem do nome do nosso projeto. Esperamos que à medida que você conheça mais sobre a cultura do estado do Maranhão, como as suas <strong>belezas naturais, culinária diversificada, festas populares, lendas e mistérios</strong>, você possa também calibrar o seu “maranhês” dizendo um “<strong>Éguas, siow! Que cultura massa!</strong>”.
</p>
<!-- Call to Action -->
<div class="single-button-box">
<a href="cultura-1.html">
<button class="primary-button">
COMECE A SUA JORNADA
</button>
</a>
</div>
</div>
<div class="illustration">
<img src="images/saly-14.png" alt="Garoto acessando o 'Éguas, Siow!' via smartphone.">
</div>
<div class="listras"></div>
</section>
<!-- Terceira seção | Last try -->
<section class="third-section">
<div class="container">
<div class="text-block">
<h2 class="headline">
AINDA NÃO ESTÁ CONVENCIDO DE QUE ESTE SITE FOI <strong>FEITO ESPECIALMENTE PARA VOCÊ?</strong>
</h2>
<p class="description">Então confira logo abaixo um vídeo do <a href="https://www.youtube.com/channel/UCcaE5gXaWqZfcdLkYTJvPDg" rel="external" target="_blank">Canal de Curiosidades</a>, no qual são abordados 30 fatos curiosos sobre o estado do Maranhão. Aposto que irá aguçar o seu interesse em saber mais!</p>
</div>
<!-- Vídeo do YouTube -->
<div class="yt-video">
<iframe src="https://www.youtube.com/embed/Q_-hcXRYDSs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p class="endline"><strong>Agora é contigo!</strong> Embarque nessa aventura:</p>
<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>
<div class="illustration-2">
<img src="images/Saly-15.png" alt="Garoto explorador com mochila nas costas segurando bandeira, prestes a conhecer mais sobre a cultura maranhense.">
</div>
</div>
</section>
</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:[email protected]?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>