Acoes-Transformadoras/index.html at main · IzaacCoding36/Acoes-Transformadoras · GitHub

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
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="IzaacCoding36">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Esse site apresenta debates sobre ações sociais que trazem grande impacto em nossas vidas">
    <meta name="keywords" content="HTML, CSS, JavaScript, Projeto, Ações, Sustentabilidade, Educação, Coletividade, Tecnologia">
    <link rel="stylesheet" href="style-modern.css">
    <link rel="shortcut icon" type="image/ico" href="Imagens/favicon.ico"/>
    <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@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
      window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
    </script>
    <script defer src="/_vercel/insights/script.js"></script>
    <title>Ações Transformadoras</title>
  </head>
  <body>
    <header class="site-header">
      <nav class="site-nav">
        <button class="mobile-menu-toggle" aria-label="Toggle mobile menu">
          ☰
        </button>
        <div class="nav-menu">
        <div class="dropdown">
          <button class="dropbtn" aria-haspopup="true" aria-expanded="false">
            <span>Linguagens</span>
            <span class="dropdown-arrow">▼</span>
          </button>
          <div class="dropdown-content" role="menu">
            <button class="pt-br" role="menuitem">Português do Brasil</button>
            <a href="English.html" role="menuitem">English</a>
            <button class="maislang" role="menuitem">Mais linguagens</button>
          </div>
        </div>
        <div class="dropdown">
          <button class="dropbtn" aria-haspopup="true" aria-expanded="false">
            <span>Filtros</span>
            <span class="dropdown-arrow">▼</span>
          </button>
          <div class="dropdown-content" role="menu">
            <button class="filtro" role="menuitem">Normal</button>
            <button class="filtro2" role="menuitem">Sépia</button>
            <button class="filtro3" role="menuitem">Cinza</button>
          </div>
        </div>
        <div class="dropdown">
          <button class="dropbtn" aria-haspopup="true" aria-expanded="false">
            <span>Temas</span>
            <span class="dropdown-arrow">▼</span>
          </button>
          <div class="dropdown-content" role="menu">
            <button class="tema" role="menuitem">Claro</button>
            <a href="Tema_Escuro.html" role="menuitem">Escuro</a>
          </div>
        </div>
        </div>
      </nav>
    </header>

    <main class="main-content">
      <section class="hero-section">
        <div class="hero-background"></div>
        <div class="hero-content">
          <h1 class="main-title">Ações que Transformam o Mundo</h1>
          <div class="intro-text">
            <p>Olá, Bem-vindo a esta página! Aqui você verá alguns assuntos que de fato impactam no nosso dia-a-dia, e que transformarão o futuro em que viveremos. Para isso, separei cada parte desse assunto em tópicos que são muito importantes.</p>
            <p>Como pode perceber, existe um círculo no topo desta página que representa os 4 tópicos que serão falados aqui, cada um desses tópicos representam temas específicos como:</p>
          </div>

          <div class="topic-badges">
            <span class="topic-badge sustainability">Sustentabilidade</span>
            <span class="topic-badge education">Educação</span>
            <span class="topic-badge collectivity">Coletividade</span>
            <span class="topic-badge technology">Tecnologia</span>
          </div>

          <p class="navigation-info">No canto superior direito você pode alterar a linguagem ou o tema para uma maior acessibilidade de leitura.</p>
          <p class="cta-text">Enfim, confira o conteúdo abaixo.</p>
        </div>
      </section>
      <section class="content-section sustainability">
        <div class="section-container">
          <div class="section-header">
            <hr class="section-line">
            <h2 class="section-title">Sustentabilidade</h2>
            <hr class="section-line">
          </div>
          <div class="section-content">
            <div class="image-container">
              <img class="section-image" alt="Sustentabilidade" src="Imagens/Sustentabilidade2.png" loading="lazy">
            </div>
            <div class="text-content">
              <p>O que claramente podemos citar aqui são ações sustentáveis que, de fato, transformam não só o mundo, mas sim quem somos.</p>
              <p>Jogar o lixo no lugar correto, cuidar das árvores e plantas, e até mesmo plantá-las, reflete em um ambiente muito melhor para o ser humano conviver.</p>
              <p>É claro que ações que transformam o mundo podem ser sustentáveis, isso é o que mais precisamos no momento, em muitos lugares do mundo vemos poluição, destruição ambiental, queimadas e devastação, e a sustentabilidade é a chave para termos um futuro potencialmente melhor. Você também faz parte disso, aliás, todos nós fazemos, a natureza nos beneficia com seus recursos naturais, por que não podemos contribuir com ela também? Não é mesmo?</p>
            </div>
          </div>
        </div>
      </section>

      <section class="content-section education">
        <div class="section-container">
          <div class="section-header">
            <hr class="section-line">
            <h2 class="section-title">Educação</h2>
            <hr class="section-line">
          </div>
          <div class="section-content">
            <div class="image-container">
              <img class="section-image" alt="Educação" src="Imagens/Educação2.png" loading="lazy">
            </div>
            <div class="text-content">
              <p>Mais uma das ações que são muito importantes para o nosso futuro é a educação, pois é a educação que modela o que nós planejamos ser futuramente, e obviamente, impulsionar a nossa produtividade para adentrar o mundo do trabalho.</p>
              <p>Mas não é só para trabalhar que nós vamos para a escola ou qualquer outra instituição de ensino, nós também aprendemos a conviver com o mundo, com a sua história, com seus mecanismos, por isso que muitas vezes ensinar alguém a algo pode ser algo transformador, pois você está transmitindo uma informação a alguém que provavelmente a utilizará em algum momento da vida.</p>
              <p>A educação também abrange temas muito importantes para incentivar a prática de atividades inovadoras, que abrangem temas também citados aqui como a tecnologia e a sustentabilidade.</p>
            </div>
          </div>
        </div>
      </section>

      <section class="content-section collectivity">
        <div class="section-container">
          <div class="section-header">
            <hr class="section-line">
            <h2 class="section-title">Coletividade</h2>
            <hr class="section-line">
          </div>
          <div class="section-content">
            <div class="image-container">
              <img class="section-image" alt="Coletividade" src="Imagens/Coletividade2.png" loading="lazy">
            </div>
            <div class="text-content">
              <p>O mundo não seria o que é hoje sem agirmos em conjunto, sim, mais um tópico que trata sobre a relevância de transformar o nosso mundo é a coletividade, pois várias pessoas investindo em um projeto ou uma ação boa é o essencial para gerar mudanças em grande escala.</p>
              <p>Esse é um assunto muito importante para tratarmos, pois a atualidade está se tornando cada vez mais individualista, onde as pessoas buscam cada vez menos agir ou participar de grupos e comunidades, isso traz alguns malefícios para a sociedade em geral como desigualdades, falta de aceitação, baixa estima, dentre outros problemas psicológicos e sociais.</p>
              <p>Desde os tempos primordiais do ser humano, nós apenas evoluímos em coletivo, e a coletividade nos propõe uma ampla variedade de coisas que não podemos fazer sozinhos. E por isso podemos aplicar isso ao nosso cotidiano, não podemos transformar o mundo apenas sozinhos, mas precisamos da cooperação e ajuda de todos como um só, ajudando na natureza, preservando matérias-primas e procurando novas soluções para problemas que vamos enfrentando no dia-a-dia.</p>
            </div>
          </div>
        </div>

        <div class="recommendations-section">
          <p class="recommendations-intro">Wow, todos esses textos cansam de ler, não é? Bem, vou recomendar alguns filmes e documentários abaixo se você realmente se interessa nesses assuntos:</p>

          <div class="movie-grid">
            <a href="https://g.co/kgs/9op2HnN" class="movie-card" target="_blank" rel="noopener">
              <img class="movie-image" alt="Brave Blue World" src="Imagens/Filme1.png" loading="lazy">
              <p class="movie-title">Brave Blue World (2020)</p>
            </a>
            <a href="https://g.co/kgs/QRPBJMc" class="movie-card" target="_blank" rel="noopener">
              <img class="movie-image" alt="Seremos História?" src="Imagens/Filme2.png" loading="lazy">
              <p class="movie-title">Seremos História? (2016)</p>
            </a>
            <a href="https://g.co/kgs/acX9yWC" class="movie-card" target="_blank" rel="noopener">
              <img class="movie-image" alt="Minimalism: A Documentary About the Important Things" src="Imagens/Filme3.png" loading="lazy">
              <p class="movie-title">Minimalism: A Documentary About the Important Things (2015)</p>
            </a>
          </div>

          <p class="transition-text">Ok, essas são as recomendações, podem ser poucas mas já é um início, você pode encontrar muito mais filmes, séries, documentários e livros que falam sobre os tópicos desta página na internet. Vamos continuar para o próximo assunto:</p>
        </div>
      </section>
      <section class="content-section technology">
        <div class="section-container">
          <div class="section-header">
            <hr class="section-line">
            <h2 class="section-title">Tecnologia</h2>
            <hr class="section-line">
          </div>
          <div class="section-content">
            <div class="image-container">
              <img class="section-image" alt="Tecnologia" src="Imagens/Tecnologia2.png" loading="lazy">
            </div>
            <div class="text-content">
              <p>A tecnologia é a nossa ferramenta para fazer as mudanças acontecerem. O desenvolvimento e a evolução do nosso conhecimento fornece uma maior oportunidade de mudarmos o mundo e o nosso futuro.</p>
              <p>Por isso a tecnologia é o que irá transformar o nosso mundo, pois com a tecnologia nós podemos desenvolver novas formas de preservar fontes naturais e nossa vida pessoal, tudo em um momento tão necessário como agora.</p>
              <p>Vale ressaltar que todos os assuntos aqui são de extrema importância, a geração atual está e irá sofrer mudanças severas futuramente, e principalmente no meio ambiente. Como as geleiras das regiões árticas que derretem dia após dia, o calor extremo que ocorre na região européia, desmatamentos, queimadas, e as demais descobertas como o avanço da inteligência artificial, o metaverso, realidade virtual, processadores quânticos, carros e eletrônicos inteligentes, e muito mais que ainda vem por aí, por isso a tecnologia é o que continuará inovando nossas vidas.</p>
              <p class="highlight-text">E essas são as verdadeiras ações que transformarão o mundo.</p>
              <p>Mas nada disso seria importante sem vocês, trabalhadores que passam dia após dia se esforçando por um mundo melhor, professores que investem no futuro e na vida de estudantes, alunos que se dedicam para serem futuros empreendedores ou profissionais, e muitas outras pessoas, que compõem uma sociedade em um mundo que está em constante transformação.</p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <div class="footer-content">
        <p class="acknowledgments">Agradeço por ter visualizado este projeto no qual passei dias me dedicando, é um prazer fazer parte de um projeto que trata sobre um tema tão incrível para as nossas vidas. Obrigado.</p>

        <div class="license-info">
          <a rel="license" href="http://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">
            <img alt="Licença Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" />
          </a>
          <br>
          Esta obra está licenciada com uma Licença <a rel="license" href="https://creativecommons.org/licenses/by/4.0/deed.pt_BR" target="_blank" rel="noopener">Creative Commons Atribuição 4.0 Internacional</a>.
          <p>Este site foi desenvolvido por @IzaacCoding36. Todos os direitos reservados.</p>
          <p>Curitiba, Paraná, Brasil. 2026.</p>
        </div>
      </div>
    </footer>

    <script src="./JavaScript/botoes.js"></script>
  </body>
</html>