Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Doğa İle Uyum | Sürdürülebilir Yaşam</title>

tailwind.config = {

theme: {

extend: {

colors: {

primary: {

100: '#d4e6d4',

200: '#a9cdac',

300: '#7fb483',

400: '#549b5b',

500: '#298232',

600: '#216828',

700: '#194e1e',

800: '#103414',

900: '#081a0a',

},

secondary: {

100: '#f0e6d4',

200: '#e1cda9',

300: '#d2b47f',

400: '#c39b54',

500: '#b48229',

600: '#906821',

700: '#6c4e19',

800: '#483410',

900: '#241a08',

}

},

fontFamily: {

sans: ['"Poppins"', 'sans-serif'],

serif: ['"Playfair Display"', 'serif'],

},

animation: {

'float': 'float 6s ease-in-out infinite',

'fade-in': 'fadeIn 1.5s ease-in',

'slide-up': 'slideUp 0.8s ease-out',

'bounce-slow': 'bounce 2s infinite',

},

keyframes: {

float: {

'0%, 100%': { transform: 'translateY(0px)' },

'50%': { transform: 'translateY(-20px)' },

},

fadeIn: {

'0%': { opacity: '0' },

'100%': { opacity: '1' },

},

slideUp: {

'0%': { transform: 'translateY(100px)', opacity: '0' },

'100%': { transform: 'translateY(0)', opacity: '1' },

},

}

</script>

<style>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

.hero-bg {

background: linear-gradient(135deg, rgba(41, 130, 50, 0.8), rgba(180, 130, 41, 0.6)),

url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2560&q=80');

background-size: cover;

background-position: center;

background-attachment: fixed;

}

.service-card {

transition: all 0.3s ease;

}

.service-card:hover {

transform: translateY(-10px);

box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

}

.gallery-item {

position: relative;

overflow: hidden;

border-radius: 1rem;

}

.gallery-item img {

transition: transform 0.5s ease;

}

.gallery-item:hover img {

transform: scale(1.1);

}

.navbar-scrolled {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

}

.video-container {

position: relative;

width: 100%;

height: 0;

padding-bottom: 56.25%;

}

.video-container iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.parallax {

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.leaf-pattern {

background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z' fill='%23298232' fill-opacity='0.05'/%3E%3C/svg%3E");

}

</style>

</head>

</a>

</div>

<a href="#home" class="nav-link px-4 py-2 rounded-lg text-sm font-medium hover:text-primary-500 hover:bg-primary-50 transition duration-300">Ana Sayfa</a>

<a href="#about" class="nav-link px-4 py-2 rounded-lg text-sm font-medium hover:text-primary-500 hover:bg-primary-50 transition duration-300">Hakkımızda</a>

<a href="#services" class="nav-link px-4 py-2 rounded-lg text-sm font-medium hover:text-primary-500 hover:bg-primary-50 transition duration-300">Hizmetler</a>

<a href="#gallery" class="nav-link px-4 py-2 rounded-lg text-sm font-medium hover:text-primary-500 hover:bg-primary-50 transition duration-300">Galeri</a>

<a href="#contact" class="nav-link px-4 py-2 rounded-lg text-sm font-medium hover:text-primary-500 hover:bg-primary-50 transition duration-300">İletişim</a>

</div>

</svg>

</button>

</div>

<a href="#home" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:text-primary-500 transition duration-300">Ana Sayfa</a>

<a href="#about" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:text-primary-500 transition duration-300">Hakkımızda</a>

<a href="#services" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:text-primary-500 transition duration-300">Hizmetler</a>

<a href="#gallery" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:text-primary-500 transition duration-300">Galeri</a>

<a href="#contact" class="nav-link block px-3 py-2 rounded-md text-base font-medium hover:text-primary-500 transition duration-300">İletişim</a>

</div>

</nav>

</header>

<span class="block">Doğa ile Uyum İçinde</span>

<span class="block text-primary-200 mt-4">Yaşayın</span>

</h1>

Sürdürülebilir yaşam için birlikte çalışalım. Doğanın güzelliklerini keşfedin ve gelecek nesillere temiz bir dünya bırakın.

</p>

<i class="fas fa-leaf mr-2"></i>Hizmetlerimizi Keşfedin

</a>

<i class="fas fa-play mr-2"></i>Daha Fazla Bilgi

</a>

</div>

</a>

</div>

</section>

Doğa İçin Tutkuyla Çalışıyoruz

</h2>

2010 yılından beri doğa sevgisini herkese aşılamak için çalışıyoruz. Sürdürülebilir yaşam felsefemizle, doğanın korunması ve gelecek nesillere temiz bir çevre bırakılması için var gücümüzle mücadele ediyoruz.

</p>

</div>

</div>

<h3 class="text-xl font-semibold text-gray-900 mb-2">Doğa Koruma</h3>

<p class="text-gray-600">Yıllardır ülkemizin doğal güzelliklerini korumak için çalışıyoruz. Her bir ağaç, her bir canlı gelecek nesiller için önemlidir.</p>

</div>

</div>

<h3 class="text-xl font-semibold text-gray-900 mb-2">Topluluk</h3>

<p class="text-gray-600">15.000'den fazla gönüllümüzle birlikte çalışıyoruz. Doğayı seven insanlar olarak büyük bir aileyiz.</p>

</div>

</div>

<h3 class="text-xl font-semibold text-gray-900 mb-2">Eğitim</h3>

<p class="text-gray-600">Okullarda, üniversitelerde ve halka açık etkinliklerde doğa bilinci eğitimleri veriyoruz.</p>

</div>

</div>

<h3 class="text-xl font-semibold text-gray-900 mb-2">Sürdürülebilirlik</h3>

<p class="text-gray-600">Gelecek nesillere daha yaşanabilir bir dünya bırakmak için sürdürülebilir yaşam projeleri geliştiriyoruz.</p>

</div>

<div>

<h3 class="text-3xl font-bold text-gray-900 mb-4">Doğa Belgeseli</h3>

<p class="text-gray-600 mb-6">Türkiye'nin en güzel doğal alanlarını keşfedin. Bu belgesel, ülkemizin eşsiz biyoçeşitliliğini ve korunması gereken değerli ekosistemlerini anlatıyor.</p>

<span>15 dakika</span>

</div>

<span>12,450 görüntülenme</span>

</div>

</div>

</div>

<div class="uppercase tracking-wide text-sm text-primary-500 font-semibold">Hikayemiz</div>

<h3 class="mt-2 text-3xl leading-tight font-bold text-gray-900">Doğaya Saygı Bizim İçin Bir Yaşam Tarzı</h3>

2010 yılında bir grup doğa sever olarak başladığımız bu yolculukta, bugün büyük bir aile olduk. Amacımız doğanın güzelliklerini korumak ve bu bilinci yaygınlaştırmak. Her geçen gün büyüyen topluluğumuzla birlikte, sürdürülebilir bir gelecek için çalışmaya devam ediyoruz.

</p>

</div>

<p class="text-lg font-medium text-gray-900">Mehmet Kaya</p>

<p class="text-sm text-gray-500">Kurucu & Doğa Rehberi</p>

</div>

</section>

Size Özel Doğa Deneyimleri

</h2>

Doğanın büyüsünü keşfetmek için profesyonel rehberler eşliğinde unutulmaz deneyimler sunuyoruz. Her yaştan katılımcı için özel programlar.

</p>

</div>

</div>

<h3 class="text-xl font-bold text-gray-900 mb-2">Doğa Turları</h3>

<p class="text-gray-600 mb-4">Uzman rehberler eşliğinde ülkemizin en güzel doğa parkurlarında unutulmaz yürüyüşler. Karadeniz ormanlarından Akdeniz kıyılarına kadar.</p>

<span class="text-primary-600 font-semibold">₺299'dan başlayan fiyatlar</span>

<a href="#" class="text-primary-500 hover:text-primary-600 font-medium">Detaylar →</a>

</div>

</div>

Mete'nin bir kodu

Recommended

A Code by Metehan

Animated Password Field

Canvas: Heart Particle Flow

HTML

CSS

JS

Recommended

A Code by Metehan

Animated Password Field

Canvas: Heart Particle Flow

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS