Webleb - Code-Snippets

HTML

<!DOCTYPE html>

<head>

<title>ROSE & NEXUS | Immersive Creative Studio</title>

tailwind.config = {

theme: {

extend: {

colors: {

softPink: '#ffc2d1',

deepPink: '#ffa8be',

accentPink: '#ff85a1',

bgPlum: '#2D1B2E', // Darker background for contrast

textPlum: '#5d2a42',

glass: 'rgba(255, 255, 255, 0.1)',

glassDark: 'rgba(45, 27, 46, 0.6)'

},

fontFamily: {

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

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

},

animation: {

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

'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',

},

keyframes: {

float: {

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

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

}

</script>

<style>

/* Custom Scrollbar */

::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track { background: #2D1B2E; }

::-webkit-scrollbar-thumb { background: #ff85a1; border-radius: 4px; }

::-webkit-scrollbar-thumb:hover { background: #ffa8be; }

body {

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

background-color: #2D1B2E;

color: #fff0f3;

overflow-x: hidden;

}

h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }

/* Background Parallax & Zoom Effect */

.section-background {

position: absolute;

top: 0; left: 0; width: 100%; height: 100%;

z-index: -1;

background-size: cover;

background-position: center;

transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

filter: brightness(0.6) sepia(0.2) hue-rotate(320deg); /* Pinkish Tint */

}

.section {

min-height: 100vh;

position: relative;

overflow: hidden;

display: flex;

align-items: center;

}

/* Glassmorphism Cards */

.glass-card {

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

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

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

border-radius: 24px;

transition: all 0.4s ease;

}

.glass-card:hover {

transform: translateY(-5px);

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

border-color: rgba(255, 133, 161, 0.3);

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

}

/* Floating Particles Animation */

.particle {

position: absolute;

border-radius: 50%;

background: rgba(255, 194, 209, 0.6);

pointer-events: none;

animation: floatUp linear infinite;

}

@keyframes floatUp {

0% { transform: translateY(100vh) scale(0); opacity: 0; }

20% { opacity: 0.8; }

100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }

}

/* Input Slider Styling */

input[type="range"] {

-webkit-appearance: none;

width: 100%; height: 4px;

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

border-radius: 2px; outline: none;

}

input[type="range"]::-webkit-slider-thumb {

-webkit-appearance: none;

width: 20px; height: 20px;

border-radius: 50%;

background: #ff85a1;

cursor: pointer;

transition: transform 0.2s;

}

input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Reveal Animation */

.reveal {

opacity: 0;

transform: translateY(30px);

transition: all 1s cubic-bezier(0.5, 0, 0, 1);

}

.reveal.active { opacity: 1; transform: translateY(0); }

/* Gradient Text */

.text-gradient {

background: linear-gradient(90deg, #ffc2d1, #ff85a1);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

</style>

</head>

<body>

METEHAN<span class="text-accentPink">.</span>

</a>

<a href="#about" class="text-sm font-medium hover:text-accentPink transition-colors">About</a>

<a href="#skills" class="text-sm font-medium hover:text-accentPink transition-colors">Skills</a>

<a href="#work" class="text-sm font-medium hover:text-accentPink transition-colors">Portfolio</a>

<a href="#contact" class="px-5 py-2 bg-accentPink text-bgPlum rounded-full font-bold text-sm hover:bg-white transition-colors shadow-lg shadow-pink-500/20">Contact</a>

</div>

</button>

</div>

</nav>

<i class="ri-sparkling-fill mr-2"></i> Creative Design Studio

</div>

Hi, I'm <br> <span class="text-gradient italic">Mete Han</span>

</h1>

Dijital dünyada estetik ve fonksiyonelliği buluşturuyoruz. Modern, pembe tonlarında dokunuşlarla projelerinize hayat veriyoruz.

</p>

See My Work

</a>

Contact Me

</a>

</div>

<p class="text-xs text-gray-400 mt-2">Merging creativity with technology</p>

</div>

</section>

<div>

</div>

Markanızın dijital kimliğini oluşturmak için stratejik tasarım ve modern teknolojileri kullanıyorum.

</p>

</div>

</div>

<h3 class="text-2xl font-bold mb-3">UI/UX Design</h3>

Kullanıcı odaklı, şık ve modern arayüz tasarımları. Kullanıcı deneyimini en üst düzeye çıkaran estetik çözümler.

</p>

</div>

</div>

<h3 class="text-2xl font-bold mb-3">Web Development</h3>

Hızlı, güvenli ve tüm cihazlarla uyumlu web siteleri. Modern teknolojilerle kodlanmış temiz yapılar.

</p>

</div>

</div>

<h3 class="text-2xl font-bold mb-3">Digital Strategy</h3>

Markanızın dijitaldeki büyüme yol haritasını çiziyoruz. Hedef kitlenize ulaşmanız için doğru stratejiler.

</p>

</div>

</section>

<h3 class="text-3xl font-bold mb-8">Expertise Levels</h3>

<div>

</div>

</div>

<div>

<span class="font-medium">JavaScript</span>

</div>

</div>

<div>

<span class="font-medium">Figma Design</span>

</div>

</div>

<i class="ri-equalizer-line mr-2"></i> Adjust Creative Intensity

</label>

<p class="text-xs text-gray-500 mt-2">Arka plandaki parçacık hızını değiştirin.</p>

</div>

</div>

<div>

<p class="text-xs text-gray-400">Experience</p>

<p class="font-bold text-lg">5+ Years</p>

</div>

</section>

<span class="text-accentPink uppercase tracking-widest text-sm font-bold">Portfolio</span>

<h2 class="text-4xl md:text-5xl font-bold mt-2">Creative Works</h2>

</div>

<h3 class="text-2xl font-bold translate-y-4 group-hover:translate-y-0 transition-transform duration-300">Beauty App</h3>

<p class="text-accentPink mb-4 translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-75">Mobile UI Design</p>

<p class="text-sm text-gray-300 translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-100">Modern bir güzellik salonu için hazırlanan mobil uygulama tasarımı.</p>

</div>

<h3 class="text-2xl font-bold translate-y-4 group-hover:translate-y-0 transition-transform duration-300">Nexus Branding</h3>

<p class="text-accentPink mb-4 translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-75">Identity Design</p>

<p class="text-sm text-gray-300 translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-100">Nexus ajansı için hazırlanan kurumsal kimlik çalışması.</p>

</div>

<h3 class="text-2xl font-bold translate-y-4 group-hover:translate-y-0 transition-transform duration-300">Cloud System</h3>

<p class="text-accentPink mb-4 translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-75">Web Application</p>

<p class="text-sm text-gray-300 translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-100">Geleceğin bulut depolama sistemleri için arayüz prototipi.</p>

</div>

</section>

<h2 class="text-4xl font-bold mb-6">Let's talk about <br>your project!</h2>

<p class="text-gray-300 mb-8 leading-relaxed">Fikirlerinizi gerçeğe dönüştürmek için sabırsızlanıyorum. Bana her zaman ulaşabilirsiniz.</p>

</div>

<span class="font-medium">hello@metehan.com</span>

</div>

</div>

<span class="font-medium">Istanbul, Turkey</span>

</div>

</div>

<div>

</div>

<div>

<label class="block text-sm text-gray-400 mb-2">Email Address</label>

</div>

<div>

<label class="block text-sm text-gray-400 mb-2">Message</label>

</div>

Send Message

</button>

</form>

</div>

</section>

</div>

</footer>

// 1. Mouse Move Parallax

const sections = document.querySelectorAll('.section');

sections.forEach(section => {

section.addEventListener('mousemove', (e) => {

const bg = section.querySelector('.section-background');

if(!bg) return;

const x = (e.clientX / window.innerWidth) * 20;

const y = (e.clientY / window.innerHeight) * 20;

bg.style.transform = `scale(1.1) translate(-${x}px, -${y}px)`;

});

// 2. Navbar Glass Effect on Scroll

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

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

if(window.scrollY > 50) {

navbar.classList.add('bg-bgPlum/80', 'backdrop-blur-lg', 'shadow-xl');

} else {

navbar.classList.remove('bg-bgPlum/80', 'backdrop-blur-lg', 'shadow-xl');

}

});

// 3. Scroll Reveal Animation

const observerOptions = { threshold: 0.15 };

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

entries.forEach(entry => {

if(entry.isIntersecting) {

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

}

});

}, observerOptions);

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// 4. Particle System

const particleContainer = document.getElementById('particles-container');

const slider = document.getElementById('particle-slider');

let particleSpeed = 3; // Default speed duration (s)

function createParticle() {

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

p.classList.add('particle');

// Random attributes

const size = Math.random() * 6 + 2; // 2px to 8px

p.style.width = `${size}px`;

p.style.height = `${size}px`;

p.style.left = `${Math.random() * 100}vw`;

// Speed based on slider (lower duration = faster)

const duration = (Math.random() * 5 + 5) / (slider.value / 50 || 1);

p.style.animationDuration = `${duration}s`;

particleContainer.appendChild(p);

// Remove after animation

setTimeout(() => { p.remove(); }, duration * 1000);

}

// Generate particles loop

setInterval(createParticle, 300);

// Slider logic

slider.addEventListener('input', (e) => {

// Speed changes are applied to NEW particles in the createParticle function

const intensity = e.target.value;

// Visual feedback could be added here

});

</script>

</body>

</html>

Metehan

Ein Code von Metehan

HTML

CSS

JS

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS