<!-- START MAPS-->
<section id="map">
<img data-src="assets/toba/map.jpg" alt="Maps" class="map-img lozad">
<div class="location-list">
<div id="toba" class="location-item">
<div class="icon">
<svg width="23" height="30" viewBox="0 0 23 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_546_2)">
<path
d="M10.0938 29.3947C1.58027 17.0526 0 15.7859 0 11.25C0 5.03678 5.03678 0 11.25 0C17.4632 0 22.5 5.03678 22.5 11.25C22.5 15.7859 20.9197 17.0526 12.4062 29.3947C11.8475 30.2018 10.6525 30.2017 10.0938 29.3947ZM11.25 15.9375C13.8388 15.9375 15.9375 13.8388 15.9375 11.25C15.9375 8.66115 13.8388 6.5625 11.25 6.5625C8.66115 6.5625 6.5625 8.66115 6.5625 11.25C6.5625 13.8388 8.66115 15.9375 11.25 15.9375Z"
fill="#D62828" />
</g>
<defs>
<clipPath id="clip0_546_2">
<rect width="22.5" height="30" fill="white" />
</clipPath>
</defs>
</svg>
<div class="pulse"></div>
</div>
<p>Danau Toba</p>
</div>
<div id="bukit-siadtaratas" class="location-item">
<img data-src="assets/toba/icons/bukit-siadtaratas.png" alt="Bukit Siadtaratas" class="icon lozad">
<div class="icon">
<svg width="23" height="30" viewBox="0 0 23 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_546_2)">
<path
d="M10.0938 29.3947C1.58027 17.0526 0 15.7859 0 11.25C0 5.03678 5.03678 0 11.25 0C17.4632 0 22.5 5.03678 22.5 11.25C22.5 15.7859 20.9197 17.0526 12.4062 29.3947C11.8475 30.2018 10.6525 30.2017 10.0938 29.3947ZM11.25 15.9375C13.8388 15.9375 15.9375 13.8388 15.9375 11.25C15.9375 8.66115 13.8388 6.5625 11.25 6.5625C8.66115 6.5625 6.5625 8.66115 6.5625 11.25C6.5625 13.8388 8.66115 15.9375 11.25 15.9375Z"
fill="#D62828" />
</g>
<defs>
<clipPath id="clip0_546_2">
<rect width="22.5" height="30" fill="white" />
</clipPath>
</defs>
</svg>
<div class="pulse"></div>
</div>
<p>Bukit Siadtaratas</p>
</div>
<div id="pusuk-buhit" class="location-item">
<img data-src="assets/toba/icons/gunung-pusuk-buhit.png" alt="Gunung Pusik Buhit" class="lozad">
<div class="icon">
<svg width="23" height="30" viewBox="0 0 23 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_546_2)">
<path
d="M10.0938 29.3947C1.58027 17.0526 0 15.7859 0 11.25C0 5.03678 5.03678 0 11.25 0C17.4632 0 22.5 5.03678 22.5 11.25C22.5 15.7859 20.9197 17.0526 12.4062 29.3947C11.8475 30.2018 10.6525 30.2017 10.0938 29.3947ZM11.25 15.9375C13.8388 15.9375 15.9375 13.8388 15.9375 11.25C15.9375 8.66115 13.8388 6.5625 11.25 6.5625C8.66115 6.5625 6.5625 8.66115 6.5625 11.25C6.5625 13.8388 8.66115 15.9375 11.25 15.9375Z"
fill="#D62828" />
</g>
<defs>
<clipPath id="clip0_546_2">
<rect width="22.5" height="30" fill="white" />
</clipPath>
</defs>
</svg>
<div class="pulse"></div>
</div>
<p>Gunung Pusuk Buhit</p>
</div>
<div id="situmurun" class="location-item">
<img data-src="assets/toba/icons/air-terjun-situmurun.png" alt="Air Terjun Situmurun" class="lozad">
<div class="icon">
<svg width="23" height="30" viewBox="0 0 23 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_546_2)">
<path
d="M10.0938 29.3947C1.58027 17.0526 0 15.7859 0 11.25C0 5.03678 5.03678 0 11.25 0C17.4632 0 22.5 5.03678 22.5 11.25C22.5 15.7859 20.9197 17.0526 12.4062 29.3947C11.8475 30.2018 10.6525 30.2017 10.0938 29.3947ZM11.25 15.9375C13.8388 15.9375 15.9375 13.8388 15.9375 11.25C15.9375 8.66115 13.8388 6.5625 11.25 6.5625C8.66115 6.5625 6.5625 8.66115 6.5625 11.25C6.5625 13.8388 8.66115 15.9375 11.25 15.9375Z"
fill="#D62828" />
</g>
<defs>
<clipPath id="clip0_546_2">
<rect width="22.5" height="30" fill="white" />
</clipPath>
</defs>
</svg>
<div class="pulse"></div>
</div>
<p>Air Terjun Situmurun</p>
</div>
</div>
<div class="modal">
<div id="toba" class="location-detail">
<figure>
<img data-src="assets/toba/toba.jpg" alt="Toba" width="500" height="300" class="lozad">
<button type="button" class="close-button">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 7.5L7.5 22.5" stroke="#FFF" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M7.5 7.5L22.5 22.5" stroke="#FFF" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
</figure>
<div class="text">
<p>Danau Toba</p>
<p class="description">
Saat kamu tiba di Danau Toba, rasanya keindahan yang paling hikmat adalah memuja keindahan
alamnya yang luar biasa luas.
<br />
<br />
Hamparan luasnya danau bagai lautan ini seakan tak bertepi. Resapi keindahannya di awal
kedatanganmu akan kehebatan alam alami yang terbentuk sejak puluhan ribu tahun yang lalu ini.
<br />
<br />
Lakukan wisata Paropo di Danau Toba. Wisata Paropo adalah wisata alam bebas yang menyuguhkan
pemandangan alam. Kamu bisa berkemah dan menikmati langsung air danau
</p>
</div>
</div>
<div id="bukit-siadtaratas" class="location-detail">
<figure>
<img data-src="assets/toba/bukit-siadtaratas.png" alt="Bukit Siadtaratas" width="500" height="300"
class="lozad">
<button type="button" class="close-button">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 7.5L7.5 22.5" stroke="#FFF" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M7.5 7.5L22.5 22.5" stroke="#FFF" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
</figure>
<div class="text">
<p>Bukit Siadtaratas</p>
<p class="description">
Pesona keindahan alam bukit Siadtaratas adalah bukit hijau tinggi di samping danau. Cocok bagi
siapa pun untuk berfoto estetik dan Instagrammable. Dan bisa juga jadi lokasi berkemah.
<br />
<br />
Jalan yang cukup ekstrem dan kecil tak menjadi masalah, karena perjuanganmu akan terbayar lunas
ketika sampai di atas Bukit Siadtaratas.
</p>
</div>
</div>
<div id="pusuk-buhit" class="location-detail">
<figure>
<img data-src="assets/toba/gunung-pusik-buhit.png" alt="Gunung Pusik Buhit" width="500" height="300"
class="lozad">
<button type="button" class="close-button">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 7.5L7.5 22.5" stroke="#FFF" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M7.5 7.5L22.5 22.5" stroke="#FFF" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
</figure>
<div class="text">
<p>Gunung Pusuk Buhit</p>
<p class="description">
Pusuk Buhit merupakan salah satu puncak di pinggir barat di Danau toba. Berada di ketinggian
1.982 mdpl, Gunung Pusuk Buhit menyimpan keindahan, dan Pusuk Buhit juga menjadi panggung
legenda lahirnya Suku Batak. Objek wisata ini menawarkan aroma petualangan yang sangat
menyenangkan untuk dijelajahi.
<br />
<br />
Suasananya sejuk, karena berada di ketinggian kamu bisa berkemah di sini. Menyelami pesona alam
Gunung Pusuk Buhit saat malam hari yang terasa syahdu. Taburan bintang indah menjadi lampu alami
kamu di sepanjang malam.
</p>
</div>
</div>
<div id="situmurun" class="location-detail">
<figure>
<img data-src="assets/toba/air-terjun-situmurun.png" alt="Air Terjun Situmurun" width="500"
height="300" class="lozad">
<button type="button" class="close-button">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 7.5L7.5 22.5" stroke="#FFF" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M7.5 7.5L22.5 22.5" stroke="#FFF" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
</figure>
<div class="text">
<p>Air Terjun Situmurun</p>
<p class="description">
Air Terjun Situmurun begitu istimewa. Tingginya saja capai 70 meter bersama dengan 7 tingkatan.
Tak heran bila pesonanya sebabkan pelancong sudi menempuh perjalanan jauh. Air terjun yang oleh
warga setempat disebut termasuk Binangalom ini berjarak tidak cukup lebih 70 kilometer dari Kota
Balige.
<br />
<br />
Tempat wisata ini berlokasi di Desa Situmurun, Kecamatan Lumban Jalu, Kabupaten Toba Samosir.
Airnya mengalir langsung menuju Danau Toba. Berkunjung ke sini, kalian bisa sekalian melihat
lanskap Danau Toba.
</p>
</div>
</div>
</div>
</section>
<!-- END MAPS-->
<!-- START GEOSITE -->
<section id="geosite">
<div class="caption">
<h2>Geosite</h2>
<p>Tidak satu, dua, atau tiga, melainkan 16 geosite yang bisa kamu kunjungi. Sebanyak 16 situs geopark
Danau Toba sudah menjadi UNESCO Global Geopark. Hal itu diputuskan Dewan Eksekutif UNESCO di Paris,
Prancis, dalam Sidang ke-209 yang digelar Selasa, 2 Juli 2020 waktu lalu.</p>
</div>
<!-- START GEOSITE LIST -->
<div class="list">
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/sipisopiso.jpg" alt="Geosite Sipisopiso" width="440" height="440"
class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Sipisopiso-Tongging</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Karo
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/silalahi.jpg" alt="Geosite Sipisopiso" width="440" height="440"
class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Silalahi-Sabungan</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Dairi
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/haranggaol.jpg" alt="Geosite Haranggaol" width="440" height="440"
class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Haranggaol</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Dairi
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/sibaganding.jpg" alt="Geosite Sibaganding" width="440"
height="440" class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Sibaganding</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Simalungun
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/taman-eden.jpg" alt="Geosite Taman Eden" width="440" height="440"
class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Taman Eden</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Toba Samosir
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/batu-basiha.png" alt="Geosite Batu Basiha-TB Silalahi Balige"
width="440" height="440" class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Batu Basiha-TB Silalahi Balige</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Toba Samosir
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/situmurun.jpg" alt="Geosite Situmurun" width="440" height="440"
class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Situmurun</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Toba Samosir
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/hutaginjang.jpg" alt="Geosite Hutaginjang" width="440"
height="440" class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Hutaginjang</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Tapanuli Utara
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/muara-sibandang.jpg" alt="Geosite Muara Sibandang" width="440"
height="440" class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Muara Sibandang</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Tapanuli Utara
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/sipincur.jpg" alt="Geosite Sipincur" width="440" height="440"
class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Sipincur</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Humbanghasundutan
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/bakara.jpg" alt="Geosite Bakara-Tipang" width="440" height="440"
class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Bakara-Tipang</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Humbanghasundutan
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/tele.jpg" alt="Geosite Tele" width="440" height="440"
class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Tele</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Samosir
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/pusuk-buhit.jpg" alt="Geosite Pusukbuhit" width="440"
height="440" class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Pusukbuhit</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Samosir
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/hutatinggi.jpg" alt="Geosite Hutatinggi Sodihoni" width="440"
height="440" class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Hutatinggi Sodihoni</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Samosir
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/ambarita.jpg" alt="Geosite Ambarita-Tuktuk-Tomok" width="440"
height="440" class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Ambarita-Tuktuk-Tomok</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Kabupaten Samosir
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<img data-src="assets/toba/geosite/danau-toba.jpeg" alt="Geosite Danau Toba" width="440"
height="440" class="lozad">
<div class="overlay">
<p class="look">Lihat</p>
<div>
<p class="name">Geosite Danau Toba</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Seluruh kabupaten sekawasan Danau Toba
</p>
</div>
</div>
</div>
</div>
</div>
<!-- END GEOSITE LIST -->
<!-- START GEOSITE MODAL -->
<div class="modal">
<div class="content">
<button type="button" class="close-button">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 7.5L7.5 22.5" stroke="#FFF" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M7.5 7.5L22.5 22.5" stroke="#FFF" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
<img data-src="" alt="" class="lozad" width="1000" height="500">
<div class="modal-caption">
<p class="name">Geosite Pusik Buhit</p>
<p class="location">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path
d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span></span>
</p>
</div>
</div>
</div>
<!-- END GEOSITE MODAL -->
</section>
<!-- END GEOSITE -->
let geosite = gsap.timeline({
scrollTrigger: {
trigger: '#geosite',
start: 'top center',
end: 'bottom center',
toggleActions: 'restart none none none',
markers: true,
onEnter: () => {
if (audioBtn.classList.contains('audio-on')) { playAudio(audio, './assets/toba/audio/geosite.mp3') }
},
onLeave: () => {
if (audioBtn.classList.contains('audio-on')) { changeAudio(audio) }
},
onEnterBack: () => {
if (audioBtn.classList.contains('audio-on')) { playAudio(audio, './assets/toba/audio/geosite.mp3') }
},
onLeaveBack: () => {
if (audioBtn.classList.contains('audio-on')) { changeAudio(audio) }
}
}
})
I want to make scrolltrigger from the geosite section. But why the start position start in map image (red circle) instead of start of geosite section (black arrow)
Here's the image of the website https://www.imagebam.com/view/ME9BUTF
