Wisataku adalah template website travel agent & open trip dengan galeri destinasi, paket wisata lengkap dengan itinerary hari-per-hari, form inquiry booking, dan blog perjalanan. Yang membedakannya dari template travel pada umumnya adalah identitas visualnya: palet sunset/laut (deep sea teal + sunset coral) di atas kanvas sand-cream dan tipografi Calistoga + Inter — layout visual-heavy dengan galeri destinasi besar, bukan sekadar landing page generik.
Halaman
| File | Keterangan |
|---|---|
index.html |
Beranda – Hero full-bleed, search bar, destinasi populer, paket unggulan, testimoni, blog, CTA |
destinasi.html |
Destinasi – Galeri kartu destinasi dengan filter kategori |
paket.html |
Paket Wisata – Listing paket dengan rating, durasi, harga, filter kategori |
paket-detail.html |
Detail Paket – Itinerary timeline, fasilitas, FAQ, sidebar booking |
galeri.html |
Galeri – Foto perjalanan dengan lightbox (prev/next, keyboard) |
blog.html |
Blog – Listing artikel dengan filter kategori & featured post |
blog-detail.html |
Detail Blog – Isi artikel, sidebar trip & artikel terkait |
tentang.html |
Tentang – Profil agency, visi-misi, tim guide, statistik |
kontak.html |
Kontak – Form konsultasi trip, jam layanan |
Fitur
- Bootstrap 5.3.3 (via CDN), tanpa build step
- Navbar standar (fixed-top, collapse di mobile) + top utility bar kontak
- Identitas visual khas: deep sea teal
#0E4A52+ sunset coral#E2703F, tipografi Calistoga (display) + Inter (body) - Kartu destinasi full-image dengan gradient overlay dan filter kategori
- Itinerary timeline hari-per-hari + fasilitas termasuk/tidak termasuk di detail paket
- Sidebar booking sticky dengan form inquiry (tanggal, jumlah peserta, kontak)
- Galeri foto dengan lightbox navigasi prev/next + keyboard (ESC, arrow)
- Blog perjalanan dengan filter kategori dan halaman detail lengkap
- Validasi form real-time + toast notifikasi sukses saat submit
- CSS Custom Properties (mudah ganti warna/branding)
- Fully responsive – mobile first
- No jQuery
Warna
--teal: #0E4A52 /* Deep sea teal — warna utama */
--coral: #E2703F /* Sunset coral — aksen/CTA */
Untuk ganti warna tema, edit variabel di bagian :root pada assets/css/style.css.
Dependensi (CDN)
Bootstrap 5.3.3
Bootstrap Icons 1.11.3
AOS 2.3.4
Google Fonts Calistoga (heading), Inter (body)
Semua dependensi dimuat via CDN — tidak perlu instalasi npm.
Struktur Folder
wisataku/
├── index.html
├── destinasi.html
├── paket.html
├── paket-detail.html
├── galeri.html
├── blog.html
├── blog-detail.html
├── tentang.html
├── kontak.html
└── assets/
├── css/
│ └── style.css
├── js/
│ └── main.js
└── images/
└── screenshot.png
Cara Penggunaan
- Download folder
wisataku/ - Buka
index.htmldi browser - Edit nama travel agent, kontak, dan alamat di seluruh file HTML
- Ganti warna di
:rootCSS untuk branding sendiri - Sesuaikan daftar destinasi, paket, dan itinerary sesuai kebutuhan
- Hubungkan form inquiry booking dan kontak ke backend/API sendiri
Target pengguna: Travel agent, biro perjalanan wisata, penyedia open trip lokal, komunitas pecinta alam, dan developer yang ingin membangun aplikasi booking trip dengan identitas visual berbeda dari template travel pasaran.
