-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
292 lines (264 loc) · 34.3 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal Rural | Agrinho</title>
<link rel="stylesheet" href="assets/css/styles.css">
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="assets/js/script.js"></script>
</head>
<body>
<div id="boxtotop" class="hiddenToTop">
<button id="totop" class="button" onclick="toSct('atalhos')">
<svg class="svgIcon" viewBox="0 0 384 512">
<path
d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
></path>
</svg>
</button>
</div>
<main>
<section id="home" style="position: relative; background-image: url(assets/img/trigo.jpeg); margin-bottom: 0; background-size: cover; height: 100vh; overflow: hidden; z-index: 1;">
<div class="ps-absolute z-1" style="left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;">
<h1 class="cl-white sz-90px">Portal Rural</h1>
<hr style="border-color: var(--primary); margin: 0 5%;">
<br>
<p class="cl-white sz-20px" style="text-align: center;">Do campo à cidade, colhendo oportunidades.</p>
</div>
<button id="buttonPlayPause" title="Pausar vídeo" onclick="pausePlayBg()" class="ps-absolute video-controll-button z-1"><div><ion-icon id="playPauseIcon" name="pause-circle"></ion-icon></div></button>
<video id="bgVideo" autoplay loop muted>
<source src="https://agrinho.7fex.com/assets/img/background-video.mp4" type="video/mp4">
</video>
<div class="dp-flex" style="position: absolute; height: 100vh; width: 100%; bottom: 0; background-image: linear-gradient(to top, #0e0e0e, #0e0e0e81, #0e0e0e46, transparent); transform: translateY(2px);">
<!-- <div class="dp-flex bg-white wd-full mg-30px br-large bx-shadow pd-30px" style="height: 250px; transform: translateY(-20px);">
<article class="mg-r-30px" style="width: 50%; background-color: #e4e4e4d5;">
<h2 class="cl-theme-1 mg-b-10px">Título 1</h2>
<p>Parágrafo 1</p>
</article>
<article style="width: 50%; background-color: #e4e4e4d5;">
<h2 class="cl-theme-1 mg-b-10px">Título 2</h2>
<p>Parágrafo 1</p>
</article>
</div>
<div class="ps-relative bg-white mg-30px mg-l-0 br-large bx-shadow pd-30px" style="height: 250px; width: 500px; transform: translateY(-20px);">
<img src="assets/img/colheitadeira.png" alt="ilustração" class="br-medium ps-absolute" style="height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%);">
</div> -->
</div>
</section>
<!-- Sobre -->
<section class="format-sct" id="sobre" style="background-color: #0e0e0e; padding-bottom: 0; height: auto; min-height: auto;">
<div class="dp-flex">
<h2 class="cl-white sz-55px" style="width: 50%;">Semeando o futuro</h2>
<div style="width: 50%;">
<p class="cl-white" style="font-size: 18px; margin: 0 25px; line-height: 1.5;">Um portal dedicado a conectar o conhecimento do campo com o urbano. Descubra insights sobre agricultura, pecuária, economia rural e mais, através de conteúdos educativos e interativos que visam inspirar e informar pessoas de todas as idades. Venha descobrir como podemos semear o futuro juntos, colhendo transformação para um mundo melhor ao explorar e valorizar o meio rural de maneira inovadora.</p>
</div>
</div>
<div class="dp-flex" style="padding: var(--side-margin) 0;">
<div class="card-about">
<div><ion-icon name="accessibility-outline"></ion-icon></div>
<h3>Tradução em Libras e contraste de cores para surdos e deficientes visuais, no lado direito da tela</h3>
</div>
<div class="card-about">
<div><ion-icon name="reader-outline"></ion-icon></div>
<h3>Artigos detalhados sobre agricultura, pecuária, economia rural e mais</h3>
</div>
</div>
</section>
<!-- Atalhos -->
<section class="format-sct" id="atalhos">
<div class="ps-relative">
<h2 class="ps-absolute" style="left: 50%; top: -3px; transform: translate(-50%, -50%); background-color: #fff; padding: 0 10px;">Explore</h2>
<hr>
</div>
<br>
<p style="text-align: center;">Descubra os mais diversos assuntos relacionados ao mundo rural</p>
<br><br><br>
<div class="grid-pers">
<div onclick="toSct('agricultura')" class="grid-item item2 br-large ps-relative" style="min-width: 70px;"><span>Agricultura</span><div class="ps-absolute"><ion-icon name="leaf-outline"></ion-icon><span>Agricultura</span></div></div>
<div onclick="toSct('economia')" class="grid-item item3 br-large ps-relative" style="min-width: 70px;"><span>Economia</span><div class="ps-absolute"><ion-icon name="bar-chart-outline"></ion-icon><span>Economia</span></div></div>
<div onclick="toSct('produtos')" class="grid-item item6 br-large ps-relative" style="min-width: 70px;"><span>Produtos</span><div class="ps-absolute"><ion-icon name="restaurant-outline"></ion-icon><span>Produtos</span></div></div>
</div>
</section>
<!-- Agricultura -->
<section class="format-sct" id="agricultura">
<article>
<h2>Introdução</h2>
<p>A agricultura no Brasil é uma das mais importantes e desenvolvidas do mundo. O país é um dos principais produtores e exportadores de diversos produtos agrícolas, desempenhando um papel crucial na economia nacional e global. A combinação de vastas áreas de terra arável, clima favorável e avanços tecnológicos contribuíram para o desenvolvimento robusto do setor agrícola brasileiro.</p>
<br><br>
<h2>História da Agricultura no Brasil</h2>
<p>A história da agricultura no Brasil remonta aos povos indígenas que cultivavam mandioca, milho, batata-doce, amendoim, e outras culturas. Com a chegada dos colonizadores portugueses no século XVI, a agricultura começou a se expandir, inicialmente com a introdução da cana-de-açúcar, que se tornou a principal cultura exportadora durante o período colonial. Posteriormente, culturas como o café, algodão e cacau também ganharam destaque.</p>
<br><br>
<h2>Perspectivas Futuras</h2>
<p>O futuro da agricultura no Brasil é promissor, com potencial para crescimento contínuo e aumento da participação no mercado global. Investimentos em tecnologia, inovação e práticas agrícolas sustentáveis serão essenciais para enfrentar os desafios e maximizar as oportunidades.</p>
<br><br>
<h2>Conclusão</h2>
<p>A agricultura no Brasil é um setor vital que combina tradição e inovação. Com uma diversidade de culturas, regiões produtivas e tecnologias avançadas, o país se posiciona como um líder global na produção agrícola. No entanto, para sustentar esse crescimento, é fundamental enfrentar os desafios ambientais e de infraestrutura, garantindo um futuro sustentável e próspero para o setor agrícola brasileiro.</p>
</article>
</section>
<!-- Economia -->
<section class="format-sct" id="economia" style="padding: 20px 40px;">
<div style="display: flex; flex-direction: column; background-color: var(--primary-dark); border-radius: 15px; padding: 40px 60px;">
<div class="dp-flex al-i">
<h2 class="mg-r-auto cl-white sz-30px">Produção Agropecuária - <span class="arial cl-white">Brasil 2022</span></h2>
<div class="radio-inputs">
<label class="radio">
<input type="radio" name="agroGraph" id="radioAgro" value="agricola" onchange="loadGraph()" checked="">
<span class="name">Agrícola</span>
</label>
<label class="radio">
<input type="radio" name="agroGraph" id="radioPecu" value="pecuaria" onchange="loadGraph()">
<span class="name">Pecuária</span>
</label>
</div>
<!-- <select name="" id="">
<option value="23">Brasil 2023</option>
<option value="22">Brasil 2022</option>
<option value="21">Brasil 2021</option>
<option value="20">Brasil 2020</option>
</select> -->
</div>
<br><br>
<div class="economy-table">
<!-- <div>
<h3>Produto</h3>
<h4>0%</h4>
</div> -->
<div class="item-table"><div id="dt1" class="percent"></div></div>
<div class="item-table"><div id="dt2" class="percent"></div></div>
<div class="item-table"><div id="dt3" class="percent"></div></div>
<div class="item-table"><div id="dt4" class="percent"></div></div>
<div class="item-table"><div id="dt5" class="percent"></div></div>
</div>
<br>
<p class="cl-white">Fonte: <a class="cl-white" target="_blank" href="https://www.ibge.gov.br/explica/producao-agropecuaria/">IBGE(2022)</a></p>
<!-- <a href="#" class="cl-white">Mais detalhes</a> -->
<br><br>
<div class="dp-flex">
<div class="subtitle-graph">
<div class="subtitle-box"><div class="sbtt-cl" id="sbtt-cl-1"></div><span class="sbtt-txt" id="sbtt-txt-1">...</span></div>
<div class="subtitle-box"><div class="sbtt-cl" id="sbtt-cl-2"></div><span class="sbtt-txt" id="sbtt-txt-2">...</span></div>
<div class="subtitle-box"><div class="sbtt-cl" id="sbtt-cl-3"></div><span class="sbtt-txt" id="sbtt-txt-3">...</span></div>
</div>
<div class="subtitle-graph mg-l-10px">
<div class="subtitle-box"><div class="sbtt-cl" id="sbtt-cl-4"></div><span class="sbtt-txt" id="sbtt-txt-4">...</span></div>
<div class="subtitle-box"><div class="sbtt-cl" id="sbtt-cl-5"></div><span class="sbtt-txt" id="sbtt-txt-5">...</span></div>
</div>
</div>
</div>
</section>
<!-- Agricultura urbana -->
<section class="format-sct dp-flex">
<div>
<article>
<h2>Agricultura Urbana</h2>
<p>Agricultura urbana refere-se ao cultivo de plantas e à criação de animais dentro e ao redor das cidades. Este conceito surgiu como uma solução para vários problemas urbanos, incluindo a necessidade de melhorar a segurança alimentar, promover a sustentabilidade ambiental e revitalizar comunidades urbanas. A agricultura urbana pode ser praticada em quintais, telhados, varandas, lotes baldios, espaços comunitários e até mesmo em prédios adaptados para tal fim.</p>
<br>
<p>As técnicas utilizadas na agricultura urbana variam desde métodos tradicionais até inovações modernas como hidroponia, aquaponia e jardins verticais. A hidroponia envolve o cultivo de plantas em uma solução nutritiva sem solo, enquanto a aquaponia combina o cultivo de plantas com a criação de peixes em um sistema simbiótico.</p>
<br>
<p>Os benefícios da agricultura urbana são múltiplos: ela reduz a pegada de carbono associada ao transporte de alimentos, aumenta o acesso a produtos frescos e nutritivos, e pode proporcionar empregos e oportunidades educacionais. Além disso, espaços verdes urbanos ajudam a mitigar o efeito de ilhas de calor nas cidades e a melhorar a qualidade do ar.</p>
</article>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="display: flex; justify-content: center;">
<button class="btn-plant" onclick="toLink('pt.wikipedia.org/wiki/Agricultura_urbana')">Ver mais <ion-icon name="arrow-forward-outline" style="color: #fff; font-size: 20px; transform: translate(7px, 3px);"></ion-icon>
<div class="icon-1">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 208.52 511.88" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-1" d="M121.86 141.25c16.73,2.91 65.77,9.16 77.74,-14.94 14.49,-29.19 12.6,-56.91 -15.12,-69.09 -11.3,-4.96 -22.28,-7.7 -32.28,-9.66 -24.58,24.72 -41.22,75.51 -43.83,83.82 4.31,3.56 8.81,6.86 13.49,9.87zm-17.26 41.05c2.87,7.92 8.26,29.59 7.63,79.7 -0.16,12.74 -0.48,25.41 -0.81,38.43 -1.4,55.59 -2.96,117.52 7.12,210.69l-7.09 0.75c-10.12,-93.56 -8.56,-155.77 -7.15,-211.61 0.33,-13.06 0.65,-25.77 0.81,-38.35 0.53,-42.42 -3.06,-63.29 -5.69,-72.77 -7.55,8.48 -18.48,15.07 -34.33,16.54 -26.77,2.47 -43.19,-16.99 -52.84,-36.58 16.49,-8.49 65.65,-32.22 98.27,-31.47 1.86,1.42 3.76,2.8 5.69,4.13 -0.15,5.56 -1.43,24.61 -11.62,40.53zm-41.18 -148.65c-0.32,0.84 1.68,9.87 -6.19,10.71 -7.87,0.84 -3.26,-5.14 -6.82,-7.98 -3.57,-2.84 -9.97,-14.59 1.99,-15.96 11.97,-1.37 11.02,13.23 11.02,13.23zm124.63 55.54c0,0 -3.89,14.8 -10.18,18.69 -6.3,3.88 -22.78,7.24 -28.87,0.11 -6.09,-7.14 -1.57,-31.71 17.64,-30.45 19.21,1.26 22.68,8.4 21.42,11.65zm-101.53 67.51c0,0 5.88,5.56 5.46,9.87 -0.42,4.3 -5.78,19.21 -14.07,20.05 -8.29,0.84 -24.15,-6.82 -21.84,-17.53 2.31,-10.71 10.5,-11.34 12.6,-10.6 2.1,0.74 3.36,2.1 17.85,-1.78zm61.49 -109.94c-12.74,-2.33 -23.63,-3.69 -31.15,-7.4 0,0 -2.41,15.22 -4.51,19.74 -2.1,4.51 -6.3,17.32 -14.8,21.1 -8.5,3.78 -9.87,-28.14 4.62,-45.15 0,0 -10.13,-4.4 -22.34,-9.92 -11.47,31.21 -7.3,64.58 -7.28,64.68l-0.48 0.06c9.73,14.77 20.76,28.04 33.37,39.01 3.68,-11.43 19.48,-57.46 42.58,-82.12zm-71.44 -23.1c-16.59,-7.55 -35.59,-16.58 -38.25,-19.47 -1.97,-2.14 -4.87,-3.72 -7.63,-4.2 9.11,27.4 20.23,54.59 34.36,78.62 1.13,1.92 2.28,3.82 3.45,5.7 -0.66,-11.21 -0.85,-36.56 8.07,-60.65zm-49.59 -23.57c-2.34,0.66 -4.05,2.62 -4.09,6.41 -0.1,9.45 -9.03,35.38 -9.03,35.38 0,0 33.07,14.91 22.99,23.1 -10.08,8.19 -25.41,-8.5 -26.35,-9.34 0,0 -5.94,16.24 -8.44,35.85 11.53,-1.14 38.81,-2.11 72.53,8.35 -4.45,-6.19 -8.65,-12.68 -12.61,-19.42 -14.44,-24.56 -25.77,-52.36 -35.01,-80.32zm-25.33 95.01c-0.61,6.01 -0.86,12.26 -0.49,18.39 0,0 56.17,-9.87 57.33,8.71 1.15,18.58 -58.48,9.45 -58.48,9.45 0,0 2.71,16.68 10.73,34.23 16.07,-8.25 62.14,-30.45 95.29,-31.76l-1.75 -1.5 0.01 -0.03c-9.54,-8.13 -18.2,-17.54 -26.08,-27.89l-0.01 0.04c-36.16,-12.16 -65.36,-10.82 -76.53,-9.63z"></path></g></svg>
</div>
<div class="icon-2">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 420.62 554.38" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-2" d="M1.57 554.38c-0.01,-0.44 -2.46,-153.75 -1.23,-217.01 0.74,-38.16 6.99,-96.57 32.48,-148.36 17.72,-36 44.66,-68.8 85.37,-89.54l32.28 -4.39c21.9,-6.8 39.46,-7.7 45.04,-7.81 4.32,4.98 10.37,12.18 17.72,21.54 -0.39,10.62 -6.13,113.86 -82.32,208.5 -31.36,-18.46 -51.28,-57.42 -51.28,-57.42 52.13,-30.97 58.88,-51.52 69.61,-68.07 10.73,-16.56 2.45,-44.16 -11.65,-26.06 -14.11,18.09 -65.01,68.07 -65.01,68.07 -12.27,-87.7 33.12,-110.39 33.12,-110.39l0.34 -0.64c-27.64,18.92 -47.12,44.59 -60.77,72.35 -24.37,49.53 -30.35,105.69 -31.07,142.44 -1.22,63.07 1.22,216.14 1.23,216.58l-13.85 0.22zm216.49 -439.34c17.47,22.75 40.96,56.05 66.08,99.4 0.27,13.62 0.62,100.64 -33.48,153.85 -24.85,-9.4 -40.14,-15.03 -40.14,-15.03 12.57,-11.04 46.61,-87.09 23.3,-91.68 -23.3,-4.6 -47.99,84.63 -47.99,84.63 -21.55,-10.35 -42.58,-21.94 -50.33,-26.28 68.93,-86.04 80.61,-179.05 82.56,-204.89zm71.3 108.53c28.78,50.84 59.27,114.6 85.02,190.51 -4.31,0.96 -8.4,-1.03 -8.4,-1.03 -42.77,-17.04 -82,-32.13 -110.36,-42.88 29.72,-47.26 33.46,-119.21 33.74,-146.6zm106.95 70.68c0,0 -16.4,-14.1 -20.54,-22.84 -4.14,-8.74 -15.18,-3.68 -13.95,4.29 1.23,7.97 11.5,45.69 12.27,51.21 0.77,5.52 20.08,6.13 21,-1.99 0.92,-8.13 2.76,-23.61 1.23,-30.66zm-88.46 28.98c0,0 -8.43,4.29 -7.51,15.49 0.92,11.19 10.89,28.36 18.09,30.66 7.21,2.3 18.7,-25.14 -10.58,-46.15zm-109.42 -240.52c15.35,-63.34 56.21,-82.7 93.65,-82.7 38.33,0 65.31,22.23 65.31,22.23 0,0 -11.65,13.03 -33.42,13.95 -21.77,0.92 -28.52,11.65 -28.98,16.41 -0.46,4.75 1.53,16.25 32.35,18.24 30.82,1.99 55.19,-25.14 55.19,-25.14 16.95,23.84 26.52,45.94 31.83,64.51 -16.87,6.83 -73.84,22.75 -197.04,-4.57 -8.01,-10.2 -14.48,-17.86 -18.9,-22.93zm217.3 32.51c7.8,30.68 3.91,50.53 3.91,50.53 -55.65,4.45 -56.73,-5.98 -77.73,-6.59 -21,-0.61 -22.69,28.06 14.41,34.19 37.1,6.13 63.01,-1.99 63.01,-1.99 -1.13,20.07 -2.53,38.3 -4.11,54.87 -17.3,-0.51 -66.77,-6.48 -137.23,-52.73l-0.13 0.2c-21.09,-34.73 -40.52,-62.06 -55.57,-81.67 118.17,25.28 175.11,10.36 193.44,3.2zm-1.01 136.18c-10.45,105.02 -28.21,141.06 -31.88,153.37 -0.95,3.17 -2.29,5.35 -3.82,6.82 -27.16,-79.89 -59.57,-146.38 -89.72,-198.56l-0.02 -0.57 -0.3 0.01c-1.8,-3.11 -3.59,-6.18 -5.38,-9.19 66.28,41.51 113.43,47.51 131.12,48.12z"></path></g></svg>
</div>
<div class="icon-3">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 313.64 405.79" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-3" d="M268.76 135.61c0,0 -22.17,11.9 -50.23,28.92 -21.12,-5.52 -82.36,-27.74 -81.95,-100.04l-0.14 -0.02c3.32,-12.49 5.48,-21.39 6.11,-24.05 10.61,-20.2 38.05,-50.12 105.57,-37.36 98.73,18.65 57.69,95.74 53.71,98.23 -3.98,2.49 -21.39,6.71 -72.86,-30.59 0,0 -18.15,-14.17 -21.88,12.68 -3.73,26.86 48.99,48.99 61.68,52.23zm-6.57 270.17c-0.06,-0.43 -20.14,-148.39 -56.4,-233.41 -9.42,5.88 -19.19,12.19 -28.79,18.69 0,0 -17.41,-10.44 -27.6,-29.59 -10.2,-19.15 -5.22,-21.76 -13.43,-22.26 -8.21,-0.5 -5.1,34.69 19.52,64.78 0,0 -13.7,11.34 -26.34,23.33 -5.68,-9.69 -18.35,-34.11 -23.43,-66.68l-0.05 -0.01c0.31,-0.8 0.62,-1.59 0.93,-2.38 10.57,-26.8 19.85,-57.53 26.36,-81.01 6.01,61.39 57.45,83.42 80.65,90.27 37.09,86.22 59.66,236.37 59.72,236.8l-11.15 1.45zm-136.16 -175.46c-7.88,7.66 -14.84,15.23 -17.05,19.93 0,0 -7.21,-23.75 -14.42,-18.65 -7.21,5.1 2.11,32.08 2.11,36.8 0,0 -17.66,31.83 -20.89,34.57 -0.83,0.7 -1.66,1.24 -2.49,1.6 -0.23,-13.47 2.61,-34.23 7.4,-57.21 5.42,-26.02 13.33,-54.79 22.1,-79.02 5.96,30.61 18.04,53.25 23.24,61.99zm-56.93 74.37c-0.87,-0.37 -1.72,-1.02 -2.52,-1.97 -2.74,-3.23 -15.17,-25.61 -15.17,-25.61 0,0 6.22,-19.03 15.17,-32.95 8.95,-13.93 -5.84,-15.67 -10.82,-7.21 -4.97,8.46 -12.56,24.74 -12.56,24.74 0,0 -6.31,-12.32 -13.32,-27.52 29.11,-16 53.59,-43.62 66.24,-59.59 -7.75,22.68 -14.67,48.42 -19.56,71.93 -4.83,23.18 -7.69,44.25 -7.46,58.19zm-40.98 -74.37c-7.17,-15.81 -14.58,-33.78 -16.38,-44.11 0,0 40.04,-13.68 46.01,-27.11 5.97,-13.43 -12.68,-19.4 -51.23,4.48 0,0 -7.71,-17.19 -6.37,-43.78 66.5,2.13 113.04,-29.91 128.31,-42.15 -6.46,23.16 -15.53,53 -25.8,79.07 -0.57,1.44 -1.13,2.91 -1.7,4.39 -5.54,7.86 -35.3,48.46 -72.84,69.21zm-27.68 -114.74c0.71,-8.36 2.33,-17.55 5.34,-27.35 0,0 47.75,5.84 50.36,-10.57 2.61,-16.41 -41.28,-5.84 -41.28,-5.84 0,0 25.99,-35.56 60.3,-33.82 28.82,1.46 52.37,13.88 59.18,17.82 -1.11,4.27 -2.41,9.2 -3.89,14.62 -5.75,5.22 -54.72,47.49 -130.01,45.14z"></path></g></svg>
</div>
<div class="icon-4">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 359.65 724.72" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-4" d="M251.9 132.52c5.01,7.69 14.83,26.38 10.9,50 12.23,19.64 25.84,44.23 37.91,76.21 15.43,40.91 28.34,93.9 32.59,164.05 8.43,139.15 26.3,300.52 26.36,300.99l-8.9 0.95c-0.05,-0.47 -17.95,-162.05 -26.39,-301.41 -4.19,-69.11 -16.87,-121.23 -32.03,-161.42 -10.46,-27.74 -22.12,-49.81 -32.97,-67.87 -11.69,25.15 -46.54,32.88 -60.3,31.22 0,0 7.39,-21.36 26.38,-35.61 18.99,-14.24 -34.02,-32.18 -48.79,33.5 0,0 -17.36,-0.38 -44.69,-16.34 11.21,-15.23 54.9,-71.68 91.8,-79.27 13.37,2.8 23.04,4.3 28.14,5zm-123.8 71.95c-11.63,-7.19 -24.9,-17.14 -39.29,-30.93 0,0 33.76,-24 51.43,-32.18 3.94,-1.82 6.23,-3.74 7.22,-5.53 0.4,-0.74 0.59,-1.45 0.57,-2.14 -0.14,-5.14 -11.54,-8.37 -24.93,-3.67 -19.52,6.86 -41.67,17.93 -50.64,27.17 0,0 -14.95,-14.16 -27.28,-30.46 13.73,-5.9 46.68,-16.9 105.36,-19.32 1.37,0.46 2.74,0.91 4.09,1.36 23.42,7.71 43.79,13.08 60.01,16.77 -36.68,13.59 -76.29,64.98 -86.55,78.94zm-85.63 -81.43c-0.55,-0.76 -1.08,-1.53 -1.61,-2.3 -3.4,-4.95 -6.39,-9.96 -8.49,-14.72 0,0 8.59,-1.25 17.61,-3.44 10.4,-2.52 21.36,-6.28 20.37,-10.8 -0.81,-3.7 -4.42,-6.8 -10.79,-8.26 -8.15,-1.86 -20.83,-1.06 -38,4.57 0,0 -20.04,-38.77 -21.36,-44.84 -0.46,-2.1 -0.09,-3.88 0.82,-5.27 21.98,13.27 43.46,24.73 64.03,34.61 26.53,12.75 51.57,22.88 74.23,30.91 -53.49,3.36 -83.97,13.91 -96.81,19.53zm-37.55 -87.92c1.59,-0.53 3.43,-0.65 5.29,-0.31 5.8,1.06 22.42,11.6 51.17,8.44 0,0 5.79,9.17 11.47,13.81 1.59,1.3 3.18,2.25 4.62,2.54 5.68,1.14 7.25,-7.71 1.67,-15.07 -0.9,-1.18 -1.98,-2.33 -3.26,-3.39 0,0 2.1,-0.44 5.61,-1.29 3.8,-0.92 9.25,-2.33 15.46,-4.19 14.66,33.07 29.11,52.04 37.62,61.42 -20.84,-7.6 -43.57,-16.96 -67.53,-28.47 -19.97,-9.59 -40.81,-20.68 -62.13,-33.48zm96.34 -0.79c8.37,-2.65 17.67,-6.03 26.06,-10.07 0,0 7.91,43.25 34.29,54.07 0,0 0.41,0.11 1.05,0.18 3.11,0.38 11.59,0.1 4.32,-16.31l-0.1 -0.23c-8.97,-20.04 -20.57,-40.88 -21.36,-45.89 0,0 15.49,-6.72 36.74,-11.5l1.33 -0.3c2.14,70.96 19.13,103.97 27.19,115.76 -15.3,-3.61 -33.91,-8.65 -55,-15.61 -1.04,-0.34 -2.1,-0.69 -3.15,-1.05l0.05 -0.46 -6.39 -1.7 -1.85 -0.64c-3.65,-3.1 -23.05,-20.99 -43.18,-66.26zm86.77 -30.97c8.74,-1.72 18.24,-3.02 27.9,-3.37 0,0 -7.65,53.01 14.24,63.3 0,0 17.41,7.91 6.33,-60.93 0,0 48,6.33 46.95,59.34 -0.91,45.76 -25.8,62.44 -32.59,66.14 -5.12,-0.73 -13.59,-2.1 -24.84,-4.43l-0.01 -0.77 -7.74 -0.89 -0.69 -0.15c-4.02,-4.5 -27.19,-33.99 -29.55,-118.24z"></path></g></svg>
</div>
<div class="icon-5">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 513.57 1042.57" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-5" d="M207.74 252.52c0,0 -3.36,127.53 94.31,130.89 0,0 36.92,0.67 66.79,-32.89 0,0 -39.94,-10.4 -50.01,-47.99 -10.07,-37.59 63.1,-27.52 82.23,3.36 0,0 17.47,-34.44 35.17,-77.24 -60.5,-36.51 -169.57,-35.65 -182.77,-35.4 -16.15,16.52 -28.62,31.28 -37.69,42.91l-0 -0c-3.79,4.86 -6.98,9.18 -9.61,12.86l0.02 -0.03c-0.48,0.66 -0.93,1.31 -1.37,1.93l-0.05 0.08 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.7 1 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07 -0.05 0.07c1.63,-0.35 3.25,-0.73 4.87,-1.16zm202.05 -202.04c0,0 -10.74,-24.5 15.1,-37.92 25.84,-13.42 40.95,2.68 38.93,7.72 -2.01,5.03 -36.92,38.6 -54.03,30.21zm41.95 28.86c0,0 3.69,-24.84 23.16,-20.14 19.47,4.7 -2.35,24.16 -6.71,25.51 -4.36,1.34 -17.79,3.36 -16.45,-5.37zm-13.33 143.98c6.34,-15.57 12.61,-32.08 18.03,-48.32 0,0 -14.77,-5.71 -43.63,-9.06 -28.86,-3.36 -48.67,-8.06 -47.99,-20.47 0.67,-12.42 19.47,-12.42 31.21,-12.08 11.75,0.34 44.3,9.4 65.45,21.48 0,0 6.06,-15.02 14,-34.26 -13.59,-6.7 -55.53,-24.2 -111.04,-17.16 -44.54,28.56 -79.28,58.2 -105.29,84.07 26.84,-0.04 122.78,2.26 179.27,35.82zm39.24 -107.98c11.26,-27.2 25.32,-60.47 31.48,-72.24 2.59,-4.94 4.04,-8.91 4.44,-12.19l-0.07 0.03c-7.86,2.78 -15.55,5.64 -23.08,8.58l-0.06 0.03c-43.75,17.09 -81.99,36.73 -115.12,57.12 50.7,-3.62 88.86,12.06 102.42,18.68zm-266.36 117.31l-0 0 0.19 -0.24c1.61,-2.06 3.33,-4.22 5.15,-6.47l0.6 -0.74c1.8,-2.22 3.71,-4.51 5.72,-6.89l0.53 -0.62c0.65,-0.77 1.31,-1.54 1.99,-2.33l0.45 -0.53c0.8,-0.93 1.62,-1.87 2.44,-2.82l-0.47 -0.16c26.43,-78.83 20.84,-169.24 18.14,-197.94 -29.06,6.17 -63.45,14.58 -92.65,24.81 0,0 -10.74,27.18 -8.73,47.66 2.01,20.47 10.4,39.6 17.79,47.99 7.38,8.39 -4.03,19.8 -14.1,11.08 -10.07,-8.73 -33.9,-27.86 -31.88,-85.58 0,0 -51.69,29.87 -54.37,96.99 -2.41,60.36 60.31,104.42 124.22,99.27 -29.57,40.64 -52.99,92.96 -71.11,145.44 -34.37,99.52 -49.74,199.84 -51.89,221.41 -1.69,16.94 -9.22,61.56 -18.01,108.82 -8.48,45.59 -18.12,93.5 -24.81,121.32 -13.86,57.6 -20.46,188.53 -20.47,188.9l11.37 0.54c0.02,-0.37 6.56,-130.3 20.16,-186.81 6.77,-28.15 16.45,-76.26 24.95,-121.9 8.84,-47.51 16.42,-92.5 18.15,-109.76 2.13,-21.29 17.32,-120.37 51.32,-218.82 17.84,-51.67 40.86,-103.1 69.86,-142.81 3.19,-7.16 11.12,-24.22 15.49,-29.83zm25.46 -30.01c1.38,-1.51 2.8,-3.04 4.25,-4.58l0.29 -0.31c0.84,-0.89 1.69,-1.8 2.55,-2.7l0.67 -0.7c2.7,-2.84 5.52,-5.73 8.45,-8.67l0.65 -0.65c0.97,-0.98 1.96,-1.96 2.96,-2.95l0.38 -0.38c3.13,-3.09 6.39,-6.23 9.77,-9.41l0.58 -0.54c4.62,-4.35 9.48,-8.77 14.57,-13.25l0.68 -0.6c3.78,-3.32 7.7,-6.68 11.74,-10.06l0.29 -0.24c5.54,-4.63 11.33,-9.29 17.36,-13.99l0.57 -0.44c6.07,-4.71 12.39,-9.44 18.97,-14.18l0.24 -0.17c4.93,-3.55 10.01,-7.1 15.23,-10.64l0.24 -0.16c4.13,-2.8 8.36,-5.6 12.68,-8.38 1.65,-4.78 23.49,-68.56 28.59,-99.33 -14.9,-0.31 -31.83,-0.37 -51.18,-0.15 0,0 -12.75,35.24 -9.73,54.03 3.02,18.79 9.73,34.9 -0.34,37.25 -10.07,2.35 -31.21,-20.47 -17.79,-89.27 0,0 -24.82,3.76 -57.81,10.6 2.58,27.06 8.08,112.25 -14.87,189.88zm130.78 -107.89l1.53 -0.95 0.35 -0.22c7.57,-4.71 15.41,-9.39 23.53,-14l0.16 -0.09c6.06,-3.44 12.27,-6.86 18.63,-10.22l0.29 -0.16c8.49,-4.49 17.26,-8.91 26.3,-13.23l0.6 -0.29c6.76,-3.22 13.68,-6.39 20.75,-9.5l0.12 -0.05c2.34,-1.03 4.7,-2.05 7.07,-3.06l0.5 -0.21c7,-2.98 14.15,-5.89 21.45,-8.74l1.17 -0.46c2.38,-0.92 4.78,-1.84 7.19,-2.75l0.09 -0.03c5.13,-1.93 10.34,-3.82 15.61,-5.68l0.07 -0.03c-2.61,-6.39 -11.96,-9.39 -26.62,-13.87 -18.07,-5.52 -44.02,-9.54 -92.15,-10.8 -4.31,26.52 -20.49,76.07 -26.62,94.33z"></path></g></svg>
</div>
</button>
</div>
</div>
</section>
<!-- Pecuária -->
<section class="format-sct">
<article>
<h2>Pecuária</h2>
<p>Pecuária é o ramo da agricultura que se dedica à criação e manejo de animais para produção de alimentos, fibras, trabalho e outros produtos úteis. Esta atividade é uma das mais antigas práticas humanas e desempenha um papel crucial na economia e na segurança alimentar global.</p>
<br>
<p>Existem diferentes tipos de pecuária, incluindo a criação de bovinos, suínos, aves, ovinos, caprinos e outros animais. A produção pecuária pode ser extensiva, onde os animais são criados em grandes áreas de pastagem, ou intensiva, caracterizada por sistemas de confinamento onde os animais são mantidos em espaços controlados e alimentados com ração.</p>
<br>
<p>A pecuária contribui significativamente para a produção de carne, leite, ovos, lã, couro e outros subprodutos. Além disso, em muitas culturas, os animais de criação também são usados para tração, transporte e outras tarefas.</p>
<br>
<p>No entanto, a pecuária enfrenta desafios como a sustentabilidade ambiental, já que pode contribuir para a emissão de gases de efeito estufa, desmatamento e degradação do solo. Por isso, práticas como o manejo sustentável, o bem-estar animal, e a inovação tecnológica na alimentação e na gestão de resíduos estão sendo cada vez mais adotadas para mitigar esses impactos.</p>
</article>
</section>
<!-- Produtos -->
<section class="format-sct" id="produtos">
<article>
<h2>Produtos Agrícolas</h2>
<p>Produtos agrícolas referem-se a todos os bens derivados da agricultura, incluindo tanto a produção vegetal quanto a animal. Esses produtos são fundamentais para a alimentação humana e animal, além de fornecer matérias-primas para diversas indústrias.</p>
<br>
<p>Os produtos agrícolas podem ser classificados em várias categorias:</p>
<br>
<p><b>Grãos e Cereais:</b> Incluem arroz, trigo, milho, cevada, aveia e outros. São a base da dieta humana e animal em muitas partes do mundo.</p>
<br>
<p><b>Frutas e Vegetais:</b> Produtos como maçãs, bananas, tomates, batatas e muitos outros que fornecem vitaminas, minerais e fibras essenciais para a saúde.</p>
<br>
<p><b>Legumes e Leguminosas:</b> Feijão, lentilha, grão-de-bico e ervilha são ricos em proteínas e são importantes para dietas balanceadas.</p>
<br>
<p><b>Oleaginosas e Sementes:</b> Soja, girassol, amendoim e outras culturas usadas para a produção de óleos comestíveis e produtos industrializados.</p>
<br>
<p><b>Produtos de Origem Animal:</b> Carne, leite, ovos, lã, couro e outros derivados da criação de animais.</p>
<br>
<p>A qualidade e a segurança dos produtos agrícolas são de extrema importância. As práticas agrícolas modernas incluem o uso de tecnologias avançadas para melhorar a produtividade e a sustentabilidade, como a biotecnologia, a agricultura de precisão e métodos de cultivo orgânico.</p>
<br>
<p>A cadeia de suprimentos de produtos agrícolas envolve desde a produção na fazenda até a transformação, armazenamento, transporte e distribuição, garantindo que os consumidores tenham acesso a alimentos frescos e nutritivos.</p>
</article>
</section>
</main>
<!-- Rodapé -->
<footer class="dp-flex">
<div class="dp-flex" id="contactCard">
<img src="assets/img/david.png" alt="Arthur Feltz">
<div>
<h3 class="sz-30px">Arthur Feltz</h3>
<p>Estudante do 3° ano de Ciências da Natureza</p>
<hr>
<div style="display: flex; width: 100%;">
<a href="https://instagram.com/arthur_feltz" target="_blank" title="Instagram"><ion-icon name="logo-instagram"></ion-icon></a>
<a href="mailto:arthurrangel563@gmail.com" target="_blank" title="E-mail"><ion-icon name="mail-outline"></ion-icon></a>
<a href="tel:+5541997318867" target="_blank" title="Telefone"><ion-icon name="phone-portrait-outline"></ion-icon></a>
<a href="https://wa.me/+5541997318867" target="_blank" title="Whatsapp"><ion-icon name="logo-whatsapp"></ion-icon></a>
</div>
</div>
</div>
<img src="assets/img/faep.png" alt="Sistema FAEP/SENAR-PR" style="height: 100px; width: auto; margin-left: auto;">
</footer>
<!-- Barra lateral -->
<aside id="side-bar" class="side-bar">
<div class="box-item"><button><ion-icon name="home-outline"></ion-icon></button><div>Início</button></div></div>
<div class="box-item"><button><ion-icon name="school-outline"></ion-icon></button><div>Educação</div></div>
<div class="box-item"><button><ion-icon name="leaf-outline"></ion-icon></button><div>Agricultura</div></div>
<div class="box-item"><button><ion-icon name="bar-chart-outline"></ion-icon></button><div>Economia</div></div>
<div class="box-item"><button><ion-icon name="people-outline"></ion-icon></button><div>Projetos</div></div>
<div class="box-item"><button><ion-icon name="game-controller-outline"></ion-icon></button><div>Jogos</div></div>
<div class="box-item"><button><ion-icon name="restaurant-outline"></ion-icon></button><div>Produtos</div></div>
</aside>
<!-- Botão de contraste -->
<button class="contrast-button" onclick="contrastColors()"><div><ion-icon id="contrastIcon" name="contrast-outline"></ion-icon></div></button>
<!-- Plugin Vlibras -->
<div vw class="enabled">
<div vw-access-button class="active"></div>
<div vw-plugin-wrapper>
<div class="vw-plugin-top-wrapper"></div>
</div>
</div>
<script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
<script>
new window.VLibras.Widget('https://vlibras.gov.br/app');
</script>
</body>
</html>