Webleb - UI Elements

HTML CSS JS

<!DOCTYPE html>

<head>

<title>Doğaya Dönüş: Sürdürülebilir Yaşam ve Ekolojik Keşif Deneyimi</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

serif: ['Merriweather', 'serif'],

colors: {

earth: {

50: '#f4f7f4',

100: '#e3ebe3',

200: '#c5d8c5',

300: '#9cb99c',

400: '#759775',

500: '#567b56', // Ana yeşil

600: '#426142',

700: '#364e36',

800: '#2d3f2d',

900: '#263526',

sand: {

100: '#fdfcf8',

200: '#f3efe6',

300: '#e6dec8',

800: '#5c5240',

}

</script>

<style>

/* Custom Animations */

.fade-in-up {

opacity: 0;

transform: translateY(30px);

transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}

.fade-in-up.visible {

opacity: 1;

transform: translateY(0);

}

.hero-overlay {

background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));

}

/* Smooth image loading */

img {

transition: opacity 0.5s ease-in-out;

}

</style>

</head>

<span class="font-serif text-xl font-bold text-earth-800 tracking-tight">EcoRoots</span>

</div>

<a href="#kesif" class="text-earth-700 hover:text-earth-500 transition font-medium">Keşfet</a>

<a href="#deneyimler" class="text-earth-700 hover:text-earth-500 transition font-medium">Deneyimler</a>

<a href="#hikayeler" class="text-earth-700 hover:text-earth-500 transition font-medium">Hikayeler</a>

Yolculuğa Başla

</a>

</div>

</button>

</div>

<a href="#kesif" class="block py-3 text-earth-700 font-medium">Keşfet</a>

<a href="#deneyimler" class="block py-3 text-earth-700 font-medium">Deneyimler</a>

<a href="#hikayeler" class="block py-3 text-earth-700 font-medium">Hikayeler</a>

<a href="#katil" class="block mt-4 py-3 bg-earth-600 text-white rounded-lg">Yolculuğa Başla</a>

</div>

</nav>

<img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop"

alt="Sisin içinde yemyeşil bir orman manzarası"

class="w-full h-full object-cover">

</div>

Doğaya Dönüş Hareketi

</div>

Özüne Dön: Şehrin Gürültüsünden Uzaklaş, Doğanın Sesini Duy

</h1>

Modern hayatın hızı ruhunu yorduysa, şimdi durma vakti. Doğayla yeniden bağ kurarak zihinsel dinginliğe ve sürdürülebilir bir huzura kapı arala.

</p>

Yolculuğa Başla

</a>

Filmi İzle

</a>

</div>

</div>

</header>

<img src="https://images.unsplash.com/photo-1504829857797-ddff29c27927?q=80&w=2000&auto=format&fit=crop"

alt="Keşfedilmemiş orman patikası"

class="relative rounded-2xl shadow-2xl w-full object-cover h-[500px]">

</div>

<span class="text-earth-600 font-semibold tracking-wider uppercase text-sm">Gizli Rotalar</span>

Haritalarda Görünmeyen Cennetleri Keşfet

</h2>

Sıradan turist rotalarının ötesine geçiyoruz. Sadece yerlilerin ve doğa rehberlerinin bildiği, insan elinin en az değdiği vadilerde, berrak dere kenarlarında ve kadim ormanların derinliklerinde kaybolmadan kendinizi bulacaksınız.

</p>

</div>

<span class="text-gray-700">İzole kamp alanları ve sessiz vadiler.</span>

</li>

</div>

<span class="text-gray-700">Şehrin hava kirliliğinden uzak, %100 temiz oksijen.</span>

</li>

</div>

<span class="text-gray-700">Işık kirliliğinden arınmış gökyüzü gözlemleri.</span>

</li>

</ul>

Rotayı İncele <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>

</a>

</div>

</section>

<span class="text-earth-600 font-semibold tracking-wider uppercase text-sm">Aktiviteler</span>

Doğanın Ritmini Hisset

</h2>

Sadece izleyici olma, doğanın bir parçası ol. Bedenini ve zihnini harekete geçirecek sürdürülebilir deneyimler.

</p>

</div>

</div>

<h3 class="text-xl font-bold text-earth-900 mb-3">Orman Banyosu (Shinrin-Yoku)</h3>

<p class="text-gray-600 mb-4">Ağaçların yaydığı fitonsitleri soluyarak bağışıklık sisteminizi güçlendirin ve stresi azaltın.</p>

Detaylı Bilgi <i data-lucide="chevron-right" class="w-4 h-4"></i>

</span>

</div>

</div>

<h3 class="text-xl font-bold text-earth-900 mb-3">Perma-Kültür Atölyesi</h3>

<p class="text-gray-600 mb-4">Toprağa dokunun. Kendi gıdanızı yetiştirmenin temellerini ve sürdürülebilir tarımı öğrenin.</p>

Detaylı Bilgi <i data-lucide="chevron-right" class="w-4 h-4"></i>

</span>

</div>

</div>

<h3 class="text-xl font-bold text-earth-900 mb-3">Bilinçli Kampçılık</h3>

<p class="text-gray-600 mb-4">"İz Bırakma" prensipleriyle doğaya zarar vermeden, minimal ekipmanla konforlu kamp sanatı.</p>

Detaylı Bilgi <i data-lucide="chevron-right" class="w-4 h-4"></i>

</span>

</div>

</section>

<h2 class="text-3xl md:text-5xl font-serif font-bold mb-6">Sana Özel Bir Kaçış: Deneyimini Kişiselleştir</h2>

Herkesin doğa ile kurduğu bağ farklıdır. İster sessizlik dolu bir inziva, ister macera dolu bir yürüyüş. Kendi eko-paketini oluştur, ruhuna en iyi gelen rotayı çizelim.

</p>

</div>

<div>

<h4 class="text-xl font-semibold mb-1">Seviyeni Seç</h4>

<p class="text-earth-200 text-sm">Başlangıç, Orta veya İleri Seviye Doğa Deneyimi.</p>

</div>

</div>

<div>

<h4 class="text-xl font-semibold mb-1">Odak Noktanı Belirle</h4>

<p class="text-earth-200 text-sm">Mindfulness, Fotoğrafçılık, Ekolojik Tarım veya Trekking.</p>

</div>

</div>

<div>

<h4 class="text-xl font-semibold mb-1">Süreyi Ayarla</h4>

<p class="text-earth-200 text-sm">Hafta sonu kaçamağı veya bir haftalık derinlemesine inziva.</p>

</div>

Paketimi Oluştur

</button>

</div>

</div>

</section>

<h2 class="text-3xl md:text-4xl font-serif font-bold text-earth-900">Uzman Rehberlik & Ekolojik Saygı</h2>

<p class="mt-4 text-gray-600">Güvenliğiniz ve doğanın korunması bizim önceliğimiz.</p>

</div>

</div>

<h4 class="font-bold text-lg mb-2">Lisanslı Rehberler</h4>

<p class="text-sm text-gray-500">Alanında uzman, ilk yardım sertifikalı doğa profesyonelleri.</p>

</div>

</div>

<h4 class="font-bold text-lg mb-2">Sıfır Atık Politikası</h4>

<p class="text-sm text-gray-500">Doğada ayak izimizden başka hiçbir şey bırakmıyoruz.</p>

</div>

</div>

<h4 class="font-bold text-lg mb-2">Yerel Kalkınma</h4>

<p class="text-sm text-gray-500">Tüm gıdaları ve malzemeleri yerel ekolojik üreticilerden temin ediyoruz.</p>

</div>

</div>

<h4 class="font-bold text-lg mb-2">%100 Güven</h4>

<p class="text-sm text-gray-500">4000+ mutlu katılımcı ve 5 yıldızlı deneyim puanı.</p>

</div>

</section>

<h2 class="text-3xl md:text-4xl font-serif font-bold text-center text-earth-900 mb-12">Dönüşümü Yaşayanlar</h2>

"Plaza hayatının stresinden o kadar bunalmıştım ki... Bu hafta sonu sadece ciğerlerimin değil, ruhumun da nefes aldığını hissettim. Telefonumu bir kez bile elime almadım."

</p>

<div>

<span class="text-xs text-earth-500 font-medium">Yazılım Mühendisi, İstanbul</span>

</div>

"Sadece bir tatil değil, hayata bakış açımı değiştiren bir deneyimdi. Sürdürülebilirlik atölyesinde öğrendiklerimi evimde uygulamaya başladım bile."

</p>

<div>

<h5 class="font-bold text-earth-900">Caner K.</h5>

<span class="text-xs text-earth-500 font-medium">Mimar, İzmir</span>

</div>

"Tek başıma gelmekten çekiniyordum ama buradaki topluluk o kadar samimi ki... Doğada yabancı yok, sadece tanışmadığınız dostlar var."

</p>

<div>

<h5 class="font-bold text-earth-900">Selin A.</h5>

<span class="text-xs text-earth-500 font-medium">Grafik Tasarımcı, Ankara</span>

</div>

</section>

</div>

Sonbahar Dönemi Son Kayıtlar

</span>

Değişim İçin Bekleme,<br>Doğa Seni Çağırıyor

</h2>

Bu mevsime özel ekolojik inziva programımızda <strong>son 4 kontenjan</strong> kaldı. Kendine bir iyilik yap ve beton duvarların arasından çık.

</p>

<div>

<label for="email" class="sr-only">E-posta Adresi</label>

</div>

Yerimi Ayırt

</button>

Spam yok. Sadece huzur ve doğa var. İstediğiniz zaman ayrılabilirsiniz.

</p>

</form>

</div>

</section>

<span class="font-serif text-xl font-bold text-white">EcoRoots</span>

</div>

Doğayla uyumlu, sürdürülebilir ve bilinçli bir yaşam için ilham veren deneyimler tasarlıyoruz.

</p>

</div>

<div>

<h4 class="text-white font-bold mb-4">Keşfet</h4>

<li><a href="#" class="hover:text-white transition">Hakkımızda</a></li>

<li><a href="#" class="hover:text-white transition">Eğitmenler</a></li>

</ul>

</div>

<div>

<h4 class="text-white font-bold mb-4">Politikalar</h4>

<li><a href="#" class="hover:text-white transition">Sürdürülebilirlik İlkesi</a></li>

<li><a href="#" class="hover:text-white transition">Gizlilik Politikası</a></li>

<li><a href="#" class="hover:text-white transition">İptal ve İade</a></li>

</ul>

</div>

<div>

<h4 class="text-white font-bold mb-4">İletişim</h4>

<li class="flex items-center gap-2"><i data-lucide="mail" class="w-4 h-4"></i> merhaba@ecoroots.com</li>

<li class="flex items-center gap-2"><i data-lucide="instagram" class="w-4 h-4"></i> @ecoroots</li>

</ul>

</div>

</div>

</footer>

</button>

// Initialize Lucide Icons

lucide.createIcons();

// Mobile Menu Toggle

const btn = document.getElementById('mobile-menu-btn');

const menu = document.getElementById('mobile-menu');

btn.addEventListener('click', () => {

menu.classList.toggle('hidden');

});

// Intersection Observer for Fade-in Animations

const observerOptions = {

root: null,

rootMargin: '0px',

threshold: 0.1

};

const observer = new IntersectionObserver((entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('visible');

observer.unobserve(entry.target); // Only animate once

}

});

}, observerOptions);

document.querySelectorAll('.fade-in-up').forEach(el => {

observer.observe(el);

});

// Scroll to Top Logic & Navbar Styling on Scroll

const navbar = document.getElementById('navbar');

const toTopBtn = document.getElementById('scrollToTopBtn');

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

navbar.classList.add('shadow-md');

} else {

navbar.classList.remove('shadow-md');

}

if (window.scrollY > 500) {

toTopBtn.classList.remove('opacity-0', 'invisible');

} else {

toTopBtn.classList.add('opacity-0', 'invisible');

}

});

toTopBtn.addEventListener('click', () => {

window.scrollTo({ top: 0, behavior: 'smooth' });

});

</script>

</body>

</html>

Preview

Open Advanced Editor

HTML CSS JS

<!DOCTYPE html>

<head>

<title>Doğaya Dönüş: Sürdürülebilir Yaşam ve Ekolojik Keşif Deneyimi</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

serif: ['Merriweather', 'serif'],

colors: {

earth: {

50: '#f4f7f4',

100: '#e3ebe3',

200: '#c5d8c5',

300: '#9cb99c',

400: '#759775',

500: '#567b56', // Ana yeşil

600: '#426142',

700: '#364e36',

800: '#2d3f2d',

900: '#263526',

sand: {

100: '#fdfcf8',

200: '#f3efe6',

300: '#e6dec8',

800: '#5c5240',

}

</script>

<style>

/* Custom Animations */

.fade-in-up {

opacity: 0;

transform: translateY(30px);

transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}

.fade-in-up.visible {

opacity: 1;

transform: translateY(0);

}

.hero-overlay {

background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));

}

/* Smooth image loading */

img {

transition: opacity 0.5s ease-in-out;

}

</style>

</head>

<span class="font-serif text-xl font-bold text-earth-800 tracking-tight">EcoRoots</span>

</div>

<a href="#kesif" class="text-earth-700 hover:text-earth-500 transition font-medium">Keşfet</a>

<a href="#deneyimler" class="text-earth-700 hover:text-earth-500 transition font-medium">Deneyimler</a>

<a href="#hikayeler" class="text-earth-700 hover:text-earth-500 transition font-medium">Hikayeler</a>

Yolculuğa Başla

</a>

</div>

</button>

</div>

<a href="#kesif" class="block py-3 text-earth-700 font-medium">Keşfet</a>

<a href="#deneyimler" class="block py-3 text-earth-700 font-medium">Deneyimler</a>

<a href="#hikayeler" class="block py-3 text-earth-700 font-medium">Hikayeler</a>

<a href="#katil" class="block mt-4 py-3 bg-earth-600 text-white rounded-lg">Yolculuğa Başla</a>

</div>

</nav>

<img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop"

alt="Sisin içinde yemyeşil bir orman manzarası"

class="w-full h-full object-cover">

</div>

Doğaya Dönüş Hareketi

</div>

Özüne Dön: Şehrin Gürültüsünden Uzaklaş, Doğanın Sesini Duy

</h1>

Modern hayatın hızı ruhunu yorduysa, şimdi durma vakti. Doğayla yeniden bağ kurarak zihinsel dinginliğe ve sürdürülebilir bir huzura kapı arala.

</p>

Yolculuğa Başla

</a>

Filmi İzle

</a>

</div>

</div>

</header>

<img src="https://images.unsplash.com/photo-1504829857797-ddff29c27927?q=80&w=2000&auto=format&fit=crop"

alt="Keşfedilmemiş orman patikası"

class="relative rounded-2xl shadow-2xl w-full object-cover h-[500px]">

</div>

<span class="text-earth-600 font-semibold tracking-wider uppercase text-sm">Gizli Rotalar</span>

Haritalarda Görünmeyen Cennetleri Keşfet

</h2>

</p>

</div>

<span class="text-gray-700">İzole kamp alanları ve sessiz vadiler.</span>

</li>

</div>

<span class="text-gray-700">Şehrin hava kirliliğinden uzak, %100 temiz oksijen.</span>

</li>

</div>

<span class="text-gray-700">Işık kirliliğinden arınmış gökyüzü gözlemleri.</span>

</li>

</ul>

Rotayı İncele <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>

</a>

</div>

</section>

<span class="text-earth-600 font-semibold tracking-wider uppercase text-sm">Aktiviteler</span>

Doğanın Ritmini Hisset

</h2>

Sadece izleyici olma, doğanın bir parçası ol. Bedenini ve zihnini harekete geçirecek sürdürülebilir deneyimler.

</p>

</div>

</div>

<h3 class="text-xl font-bold text-earth-900 mb-3">Orman Banyosu (Shinrin-Yoku)</h3>

<p class="text-gray-600 mb-4">Ağaçların yaydığı fitonsitleri soluyarak bağışıklık sisteminizi güçlendirin ve stresi azaltın.</p>

Detaylı Bilgi <i data-lucide="chevron-right" class="w-4 h-4"></i>

</span>

</div>

</div>

<h3 class="text-xl font-bold text-earth-900 mb-3">Perma-Kültür Atölyesi</h3>

<p class="text-gray-600 mb-4">Toprağa dokunun. Kendi gıdanızı yetiştirmenin temellerini ve sürdürülebilir tarımı öğrenin.</p>

Detaylı Bilgi <i data-lucide="chevron-right" class="w-4 h-4"></i>

</span>

</div>

</div>

<h3 class="text-xl font-bold text-earth-900 mb-3">Bilinçli Kampçılık</h3>

<p class="text-gray-600 mb-4">"İz Bırakma" prensipleriyle doğaya zarar vermeden, minimal ekipmanla konforlu kamp sanatı.</p>

Detaylı Bilgi <i data-lucide="chevron-right" class="w-4 h-4"></i>

</span>

</div>

</section>

<h2 class="text-3xl md:text-5xl font-serif font-bold mb-6">Sana Özel Bir Kaçış: Deneyimini Kişiselleştir</h2>

Herkesin doğa ile kurduğu bağ farklıdır. İster sessizlik dolu bir inziva, ister macera dolu bir yürüyüş. Kendi eko-paketini oluştur, ruhuna en iyi gelen rotayı çizelim.

</p>

</div>

<div>

<h4 class="text-xl font-semibold mb-1">Seviyeni Seç</h4>

<p class="text-earth-200 text-sm">Başlangıç, Orta veya İleri Seviye Doğa Deneyimi.</p>

</div>

</div>

<div>

<h4 class="text-xl font-semibold mb-1">Odak Noktanı Belirle</h4>

<p class="text-earth-200 text-sm">Mindfulness, Fotoğrafçılık, Ekolojik Tarım veya Trekking.</p>

</div>

</div>

<div>

<h4 class="text-xl font-semibold mb-1">Süreyi Ayarla</h4>

<p class="text-earth-200 text-sm">Hafta sonu kaçamağı veya bir haftalık derinlemesine inziva.</p>

</div>

Paketimi Oluştur

</button>

</div>

</div>

</section>

<h2 class="text-3xl md:text-4xl font-serif font-bold text-earth-900">Uzman Rehberlik & Ekolojik Saygı</h2>

<p class="mt-4 text-gray-600">Güvenliğiniz ve doğanın korunması bizim önceliğimiz.</p>

</div>

</div>

<h4 class="font-bold text-lg mb-2">Lisanslı Rehberler</h4>

<p class="text-sm text-gray-500">Alanında uzman, ilk yardım sertifikalı doğa profesyonelleri.</p>

</div>

</div>

<h4 class="font-bold text-lg mb-2">Sıfır Atık Politikası</h4>

<p class="text-sm text-gray-500">Doğada ayak izimizden başka hiçbir şey bırakmıyoruz.</p>

</div>

</div>

<h4 class="font-bold text-lg mb-2">Yerel Kalkınma</h4>

<p class="text-sm text-gray-500">Tüm gıdaları ve malzemeleri yerel ekolojik üreticilerden temin ediyoruz.</p>

</div>

</div>

<h4 class="font-bold text-lg mb-2">%100 Güven</h4>

<p class="text-sm text-gray-500">4000+ mutlu katılımcı ve 5 yıldızlı deneyim puanı.</p>

</div>

</section>

<h2 class="text-3xl md:text-4xl font-serif font-bold text-center text-earth-900 mb-12">Dönüşümü Yaşayanlar</h2>

"Plaza hayatının stresinden o kadar bunalmıştım ki... Bu hafta sonu sadece ciğerlerimin değil, ruhumun da nefes aldığını hissettim. Telefonumu bir kez bile elime almadım."

</p>

