Webleb - UI Elements - Digital Agency: UI/UX, Web Dev, Branding

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>

Digital Agency: UI/UX, Web Dev, Branding

Recommended

Fitness Gym Website HTML Template

Movie Website Landing Page Example

Digital Agency HTML Template | Tailwind CSS

HTML

CSS

JS

Recommended

Fitness Gym Website HTML Template

Movie Website Landing Page Example

Digital Agency HTML Template | Tailwind CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS