-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (123 loc) · 7.89 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/imagens/favicon.png" type="image/x-icon">
<!-- LINK DO SITE PARA PEGAR OS ÍCONES -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="estilo/estilo.css">
<title>Simon Bolívar Sustentável</title>
</head>
<body>
<!-- CABEÇALHO DO SITE -->
<nav class="box-navgation">
<button class="btn_header open" id="btn_header" onclick="openSidebar()">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-list"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
</svg>
</button>
<div class="logo">
<img id="img-logo" src="imagens/logosbsustentavel.png" alt="Logo Simon Sustentável">
</div>
<div class="navgation-links" id="navgation-links">
<button class="btn_header close" id="btn_header" onclick="openSidebar()">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-x-lg"
viewBox="0 0 16 16">
<path
d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
</svg>
</button>
<ul>
<li class="nav-item"><a href="#box-navgation" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#banner" class="nav-link">Sobre nós</a></li>
<li class="nav-item"><a href="#container-cards" class="nav-link">Dicas de Sustentabilidade</a></li>
<li class="nav-item"><a href="#footer_content" class="nav-link">Informações Extras</a></li>
</ul>
</div>
</nav>
<!-- CAIXA COM O OBJETIVO DO SITE -->
<div class="banner" id="banner" tabindex="0" onclick="closeSidebar()">
<div class="quadrado-conteudo">
<h1>OBJETIVO DO SITE</h1>
<p>Nós somos alunos do 3° do Novo Ensino Médio na Escola Estadual Simon Bolívar e recebemos a proposta de desenvolver uma ferramenta que seja útil para algo/alguém, com isso decidimos fazer esse site informativo sobre Sustentabilidade, contendo alguns hábitos que você pode adquirir em seu dia-dia para tornar o mundo mais sustentável. <strong>Confira logo abaixo essas dicas!</strong></p>
</div>
</div>
<!-- CARDS COM AS DICAS E IMAGENS SOBRE SUSTENTABILIDADE -->
<div class="container-cards" id="container-cards" tabindex="0" onclick="closeSidebar()">
<div class="card">
<div class="image"></div>
<div class="text-card">Integrar o uso da <strong>Energia Renovável</strong> no nosso cotidiano é de suma importância, porque ela desempenha um papel vital contra as mudanças climáticas e redução de nossa dependência de combustíveis fósseis. Um exemplo é a energia solar.</div>
</div>
<div class="card">
<div class="image" id="img-2"></div>
<div class="text-card">A prática do <strong>Consumo Consciente</strong> tem uma grande importância no cotidiano mais sustentável, porque envolve uma escolha de compra responsável. Levando em conta a qualidade e impacto social e ambiental do produto.</div>
</div>
<div class="card">
<div class="image" id="img-3"></div>
<div class="text-card">A <strong>Educação Ambiental</strong> tem uma grande importância de promover a consciência ambiental nas pessoas, algumas escolas e instituições mobilizam projetos para conscientizar as pessoas sobre esse tema, motivando-as a prática da reciclagem e conservação.</div>
</div>
<div class="card">
<div class="image" id="img-4"></div>
<div class="text-card">O desenvolvimento de <strong>Produtos Sustentáveis</strong> tem uma grande importância no nosso dia-dia e promevem muitos benefícios para o meio ambiente, como diminuir deterioração e a poluição. É de suma importância incluir produtos sustentáveis no nosso cotidiano.</div>
</div>
<div class="card">
<div class="image" id="img-5"></div>
<div class="text-card">A <strong>Reciclagem</strong> tem um impacto positivo em nossas vidas e no meio ambiente e isso se baseia em reutilizar materiais/objetos que seriam descartados. Os principais fatores positivos da reciclagem é a redução da poluição no meio ambiente e a economia de energia e matéria-prima.</div>
</div>
<div class="card">
<div class="image" id="img-6"></div>
<div class="text-card">A <strong>Redução do uso de Plásticos</strong> é um dos fatores que mais contribui para a sustentabilidade, porque com esse hábito você reduz as ameaças contra os ecossistemas, oceanos e saúde humana. Além disso, o descarte inadequado dos plásticos afetam a vida marinha e a fauna terrestre.</div>
</div>
</div>
<!-- RODAPÉ DO SITE -->
<div id="footer_content">
<div id="footer_contacts">
<h1>Simon Bolívar Sustentável</h1>
<p>Dicas para tornar o mundo mais sustentável🌎</p>
<div id="footer_options">
<a href="#" class="footer-link" id="curta">
<i class="fa-regular fa-heart"></i>
</a>
<a href="#" class="footer-link" id="salve">
<i class="fa-solid fa-bookmark"></i>
</a>
<a href="#" class="footer-link" id="share">
<i class="fa-regular fa-share-from-square"></i>
</a>
</div>
</div>
<ul class="list-devs">
<li><h3>Desenvolvedores</h3></li>
<li><a href="#" class="footer-link">Gabriel Antonio</a></li>
<li><a href="#" class="footer-link">Vinícius Caetano</a></li>
</ul>
<ul class="list-colaboradores">
<li><h3>Colaboradores</h3></li>
<li><a href="#" class="footer-link">Guilherme Silva</a></li>
<li><a href="#" class="footer-link">Samuel Ferreira</a></li>
<li><a href="#" class="footer-link">Thomas Natanael</a></li>
</ul>
<div id="footer-credits">
<h3>Créditos</h3>
<p>Todas as imagens usadas nesse site foram fornecidas pela plataforma <strong>Freepik</strong></p>
</div>
</div>
<div id="footer_copyright">
<p>Todos os Direitos Reservados©</p>
</div>
<!-- CÓDIGO HTML PARA A JANELA MODAL -->
<div onclick="abrirModal()" class="botao"><strong>+</strong></div>
<div id="modal-container" class="modal-container">
<div class="modal">
<button class="fechar" id="fechar">x</button>
<h1>Seja um colaborador!</h1>
<p>Para esse projeto ficar ainda mais interativo tivemos a ideia de fazer uma pesquisa para saber o quão a nossa região é sustentável, basta responder o formulário abaixo, ele é composto por algumas perguntas relacionadas ao tema!</p>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdTX-ImefKfdRrnQ4LVEkGiE6QFH6rHQNLruwNif1CjUMguig/viewform?usp=sf_link">Formulário Simon Bolívar Sustentável</a>
</div>
</div>
<script src="./javascript/main.js"></script>
</body>
</html>