Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>WILD & RARE | Nesli Tükenmekte Olan Türler</title>

<style>

:root {

--bg-dark: #0a0a0a;

--bg-black: #050505;

--text-light: #f5f5f5;

--text-gray: #b0b0b0;

--accent-gold: #d4b16a;

--accent-gold-light: #e6c98c;

--accent-danger: #e74c3c;

--accent-warning: #f39c12;

--accent-success: #2ecc71;

--transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);

--transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

html {

scroll-behavior: smooth;

}

body {

background-color: var(--bg-black);

color: var(--text-light);

font-family: 'Manrope', sans-serif;

overflow-x: hidden;

position: relative;

}

/* Particle Background */

#particles-js {

position: fixed;

width: 100%;

height: 100%;

z-index: 0;

}

/* Loading Screen */

#loading-screen {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: var(--bg-black);

z-index: 9999;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.loader {

width: 60px;

height: 60px;

position: relative;

margin-bottom: 30px;

}

.loader-circle {

position: absolute;

width: 100%;

height: 100%;

border: 3px solid transparent;

border-top-color: var(--accent-gold);

border-radius: 50%;

animation: spin 1s linear infinite;

}

.loader-circle:nth-child(2) {

border: 3px solid transparent;

border-bottom-color: var(--accent-gold);

animation: spin 1.5s linear infinite reverse;

}

.loading-text {

font-family: 'Cinzel', serif;

font-size: 1.2rem;

letter-spacing: 0.3em;

color: var(--text-gray);

text-align: center;

margin-top: 20px;

}

.loading-progress {

width: 200px;

height: 2px;

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

margin-top: 20px;

overflow: hidden;

border-radius: 2px;

}

.loading-progress-bar {

height: 100%;

width: 0%;

background: linear-gradient(90deg, var(--accent-gold), var(--accent-warning));

transition: width 0.3s ease;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

/* Header */

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

padding: 2rem 4rem;

display: flex;

justify-content: space-between;

align-items: center;

background: rgba(5, 5, 5, 0.9);

backdrop-filter: blur(10px);

transition: transform 0.6s var(--transition-smooth);

}

.logo {

font-family: 'Cinzel', serif;

font-size: 1.8rem;

font-weight: 700;

letter-spacing: 0.1em;

color: var(--text-light);

text-decoration: none;

position: relative;

}

.logo::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 100%;

height: 2px;

background: var(--accent-gold);

transform: scaleX(0);

transition: transform 0.6s var(--transition-smooth);

}

.logo:hover::after {

transform: scaleX(1);

}

.logo span {

color: var(--accent-gold);

font-weight: 400;

}

/* Navigation */

.nav-links {

display: flex;

gap: 3rem;

list-style: none;

}

.nav-links a {

color: var(--text-light);

text-decoration: none;

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 0.1em;

font-weight: 600;

position: relative;

padding: 0.5rem 0;

transition: color 0.3s ease;

}

.nav-links a::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 1px;

background: var(--accent-gold);

transform: scaleX(0);

transition: transform 0.3s ease;

}

.nav-links a:hover {

color: var(--accent-gold);

}

.nav-links a:hover::after {

transform: scaleX(1);

}

.btn-donate {

padding: 0.8rem 2rem;

background: linear-gradient(135deg, var(--accent-gold), #b89446);

color: var(--bg-black);

border: none;

border-radius: 30px;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.1em;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 20px rgba(212, 177, 106, 0.3);

}

.btn-donate:hover {

transform: translateY(-2px);

box-shadow: 0 6px 25px rgba(212, 177, 106, 0.4);

}

/* Hero Section */

.hero {

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

position: relative;

overflow: hidden;

}

#canvas-container {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

}

.hero-content {

position: relative;

z-index: 2;

text-align: center;

max-width: 1200px;

padding: 0 2rem;

}

.hero-subtitle {

font-family: 'Cinzel', serif;

font-size: 1.2rem;

color: var(--accent-gold);

letter-spacing: 0.3em;

margin-bottom: 2rem;

text-transform: uppercase;

opacity: 0;

transform: translateY(30px);

}

.hero-title {

font-family: 'Cinzel', serif;

font-size: clamp(3rem, 8vw, 8rem);

font-weight: 400;

line-height: 1;

margin-bottom: 2rem;

background: linear-gradient(to right, #fff, var(--accent-gold-light));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

opacity: 0;

transform: translateY(50px);

}

.hero-description {

font-size: 1.2rem;

line-height: 1.8;

color: var(--text-gray);

max-width: 600px;

margin: 0 auto 3rem;

opacity: 0;

transform: translateY(30px);

}

.hero-scroll {

position: absolute;

bottom: 3rem;

left: 50%;

transform: translateX(-50%);

color: var(--text-gray);

font-size: 0.9rem;

letter-spacing: 0.2em;

text-transform: uppercase;

z-index: 2;

opacity: 0;

}

.hero-scroll::after {

content: '';

position: absolute;

bottom: -20px;

left: 50%;

transform: translateX(-50%);

width: 1px;

height: 40px;

background: var(--text-gray);

animation: scrollPulse 2s infinite;

}

@keyframes scrollPulse {

0%, 100% { transform: translateX(-50) scaleY(1); }

50% { transform: translateX(-50%) scaleY(0.5); }

}

/* Animal Cards Section */

.animals-section {

padding: 8rem 4rem;

position: relative;

z-index: 1;

}

.section-title {

font-family: 'Cinzel', serif;

font-size: 3rem;

text-align: center;

margin-bottom: 5rem;

color: var(--text-light);

}

.animals-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 3rem;

max-width: 1400px;

margin: 0 auto;

}

.animal-card {

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

border-radius: 20px;

overflow: hidden;

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.1);

transition: all 0.4s var(--transition-smooth);

opacity: 0;

transform: translateY(50px);

}

.animal-card:hover {

transform: translateY(-10px);

border-color: var(--accent-gold);

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}

.animal-image {

width: 100%;

height: 250px;

object-fit: cover;

transition: transform 0.6s var(--transition-smooth);

}

.animal-card:hover .animal-image {

transform: scale(1.05);

}

.animal-content {

padding: 2rem;

}

.animal-name {

font-family: 'Cinzel', serif;

font-size: 1.8rem;

margin-bottom: 1rem;

color: var(--text-light);

}

.animal-status {

display: inline-flex;

align-items: center;

gap: 0.5rem;

padding: 0.3rem 1rem;

border-radius: 20px;

font-size: 0.8rem;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.1em;

margin-bottom: 1rem;

}

.animal-description {

color: var(--text-gray);

line-height: 1.6;

margin-bottom: 1.5rem;

}

.animal-learn-more {

color: var(--accent-gold);

text-decoration: none;

font-weight: 600;

display: inline-flex;

align-items: center;

gap: 0.5rem;

transition: gap 0.3s ease;

}

.animal-learn-more:hover {

gap: 1rem;

}

/* Stats Section */

.stats-section {

padding: 6rem 4rem;

background: rgba(212, 177, 106, 0.05);

position: relative;

}

.stats-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 3rem;

max-width: 1200px;

margin: 0 auto;

}

.stat-item {

text-align: center;

}

.stat-number {

font-family: 'Cinzel', serif;

font-size: 3.5rem;

color: var(--accent-gold);

margin-bottom: 1rem;

}

.stat-label {

color: var(--text-gray);

text-transform: uppercase;

letter-spacing: 0.1em;

font-size: 0.9rem;

}

/* Footer */

footer {

padding: 4rem;

background: var(--bg-dark);

border-top: 1px solid rgba(255, 255, 255, 0.1);

}

.footer-content {

max-width: 1200px;

margin: 0 auto;

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 4rem;

}

.footer-logo {

font-family: 'Cinzel', serif;

font-size: 2rem;

color: var(--text-light);

margin-bottom: 1rem;

}

.footer-description {

color: var(--text-gray);

line-height: 1.6;

}

.footer-links h3 {

font-family: 'Cinzel', serif;

font-size: 1.2rem;

margin-bottom: 1.5rem;

color: var(--text-light);

}

.footer-links ul {

list-style: none;

}

.footer-links li {

margin-bottom: 0.8rem;

}

.footer-links a {

color: var(--text-gray);

text-decoration: none;

transition: color 0.3s ease;

}

.footer-links a:hover {

color: var(--accent-gold);

}

.footer-newsletter input {

width: 100%;

padding: 0.8rem;

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

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 5px;

color: var(--text-light);

margin-bottom: 1rem;

}

.copyright {

text-align: center;

padding-top: 3rem;

margin-top: 3rem;

border-top: 1px solid rgba(255, 255, 255, 0.1);

color: var(--text-gray);

font-size: 0.9rem;

}

/* Mobile Navigation */

.mobile-menu-btn {

display: none;

flex-direction: column;

gap: 6px;

background: none;

border: none;

cursor: pointer;

z-index: 1001;

}

.mobile-menu-btn span {

width: 25px;

height: 2px;

background: var(--text-light);

transition: 0.3s;

}

@media (max-width: 1024px) {

header {

padding: 1.5rem 2rem;

}

.nav-links {

position: fixed;

top: 0;

right: -100%;

width: 300px;

height: 100vh;

background: var(--bg-dark);

flex-direction: column;

padding: 6rem 2rem;

transition: right 0.4s var(--transition-smooth);

z-index: 1000;

}

.nav-links.active {

right: 0;

}

.mobile-menu-btn {

display: flex;

}

.stats-grid {

grid-template-columns: repeat(2, 1fr);

}

.footer-content {

grid-template-columns: 1fr;

gap: 3rem;

}

@media (max-width: 768px) {

.animals-section {

padding: 4rem 2rem;

}

.section-title {

font-size: 2.5rem;

}

.stats-section {

padding: 4rem 2rem;

}

.stats-grid {

grid-template-columns: 1fr;

}

footer {

padding: 3rem 2rem;

}

/* Animations */

.fade-in {

animation: fadeIn 1s var(--transition-smooth) forwards;

}

@keyframes fadeIn {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

/* Custom Scrollbar */

::-webkit-scrollbar {

width: 10px;

}

::-webkit-scrollbar-track {

background: var(--bg-dark);

}

::-webkit-scrollbar-thumb {

background: var(--accent-gold);

border-radius: 5px;

}

::-webkit-scrollbar-thumb:hover {

background: var(--accent-gold-light);

}

</style>

</head>

<body>

</div>

</div>

</button>

<nav>

<li><a href="#home">Ana Sayfa</a></li>

<li><a href="#animals">Hayvanlar</a></li>

<li><a href="#stats">İstatistikler</a></li>

<li><a href="#about">Hakkımızda</a></li>

<li><a href="#contact">İletişim</a></li>

<li><button class="btn-donate">Bağış Yap</button></li>

</ul>

</nav>

</header>

<h2 class="hero-subtitle">Doğanın En Nadir Hazineleri</h2>

<h1 class="hero-title">Nesli Tükenmekte<br>Olan Türler</h1>

Dünyanın en nadir ve tehlike altındaki türlerini keşfedin.

Doğa mirasını koruma yolculuğumuza katılın ve gelecek nesillere

yaşanabilir bir dünya bırakalım.

</p>

<button class="btn-donate">Koruma Çalışmalarına Destek Ol</button>

</div>

<div class="hero-scroll">Keşfet</div>

</section>

<h2 class="section-title">Tehlike Altındaki Türler</h2>

</div>

</section>

<div class="stat-label">Tehlike Altındaki Tür</div>

</div>

<div class="stat-label">Yılda Yok Olan Tür (%)</div>

</div>

<div class="stat-label">Koruma Programı</div>

</div>

<div class="stat-label">Kurtarılan Tür</div>

</div>

</section>

Doğa mirasını korumak ve nesli tükenmekte olan türleri

kurtarmak için çalışan küresel bir koruma organizasyonuyuz.

</p>

</div>

<h3>Hızlı Bağlantılar</h3>

<ul>

<li><a href="#home">Ana Sayfa</a></li>

<li><a href="#animals">Hayvanlar</a></li>

<li><a href="#stats">İstatistikler</a></li>

<li><a href="#about">Hakkımızda</a></li>

<li><a href="#contact">İletişim</a></li>

</ul>

</div>

<h3>Bültene Abone Ol</h3>

<p>Koruma çalışmalarımızdan haberdar olun.</p>

<button class="btn-donate">Abone Ol</button>

</div>

</div>

</footer>

// Initialize Three.js Scene

let scene, camera, renderer, controls;

let animals = [

{

status: "Tehlike Altında",

statusColor: "#e74c3c",

description: "Dünyanın en büyük kedi türü. Rusya'nın uzak doğusundaki huş ormanlarında yaşar.",

image: "https://images.unsplash.com/photo-1591824438708-ce405f36ba3d?w=800&auto=format&fit=crop",

population: "~600"

},

{

status: "Hassas Tür",

statusColor: "#f39c12",

description: "Arktik buzulların kralları. İklim değişikliği nedeniyle tehdit altındalar.",

image: "https://images.unsplash.com/photo-1589656966895-2f33e7653819?w=800&auto=format&fit=crop",

population: "~26,000"

},

{

status: "Kritik Tehlikede",

statusColor: "#c0392b",

description: "Dünyanın en nadir büyük kedisi. Vahşi doğada sadece 100 civarında birey kaldı.",

image: "https://images.unsplash.com/photo-1629814484394-1e0e5699411d?w-800&auto=format&fit=crop",

population: "~100"

},

{

status: "Tehlike Altında",

statusColor: "#e74c3c",

description: "Sadece Hindistan'daki Gir Ormanı'nda küçük bir popülasyon olarak hayatta kalıyor.",

image: "https://images.unsplash.com/photo-1614027164847-1b28cfe1df60?w=800&auto=format&fit=crop",

population: "~670"

}

];

// Initialize Three.js

function initThreeJS() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({

alpha: true,

antialias: true

});

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

document.getElementById('canvas-container').appendChild(renderer.domElement);

// Add subtle background animation

const geometry = new THREE.PlaneGeometry(2, 2);

const material = new THREE.ShaderMaterial({

uniforms: {

time: { value: 0.0 }

},

vertexShader: `

varying vec2 vUv;

void main() {

vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

}

`,

fragmentShader: `

uniform float time;

varying vec2 vUv;

void main() {

vec2 uv = vUv * 2.0 - 1.0;

float d = length(uv);

float c = smoothstep(0.5, 0.0, d);

vec3 color = mix(vec3(0.05, 0.04, 0.03), vec3(0.08, 0.07, 0.06), c);

gl_FragColor = vec4(color, 1.0);

}

`

});

const plane = new THREE.Mesh(geometry, material);

scene.add(plane);

camera.position.z = 1;

// Animation loop

function animate() {

requestAnimationFrame(animate);

material.uniforms.time.value += 0.01;

renderer.render(scene, camera);

}

animate();

// Handle window resize

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

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

}

// Initialize Particles.js

function initParticles() {

particlesJS("particles-js", {

particles: {

number: { value: 80, density: { enable: true, value_area: 800 } },

color: { value: "#d4b16a" },

shape: { type: "circle" },

opacity: { value: 0.3, random: true },

size: { value: 3, random: true },

line_linked: {

enable: true,

distance: 150,

color: "#d4b16a",

opacity: 0.1,

width: 1

},

move: {

enable: true,

speed: 1,

direction: "none",

random: true,

straight: false,

out_mode: "out",

bounce: false

}

},

interactivity: {

detect_on: "canvas",

events: {

onhover: { enable: true, mode: "repulse" },

onclick: { enable: true, mode: "push" }

}

});

}

// Loading animation

function initLoading() {

let progress = 0;

const progressBar = document.querySelector('.loading-progress-bar');

const loadingScreen = document.getElementById('loading-screen');

const interval = setInterval(() => {

progress += Math.random() * 15;

if (progress > 100) progress = 100;

progressBar.style.width = progress + '%';

if (progress >= 100) {

clearInterval(interval);

setTimeout(() => {

gsap.to(loadingScreen, {

opacity: 0,

duration: 0.8,

onComplete: () => {

loadingScreen.style.display = 'none';

initAnimations();

}

});

}, 500);

}

}, 100);

}

// Initialize animations

function initAnimations() {

// Hero section animations

gsap.from('.hero-subtitle', {

duration: 1,

y: 30,

opacity: 0,

delay: 0.5

});

gsap.from('.hero-title', {

duration: 1.2,

y: 50,

opacity: 0,

delay: 0.8

});

gsap.from('.hero-description', {

duration: 1,

y: 30,

opacity: 0,

delay: 1.2

});

gsap.from('.hero-scroll', {

duration: 1,

opacity: 0,

delay: 1.8

});

// Animate animal cards

document.querySelectorAll('.animal-card').forEach((card, index) => {

gsap.from(card, {

scrollTrigger: {

trigger: card,

start: 'top 80%'

},

duration: 1,

y: 50,

opacity: 0,

delay: index * 0.1

});

// Animate stats

document.querySelectorAll('.stat-number').forEach(stat => {

const target = parseInt(stat.getAttribute('data-count'));

const duration = 2;

const steps = 60;

const increment = target / (duration * steps);

let current = 0;

const timer = setInterval(() => {

current += increment;

if (current >= target) {

current = target;

clearInterval(timer);

}

stat.textContent = Math.floor(current);

}, 1000 / steps);

});

}

// Populate animal cards

function populateAnimalCards() {

const grid = document.querySelector('.animals-grid');

animals.forEach(animal => {

const card = document.createElement('div');

card.className = 'animal-card fade-in';

card.innerHTML = `

<h3 class="animal-name">${animal.name}</h3>

${animal.status}

</div>

<p class="animal-description">${animal.description}</p>

Kalan Popülasyon: ${animal.population}

</p>

Daha Fazla Bilgi

</svg>

</a>

</div>

`;

grid.appendChild(card);

});

}

// Mobile menu toggle

function initMobileMenu() {

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

const navLinks = document.querySelector('.nav-links');

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

navLinks.classList.toggle('active');

menuBtn.classList.toggle('active');

});

// Close menu when clicking links

document.querySelectorAll('.nav-links a').forEach(link => {

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

navLinks.classList.remove('active');

menuBtn.classList.remove('active');

});

}

// Smooth scroll

function initSmoothScroll() {

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function(e) {

e.preventDefault();

const target = document.querySelector(this.getAttribute('href'));

if (target) {

window.scrollTo({

top: target.offsetTop - 80,

behavior: 'smooth'

});

}

});

}

// Initialize everything when DOM is loaded

document.addEventListener('DOMContentLoaded', () => {

initThreeJS();

initParticles();

initLoading();

populateAnimalCards();

initMobileMenu();

initSmoothScroll();

// Add scroll effect to header

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

const header = document.querySelector('header');

if (window.scrollY > 100) {

header.style.transform = 'translateY(0)';

} else {

header.style.transform = 'translateY(0)';

}

});

// GSAP ScrollTrigger

gsap.registerPlugin(ScrollTrigger);

</script>

</body>

</html>

CSS

JS

Metehan

Recommended