<div>

<span class="text-xs text-earth-500 font-medium">Yazılım Mühendisi, İstanbul</span>

</div>

"Sadece bir tatil değil, hayata bakış açımı değiştiren bir deneyimdi. Sürdürülebilirlik atölyesinde öğrendiklerimi evimde uygulamaya başladım bile."

</p>

<div>

<h5 class="font-bold text-earth-900">Caner K.</h5>

<span class="text-xs text-earth-500 font-medium">Mimar, İzmir</span>

</div>

"Tek başıma gelmekten çekiniyordum ama buradaki topluluk o kadar samimi ki... Doğada yabancı yok, sadece tanışmadığınız dostlar var."

</p>

<div>

<h5 class="font-bold text-earth-900">Selin A.</h5>

<span class="text-xs text-earth-500 font-medium">Grafik Tasarımcı, Ankara</span>

</div>

</section>

</div>

Sonbahar Dönemi Son Kayıtlar

</span>

Değişim İçin Bekleme,<br>Doğa Seni Çağırıyor

</h2>

Bu mevsime özel ekolojik inziva programımızda <strong>son 4 kontenjan</strong> kaldı. Kendine bir iyilik yap ve beton duvarların arasından çık.

</p>

<div>

<label for="email" class="sr-only">E-posta Adresi</label>

</div>

Yerimi Ayırt

</button>

Spam yok. Sadece huzur ve doğa var. İstediğiniz zaman ayrılabilirsiniz.

</p>

</form>

</div>

</section>

<span class="font-serif text-xl font-bold text-white">EcoRoots</span>

</div>

Doğayla uyumlu, sürdürülebilir ve bilinçli bir yaşam için ilham veren deneyimler tasarlıyoruz.

</p>

</div>

<div>

<h4 class="text-white font-bold mb-4">Keşfet</h4>

<li><a href="#" class="hover:text-white transition">Hakkımızda</a></li>

<li><a href="#" class="hover:text-white transition">Eğitmenler</a></li>

</ul>

</div>

<div>

<h4 class="text-white font-bold mb-4">Politikalar</h4>

<li><a href="#" class="hover:text-white transition">Sürdürülebilirlik İlkesi</a></li>

<li><a href="#" class="hover:text-white transition">Gizlilik Politikası</a></li>

<li><a href="#" class="hover:text-white transition">İptal ve İade</a></li>

</ul>

</div>

<div>

<h4 class="text-white font-bold mb-4">İletişim</h4>

<li class="flex items-center gap-2"><i data-lucide="mail" class="w-4 h-4"></i> merhaba@ecoroots.com</li>

<li class="flex items-center gap-2"><i data-lucide="instagram" class="w-4 h-4"></i> @ecoroots</li>

</ul>

</div>

</div>

</footer>

</button>

// Initialize Lucide Icons

lucide.createIcons();

// Mobile Menu Toggle

const btn = document.getElementById('mobile-menu-btn');

const menu = document.getElementById('mobile-menu');

btn.addEventListener('click', () => {

menu.classList.toggle('hidden');

});

// Intersection Observer for Fade-in Animations

const observerOptions = {

root: null,

rootMargin: '0px',

threshold: 0.1

};

const observer = new IntersectionObserver((entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('visible');

observer.unobserve(entry.target); // Only animate once

}

});

}, observerOptions);

document.querySelectorAll('.fade-in-up').forEach(el => {

observer.observe(el);

});

// Scroll to Top Logic & Navbar Styling on Scroll

const navbar = document.getElementById('navbar');

const toTopBtn = document.getElementById('scrollToTopBtn');

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

navbar.classList.add('shadow-md');

} else {

navbar.classList.remove('shadow-md');

}

if (window.scrollY > 500) {

toTopBtn.classList.remove('opacity-0', 'invisible');

} else {

toTopBtn.classList.add('opacity-0', 'invisible');

}

});

toTopBtn.addEventListener('click', () => {

window.scrollTo({ top: 0, behavior: 'smooth' });

});

</script>

</body>

</html>

Preview

Validating your code, please wait...