-
Notifications
You must be signed in to change notification settings - Fork 0
/
explore.html
409 lines (384 loc) · 15.4 KB
/
explore.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/monument-removebg.png" type="image/x-icon" />
<title>Kota Bogor</title>
<link rel="stylesheet" href="css/style.css" />
<!--==================== MAIN JS ====================-->
<script src="js/main.js"></script>
<!-- Icon Scout -->
<link
rel="stylesheet"
href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"
/>
<!-- Font Awesome 5.15.4 -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<header>
<div class="judul">
<a href="index.html"><i class="uil uil-arrow-circle-left"></i></a>
<div class="time">
<p id="time"></p>
<p id="date"></p>
</div>
<h1 id="greet-message"></h1>
<p id="greeting-message"></p>
</div>
<nav class="navbar1">
<ul>
<li>
<a href="#sejarah" class="nav-list"
>Sejarah <i class="uil uil-book-open"></i
></a>
</li>
<li>
<a href="#kuliner" class="nav-list"
>Kuliner <i class="uil uil-restaurant"></i
></a>
</li>
<li>
<a href="#wisata" class="nav-list"
>Wisata <i class="uil uil-map-marker"></i
></a>
</li>
</ul>
</nav>
<nav class="navbar2">
<ul>
<li>
<a href="#sejarah" class="nav-list"
><i class="uil uil-book-open"></i
></a>
</li>
<li>
<a href="#kuliner" class="nav-list"
><i class="uil uil-restaurant"></i
></a>
</li>
<li>
<a href="#wisata" class="nav-list"
><i class="uil uil-map-marker"></i
></a>
</li>
</ul>
</nav>
</header>
<main>
<div id="content">
<article class="card" id="sejarah">
<h2>Sejarah</h2>
<p>
Kota Bogor memiliki sejarah yang panjang dan kaya akan kebudayaan.
Sejak zaman Kerajaan Sunda, daerah ini sudah dikenal sebagai pusat
pemerintahan dan perdagangan yang strategis. Pada masa Kesultanan
Banten, Bogor menjadi pusat pemerintahan dengan dibangunnya Istana
Banten di daerah ini. Pada tahun 1745, Sultan Banten memerintahkan
pembangunan sebuah istana baru di Bogor yang kemudian menjadi Istana
Bogor yang masih berdiri hingga sekarang. Pada masa kolonial
Belanda, Bogor menjadi tempat tinggal resmi Gubernur Jenderal Hindia
Belanda yang dikenal dengan nama Buitenzorg. Selama masa ini, banyak
bangunan dan taman dibangun, seperti Kebun Raya Bogor yang menjadi
tempat penelitian ilmiah dan wisata yang terkenal di dunia.
</p>
<p>
Setelah Indonesia merdeka, Bogor menjadi kota otonom di provinsi
Jawa Barat pada tahun 1950. Dalam perkembangannya, kota ini menjadi
pusat pertanian dan industri manufaktur. Di samping itu, pariwisata
juga menjadi sektor yang berkembang pesat, terutama karena
keberadaan Istana Bogor dan Kebun Raya Bogor. Kebun Raya Bogor masih
menjadi salah satu kebun raya terbesar dan terlengkap di dunia yang
menarik banyak pengunjung setiap tahunnya. Pada tahun 1995, kota
Bogor menjadi salah satu kota satelit yang masuk dalam wilayah
metropolitan Jakarta. Hal ini membawa dampak positif dalam
pembangunan infrastruktur dan fasilitas publik di kota ini. Saat
ini, Bogor menjadi kota modern dengan sektor pariwisata, pendidikan,
dan perdagangan yang semakin berkembang pesat. Meskipun demikian,
kota ini masih mampu mempertahankan budaya dan nilai-nilai sejarah
yang menjadi identitasnya.
</p>
<img class="featured-image" src="img/Bogor.jpeg" alt="sejarah" />
</article>
<article class="card" id="kuliner">
<h2>Kuliner</h2>
<p>
Kota Bogor terkenal dengan kuliner khasnya yang lezat dan beragam.
Salah satu kuliner khas yang terkenal di Bogor adalah
<a
href="https://www.liputan6.com/lifestyle/read/3937745/6-rekomendasi-warung-soto-paling-mantap-di-bogor"
class="link-kuliner"
target="_blank"
>Soto Bogor</a
>, yang terbuat dari daging sapi, kentang, tomat, daun bawang, serta
kuah kaldu yang kaya rempah. Selain itu, ada juga
<a
href="https://travel.tribunnews.com/2019/09/13/7-nasi-goreng-enak-di-bogor-bisa-jadi-pilihan-untuk-makan-malam"
class="link-kuliner"
target="_blank"
>Nasi Goreng</a
>
khas Bogor yang diolah dengan cara yang unik, yaitu dengan
menggunakan bumbu yang terdiri dari kecap manis, cabai, telur, dan
daging ayam atau sapi. Kuliner lain yang tak kalah terkenal adalah
<a
href="https://www.liputan6.com/lifestyle/read/4143415/cungkring-sajian-legendaris-khas-bogor-berbahan-dasar-kaki-sapi"
class="link-kuliner"
target="_blank"
>Cungkring</a
>
yang renyah dan gurih. Seporsi cungkring ini berisi potongan jeroan
sapi seperti cingur, kikil, urat, kuping, daging, dan masih banyak
lagi. Setelah itu diberi lontong dan kripik tempe.
</p>
<p>
Selain itu, kota Bogor juga memiliki kuliner khas lain yang tidak
kalah lezat. Salah satu contohnya adalah
<a
href="https://food.detik.com/info-kuliner/d-6293373/asyik-santai-di-5-restoran-bogor-ngeriung-makan-nasi-liwet"
class="link-kuliner"
target="_blank"
>Nasi Liwet Bogor</a
>, yang terbuat dari nasi yang dimasak dengan santan dan dibumbui
dengan rempah-rempah khas Indonesia, serta disajikan dengan ayam
atau ikan goreng, sayur asam, dan sambal terasi. Kuliner lain yang
juga populer di Bogor adalah
<a
href="https://food.detik.com/info-kuliner/d-5849877/rasanya-ngangenin-ini-5-laksa-di-bogor-berusia-puluhan-tahun"
class="link-kuliner"
target="_blank"
>Laksa Bogor</a
>, yaitu mie kuning yang disajikan dengan kuah santan dan ikan,
serta dilengkapi dengan potongan daun kemangi dan jeruk nipis. Tidak
ketinggalan, ada juga
<a
href="https://havehalalwilltravel.com/jajanan-kuliner-khas-bogor-kaki-lima"
class="link-kuliner"
target="_blank"
>Kuliner Jajanan Pasar Khas Bogor</a
>, seperti klepon, cenil, dan kue rangi yang terbuat dari tepung
ketan dan gula merah yang lezat dan manis. Semua kuliner khas Bogor
ini bisa ditemukan di berbagai tempat makan dan warung makan di kota
Bogor, dan dijamin akan memanjakan lidah Anda.
</p>
<img
class="featured-image"
src="img/bogor-kuliner.jpg"
alt="Kuliner"
/>
</article>
<article class="card" id="wisata">
<h2>Wisata</h2>
<p>
Kota Bogor merupakan destinasi wisata populer di Indonesia, terutama
karena keindahan alamnya dan sejarahnya yang kaya. Berikut adalah
beberapa tempat wisata kota Bogor yang wajib dikunjungi.
</p>
<!-- <section>
<h3>Farm House Lembang</h3>
<img
class="featured-image"
src="img/farm-house.jpg"
alt="farm house"
/>
<p>
Berada di jalur utama Bandung-Lembang, Farm House menjadi objek
wisata yang tidak pernah sepi pengunjung. Selain karena letaknya
strategis, kawasan ini juga menghadirkan nuansa wisata khas Eropa.
Semua itu diterapkan dalam bentuk spot swafoto Instagramable.
</p>
</section>
<section>
<h3>Observatorium Bosscha</h3>
<img class="featured-image" src="img/bosscha.jpg" alt="Wisata" />
<p>
Memiliki beberapa teleskop, antara lain, Refraktor Ganda Zeiss,
Schmidt Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan
Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop
terbesar untuk meneropong bintang. Benda ini diletakkan pada atap
kubah sehingga saat teropong digunakan, atap tersebut harus
dibuka. Observatorium Bosscha boleh dikunjungi oleh siapa pun,
tanpa tiket. Namun, bagi yang ingin menggunakan teleskop Zeiss,
wajib mendaftarkan diri. Untuk instansi atau lembaga pendidikan,
diberikan jadwal hari Selasa sampai Jumat. Sementara itu,
kunjungan individu dibuka setiap hari Sabtu.
</p>
</section> -->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">Kebun Raya Bogor</div>
<img src="img/kebunrayabogor.jpg" class="img-wisata" />
<div class="text">
<a
href="https://kebunraya.id/bogor"
target="_blank"
class="link-readmore"
>Read More <i class="uil uil-notebooks"></i
></a>
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">The Jungle</div>
<img src="img/thejungle.jpg" class="img-wisata" />
<div class="text">
<a
href="https://www.junglebogor.com/"
target="_blank"
class="link-readmore"
>Read More <i class="uil uil-notebooks"></i
></a>
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">Taman Safari Indonesia</div>
<img src="img/tamansafari.jpeg" class="img-wisata" />
<div class="text">
<a
href="https://bogor.tamansafari.com/"
target="_blank"
class="link-readmore"
>Read More <i class="uil uil-notebooks"></i
></a>
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">Surya Kencana Bogor</div>
<img src="img/suryakencana.jpeg" class="img-wisata" />
<div class="text">
<a
href="https://petalestari.com/wisata-lestari/ekonomi-kreatif/kuliner-bogor-jalan-surya-kencana/"
target="_blank"
class="link-readmore"
>Read More <i class="uil uil-notebooks"></i
></a>
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">Gunung Pancar Bogor</div>
<img src="img/gunungpancar.jpg" class="img-wisata" />
<div class="text">
<a
href="https://www.gunungpancar.com/"
target="_blank"
class="link-readmore"
>Read More <i class="uil uil-notebooks"></i
></a>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)"
><i class="uil uil-arrow-circle-left"></i
></a>
<a class="next" onclick="plusSlides(1)"
><i class="uil uil-arrow-circle-right"></i
></a>
</div>
<br />
<div style="text-align: center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
</article>
</div>
<aside>
<article class="card profile">
<header>
<h2>Nehemia Gueldi</h2>
<p>Cohort Bangkit Cloud Computing</p>
<figure>
<img src="img/fotoprofile.jpg" alt="Profile" />
</figure>
</header>
<section>
<h3>Informasi Lainnya</h3>
<table>
<tr>
<th>Warga Negara</th>
<td>Indonesia</td>
</tr>
<tr>
<th>Tanggal Lahir</th>
<td>28 Desember 2001</td>
</tr>
<tr>
<th>Status</th>
<td>Mahasiswa</td>
</tr>
<tr>
<th>Asal Universitas</th>
<td>Universitas Multimedia Nusantara</td>
</tr>
</table>
</section>
</article>
</aside>
</main>
<footer>
<div class="social-media">
<p>Bogor, Jawa Barat, Indonesia ©</p>
<ul class="social-list">
<li>
<a href="https://www.youtube.com/@PemerintahKotaBogor" target="_blank"><i class="fab fa-youtube"></i></a>
</li>
<li>
<a href="https://kotabogor.go.id/" target="_blank"><i class="uil uil-globe"></i></a>
</li>
<li>
<a href="https://twitter.com/PemkotaBogor" target="_blank"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="https://www.facebook.com/PemerintahKotaBogor/?locale=id_ID" target="_blank"><i class="fab fa-facebook"></i></a>
</li>
</ul>
</div>
</footer>
<div class="loader"></div>
<script>
window.onload = function () {
getGreeting(); // panggil fungsi getGreeting() saat halaman dimuat
getGreet(); // panggil fungsi getGreet() saat halaman dimuat
currentSlide(1);
};
</script>
<script>
/*==================== SLIDER ====================*/
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides((slideIndex += n));
}
function currentSlide(n) {
showSlides((slideIndex = n));
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>
</body>
</html>