-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
653 lines (599 loc) · 36.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>29º GEFI</title>
<link rel="icon" href="img/logo.png">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!--Materialize css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Custom css-->
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<!--HEADER-->
<header>
<!--MENU MOBILE-->
<ul class="side-nav" id="menu-mobile">
<li><a class="hide-menu" href="#home">Home</a></li>
<li><a class="hide-menu" href="#sobre">Sobre</a></li>
<li><a class="hide-menu" href="#ramos">Ramos</a></li>
<li><a class="hide-menu" href="#atividades">Atividades</a></li>
<li><a class="hide-menu" href="#contato">Contato</a></li>
</ul>
<div class="navbar-fixed">
<nav class="navbar z-depth-0">
<div class="nav-wrapper container">
<h1 class="logo_text">Grupo Escoteiro Franca do Imperador</h1>
<a href=""><img class="logo_img" src="img/logo.png" alt="Grupo Escoteiro Franca do Imperador"></a>
<ul class="right light hide-on-med-and-down">
<li><a href="#home">Home</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#ramos">Ramos</a></li>
<li><a href="#atividades">Atividades</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
<a href="#" data-activates="menu-mobile" class="button-collapse right"><i class="material-icons">menu</i></a>
</div>
</nav>
</div>
</header>
<!--HOME-->
<section class="home bloco scrollspy" id="home">
<div class="row container banner">
<div class="col s12 center">
<h2 class="white-text light">"O nosso grupo é o melhor da região"</h2>
<p class="white-text light">Quase 30 anos de história, formando jovens responsáveis, empáticos, amantes da natureza, líderes e acima de tudo propagadores da paz</p>
<p class="white-text light">Grupo escoteiro Franca do Imperador: "Se não for o maior, tem que ser o melhor"</p>
<div class="row">
<a href="#sobre" class="btn btn-large yellow-logo black-text">Sobre nós</a>
<a href="#contato" class="btn btn-large yellow-logo black-text">Contato</a>
</div>
</div>
</div>
</section>
<!--SOBRE-->
<section class="sobre bloco scrollspy" id="sobre">
<div class="row container">
<div class="col s12 center">
<h2 class="light titulo">Sobre Nós</h2>
</div>
<div class="col s12 l6">
<p class="light">
O Escotismo é um movimento de educação não formal, que complementa os esforços da família, escola e outras instituições e se propõe a oferecer atividades progressivas, atraentes e variadas, respeitando as diferentes fases de desenvolvimento de crianças, adolescentes e jovens, considerando as particularidades do seu desenvolvimento.
<br></br>Jovens que integram o movimento escoteiro são desafiados a serem atuantes em suas comatividades, responsáveis pelas suas escolhas, respeitando ao próximo e a natureza e promovendo da paz. Acreditamos que dessa forma podemos contribuir para que os jovens desenvolvam suas potencialidades, permeados por um marco referencial de valores, que se reforçam a partir da aceitação e comprometimento com a Lei e Promessa Escoteira.
</p>
</div>
<div class="col s12 l6">
<div class="carousel carousel-slider">
<a href="#" class="carousel-item">
<img alt="Imagem instituiconal" src="img/banner-01.jpg">
</a>
<a href="#" class="carousel-item">
<img alt="Imagem instituiconal" src="img/banner-02.jpg">
</a>
<a href="#" class="carousel-item">
<img alt="Imagem instituiconal" src="img/banner-03.jpg">
</a>
</div>
</div>
</div>
<div class="row yellow-logo">
<div class="container">
<article class="item col s12 m4 center">
<span class="icon"><i class="material-icons medium">explore</i></span>
<h3 class="light">Missão</h3>
<p class="light">Contribuir para a educação de jovens, por meio de um sistema de valores baseado na Promessa e na Lei Escoteira. Por meio desses valores, ajudamos os jovens a serem protagonistas na construção de um mundo melhor, onde as pessoas se realizem como indivíduos e desempenhem um papel construtivo na sociedade.</p>
</article>
<article class="item col s12 m4 center">
<span class="icon"><i class="material-icons medium">emoji_flags</i></span>
<h3 class="light">Visão</h3>
<p class="light">Até 2023, o Escotismo no Brasil será o mais relevante movimento de educação juvenil, possibilitando que 200 mil jovens sejam cidadãos e cidadãs ativos que inspirem mudanças positivas em suas comatividades e mundo. </p>
</article>
<article class="item col s12 m4 center">
<span class="icon"><i class="material-icons medium">eco</i></span>
<h3 class="light">Valores</h3>
<p class="light">
Diversidade –Respeito às diferenças, em suas várias dimensões, e defesa permanente dos direitos humanos.
<br>Honestidade –Respeito aos preceitos legais, morais, justos e éticos em todas as ações e relações.
<br>Sustentabilidade –Responsabilidade com o meio ambiente e adoção de práticas sustentáveis.
</p>
</article>
</div>
</div>
</section>
<!--RAMOS-->
<section class="ramos bloco scrollspy" id="ramos">
<div class="row container">
<div class="col s12 center">
<h2 class="light titulo white-text">Ramos</h2>
<p class="light paragrafo white-text">O Método Escoteiro compreende alguns elementos interdependentes que formam um conjunto unificado e integrado. Tais elementos, igualmente importantes, trabalhando juntos como um sistema coeso, e sua implementação, de maneira combinada e equilibrada,
adaptada a cada faixa etária, são o que torna o Escotismo único.Para conhecer mais sobre os ramos divididos por faixa etária, basta conferir os cards abaixo:
</p>
</div>
</div>
<!--Lobinho-->
<div class="row container">
<article class="col s12 m6 l3">
<div class="card">
<div class="card-image">
<img src="img/lobinho.jpg" alt="Lobinho" class="materialboxed">
<a href="#lobinho-modal" class="btn btn-floating halfway-fab yellow-logo modal-trigger">
<i class="material-icons">more_horiz</i>
</a>
</div>
<div class="card-content">
<h3 class="card-title">Lobinho</h3>
<p class="light">Entre os 6,5 e os 10 anos, somos lobinhos.Aprendemos muito sobre a vida em meio à natureza,
a viver em grupo e desenvolvemos nossa liderança</p>
</div>
</div>
</article>
<!--MODal Lobinho-->
<div class="modal" id="lobinho-modal">
<div class="modal-content">
<h5 class="light">O que faz o ramo Lobinho?</h5>
<p class="light black-text">“O livro da Jângal”, que retrata as aventuras de Mowgli, o menino lobo, é o que inspira a organização do Ramo Lobinho – juntos, formamos uma alcateia, que é dividida em pequenos grupos chamados matilhas.
Cada matilha tem de quatro a seis lobinhos, entre meninos e meninas, e esse grupo nos acompanha durante todo o período em que ficamos nesse Ramo.
</br>Com esses amigos, fazemos jogos, brincadeiras, vivemos aventuras, aprendemos sobre a importância da boa ação diária e ainda somos incentivados a fazer sempre o nosso Melhor Possível; esse inclusive é o nosso lema.
Antes que possamos completar 11 anos, somos encaminhados para o Ramo Escoteiro. Nesse período, é feita uma Cerimônia de Passagem para que possamos nos despedir da alcateia.
</p>
<h5 class="light">Temos nossa própria lei, a Lei do Lobinho, que traz cinco artigos:</h5>
<ul class="collection">
<li class="collection-item">O Lobinho ouve sempre os Velhos Lobos; </li>
<li class="collection-item">O Lobinho pensa primeiro no outros; </li>
<li class="collection-item">O Lobinho abre os olhos e os ouvidos; </li>
<li class="collection-item">O lobinho é limpo e está sempre alegre; </li>
<li class="collection-item">O Lobinho diz sempre a verdade. </li>
</ul>
</div>
<div class="modal-footer">
<a class="btn yellow-logo modal-action modal-close">Sair</a>
</div>
</div>
<!--Escoteiro-->
<article class="col s12 m6 l3">
<div class="card">
<div class="card-image">
<img src="img/tropa.jpg" alt="Tropa Escoteira" class="materialboxed">
<a href="#escoteiro-modal" class="btn btn-floating halfway-fab yellow-logo modal-trigger">
<i class="material-icons">more_horiz</i>
</a>
</div>
<div class="card-content">
<h3 class="card-title">Tropa Escoteira</h3>
<p class="light">Entre os 11 e 14 anos, fazemos parte do Ramo Escoteiro –
somos patrulhas de 5 a 8 jovens, de meninos e meninas, que juntas formam uma tropa.</p>
</div>
</div>
</article>
<!--MODal Escoteiro-->
<div class="modal" id="escoteiro-modal">
<div class="modal-content">
<h5 class="light">O que faz o ramo Escoteiro?</h5>
<p class="light black-text">Entre os 11 e 14 anos, fazemos parte do Ramo Escoteiro – somos patrulhas de 5 a 8 jovens, de meninos e meninas, que juntas formam uma tropa. Aqui, além de trabalhar em equipe e entender a importância de respeitar a natureza, aprendemos diversas coisas que nos deixam mais confiantes e decididos.
Cada patrulha tem seu próprio bastão e bandeirola, onde gravamos lembranças marcantes de nossa experiência juntos, assim como o livro de patrulha, que tem todas as informações sobre os membros e fotografias das nossas ações.
</br>Elegemos um monitor, que age como um líder dentro de nosso grupo, e desenvolvemos algumas atividades por conta própria, como ir ao cinema, jogar algum jogo, etc.
Atividades como acampamentos e excursões fazem parte da nossa vivência no Ramo Escoteiro, sempre com o acompanhamento de adultos. Com nosso lema “Sempre Alerta”, estamos interessados em descobrir coisas novas e estar cercados de amigos.
Antes de completar 15 anos, passamos por um período de transição em que nos adaptamos à realidade do Ramo Sênior, e nos despedimos da tropa escoteira com a Cerimônia de Passagem.
</p>
<h5 class="light">Temos nossa própria lei, a Lei do Escoteiro, que traz dez artigos:</h5>
<ul class="collection">
<li class="collection-item">O Escoteiro é honrado e digno de confiança; </li>
<li class="collection-item">O escoteiro é leal; </li>
<li class="collection-item">O escoteiro está sempre alerta para ajudar o próximo e pratica diariamente uma boa ação; </li>
<li class="collection-item">O escoteiro é amigo de todos e irmão dos demais escoteiros; </li>
<li class="collection-item">O escoteiro é cortês; </li>
<li class="collection-item">O escoteiro é bom para os animais e as plantas; </li>
<li class="collection-item">O escoteiro é obediente e disciplinado; </li>
<li class="collection-item"> O escoteiro é alegre e sorri nas dificuldades; </li>
<li class="collection-item">O escoteiro é econômico e respeita o bem alheio; </li>
<li class="collection-item"> O escoteiro é limpo de corpo e alma. </li>
</ul>
</div>
<div class="modal-footer">
<a class="btn yellow-logo modal-action modal-close">Sair</a>
</div>
</div>
<!--Senior-->
<article class="col s12 m6 l3">
<div class="card">
<div class="card-image">
<img src="img/senior.jpg" alt="Tropa Sênior" class="materialboxed">
<a href="#senior-modal" class="btn btn-floating halfway-fab yellow-logo modal-trigger">
<i class="material-icons">more_horiz</i>
</a>
</div>
<div class="card-content">
<h3 class="card-title">Tropa Sênior</h3>
<p class="light">O Ramo Sênior é formado por jovens com idades entre 15 e 17 anos,
e nos incentiva a superar nossos próprios desafios! Aceitamos nossas diferenças de um jeito mais simples.</p>
</div>
</div>
</article>
<!--MODal Senior-->
<div class="modal" id="senior-modal">
<div class="modal-content">
<h5 class="light">O que faz o ramo Sênior?</h5>
<p class="light black-text">Com a tropa sênior vivemos verdadeiras aventuras: fazemos rapel, navegamos, acampamos por vários dias, fazemos trilhas e escaladas, aprendemos jogos e atividades mais desafiadoras e somos incentivados a superar obstáculos.
</br>Como diz nosso lema, estamos Sempre Alerta a tudo que acontece ao nosso redor. Temos nosso próprio livro de patrulha, onde registramos informações importantes e recordações das nossas atividades.
A partir do momento que completamos 17 anos, e no máximo antes dos 18, precisamos nos despedir da tropa sênior e partir para o Ramo Pioneiro, após uma Cerimônia de Passagem.
</p>
<h5 class="light">Temos nossa própria lei, a Lei do Escoteiro, que traz dez artigos:</h5>
<ul class="collection">
<li class="collection-item">O Escoteiro é honrado e digno de confiança; </li>
<li class="collection-item">O escoteiro é leal; </li>
<li class="collection-item">O escoteiro está sempre alerta para ajudar o próximo e pratica diariamente uma boa ação; </li>
<li class="collection-item">O escoteiro é amigo de todos e irmão dos demais escoteiros; </li>
<li class="collection-item">O escoteiro é cortês; </li>
<li class="collection-item">O escoteiro é bom para os animais e as plantas; </li>
<li class="collection-item">O escoteiro é obediente e disciplinado; </li>
<li class="collection-item"> O escoteiro é alegre e sorri nas dificuldades; </li>
<li class="collection-item">O escoteiro é econômico e respeita o bem alheio; </li>
<li class="collection-item"> O escoteiro é limpo de corpo e alma. </li>
</ul>
</div>
<div class="modal-footer">
<a class="btn yellow-logo modal-action modal-close">Sair</a>
</div>
</div>
<!--Pioneiro-->
<article class="col s12 m6 l3">
<div class="card">
<div class="card-image">
<img src="img/pio.jpg" alt="Clâ Pioneiro" class="materialboxed">
<a href="#pioneiro-modal" class="btn btn-floating halfway-fab yellow-logo modal-trigger">
<i class="material-icons">more_horiz</i>
</a>
</div>
<div class="card-content">
<h3 class="card-title">Clã Pioneiro</h3>
<p class="light">A partir dos 18 anos, e até os 21 incompletos, integramos o Ramo Pioneiro.
Nossa equipe forma o clã, e é onde nos apoiamos e descobrimos interesses em comum. </p>
</div>
</div>
</article>
<!--MODal Pioneiro-->
<div class="modal" id="pioneiro-modal">
<div class="modal-content">
<h5 class="light">O que faz o ramo Sênior?</h5>
<p class="light black-text">A partir dos 18 anos, e até os 21 incompletos, integramos o Ramo Pioneiro. Nossa equipe forma o clã, e é onde nos apoiamos e descobrimos interesses em comum. Levamos a sério nosso lema “Servir”, já que vivemos uma aventura que não é mais simbólica ou imaginária, pois experimentamos o papel real do adulto por meio do serviço e das atividades de desenvolvimento comunitário.
</br>O cotidiano no clã nos dá bastante liberdade, mas já estamos cientes da responsabilidade que isso traz – somos nós que organizamos nossas próprias atividades. Esse é o período em que entramos na vida adulta, e estamos concluindo a formação de nossos valores e princípios.
</br>Mesmo estando no clã, já podemos participar como adultos voluntários em outros Ramos atuar ativamente em nossas comatividades. Prestes a completar 21 anos, é chegada a hora de encerrar nossa caminhada como jovem no Movimento Escoteiro. A Cerimônia de Partida marca essa etapa, que pode ser seguida pela vida escoteira no papel de voluntário, como escotista ou dirigente.
</p>
<h5 class="light">Temos nossa própria lei, a Lei do Escoteiro, que traz dez artigos:</h5>
<ul class="collection">
<li class="collection-item">O Escoteiro é honrado e digno de confiança; </li>
<li class="collection-item">O escoteiro é leal; </li>
<li class="collection-item">O escoteiro está sempre alerta para ajudar o próximo e pratica diariamente uma boa ação; </li>
<li class="collection-item">O escoteiro é amigo de todos e irmão dos demais escoteiros; </li>
<li class="collection-item">O escoteiro é cortês; </li>
<li class="collection-item">O escoteiro é bom para os animais e as plantas; </li>
<li class="collection-item">O escoteiro é obediente e disciplinado; </li>
<li class="collection-item"> O escoteiro é alegre e sorri nas dificuldades; </li>
<li class="collection-item">O escoteiro é econômico e respeita o bem alheio; </li>
<li class="collection-item"> O escoteiro é limpo de corpo e alma. </li>
</ul>
</div>
<div class="modal-footer">
<a class="btn yellow-logo modal-action modal-close">Sair</a>
</div>
</div>
<!--Botão Quadro de horários-->
<div class="row center">
<a href="#horarios-modal" class="btn btn-large yellow-logo modal-trigger"><i class="material-icons right">timer</i>Horários</a>
</div>
<!--Modal Horários-->
<div class="modal" id="horarios-modal">
<div class="modal-content">
<h5 class="light">Horários</h5>
<ul class="tabs">
<li class="tab col s2"><a href="#tabela-grupo">Normal</a></li>
<li class="tab col s2"><a href="#tabela-extra">Extra-Sede</a></li>
<li class="tab col s2"><a href="#tabela-adm">Secretaria</a></li>
</ul>
<!--Tabela GRUPO-->
<table class="striped responsive-table" id="tabela-grupo">
<thead>
<tr>
<th>Sábado</th>
</tr>
</thead>
<tbody>
<tr>
<td>14:00 ás 17:00</td>
</tr>
</tbody>
</table>
<!--Tabela Extra-->
<table class="striped responsive-table" id="tabela-extra">
<thead>
<tr>
<th>Quarta</th>
<th>Quinta</th>
</tr>
</thead>
<tbody>
<tr>
<td>19:00 ás 20:00</td>
<td>20:00 ás 21:00</td>
</tr>
</tbody>
</table>
<!--Tabela ADM-->
<table class="striped responsive-table" id="tabela-adm">
<thead>
<tr>
<th>Segunda</th>
<th>Terça</th>
<th>Quarta</th>
<th>Quinta</th>
<th>Sexta</th>
<th>Sábado</th>
<th>Domingo</th>
</tr>
</thead>
<tbody>
<tr>
<td>19:00 ás 20:30</td>
<td>Lojinha aberta</td>
<td>Lojinha aberta</td>
<td>Lojinha aberta</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>12:00 ás 17:30</td>
<td></td>
<td></td>
<td></td>
<td>Lojinha aberta</td>
<td>Lojinha aberta</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</section>
<!--Atividades-atividades-->
<section class="atividades bloco scrollspy" id="atividades">
<div class="row container">
<div class="col s12 center">
<h2 class="light titulo white-text">Atividades</h2>
<p class="light paragrafo white-text">No Movimento Escoteiro, jovens são os grandes protagonistas e são incentivados a desenvolver suas potencialidades e habilidades, anos de experiência nos mostram e nos permitem compartilhar que colaboramos
com o desenvolvimento de líderes a serviço do próximo, que se integram ao desenvolvimento da sociedade, conscientes de seu papel, criativos, esperançosos e empreendedores.Com o auxilio dos Adultos Voluntários diversas habilidades são trabalhadas, algumas delas você encontra logo abaixo:</p>
</div>
</div>
<div class="row container">
<!--Trilhas-->
<article class="col s12 l6">
<div class="card horizontal">
<div class="card-image card-image-horizontal">
<img src="img/camp.jpg" alt="Acampamentos">
</div>
<div class="card-stacked">
<div class="card-content">
<h3 class="card-title light">Acampamentos</h3>
<p class="light">
<i class="material-icons left"> connect_without_contact </i> Empatia <br>
<i class="material-icons left"> terrain </i> Superar desafios <br>
<i class="material-icons left"> location_off </i> Conexão com a natureza
</p>
</div>
</div>
</div>
</article>
<!--Meio Ambiente-->
<article class="col s12 l6">
<div class="card horizontal">
<div class="card-image card-image-horizontal">
<img src="img/meio.jpg" alt="Meio-Ambiente">
</div>
<div class="card-stacked">
<div class="card-content">
<h3 class="card-title light">Meio-Ambiente</h3>
<p class="light">
<i class="material-icons left"> policy </i> Socioambiental <br>
<i class="material-icons left"> toys </i> Ser ecológico <br>
<i class="material-icons left"> local_florist </i> Respeitar a natureza
</p>
</div>
</div>
</div>
</article>
<!--Habilidades-->
<article class="col s12 l6">
<div class="card horizontal">
<div class="card-image card-image-horizontal">
<img src="img/mato.jpg" alt="Habilidades Mateiras">
</div>
<div class="card-stacked">
<div class="card-content">
<h3 class="card-title light">Habilidades Mateiras</h3>
<p class="light">
<i class="material-icons left"> create </i> Criatividade <br>
<i class="material-icons left"> gesture </i> Cordenação motora <br>
<i class="material-icons left"> security </i> Responsabilidade
</p>
</div>
</div>
</div>
</article>
<!--Trabalho em equipe-->
<article class="col s12 l6">
<div class="card horizontal">
<div class="card-image card-image-horizontal">
<img src="img/equipe.jpg" alt="Trabalho em equipe">
</div>
<div class="card-stacked">
<div class="card-content">
<h3 class="card-title light">Trabalho em equipe</h3>
<p class="light">
<i class="material-icons left"> alt_route </i> Liderança <br>
<i class="material-icons left"> loyalty </i> Lealdade <br>
<i class="material-icons left"> mms </i> Comunicação
</p>
</div>
</div>
</div>
</article>
</div>
</section>
<!--Contato-->
<section class="contato bloco scrollspy" id="contato">
<div class="row container">
<div class="col s12 center">
<h2 class="titulo light black-text">Contato</h2>
</div>
<div class="col s12 m6 l4 hide-on-med-only">
<div class="mapa transparent">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5283.783753430507!2d-47.434463838215315!3d-20.539023963047978!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94b0a7eaa7dc7ca9%3A0x82ff9cb9671545e5!2sGrupo%20Escoteiro%20Franca%20do%20Imperador!5e0!3m2!1spt-BR!2sbr!4v1594500697438!5m2!1spt-BR!2sbr"
width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
<div class="col s12 m6 l4">
<div class="informacoes white-text">
<h4>Redes Sociais</h4>
<p class="light">Gostou? Para ficar por dentros de todas as atividades nos siga nas redes sociais!</p>
<a href="https://www.facebook.com/GrupoEscoteiroFrancaDoImperador/" class="btn-floating yellow-logo"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/escoteirosfrancadoimperador/" class="btn-floating yellow-logo"><i class="fa fa-instagram"></i></a>
<h4>Endereço</h4>
<p class="light">R. Antônio Modenezi, 1300 <br>
São Joaquim - Franca - SP</p>
<h4>Contatos</h4>
<p class="light">
(+55) 16 3723-6424
</p>
</div>
</div>
<div class="col s12 m6 l4">
<div class="formulario white black-text">
<h4>Fale conosco!</h4>
<p class="light"> Dúvidas, críticas, sugestões ou possível voluntariado? Por favor entre em contato conosco!</p>
<form action="" method="post">
<div class="input-field">
<input type="text" name="name" id="name">
<label for="name">Seu nome</label>
</div>
<div class="input-field">
<input type="email" name="email" id="email">
<label for="email">Seu email</label>
</div>
<div class="input-field">
<input type="text" name="subject" id="subject">
<label for="subject">Assunto</label>
</div>
<div class="input-field">
<textarea id="message" class="materialize-textarea"></textarea>
<label for="subject">Mensagem</label>
</div>
<button class="btn yellow-logo" type="submit"> Enviar</button>
</form>
</div>
</div>
</div>
</section>
<!--Depoimentos-->
<div class="depoimentos yellow-logo">
<div class="row container">
<div class="col s12 center">
<h2 class="titulo black-text light">Depoimentos</h2>
</div>
<div class="col s12 m4 center">
<img src="img/depo1.jpg" class="circle responsive-img" alt="Depoimento um">
<p class="light black-text">O movimento é fantástico, pessoas realmente comprometidas com o desenvolvimento dos jovens!</p>
<h4 class="light black-text">Renata Silva</h4>
<p class="black-text">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
</p>
</div>
<div class="col s12 m4 center">
<img src="img/depo2.jpg" class="circle responsive-img" alt="Depoimento dois">
<p class="light black-text">Maior grupo Escoteiro do Distrito dse Ribeirão Preto. Quase três décadas de atividades.</p>
<h4 class="light black-text">Renata Delgado</h4>
<p class="black-text">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
</p>
</div>
<div class="col s12 m4 center">
<img src="img/depo3.jpg" class="circle responsive-img" alt="Depoimento três">
<p class="light black-text">Lugar onde se faz amigos, aprende sobre caráter, respeito e cuidar do planeta.</p>
<h4 class="light black-text">Renata Moroni</h4>
<p class="black-text">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
</p>
</div>
</div>
</div>
<!--Footer-->
<footer class="rodape">
<div class="row container center">
<img src="img/logo.png" class="logo_img">
<p class="yellow-text"> © LDM // Grupo Escoteiro Franca do Imperador - Todos os direitos reservados</p>
</div>
</footer>
<!--JQUERY-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--Materialize js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<!--JAVASCRIPT-->
<script>
//INICIALIZAÇÃO
$(document).ready(function(){
//MENU MOBILE
$(".button-collapse").sideNav();
//Link Interno
$(".scrollspy").scrollSpy({
scrollOffset: 0
});
//Carousel
$('.carousel.carousel-slider').carousel({
fullWidth: true,
indicators: true
});
//MODAL
$(".modal").modal();
//TABS
$("ul.tabs").tabs();
//Esconder menu ao clicar
$(".hide-menu").click(function(){
$(".button-collapse").sideNav("hide");
});
//Carousel automático
function autoplay(){
$(".carousel").carousel("next");
setTimeout(autoplay, 4500);
}
autoplay();
});
//ADICIONANDO NAVCOLOR
$(window).on("scroll", function(){
if($(window).scrollTop() > 100){
$(".navbar").addClass("nav-color");
}else{
$(".navbar").removeClass("nav-color");
}
});
</script>
</body>
</html>