Webleb - Extraits de Code - Modèle HTML pour un mode de vie durable et une retraite en pleine nature

HTML

<!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>

Modèle HTML pour un mode de vie durable et une retraite en pleine nature

Recommandé

Un code de Metehan

Un code de Farah

Boîte d'inscription de connexion 3D HTML CSS Design

HTML

CSS

JS

Recommandé

Un code de Metehan

Un code de Farah

Boîte d'inscription de connexion 3D HTML CSS Design

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS