Webleb - fragmentos de código

HTML

<!DOCTYPE html>

<head>

<title>AURA | Dijital İnovasyon Stüdyosu</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

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

display: ['Space Grotesk', 'sans-serif'],

},

colors: {

aura: {

base: '#030014',

primary: '#7000FF',

secondary: '#00C2FF',

accent: '#FF0055',

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

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

}

},

backgroundImage: {

'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',

'hero-glow': 'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',

},

animation: {

'blob': 'blob 7s infinite',

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

'spin-slow': 'spin 15s linear infinite',

},

keyframes: {

blob: {

'0%': { transform: 'translate(0px, 0px) scale(1)' },

'33%': { transform: 'translate(30px, -50px) scale(1.1)' },

'66%': { transform: 'translate(-20px, 20px) scale(0.9)' },

'100%': { transform: 'translate(0px, 0px) scale(1)' },

},

float: {

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

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

}

</script>

<style>

/* Temel Ayarlar */

body {

background-color: #030014;

color: #ffffff;

overflow-x: hidden;

cursor: none; /* Özel cursor için */

}

/* Özel Scrollbar */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: #030014;

}

::-webkit-scrollbar-thumb {

background: linear-gradient(to bottom, #7000FF, #00C2FF);

border-radius: 4px;

}

/* Glassmorphism Sınıfı */

.glass-panel {

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

backdrop-filter: blur(16px);

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

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

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

}

.glass-header {

background: rgba(3, 0, 20, 0.7);

backdrop-filter: blur(20px);

border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}

/* Özel Cursor */

.cursor-dot,

.cursor-outline {

position: fixed;

top: 0;

left: 0;

transform: translate(-50%, -50%);

border-radius: 50%;

z-index: 9999;

pointer-events: none;

}

.cursor-dot {

width: 8px;

height: 8px;

background-color: #00C2FF;

}

.cursor-outline {

width: 40px;

height: 40px;

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

transition: width 0.2s, height 0.2s, background-color 0.2s;

}

body:hover .cursor-outline {

opacity: 1;

}

/* Hover durumunda cursor */

body.hovering .cursor-outline {

width: 60px;

height: 60px;

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

border-color: #00C2FF;

mix-blend-mode: difference;

}

/* Canvas Arkaplanı */

#bg-canvas {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

opacity: 0.6;

}

/* Metin Efektleri */

