-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
565 lines (529 loc) · 30.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Go Green</title>
<link rel="stylesheet" href="css/style.css">
<!-- Google font -->
<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@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<!-- icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- AOS CSS -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
test
</head>
<body style="color: white;">
<nav>
<a href="#" class="logo"><img src="img/logo.png" alt="logo"></a>
<ul>
<li><a href="#beranda" style="text-align: center;">Beranda</a></li>
<li><a href="#masalah" style="text-align: center;">Masalah</a></li>
<li><a href="#hutan" style="text-align: center;">Keadaan hutan</a></li>
<li><a href="#jenisHutan" style="text-align: center;">Jenis Hutan</a></li>
<li><a href="#solusi" style="text-align: center;">Solusi AI</a></li>
</ul>
<div class="menu-toggle">
<input type="checkbox">
<span></span>
<span></span>
<span></span>
</div>
</nav>
<section id="beranda" class="banner" data-aos="fade-up">
<div class="judul">
<h1>Manfaatkan Teknologi untuk <span class="typing-text"></span></h1>
</div>
</section>
<section class="awan"></section>
<!-- Halaman Kedua -->
<section id="masalah">
<h1 data-aos="fade-in">Masalah Yang Sering Terjadi Pada Lingkungan Alam</h1>
<div class="about-container">
<div class="image-gallery">
<div class="image-box" data-aos="fade-up">
<img src="img/masalah1.png" alt="Deforestasi">
</div>
<div class="image-box" data-aos="fade-right">
<img src="img/masalah2.png" alt="Pemburuan Hewan">
</div>
<div class="image-box" data-aos="fade-up">
<img src="img/masalah3.png" alt="Deforestasi">
</div>
<div class="image-box" data-aos="fade-right">
<img src="img/masalah4.png" alt="Deforestasi">
</div>
</div>
<div class="about-info">
<ul>
<li data-aos="fade-up">
<h2><i class="fas fa-tree"></i> Dampak Deforestasi: Menghilangnya Habitat dan Memperburuk
Perubahan Iklim</h2>
<p>
Penebangan hutan secara masif tidak hanya mengancam keanekaragaman hayati, tetapi juga
mempercepat pemanasan global dengan melepaskan karbon dioksida yang tersimpan dalam
pepohonan. Perlu adanya teknologi AI untuk memantau dan mencegah aktivitas penebangan liar.
</p>
</li>
<br>
<li data-aos="fade-right">
<h2><i class="fas fa-paw"></i> Pemburuan Liar: Ancaman Terhadap Spesies yang Dilindungi</h2>
<p>
Pemburuan liar terus mengancam keberlangsungan spesies-spesies yang dilindungi seperti
gajah, badak, dan harimau. Teknologi AI dapat membantu memantau pergerakan hewan dan
mencegah aktivitas perburuan sebelum terjadi.
</p>
</li>
<br>
<li data-aos="fade-up">
<h2><i class="fas fa-leaf"></i> Eksploitasi Hutan Secara Masif: Kehilangan Ekosistem Penting
Dunia</h2>
<p>
Eksploitasi sumber daya alam yang berlebihan menyebabkan kehancuran ekosistem hutan yang
penting bagi keseimbangan iklim dan kehidupan. AI dapat berperan dalam memberikan peringatan
dini dan mengidentifikasi area-area rawan eksploitasi.
</p>
</li>
<br>
<li data-aos="fade-right">
<h2><i class="fas fa-fire"></i> Kebakaran Hutan: Bencana bagi Keanekaragaman Hayati dan
Kesehatan Manusia</h2>
<p>
hutan yang meluas tidak hanya merusak ekosistem, tetapi juga mencemari udara dan
mengancam kesehatan manusia. AI pendeteksi kebakaran dapat memberikan sinyal peringatan
dini dan meminimalisir dampak bencana.
</p>
</li>
</ul>
</div>
</div>
</section>
<!-- Halaman Ketiga -->
<section id="hutan" class="peta-deforestasi">
<h1>Ini Adalah Peta Keadaan Hutan dan Alam di Indonesia dan Dunia</h1>
<div class="content-peta" style="width: 100%; height: 80vh;">
<iframe width="100%" height="100%" frameborder="0" src="https://www.globalforestwatch.org/embed/map/?map=eyJjZW50ZXIiOnsibGF0IjotMy41NDM2NTAyNzk3MTI3MjUsImxuZyI6MTE1LjYxNTk2Mjg3NDUxMjE4fSwiem9vbSI6NC4wODQ5OTgzOTgwMjI0MzIsImJhc2VtYXAiOnsidmFsdWUiOiJwbGFuZXQiLCJuYW1lIjoicGxhbmV0X21lZHJlc19ub3JtYWxpemVkX2FuYWx5dGljXzIwMjEtMDVfbW9zYWljIiwiY29sb3IiOiIifSwiZGF0YXNldHMiOlt7ImRhdGFzZXQiOiJnbGFkLXMyLWRlZm9yZXN0YXRpb24tYWxlcnRzIiwib3BhY2l0eSI6MSwidmlzaWJpbGl0eSI6dHJ1ZSwibGF5ZXJzIjpbImRlZm9yZXN0YXRpb24tYWxlcnRzLWdsYWQtczIiXX0seyJkYXRhc2V0IjoiZ2xhZC1kZWZvcmVzdGF0aW9uLWFsZXJ0cy12MiIsIm9wYWNpdHkiOjEsInZpc2liaWxpdHkiOnRydWUsImxheWVycyI6WyJkZWZvcmVzdGF0aW9uLWFsZXJ0cy1nbGFkIl19LHsiZGF0YXNldCI6InJhZGQtZGVmb3Jlc3RhdGlvbi1hbGVydHMiLCJvcGFjaXR5IjoxLCJ2aXNpYmlsaXR5Ijp0cnVlLCJsYXllcnMiOlsiZGVmb3Jlc3RhdGlvbi1hbGVydHMtcmFkZCJdfSx7ImRhdGFzZXQiOiJmaXJlLWFsZXJ0cy12aWlycyIsIm9wYWNpdHkiOjEsInZpc2liaWxpdHkiOnRydWUsImxheWVycyI6WyJmaXJlLWFsZXJ0cy12aWlycyJdfSx7ImRhdGFzZXQiOiJwb2xpdGljYWwtYm91bmRhcmllcyIsImxheWVycyI6WyJkaXNwdXRlZC1wb2xpdGljYWwtYm91bmRhcmllcyIsInBvbGl0aWNhbC1ib3VuZGFyaWVzIl0sIm9wYWNpdHkiOjEsInZpc2liaWxpdHkiOnRydWV9XX0%3D&mapPrompts=eyJvcGVuIjp0cnVlLCJzdGVwc0tleSI6InN1YnNjcmliZVRvQXJlYSJ9"></iframe>
</div>
</section>
<!-- halaman keempat -->
<section id="jenisHutan" class="container-jenis-hutan" data-aos="fade-up">
<h1 style="text-align: center; padding-top: 40px; font-size: 50px;">INI ADALAH JENIS-JENIS HUTAN di DUNIA</h1>
<div class="hutan1">
<img src="img/hutan-tropis.png" alt="Hutan Hujan Tropis">
<div class="deskripsi">
<h1>Hutan Hujan Tropis: Ekosistem Penting yang Kaya Akan Keanekaragaman Hayati</h1>
<!-- Accordion -->
<div class="accordion" id="accordionHutanTropis">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Deskripsi
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionHutanTropis">
<div class="accordion-body">
Hutan hujan tropis adalah ekosistem di daerah tropis yang dicirikan oleh curah hujan
tinggi dan suhu hangat sepanjang tahun. Menjadi rumah bagi sekitar 50-75% spesies dunia,
hutan ini memiliki lapisan-lapisan yang mendukung kehidupan berbagai tumbuhan dan hewan.
Selain sebagai penyerap karbon yang efektif, hutan hujan tropis juga menyediakan sumber
daya alam penting bagi manusia, seperti kayu dan obat-obatan. Namun, ekosistem ini
menghadapi ancaman dari penebangan liar, alih fungsi lahan, dan urbanisasi. Hutan hujan
tropis terbesar di dunia adalah Amazon di Amerika Selatan, disusul oleh hutan di Kongo
dan Asia Tenggara. Melestarikan hutan ini sangat penting untuk menjaga keseimbangan
iklim dan keanekaragaman hayati global.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hutan1">
<img src="img/hutan-bakau.png" alt="Hutan Bakau">
<div class="deskripsi">
<h1>Hutan Bakau: Perisai Alam di Pesisir Tropis</h1>
<!-- Accordion -->
<div class="accordion" id="accordionHutanBakau">
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
Deskripsi
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo"
data-bs-parent="#accordionHutanBakau">
<div class="accordion-body">
Hutan bakau adalah ekosistem yang terletak di daerah pesisir tropis dan subtropis, di
mana pohon-pohon bakau tumbuh di area yang tergenang air tawar dan air asin. Hutan ini
memiliki ciri khas akar pohon yang menjulang di atas permukaan air, memberikan dukungan
dan perlindungan bagi flora dan fauna yang hidup di sekitarnya. Hutan bakau memainkan
peran penting dalam menjaga kualitas air, mencegah erosi pesisir, dan menjadi habitat
bagi berbagai spesies ikan dan burung. Hutan bakau juga berfungsi sebagai penyerap
karbon
yang efektif, membantu mengurangi dampak perubahan iklim. Sayangnya, hutan bakau
menghadapi ancaman dari konversi lahan, pencemaran, dan pembangunan yang tidak
berkelanjutan.
Melindungi dan merehabilitasi hutan bakau sangat penting untuk keseimbangan ekosistem
pesisir dan keberlangsungan hidup masyarakat yang bergantung padanya.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hutan1" data-aos="fade-up">
<img src="img/hutan-lumut.png" alt="hutan lumut">
<div class="deskripsi">
<h1>Hutan Lumut: Ekosistem Unik yang Kaya Akan Keanekaragaman Hayati</h1>
<!-- Accordion -->
<div class="accordion" id="accordionHutanLumut">
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
Deskripsi
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingThree"
data-bs-parent="#accordionHutanLumut">
<div class="accordion-body">
Hutan lumut adalah ekosistem yang ditemukan di daerah lembap, terutama di pegunungan
atau wilayah dengan iklim dingin dan basah, ditandai dengan tumbuhan lumut dan tanaman
kecil yang tumbuh subur. Suasana tenang dan misterius, sering dikelilingi kabut,
menciptakan lingkungan ideal bagi beragam spesies flora dan fauna, termasuk serangga,
amfibi, dan mamalia kecil. Hutan ini berfungsi sebagai penyerap air yang sangat baik,
membantu mengatur kelembapan tanah dan menjaga kualitas air, serta berkontribusi pada
mitigasi perubahan iklim dengan mengikat karbon dioksida. Namun, hutan lumut sangat
rentan terhadap perubahan iklim dan polusi, serta terancam oleh aktivitas manusia
seperti penebangan dan pencemaran. Ditemukan di berbagai belahan dunia, dari hutan hujan
tropis hingga hutan boreal, hutan lumut memiliki nilai ekologis, budaya, dan estetika
yang penting, sehingga perlindungan terhadap ekosistem ini sangat diperlukan untuk
menjaga keseimbangan lingkungan.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hutan1" data-aos="fade-up">
<img src="img/hutan-taiga.png" alt="hutan taiga">
<div class="deskripsi">
<h1>Hutan Taiga: Ekosistem Dingin yang Kaya Akan Flora dan Fauna</h1>
<!-- Accordion -->
<div class="accordion" id="accordionHutanTaiga">
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
Deskripsi
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse show" aria-labelledby="headingFour"
data-bs-parent="#accordionHutanTaiga">
<div class="accordion-body">
Hutan taiga, atau hutan konifer, adalah ekosistem yang terletak di belahan bumi utara
dengan iklim dingin dan musim dingin yang panjang, didominasi oleh pohon konifer seperti
cemara, pinus, dan juniper. Hutan ini membentang di negara-negara seperti Kanada, Rusia,
Skandinavia, dan Alaska, dan meskipun tidak seberagam hutan hujan tropis, ia memiliki
keanekaragaman hayati yang unik, termasuk mamalia besar seperti beruang, serigala, dan
moose, serta berbagai burung dan serangga. Pohon-pohon konifer di hutan taiga
beradaptasi dengan iklim dingin melalui bentuk konis yang membantu salju meluncur,
mencegah kerusakan. Hutan ini berperan penting dalam penyimpanan karbon dioksida,
bertindak sebagai penyangga terhadap perubahan iklim global, namun juga terancam oleh
deforestasi akibat penebangan untuk kayu, pembukaan lahan pertanian, dan eksploitasi
sumber daya alam. Selain itu, hutan taiga mempengaruhi pola iklim global, menjaga
keseimbangan ekosistem dan berkontribusi pada sirkulasi atmosfer. Oleh karena itu,
melindungi hutan taiga sangat penting untuk keberlanjutan lingkungan dan ekosistem di
Bumi.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hutan1" data-aos="fade-up">
<img src="img/hutan-gugur.png" alt="hutan gugur">
<div class="deskripsi">
<h1>Hutan Gugur: Ekosistem Beragam yang Menyesuaikan Diri dengan Musim</h1>
<!-- Accordion -->
<div class="accordion" id="accordionHutanGugur">
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
Deskripsi
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse show" aria-labelledby="headingFive"
data-bs-parent="#accordionHutanGugur">
<div class="accordion-body">
Hutan gugur adalah ekosistem yang terletak di daerah beriklim sedang, ditandai dengan
pohon-pohon yang menggugurkan daunnya pada musim dingin sebagai adaptasi terhadap
perubahan suhu dan kelembapan. Dapat ditemukan di Amerika Utara, Eropa, dan Asia, hutan
ini terdiri dari spesies pohon seperti oak, maple, dan beech, serta mendukung
keanekaragaman hayati yang kaya, termasuk mamalia, burung, dan serangga. Hutan gugur
mengalami perubahan musiman yang jelas, dengan daun yang berguguran pada musim gugur dan
kembali tumbuh pada musim semi, menciptakan pemandangan yang indah. Selain perannya
dalam menjaga kualitas tanah, mengatur siklus air, dan menyimpan karbon dioksida, hutan
ini juga menghadapi ancaman dari penebangan, urbanisasi, dan perubahan iklim, yang dapat
menyebabkan hilangnya habitat dan spesies. Selain nilai ekologisnya, hutan gugur
memiliki nilai budaya dan ekonomi yang signifikan, menyediakan kayu, obat-obatan, dan
ruang rekreasi bagi manusia. Oleh karena itu, melindungi dan melestarikan hutan gugur
sangat penting untuk keberlanjutan ekosistem global.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Halaman kelima -->
<h1 id="solusi" class="judul-card-container" style="text-align: center; padding-top: 40px; font-size: 50px;"
="fade-down">
INI ADALAH PRODUK YANG BISA KAMI TAWARKAN
</h1>
<section class="card-section" style="display: flex; justify-content: space-around; padding: 20px; flex-wrap: wrap;">
<!-- Card 1 -->
<div class="card text-bg-success mb-3" >
<div id="carouselAi1" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/ai1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/ai1(2).jpeg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/ai1(3).png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselAi1" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselAi1" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="card-body">
<h5 class="card-title">AI Pengawas dari Oknum Deforestasi</h5>
<p class="card-text">AI ini bisa memberitahu jika ada penebangan hutan yang tanpa izin dari pihak administrator.</p>
<div class="accordion" id="accordionAi1">
<div class="accordion-item">
<h2 class="accordion-header" id="headingAi1">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseAi1" aria-expanded="true" aria-controls="collapseAi1">
Penjelasan Lebih Lanjut
</button>
</h2>
<div id="collapseAi1" class="accordion-collapse collapse show" aria-labelledby="headingAi1"
data-bs-parent="#accordionAi1">
<div class="accordion-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat numquam exercitationem
nesciunt sunt laudantium quis aliquam ipsa a incidunt, voluptates, cum aspernatur
reprehenderit.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="card text-bg-success mb-3" >
<div id="carouselAi2" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/ai2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/ai2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/ai2.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselAi2" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselAi2" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="card-body">
<h5 class="card-title">AI Menyerupai Hewan</h5>
<p class="card-text">Berfungsi untuk melindungi hewan dari buruan pemburu hewan liar.</p>
<div class="accordion" id="accordionAi2">
<div class="accordion-item">
<h2 class="accordion-header" id="headingAi2">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseAi2" aria-expanded="true" aria-controls="collapseAi2">
Penjelasan Lebih Lanjut
</button>
</h2>
<div id="collapseAi2" class="accordion-collapse collapse show" aria-labelledby="headingAi2"
data-bs-parent="#accordionAi2">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vitae quam, dicta
incidunt blanditiis dolores beatae magnam, molestias laboriosam alias quibusdam ratione
voluptas.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="card text-bg-success mb-3" >
<div id="carouselAi3" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/ai3.png" class="d-block w-100" alt="..jj.">
</div>
<div class="carousel-item">
<img src="img/ai3.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/ai3.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselAi3" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselAi3" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="card-body">
<h5 class="card-title">AI Penanda Lokasi Kebakaran Hutan</h5>
<p class="card-text">AI ini dapat membantu pemadam kebakaran dan pihak administrator untuk mengetahui
lokasi dimana pembakaran hutan terjadi secara realtime.</p>
<div class="accordion" id="accordionAi3">
<div class="accordion-item">
<h2 class="accordion-header" id="headingAi3">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseAi3" aria-expanded="true" aria-controls="collapseAi3">
Penjelasan Lebih Lanjut
</button>
</h2>
<div id="collapseAi3" class="accordion-collapse collapse show" aria-labelledby="headingAi3"
data-bs-parent="#accordionAi3">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, animi accusamus repellat
ab eligendi perspiciatis similique.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center" style="height: 50vh;">
<!-- Grid container -->
<div class="container p-4" style="height: 87%; max-width: fit-content; margin-left: auto; margin-right: auto;">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #3b5998"
href="#"
role="button"
><i class="fab fa-facebook-f"></i
></a>
<!-- Twitter -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #55acee"
href="#"
role="button"
><i class="fab fa-twitter"></i
></a>
<!-- Google -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #dd4b39"
href="#"
role="button"
><i class="fab fa-google"></i
></a>
<!-- Instagram -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #ac2bac"
href="#"
role="button"
><i class="fab fa-instagram"></i
></a>
<!-- Linkedin -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #0082ca"
href="#"
role="button"
><i class="fab fa-linkedin-in"></i
></a>
<!-- Github -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #333333"
href="#"
role="button"
><i class="fab fa-github"></i
></a>
</section>
<!-- Section: Social media -->
<!-- Section: Text -->
<section class="mb-4">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
distinctio earum repellat quaerat voluptatibus placeat nam,
commodi optio pariatur est quia magnam eum harum corrupti dicta,
aliquam sequi voluptate quas.
</p>
</section>
<!-- Section: Text -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div
class="copyright text-center p-3"
style="background-color: rgba(0, 0, 0, 0.2)"
>
© 2024 Copyright:
<a class="text-light" href="#beranda"
>Creative Alchemists</a
>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- typing effect -->
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<!-- js -->
<script src="js/script.js"></script>
<!-- AOS -->
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<!-- AOS -->
<script>
AOS.init();
</script>
</body>
</html>