11 | O Maranhão é conhecido por sua arquitetura, belezas naturais, variedade de pratos típicos, literaturas e efervescência cultural. Para exaltar esta vasta beleza e diversidade do Estado, foi desenvolvido o
Bumba Meu Maranhão , que faz parte do Primeiro Desafio do
Programa Trilhas da trilha de programação, e foi desenvolvido a fim de explorar essa extraordinária cultura maranhense.
12 |
13 |
14 | ### 🛠 Tecnologias Utilizadas:
15 |
16 | - Html
17 | - Css
18 | - JavaScript
19 |
20 | ---
21 | > Desafio 1: Programa Trilhas do Inova Maranhão
22 |
23 |
--------------------------------------------------------------------------------
/assets/img/bandeira.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
1 | const navMenu = document.getElementById('nav-menu'),
2 | navToggle = document.getElementById('nav-toggle'),
3 | navClose = document.getElementById('nav-close')
4 |
5 | if(navToggle){
6 | navToggle.addEventListener('click', () =>{
7 | navMenu.classList.add('show-menu')
8 | })
9 | }
10 |
11 | if(navClose){
12 | navClose.addEventListener('click', () =>{
13 | navMenu.classList.remove('show-menu')
14 | })
15 | }
16 |
17 | const navLink = document.querySelectorAll('.nav__link')
18 |
19 | function linkAction(){
20 | const navMenu = document.getElementById('nav-menu')
21 | navMenu.classList.remove('show-menu')
22 | }
23 | navLink.forEach(n => n.addEventListener('click', linkAction))
24 |
25 | function scrollHeader(){
26 | const header = document.getElementById('header')
27 | if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header')
28 | }
29 | window.addEventListener('scroll', scrollHeader)
30 |
31 | let newSwiper = new Swiper(".new-swiper", {
32 | spaceBetween: 24,
33 | loop: 'true',
34 | slidesPerView: "auto",
35 | centeredSlides: true,
36 |
37 | pagination: {
38 | el: ".swiper-pagination",
39 | dynamicBullets: true,
40 | },
41 | breakpoints: {
42 | 992: {
43 | spaceBetween: 80,
44 | },
45 | },
46 | });
47 |
48 | const sections = document.querySelectorAll('section[id]')
49 |
50 | function scrollActive(){
51 | const scrollY = window.pageYOffset
52 |
53 | sections.forEach(current =>{
54 | const sectionHeight = current.offsetHeight,
55 | sectionTop = current.offsetTop - 58,
56 | sectionId = current.getAttribute('id')
57 |
58 | if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
59 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
60 | }else{
61 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
62 | }
63 | })
64 | }
65 | window.addEventListener('scroll', scrollActive)
66 |
67 | function scrollUp(){
68 | const scrollUp = document.getElementById('scroll-up');
69 | if(this.scrollY >= 350) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
70 | }
71 | window.addEventListener('scroll', scrollUp)
72 |
73 |
74 | const themeButton = document.getElementById('theme-button')
75 | const darkTheme = 'dark-theme'
76 | const iconTheme = 'bx-sun'
77 |
78 | const selectedTheme = localStorage.getItem('selected-theme')
79 | const selectedIcon = localStorage.getItem('selected-icon')
80 |
81 | const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
82 | const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx bx-moon' : 'bx bx-sun'
83 |
84 | if (selectedTheme) {
85 | document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
86 | themeButton.classList[selectedIcon === 'bx bx-moon' ? 'add' : 'remove'](iconTheme)
87 | }
88 |
89 | themeButton.addEventListener('click', () => {
90 | document.body.classList.toggle(darkTheme)
91 | themeButton.classList.toggle(iconTheme)
92 | localStorage.setItem('selected-theme', getCurrentTheme())
93 | localStorage.setItem('selected-icon', getCurrentIcon())
94 | })
95 |
96 | const sr = ScrollReveal({
97 | origin: 'top',
98 | distance: '60px',
99 | duration: 2500,
100 | delay: 400,
101 | })
102 |
103 | sr.reveal(`.home__img, .new__container, .footer__container`)
104 | sr.reveal(`.home__data`, {delay: 500})
105 | sr.reveal(`.giving__content, .gift__card`,{interval: 100})
106 | sr.reveal(`.celebrate__data, .message__form, .footer__img1`,{origin: 'left'})
107 | sr.reveal(`.celebrate__img, .message__img, .footer__img2`,{origin: 'right'})
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Bumba Meu Maranhão
15 |
16 |
17 |
18 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
Bumba Meu Maranhão
64 |
65 | Contribuindo para a divulgação da cultura maranhense
66 |
67 |
Começar
68 |
69 |
71 |
72 |
73 |
74 |
75 | Bumba
76 |
77 |
78 |
79 |
80 |
81 |
Cultura Maranhense
82 |
83 |
84 |
85 |
86 |
87 |
Festas Populares
88 |
89 |
90 |
91 |
92 |
93 |
Culinária Maranhense
94 |
95 |
96 |
98 |
99 |
100 |
101 |
102 |
103 |
104 | Sobre o Estado do Maranhão
105 |
106 |
107 | É um estado brasileiro integrante da região Nordeste que apresenta mais de 7 milhões de
108 | habitantes distribuídos em uma superfície de 330 mil km².
109 |
110 |
Saiba Mais
111 |
112 |
113 |
114 |
116 |
117 |
118 |
119 | Galeria de Imagens
120 |
121 |
126 |
127 |
128 | 
61 |
62 | 
81 | 
87 | 
93 | 
114 | 
123 | 
124 | 
125 |