.text-gradient {

background: linear-gradient(135deg, #00C2FF 0%, #7000FF 50%, #FF0055 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-size: 200% auto;

animation: gradientMove 5s ease infinite;

}

@keyframes gradientMove {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

/* Kart Tilt Efekti */

.tilt-card {

transition: transform 0.1s ease-out;

transform-style: preserve-3d;

}

.tilt-inner {

transform: translateZ(50px);

}

/* Reveal Animasyonu */

.reveal {

opacity: 0;

transform: translateY(30px);

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

}

.reveal.active {

opacity: 1;

transform: translateY(0);

}

/* Neon Glows */

.glow-point {

position: absolute;

width: 300px;

height: 300px;

background: radial-gradient(circle, rgba(112,0,255,0.4) 0%, rgba(0,0,0,0) 70%);

border-radius: 50%;

filter: blur(50px);

z-index: -1;

animation: blob 10s infinite alternate;

}

</style>

</head>

A

</div>

</a>

<a href="#home" class="hover:text-white transition-colors relative after:content-[''] after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-[2px] after:bg-aura-secondary hover:after:w-full after:transition-all" data-hover>Stüdyo</a>

<a href="#services" class="hover:text-white transition-colors relative after:content-[''] after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-[2px] after:bg-aura-secondary hover:after:w-full after:transition-all" data-hover>Yetenekler</a>

<a href="#portfolio" class="hover:text-white transition-colors relative after:content-[''] after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-[2px] after:bg-aura-secondary hover:after:w-full after:transition-all" data-hover>Projeler</a>

<a href="#contact" class="hover:text-white transition-colors relative after:content-[''] after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-[2px] after:bg-aura-secondary hover:after:w-full after:transition-all" data-hover>İletişim</a>

</nav>

<span>Projeyi Başlat</span>

</a>

</div>

</button>

</div>

</button>

<a href="#home" class="text-3xl font-display font-bold hover:text-aura-secondary" onclick="toggleMenu()">Stüdyo</a>

<a href="#services" class="text-3xl font-display font-bold hover:text-aura-secondary" onclick="toggleMenu()">Yetenekler</a>

<a href="#portfolio" class="text-3xl font-display font-bold hover:text-aura-secondary" onclick="toggleMenu()">Projeler</a>

<a href="#contact" class="text-3xl font-display font-bold hover:text-aura-secondary" onclick="toggleMenu()">İletişim</a>

</div>

</header>

Geleceği Tasarlıyoruz

</div>

Hayal Gücünün <br>

</h1>

Aura, teknolojiyi sanatla birleştiren yeni nesil bir dijital stüdyodur. Markanızı sadece göstermiyoruz, onu hissettiriyoruz.

</p>

Keşfetmeye Başla

</a>

<i class="ri-play-circle-line text-xl"></i> Tanıtımı İzle

</a>

</div>

<div>

<p class="text-sm text-gray-500">Tamamlanan Proje</p>

</div>

<div>

</div>

<div>

<p class="text-sm text-gray-500">Memnuniyet</p>

</div>

</div>

</div>

</div>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-1">Ultra Realizm</h3>

<p class="text-sm text-gray-400">Web deneyimini yeniden tanımlayın.</p>

</div>

</div>

</div>

</section>

<span class="text-2xl font-display font-bold text-white/30 flex items-center gap-2"><i class="ri-google-fill"></i> GOOGLE</span>

<span class="text-2xl font-display font-bold text-white/30 flex items-center gap-2"><i class="ri-amazon-fill"></i> AMAZON</span>

<span class="text-2xl font-display font-bold text-white/30 flex items-center gap-2"><i class="ri-spotify-fill"></i> SPOTIFY</span>

<span class="text-2xl font-display font-bold text-white/30 flex items-center gap-2"><i class="ri-netflix-fill"></i> NETFLIX</span>

<span class="text-2xl font-display font-bold text-white/30 flex items-center gap-2"><i class="ri-apple-fill"></i> APPLE</span>

<span class="text-2xl font-display font-bold text-white/30 flex items-center gap-2"><i class="ri-microsoft-fill"></i> MICROSOFT</span>

<span class="text-2xl font-display font-bold text-white/30 flex items-center gap-2"><i class="ri-google-fill"></i> GOOGLE</span>

<span class="text-2xl font-display font-bold text-white/30 flex items-center gap-2"><i class="ri-amazon-fill"></i> AMAZON</span>

<span class="text-2xl font-display font-bold text-white/30 flex items-center gap-2"><i class="ri-spotify-fill"></i> SPOTIFY</span>

<span class="text-2xl font-display font-bold text-white/30 flex items-center gap-2"><i class="ri-netflix-fill"></i> NETFLIX</span>

</div>

</div>

<span class="text-aura-secondary font-bold tracking-wider text-sm uppercase">Yeteneklerimiz</span>

<h2 class="text-4xl md:text-5xl font-display font-bold mt-2">Dijital Mükemmellik <br> İçin <span class="text-gradient">Çözümler</span></h2>

</div>

</div>

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

<p class="text-gray-400 mb-6 line-clamp-3">Kullanıcı odaklı, estetik ve işlevsel arayüzler tasarlıyoruz. Her pikselde anlam arıyoruz.</p>

<li class="flex items-center gap-2"><i class="ri-check-line text-aura-secondary"></i> Mobil Uygulama</li>

<li class="flex items-center gap-2"><i class="ri-check-line text-aura-secondary"></i> Web Arayüzü</li>

<li class="flex items-center gap-2"><i class="ri-check-line text-aura-secondary"></i> Prototipleme</li>

</ul>

</div>

</div>

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

<p class="text-gray-400 mb-6 line-clamp-3">En son teknolojilerle (React, Three.js, Tailwind) hızlı, güvenli ve etkileyici web siteleri kodluyoruz.</p>

<li class="flex items-center gap-2"><i class="ri-check-line text-aura-secondary"></i> Frontend & Backend</li>

<li class="flex items-center gap-2"><i class="ri-check-line text-aura-secondary"></i> CMS Entegrasyonu</li>

<li class="flex items-center gap-2"><i class="ri-check-line text-aura-secondary"></i> E-Ticaret</li>

</ul>

</div>

</div>

<h3 class="text-2xl font-bold mb-3">Marka & Strateji</h3>

<p class="text-gray-400 mb-6 line-clamp-3">Veri odaklı stratejiler ve yaratıcı kampanyalarla markanızı dijital dünyada öne çıkarıyoruz.</p>

<li class="flex items-center gap-2"><i class="ri-check-line text-aura-secondary"></i> Sosyal Medya</li>

<li class="flex items-center gap-2"><i class="ri-check-line text-aura-secondary"></i> İçerik Yönetimi</li>

</ul>

</div>

</section>

<div>

<span class="text-aura-secondary font-bold tracking-wider text-sm uppercase">Seçilmiş İşler</span>

<h2 class="text-4xl md:text-5xl font-display font-bold mt-2">Son Projeler</h2>

</div>

Tümünü Gör <i class="ri-arrow-right-line group-hover:translate-x-1 transition-transform"></i>

</a>

</div>

<span class="text-aura-secondary font-bold text-sm mb-2 translate-y-4 group-hover:translate-y-0 transition-transform duration-500">Web Tasarım</span>

<h3 class="text-3xl font-bold translate-y-4 group-hover:translate-y-0 transition-transform duration-500 delay-75">Neon City Finance</h3>

<p class="text-gray-300 mt-2 translate-y-4 group-hover:translate-y-0 transition-transform duration-500 delay-100">Fütüristik bir fintech uygulaması için arayüz tasarımı.</p>

</div>

<span class="text-aura-accent font-bold text-sm mb-2 translate-y-4 group-hover:translate-y-0 transition-transform duration-500">Teknoloji</span>

<h3 class="text-3xl font-bold translate-y-4 group-hover:translate-y-0 transition-transform duration-500 delay-75">Cyber Deck</h3>

<p class="text-gray-300 mt-2 translate-y-4 group-hover:translate-y-0 transition-transform duration-500 delay-100">Oyun donanımları için e-ticaret platformu.</p>

</div>

<span class="text-aura-primary font-bold text-sm mb-2 translate-y-4 group-hover:translate-y-0 transition-transform duration-500">3D Sanat</span>

<h3 class="text-3xl font-bold translate-y-4 group-hover:translate-y-0 transition-transform duration-500 delay-75">Abstract Flow</h3>

<p class="text-gray-300 mt-2 translate-y-4 group-hover:translate-y-0 transition-transform duration-500 delay-100">Dijital sanat sergisi için interaktif web deneyimi.</p>

</div>

<span class="text-aura-secondary font-bold text-sm mb-2 translate-y-4 group-hover:translate-y-0 transition-transform duration-500">Mobil App</span>

<h3 class="text-3xl font-bold translate-y-4 group-hover:translate-y-0 transition-transform duration-500 delay-75">Zenith AI</h3>

<p class="text-gray-300 mt-2 translate-y-4 group-hover:translate-y-0 transition-transform duration-500 delay-100">Yapay zeka destekli kişisel asistan uygulaması.</p>

</div>

</section>

<h2 class="text-4xl md:text-6xl font-display font-bold mb-6">Bir Sonraki Büyük Fikrinizi <br> <span class="text-gradient">Hayata Geçirelim</span></h2>

Projeniz için heyecanlıyız. Bizimle iletişime geçin ve dijital dönüşümünüzü bugün başlatın.

</p>

</div>

Gönder <i class="ri-send-plane-fill group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform"></i>

</button>

</form>

</div>

</section>

<a href="#" class="hover:text-aura-secondary">Gizlilik</a>

<a href="#" class="hover:text-aura-secondary">Şartlar</a>

<a href="#" class="hover:text-aura-secondary">Sitemap</a>

</div>

</footer>

</div>

// 1. Custom Cursor Logic

const cursorDot = document.querySelector('#cursor-dot');

const cursorOutline = document.querySelector('#cursor-outline');

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

const posX = e.clientX;

const posY = e.clientY;

// Dot follows instantly

cursorDot.style.left = `${posX}px`;

cursorDot.style.top = `${posY}px`;

// Outline follows with slight delay

cursorOutline.animate({

left: `${posX}px`,

top: `${posY}px`

}, { duration: 500, fill: "forwards" });

});

