-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
798 lines (717 loc) · 36.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
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Menjelajahi Wisata Tersembunyi Indonesia">
<meta name="viewport" content="width=width, initial-scale=1">
<title>BLUSAKBLUSUK!</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/modal.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="icon" href="img/ico/favicon.png">
</head>
<body>
<header>
<div class="container">
<ul id="nav-left">
<li id="mo-btn"><a class="switch" href="#nav-right"><img src="img/ico/menu.png" width="16px" height="16px" alt=""></a></li>
<li><a href="#">Blusak-Blusuk!</a></li>
</ul>
<ul id="nav-right">
<li id="mo-nav"><a class="switch" href="#nav-left"><img src="img/ico/close.png" alt="">Close</a></li>
<li><a href="#slider"><img src="img/ico/home.png" alt="">Home</a></li>
<li><a href="#destinasi"><img src="img/ico/dest.png" alt="">Destinasi</a></li>
<li><a href="#aktivitas"><img src="img/ico/aktivitas.png" alt="">Aktivitas</a></li>
<li><a href="#peoplesay"><img src="img/ico/komen.png" alt="">Komentar</a></li>
<li><a href="#kontak"><img src="img/ico/call.png" alt="">Kontak</a></li>
</ul>
</div>
</header>
<div id="slider">
<figure>
<img src="img/ngobaran.jpg" alt="this is a test">
<img src="img/nguyahan.jpg" alt="">
<img src="img/pindul.jpg" alt="">
<img src="img/embung.jpg" alt="">
<img src="img/sunset.jpg" alt="">
</figure>
</div>
<div id="destinasi" class="content">
<div class="segitiga-a"></div>
<div class="container">
<div class="g12">
<h1 class="right">Destinasi</h1>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sd round">
<a href="#destinasi1">
<img class="strech round" src="img/embung.jpg" alt="">
<div class="dest-text center">
<h3>Embung Nglanggeran</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sd round">
<a href="#destinasi2">
<img class="strech round" src="img/jungwok.jpg" alt="">
<div class="dest-text center">
<h3>Pantai Jungwok</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sd round">
<a href="#destinasi3">
<img class="strech round" src="img/srigethuk.jpg" alt="">
<div class="dest-text center fresh">
<h3>Air Terjun Sri Gethuk</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sd round">
<a href="#destinasi4">
<img class="strech round" src="img/poktunggal.jpg" alt="">
<div class="dest-text center">
<h3>Pantai Pok Tunggal</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
<div class="g12 space"></div> <!-- Akhir Grid-->
<div class="g12 center">
<a href="#moredest" class="buton more">Lihat Destinasi Wisata Lainnya</a>
</div>
<div class="g12 space"></div> <!-- Akhir Grid-->
</div> <!-- Akhir Container-->
</div> <!-- Akhir Section-->
<div id="paralax1" class="paralax">
<div class="gfull fresh overhidden">
<div class="segitiga-b"></div>
</div>
<div class="container">
<div class="g12">
<h1 class="highlight">"Ayo BlusakBlusuk!"</h1>
<p class="desc">Masih banyak surga dunia tersembunyi !</p>
</div> <!-- Akhir Grid-->
</div> <!-- Akhir Container-->
</div> <!-- Akhir Section-->
<div id="aktivitas" class="content">
<div class="segitiga-a"></div>
<div class="container">
<div class="g12">
<h1 class="right">Aktivitas</h1>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas1"><img class="strech circle" src="img/cavetubing.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Cave Tubing Kalisuci</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas2"><img class="strech circle" src="img/tebingsiung.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Panjat Tebing Pantai Siung</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas3"><img class="strech circle" src="img/sunset-nglanggeran.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Sunrise & Sunset Nglanggeran</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas4"><img class="strech circle" src="img/jomblang.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Caving Goa Jomblang</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
<div class="g12 space"></div> <!-- Akhir Grid-->
<div class="g12 center">
<a href="#moreact" class="buton more">Lihat Aktivitas Lainnya</a>
</div>
<div class="g12 space"></div> <!-- Akhir Grid-->
</div> <!-- Akhir Container-->
</div> <!-- Akhir Section-->
<div id="paralax2" class="paralax">
<div class="gfull fresh overhidden">
<div class="segitiga-b"></div>
</div>
<div class="container">
<div class="g12">
<h1 class="highlight">"BlusakBlusuk Indonesia"</h1>
<p class="desc">Temukan jutaan mahakarya alam !</p>
</div> <!-- Akhir Grid-->
</div> <!-- Akhir Container-->
</div> <!-- Akhir Section-->
<div id="peoplesay" class="content">
<div class="segitiga-a"></div>
<div class="container">
<div class="g12">
<h1 class="right">Komentar</h1>
</div> <!-- Akhir Grid-->
<div class="g4">
<div class="bar round">
<div class="people circle shadow" style="background-image: url(img/people/jkw.jpg)"></div>
<h2>Joko Widodo</h2>
<p>BlusakBlusuk merupakan situs web yang inspiratif. Dengan BlusakBlusuk seluruh rakyat indonesia bisa berbagi dengan masyarakat dunia tentang keindahan alam dan budaya Indonesia. Bahkan bukan hanya situs budaya alam atau budaya yang terkenal, situs-situs yang masih belum banyak dikenal-pun ada di situs web ini. Benar-benar mantap!</p>
</div>
<div class="g12 space"></div>
</div>
<div class="g4">
<div class="bar round">
<div class="people circle shadow" style="background-image: url(img/people/sultan.jpg)"></div>
<h2>Sri Sultan HB X</h2>
<p>Website BlusakBlusuk memang Istimewa !. Kita bisa mengetahui potensi-potensi daerah yang selama ini tersembunyi melalui website ini. Bisa saya katakan BlusakBlusuk menjadi suatu perangkat promosi pariwisata yang paling baik dan efektif, Kontributor maupun tim BlusakBlusuk dapat memberikan detail objek wisata sebaik mungkin, dan pengunjung/calon wisatawan dapat mengetahui informasi yang lengkap mengenai wisata-wisata di Indonesia. Dengan adanya BlusakBlusuk, saya yakin Indonesia bisa semakin Istimewa dimata dunia!.</p>
</div>
<div class="g12 space"></div>
</div>
<div class="g4">
<div class="bar round">
<div class="people circle shadow" style="background-image: url(img/people/sby.jpg)"></div>
<h2>Susilo Bambang Y.</h2>
<p>BlusakBlusuk adalah suatu ide yang cemerlang!. Sistem promosi wisata BlusakBlusuk bisa kita anggap yang terbaik di dunia, Detail/Informasi yang disajikan lengkap dan up-to-date. Selain itu, ada komunitas berbagai media sosial dengan jutaan pengikut yang saling membantu menjawab pertanyaan-pertanyaan terkait suatu objek wisata, tak hanya itu para pengikut BlusakBlusuk di media sosial juga saling berbagi foto ataupun pengalaman berwisata. Sungguh menakjubkan!</p>
</div>
<div class="g12 space"></div>
</div><!-- Akhir Grid-->
<div class="g12 space"></div> <!-- Akhir Grid-->
</div> <!-- Akhir Container-->
</div> <!-- Akhir Section-->
<div id="kontak" class="content">
<div class="gfull fresh overhidden">
<div class="segitiga-b"></div>
</div>
<div class="container">
<div class="g12">
<h1 id="kntk" class="right">Kontak</h1>
</div> <!-- Akhir Grid-->
<div class="g4 center">
<div class="circle kontak-icon">
<a href="http://goo.gl/R8Slaa" target="_blank">
<img class="kontak-img" src="img/ico/maps.png" alt="">
</a>
</div>
<h4 class="label">Mrican, Caturtunggal, Depok, Sleman</h4>
<div class="g12 space"></div>
</div>
<div class="g4 center">
<div class="circle kontak-icon">
<a href="mailto:[email protected]">
<img class="kontak-img" src="img/ico/mail.png" alt="">
</a>
</div>
<h4 class="label">[email protected]</h4>
<div class="g12 space"></div>
</div>
<div class="g4 center">
<div class="circle kontak-icon">
<a href="skype:+62274123456?call">
<img class="kontak-img" src="img/ico/telepon.png" alt="">
</a>
</div>
<h4 class="label">(+62 274) 123 456</h4>
<div class="g12 space"></div>
</div>
<div class="g12 space"></div>
<div class="g12 space"></div>
</div> <!-- Akhir Container-->
</div> <!-- Akhir Section-->
<div id="footer" class="content">
<div class="segitiga-a"></div>
<div class="container">
<div class="g3">
<h3>Sosial Media</h3>
<a href="http://www.facebook.com/" target="_blank">Facebook</a><br />
<a href="http://www.twitter.com/" target="_blank">Twitter</a><br />
<a href="http://Instagram.com/" target="_blank">Instagram</a><br />
<a href="http://www.youtube.com/ target="_blank"">YouTube</a><br />
</div> <!-- Akhir Grid-->
<div class="g3">
<h3>Mitra Kami</h3>
<ul>
<li><a target="_blank" href="http://www.yogyes.com/">Yogyes!</a></li>
<li><a target="_blank" href="http://www.indonesia.travel/id/">Wonderful Indonesia!</a></li>
<li><a target="_blank" href="http://www.jogjaprov.go.id/">Pemda Yogyakarta </a></li>
<li><a target="_blank" href="http://gunungkidulkab.go.id/">Pemkab Gunungkidul</a></li>
</ul>
</div> <!-- Akhir Grid-->
<div class="g3">
<h3>Kontribusi</h3>
<p>Jika anda ingin berkontribusi untuk mendukung website ini anda bisa menghubungi Admin BLUSAKBLUSUK!©</p>
</div> <!-- Akhir Grid-->
<div class="g3">
<h3>Tentang</h3>
<p>BLUSAKBLUSUK! © merupakan website untuk memudahkan akses informasi pariwisata yang ada di Indonesia khususnya Daerah Istimewa Yogyakarta.</p>
</div> <!-- Akhir Grid-->
</div> <!-- Akhir Container-->
<div id="footer-copy" class="gfull">
<div class="container">
<p id="copy-content">
Copyright 2015 <a href="#">BlusakBlusuk!</a>
</p>
<p id="copy-design">
Designed by <b>WIN2K1</b> (<a href="mailto:[email protected]">hidarumark</a> and <a href="mailto:[email protected]">U*SER</a>)
</p>
</div>
</div> <!-- Akhir Grid-->
</div> <!-- Akhir Section-->
<!--Destinasi 1-->
<div id="destinasi1" class="modal">
<div class="modal-content">
<div class="modal-header">
<a href="#destinasi" id="modal-close">X</a>
<h3>Embung Nglanggeran</h3>
</div>
<div class="modal-copy">
<div class="g8">
<p>Embung Nglanggeran adalah sebuah tempat wisata baru yang terletak di Gunung Kidul . Tepatnya terletak di Dusun Nglanggeran Wetan, Desa Nglanggeran, Kecamatan Patuk, Kabupaten Gunung Kidul, Yogyakarta.Embung Nglanggeran ini dulunya merupakan sebuah bukit bernama Gunung Gandu.</p>
<p>Kemudian dipotong dan dikeruk untuk dijadikan telaga tadah hujan yang bisa mengairi kebun buah yang ada di sekitarnya. Selain berasal dari air tadah hujan, air embung ini juga berasal dari Sumber Sumurup yang terletak di Gunung Nglanggeran. Karena berasal dari bukit yang dipotong, maka Embung Nglanggeran merupakan telaga yang berada di puncak bukit. Embung adalah istilah yang biasa digunakan oleh orang Jawa untuk menyebut telaga buatan yang fungsi utamanya adalah sebagai sarana pengairan.</p>
</div>
<div class="g4 sidebar">
<img class="round" src="img/sunset-nglanggeran.jpg" width="100%" alt="">
<div class=" bar round modal-box">
<p>Lokasi      : Nglanggeran, Patuk, Gunungkidul</p>
<p>Sifat          : Umum</p>
<p>Retribusi  : Rp 3000,00</p>
<p>Link Google Maps  : <a target="_blank" href="https://goo.gl/maps/YBU4T">https://goo.gl/maps/YBU4T</a></p>
</div>
<a href="http://yogyes.com/" target="_blank" class="buton tiket">Pesan Tiket</a>
</div>
<div class="g12 space"></div>
</div>
</div>
</div>
<!--Destinasi 2-->
<div id="destinasi2" class="modal">
<div class="modal-content">
<div class="modal-header">
<a href="#destinasi" id="modal-close">X</a>
<h3>Pantai Jungwok</h3>
</div>
<div class="modal-copy">
<div class="g8">
<p>Pantai Jungwok berada di sebelah timur pantai Wediombo dan dapat ditempuh dengan jalan kaki dari Pantai Wediombo. Akses menuju Pantai Jungwok belum dibuka dan baru dapat ditempuh dengan jalan kaki. Perjalanan ini sungguh menyenangkan bila anda menikmatinya dan di sekitarnya dapat melihat pantai dari tebing.</p>
<p>Pemandangan Pantai Jungwok sangat indah. Pemandangan khas yang dapat dilihat adalah batu besar yang ada di tengah laut. Batu ini biasa disebut dengan watu topi. Watu topi biasa dapat dinaiki dan dapat digunakan untuk memancing oleh penduduk setempat dan beberapa pengunjung.</p>
<p>Pantai Jungwok memiliki pantai yang indah dan luas. Pantai ini memiliki pasir putih dan perairan yang dangkal. Biota laut yang banyak terdapat di sini antara lain bintang laut, ikan hias, dan berbagai macam algae. Di samping itu, juga terdapat berbagai jenis burung. Di sepanjang pantai ditumbuhi oleh tumbuhan pandan. Pantai Jungwok masih sangat alami dan jauh dari keramaian. </p>
</div>
<div class="g4 sidebar">
<img class="round" src="img/jungwok.jpg" width="100%" alt="">
<div class="bar round modal-box">
<p>Lokasi      : Jepitu, Girisubo, Gunungkidul</p>
<p>Sifat          : Umum</p>
<p>Retribusi  : FREE, parkir Rp 2000,00 </p>
<p>Link Google Maps: <a target="_blank" href="https://goo.gl/maps/UxUQk">https://goo.gl/maps/UxUQk</a></p>
</div>
<a href="http://yogyes.com/" target="_blank" class="buton tiket">Pesan Tiket</a>
</div>
<div class="g12 space"></div>
</div>
</div>
</div>
<!--Destinasi 3-->
<div id="destinasi3" class="modal">
<div class="modal-content">
<div class="modal-header">
<a href="#destinasi" id="modal-close">X</a>
<h3>Air Terjun Sri Gethuk</h3>
</div>
<div class="modal-copy">
<div class="g8">
<p>Air Terjun Sri Gethuk merupakan salah satu wisata alam yang terdapat di daerah Gunungkidul tepatnya di Dusun Menggoran, Desa Bleberan, Kecamatan Playen, Kabupaten Gunungkidul, Yogyakarta. Air terjun ini berada di tepi Sungai Oyo.</p>
<p>Air Terjun Sri Gethuk juga disebut sebagai Air Terjun Slempret dan aja juga yang menyebut Air Terjun Sompret. Nama Slempret sendiri berasal dari legenda yang ada di Desa Bleberan. Menurut cerita yang beredar di masyarakat, air tejun ini merupakan pusatnya para jin dengan pimpinan Jin Anggo Menduro</p>
<p>Air terjun sri gethuk lahir dari tiga sumber mata air " kedung poh " , " ngandong" dan sumber mata air "ngumbul", ketiga sumber mata air tersebut mengalir menjadi satu dan membentuk butiran butiran air yang jatuh dari tebing bebatuan karst yang terkenal tandus.</p>
</div>
<div class="g4 sidebar">
<img class="round" src="img/srigethuk.jpg" width="100%" alt="">
<div class="bar round modal-box">
<p>Lokasi      : Beberan, Playen, Gunungkidul</p>
<p>Sifat          : Umum</p>
<p>Retribusi  : parkir Rp 2000,00 | Sewa kapal per orang Rp 10.000,00 </p>
<p>Link Google Maps: <a target="_blank" href="https://goo.gl/maps/wpGMD">https://goo.gl/maps/wpGMD</a></p>
</div>
<a href="http://yogyes.com/" target="_blank" class="buton tiket">Pesan Tiket</a>
</div>
<div class="g12 space"></div>
</div>
</div>
</div>
<!--Destinasi 4-->
<div id="destinasi4" class="modal">
<div class="modal-content">
<div class="modal-header">
<a href="#destinasi" id="modal-close">X</a>
<h3>Pantai Poktunggal</h3>
</div>
<div class="modal-copy">
<div class="g8">
<p>Pantai Pok Tunggal masih berada di kawasan Gunungkidul, Yogyakarta. Tepatnya berada di Desa Tepus, Kecamatan Tepus, Kabupaten Gunungkidul, Yogyakarta. Lokasinya berada diantara Pantai Pulang Syawal (lebih dikenal dengan nama Pantai Indrayanti) dan [[Pantai Siung]]. Pantai Pok Tunggal memiliki panorama yang indah dengan hamparan pasir putih serta perbukitan karst. </p>
<p>Nama Pok Tunggal sendiri diambil karena di lokasi pantai ini terdapat pohon langka dan masih kokoh berdiri yaitu Pohon Duras (Pok Tunggal). Satu lagi yang unik dari pantai ini adalah adanya mata air tawar yang berasal dari aliran sungai bawah tanah khas daerah karst. Air ini pula yang dijadikan sebagai sumber air bagi penduduk setempat. </p>
<p>Pemandangan pantai akan jauh lebih indah jika dinikmati dari bukit sebelah barat pantai. Selain itu dari balik bukit tebing di sebelah timur, Anda juga akan menjumpai beberapa primata liar yang sedang melompat kesana- kemari. Anda dapat sekedar menikmati pemandangan maupun berenang sepuasnya di batas bibir pantai. Pasir di sini cukup landai, sehingga tempat ini cukup aman untuk berenang.</p>
</div>
<div class="g4 sidebar">
<img class="round" src="img/poktunggal.jpg" width="100%" alt="">
<div class="bar round modal-box">
<p>Lokasi      : Tepus, Gunungkidul</p>
<p>Sifat          : Umum</p>
<p>Retribusi  : Rp 10.000,00 </p>
<p>Link Google Maps: <a target="_blank" href="https://goo.gl/maps/6rBlz">https://goo.gl/maps/6rBlz</a></p>
</div>
<a href="http://yogyes.com/" target="_blank" class="buton tiket">Pesan Tiket</a>
</div>
<div class="g12 space"></div>
</div>
</div>
</div>
<!--Destinasi Lainnya-->
<div id="moredest" class="modal">
<div class="modal-content">
<div class="modal-header">
<a href="#destinasi" id="modal-close">X</a>
<h3>Destinasi Wisata</h3>
</div>
<div class="modal-copy">
<div class="container">
<div class="g12">
<div class="g3">
<div class="bar sd round">
<a href="#destinasi1">
<img class="strech round" src="img/embung.jpg" alt="">
<div class="dest-text center">
<h3>Embung Nglanggeran</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sd round">
<a href="#destinasi2">
<img class="strech round" src="img/jungwok.jpg" alt="">
<div class="dest-text center">
<h3>Pantai Jungwok</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sd round">
<a href="#destinasi3">
<img class="strech round" src="img/srigethuk.jpg" alt="">
<div class="dest-text center fresh">
<h3>Air Terjun Sri Gethuk</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sd round">
<a href="#destinasi4">
<img class="strech round" src="img/poktunggal.jpg" alt="">
<div class="dest-text center">
<h3>Pantai Pok Tunggal</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sd round">
<a href="#destinasi3">
<img class="strech round" src="img/srigethuk.jpg" alt="">
<div class="dest-text center fresh">
<h3>Air Terjun Sri Gethuk</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sd round">
<a href="#destinasi4">
<img class="strech round" src="img/poktunggal.jpg" alt="">
<div class="dest-text center">
<h3>Pantai Pok Tunggal</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sd round">
<a href="#destinasi1">
<img class="strech round" src="img/embung.jpg" alt="">
<div class="dest-text center">
<h3>Embung Nglanggeran</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sd round">
<a href="#destinasi2">
<img class="strech round" src="img/jungwok.jpg" alt="">
<div class="dest-text center">
<h3>Pantai Jungwok</h3>
</div>
</a>
</div>
</div> <!-- Akhir Grid-->
</div>
<div class="g12 space"></div>
</div>
</div>
</div>
</div>
<!--Aktivitas 1-->
<div id="aktivitas1" class="modal">
<div class="modal-content">
<div class="modal-header">
<a href="#aktivitas" id="modal-close">X</a>
<h3>Cave Tubing Kalisuci</h3>
</div>
<div class="modal-copy">
<div class="g8">
<p>Bila Anda adalah pehobi berpetualang dengan alam, Cave Tubing Kalisuci bisa menjadi pilihan liburan Anda di Yogyakarta. Cave Tubing Kalisuci sendiri terletak di Jetis, Pacarejo, Semanu, Gunung Kidul. Lokasi ini bila Anda akses dari Kota Yogyakarta berjerak sekitar 40 km atau sekitar 10 km dari Kota Wonosari.</p>
<p>Cave Tubing sendiri merupakan perpaduan antara arung jeram (rafting) dengan susur gua (caving) dimana dua aktivitas tersebut sebenarnya terpisah. Lantaran lokasi Gua Kalisuci ini memiliki arus air yang deras dan sungai terletak didalam gua, maka cocoklah bila aktivitas dialam bebas ini menjadi sebuah tantangan yang memukau bagi para pecinta petualangan alam.</p>
</div>
<div class="g4 sidebar">
<img class="round" src="img/cavetubing.jpg" width="100%" alt="">
<div class="bar round modal-box">
<p>Lokasi  : Kalisuci, Gunungkidul</p>
<p>Jenis  : Adventure</p>
<p>Biaya  : Rp 60.000,00 </p>
<p>Link Google maps  : <a target="_blank" href="http://goo.gl/QgkuOK">http://goo.gl/QgkuOK</a></p>
</div>
<a href="http://yogyes.com/" target="_blank" class="buton tiket">Pesan Tiket</a>
</div>
<div class="g12 space"></div>
</div>
</div>
</div>
<!--Aktivitas 2-->
<div id="aktivitas2" class="modal">
<div class="modal-content">
<div class="modal-header">
<a href="#aktivitas" id="modal-close">X</a>
<h3>Panjat Tebing Pantai Siung</h3>
</div>
<div class="modal-copy">
<div class="g8">
<p>Pantai Siung merupakan salah satu pantai yang berada dalam satu garis dengan Pantai Baron dan Pantai Sundak. Selain memiliki pemandangan dan bentangan alam yang indah, pantai ini juga memiliki daya tarik tersendiri bagi para pemanjat, yaitu tebing-tebingnya yang berdiri menjulang. Tebing-tebing ini merupakan incaran para pemanjat yang sudah bosan dengan aktivitas wall climbing, sehingga mereka mencoba menaklukkan tebing yang sesungguhnya.</p>
</div>
<div class="g4 sidebar">
<img class="round" src="img/tebingsiung.jpg" width="100%" alt="">
<div class="bar round modal-box">
<p>Lokasi  : Pantai Siung, Gunungkidul</p>
<p>Jenis  : Adventure, Extreme</p>
<p>Biaya  : Rp 120.000,00 </p>
<p>Link Google maps  : <a target="_blank" href="http://goo.gl/te0oXX">http://goo.gl/te0oXX</a></p>
</div>
<a href="http://yogyes.com/" target="_blank" class="buton tiket">Pesan Tiket</a>
</div>
<div class="g12 space"></div>
</div>
</div>
</div>
<!--Aktivitas 3-->
<div id="aktivitas3" class="modal">
<div class="modal-content">
<div class="modal-header">
<a href="#aktivitas" id="modal-close">X</a>
<h3>Berburu Sunrise & Sunset di Nglanggeran</h3>
</div>
<div class="modal-copy">
<div class="g8">
<p>Gunung Nglanggeran di Gunungkidul terkenal sebagai gunung api purba dengan bongkahan batu raksasa. Selain itu, tidak sedikit wisatawan yang datang untuk mengabadikan sunrise maupun sunset dari puncaknya. </p>
<p>Gunung Nglanggeran adalah gunung api purba berbentuk bongkahan batu raksasa. Di sana kita dapat menyaksikan sunset dan sunrise yang mempesona, serta gemerlap Yogyakarta di malam hari.</p>
</div>
<div class="g4 sidebar">
<img class="round" src="img/sunset-nglanggeran.jpg" width="100%" alt="">
<div class="bar round modal-box">
<p>Lokasi  : Gunungkidul</p>
<p>Jenis  : Adventure, Photography</p>
<p>Biaya  : Rp 10.000,00 </p>
<p>Link Google Maps  : <a target="_blank" href="https://goo.gl/maps/YBU4T">https://goo.gl/maps/YBU4T</a></p>
</div>
<a href="http://yogyes.com/" target="_blank" class="buton tiket">Pesan Tiket</a>
</div>
<div class="g12 space"></div>
</div>
</div>
</div>
<!--Aktivitas 4-->
<div id="aktivitas4" class="modal">
<div class="modal-content">
<div class="modal-header">
<a href="#aktivitas" id="modal-close">X</a>
<h3>Caving Goa Jomblang</h3>
</div>
<div class="modal-copy">
<div class="g8">
<p>Gua Jomblang merupakan salah satu gua dari ratusan kompleks gua Gunungkidul yang terkenal karena keunikan dan keindahannya yang tidak terbantahkan. Pada tahun 2011, Gua Jomblang dijadikan tempat pengambilan gambar Amazing Race Amerika. Terletak di rentangan perbukitan karst pesisir selatan yang memanjang dari Gombong, Jawa Tengah; hingga kawasan karst Pegunungan Sewu, Pacitan, Jawa Timur; gua vertikal yang bertipe collapse doline ini terbentuk akibat proses geologi amblesnya tanah beserta vegetasi yang ada di atasnya ke dasar bumi yang terjadi ribuan tahun lalu. Runtuhan ini membentuk sinkhole atau sumuran yang dalam bahasa Jawa dikenal dengan istilah luweng. Karena itu gua yang memiliki luas mulut gua sekitar 50 meter ini sering disebut dengan nama Luweng Jomblang.</p>
</div>
<div class="g4 sidebar">
<img class="round" src="img/jomblang.jpg" width="100%" alt="">
<div class="bar round modal-box">
<p>Lokasi  : Gunungkidul</p>
<p>Jenis  : Adventure, Extreme</p>
<p>Biaya  : Rp 100.000,00 </p>
<p>Link Google maps  : <a target="_blank" href="http://goo.gl/SChHMw">http://goo.gl/SChHMw</a></p>
</div>
<a href="http://yogyes.com/" target="_blank" class="buton tiket">Pesan Tiket</a>
</div>
<div class="g12 space"></div>
</div>
</div>
</div>
<!--Aktivitas Lainnya-->
<div id="moreact" class="modal">
<div class="modal-content">
<div class="modal-header">
<a href="#aktivitas" id="modal-close">X</a>
<h3>Aktivitas Wisata</h3>
</div>
<div class="modal-copy">
<div class="container">
<div class="g12">
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas1"><img class="strech circle" src="img/cavetubing.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Cave Tubing Kalisuci</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas2"><img class="strech circle" src="img/tebingsiung.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Panjat Tebing Pantai Siung</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas3"><img class="strech circle" src="img/sunset-nglanggeran.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Sunrise & Sunset Nglanggeran</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas4"><img class="strech circle" src="img/jomblang.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Caving Goa Jomblang</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas3"><img class="strech circle" src="img/sunset-nglanggeran.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Sunrise & Sunset Nglanggeran</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas4"><img class="strech circle" src="img/jomblang.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Caving Goa Jomblang</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas1"><img class="strech circle" src="img/cavetubing.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Cave Tubing Kalisuci</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
<div class="g3">
<div class="bar sq circle aktivitas">
<a href="#aktivitas2"><img class="strech circle" src="img/tebingsiung.jpg" alt=""></a>
</div>
<h4 class="aktivitas-nama">Panjat Tebing Pantai Siung</h4>
<div class="bar fresh"></div>
</div> <!-- Akhir Grid-->
</div>
<div class="g12 space"></div>
</div>
</div>
</div>
</div>
</div>
<script>
( function( window ) {
'use strict';
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 50,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
</script>
</body>
</html>