// Hover effect for interactive elements

document.querySelectorAll('[data-hover]').forEach(el => {

el.addEventListener('mouseenter', () => document.body.classList.add('hovering'));

el.addEventListener('mouseleave', () => document.body.classList.remove('hovering'));

});

// 2. Typed.js Effect

new Typed("#typed-text", {

strings: ["Sınırı Yoktur.", "Rengi Dijitaldir.", "Kodları Sanattır."],

typeSpeed: 50,

backSpeed: 30,

loop: true,

showCursor: false

});

// 3. Canvas Background Animation (Particles & Connections)

const canvas = document.getElementById('bg-canvas');

const ctx = canvas.getContext('2d');

let width, height;

let particles = [];

function resize() {

width = canvas.width = window.innerWidth;

height = canvas.height = window.innerHeight;

}

class Particle {

constructor() {

this.x = Math.random() * width;

this.y = Math.random() * height;

this.vx = (Math.random() - 0.5) * 0.5;

this.vy = (Math.random() - 0.5) * 0.5;

this.size = Math.random() * 2;

this.color = Math.random() > 0.5 ? 'rgba(112, 0, 255, ' : 'rgba(0, 194, 255, ';

}

update() {

this.x += this.vx;

this.y += this.vy;

if (this.x < 0 || this.x > width) this.vx *= -1;

if (this.y < 0 || this.y > height) this.vy *= -1;

}

draw() {

ctx.beginPath();

ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);

ctx.fillStyle = this.color + '0.5)';

ctx.fill();

}

function initParticles() {

particles = [];

for (let i = 0; i < 50; i++) { // Sayıyı optimize ettim

particles.push(new Particle());

}

function animateParticles() {

ctx.clearRect(0, 0, width, height);

for (let i = 0; i < particles.length; i++) {

particles[i].update();

particles[i].draw();

// Draw connections

for (let j = i; j < particles.length; j++) {

const dx = particles[i].x - particles[j].x;

const dy = particles[i].y - particles[j].y;

const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < 150) {

ctx.beginPath();

ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 - distance/1500})`;

ctx.lineWidth = 0.5;

ctx.moveTo(particles[i].x, particles[i].y);

ctx.lineTo(particles[j].x, particles[j].y);

ctx.stroke();

}

requestAnimationFrame(animateParticles);

}

window.addEventListener('resize', () => { resize(); initParticles(); });

resize();

initParticles();

animateParticles();

// 4. Scroll Reveal Animation

const observerOptions = { threshold: 0.1 };

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

entries.forEach(entry => {

if (entry.isIntersecting) {

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

observer.unobserve(entry.target);

}

});

}, observerOptions);

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

// 5. 3D Tilt Card Effect (Vanilla JS)

const card = document.getElementById('hero-card');

if(card) {

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

const rect = card.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

const centerX = rect.width / 2;

const centerY = rect.height / 2;

const rotateX = ((y - centerY) / centerY) * -10; // Max 10 deg

const rotateY = ((x - centerX) / centerX) * 10;

card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

});

card.addEventListener('mouseleave', () => {

card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg)`;

});

}

// 6. Navbar Transparency on Scroll

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

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

if (window.scrollY > 50) {

navbar.classList.add('py-0');

} else {

navbar.classList.remove('py-0');

}

});

// 7. Video Modal Logic

const modal = document.getElementById('video-modal');

const openBtn = document.getElementById('play-reel');

const closeBtn = document.getElementById('close-modal');

const modalContent = document.getElementById('modal-content');

if(openBtn) {

openBtn.addEventListener('click', (e) => {

e.preventDefault();

modal.classList.remove('hidden');

// Force reflow

void modal.offsetWidth;

modal.classList.remove('opacity-0');

modalContent.classList.remove('scale-95');

modalContent.classList.add('scale-100');

});

}

if(closeBtn) {

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

modal.classList.add('opacity-0');

modalContent.classList.remove('scale-100');

modalContent.classList.add('scale-95');

setTimeout(() => {

modal.classList.add('hidden');

}, 300);

});

}

// 8. Mobile Menu Toggle

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

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

const closeMenuBtn = document.getElementById('close-menu');

function toggleMenu() {

mobileMenu.classList.toggle('translate-x-full');

}

menuBtn.addEventListener('click', toggleMenu);

closeMenuBtn.addEventListener('click', toggleMenu);

// Smooth Scroll for Anchors (Lenis-like behavior simulated)

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

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

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

});

</script>

</body>

</html>

Metehan

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTML

CSS

JS

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS