Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>AURA | Horizon Edition</title>

<style>

/* --- 1. CORE & RESET --- */

:root {

--bg-deep: #08080c;

--bg-panel: #111116;

--accent-cyan: #00f0ff;

--accent-purple: #7000ff;

--accent-pink: #ff003c;

--text-white: #ffffff;

--text-gray: #888899;

--font-display: 'Segoe UI', system-ui, -apple-system, sans-serif;

--font-mono: 'Courier New', monospace;

--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

color: var(--text-white);

font-family: var(--font-display);

overflow: hidden; /* Scrollbarı gizle, JS ile yöneteceğiz */

height: 100vh;

width: 100vw;

cursor: none; /* Özel cursor kullanacağız */

}

/* --- 2. CUSTOM 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: var(--accent-cyan);

}

.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 değişimi */

body.hovering .cursor-outline {

width: 60px;

height: 60px;

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

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

backdrop-filter: blur(2px);

}

/* --- 3. HORIZONTAL CONTAINER --- */

.scroll-container {

display: flex;

flex-direction: row;

width: 500vw; /* 5 Bölüm x 100vw */

height: 100vh;

will-change: transform;

}

section {

width: 100vw;

height: 100vh;

position: relative;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

padding: 0 5vw;

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

overflow: hidden;

}

/* --- 4. TYPOGRAPHY & ELEMENTS --- */

h1 {

font-size: 6vw;

line-height: 0.9;

text-transform: uppercase;

font-weight: 800;

letter-spacing: -2px;

margin-bottom: 2rem;

background: linear-gradient(to right, #fff, #aaa);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

h2 {

font-size: 3rem;

margin-bottom: 1.5rem;

color: var(--text-white);

}

p {

font-size: 1.1rem;

color: var(--text-gray);

line-height: 1.6;

max-width: 600px;

}

.label {

font-family: var(--font-mono);

color: var(--accent-cyan);

font-size: 0.9rem;

margin-bottom: 1rem;

display: block;

letter-spacing: 2px;

}

.btn {

display: inline-flex;

align-items: center;

gap: 10px;

padding: 15px 40px;

margin-top: 30px;

background: transparent;

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

color: #fff;

text-decoration: none;

font-family: var(--font-mono);

text-transform: uppercase;

letter-spacing: 1px;

transition: 0.3s;

position: relative;

overflow: hidden;

z-index: 1;

}

.btn::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 0%;

height: 100%;

background: var(--accent-cyan);

z-index: -1;

transition: 0.3s var(--ease-out-expo);

}

.btn:hover {

color: #000;

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

}

.btn:hover::before {

width: 100%;

}

/* --- 5. NAVIGATION (FLOATING) --- */

.nav-bar {

position: fixed;

bottom: 40px;

left: 50%;

transform: translateX(-50%);

display: flex;

gap: 10px;

z-index: 100;

background: rgba(20, 20, 30, 0.8);

padding: 10px 20px;

border-radius: 30px;

backdrop-filter: blur(10px);

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

}

.nav-dot {

width: 12px;

height: 12px;

border-radius: 50%;

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

cursor: pointer;

transition: 0.3s;

}

.nav-dot.active {

background: var(--accent-cyan);

transform: scale(1.3);

}

.logo {

position: fixed;

top: 40px;

left: 50px;

font-size: 1.5rem;

font-weight: 800;

z-index: 100;

letter-spacing: 2px;

mix-blend-mode: difference; /* Arka plan ne olursa olsun görünür */

}

.progress-bar {

position: fixed;

top: 0;

left: 0;

height: 4px;

background: var(--accent-cyan);

width: 0%;

z-index: 101;

transition: width 0.1s linear;

}

/* --- 6. SECTION SPECIFIC STYLES --- */

/* HOME SECTION */

#home {

position: relative;

}

.hero-grid {

display: grid;

grid-template-columns: 1fr 1fr;

width: 100%;

height: 100%;

align-items: center;

}

.hero-visual {

position: relative;

height: 80%;

display: flex;

justify-content: center;

align-items: center;

}

/* Rotating Ring Animation */

.ring {

position: absolute;

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

border-radius: 50%;

animation: rotate 20s linear infinite;

}

.r1 { width: 300px; height: 300px; border-top-color: var(--accent-cyan); }

.r2 { width: 500px; height: 500px; border-bottom-color: var(--accent-purple); animation-direction: reverse; }

.r3 { width: 700px; height: 700px; border-left-color: var(--accent-pink); }

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

/* SOLUTIONS SECTION (Cards) */

#solutions .cards-wrapper {

display: flex;

gap: 40px;

perspective: 1000px;

}

.tech-card {

width: 300px;

height: 400px;

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

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

padding: 30px;

display: flex;

flex-direction: column;

justify-content: space-between;

transition: 0.5s;

position: relative;

overflow: hidden;

}

.tech-card:hover {

transform: translateY(-20px) rotateX(5deg);

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

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

box-shadow: 0 20px 50px rgba(0, 240, 255, 0.1);

}

.icon-box {

font-size: 2rem;

color: var(--accent-cyan);

margin-bottom: 20px;

}

/* WORK SECTION (Showcase) */

#work {

padding: 0;

background: #000;

}

.project-slider {

display: flex;

width: 100%;

height: 100%;

}

.project-item {

flex: 1;

height: 100%;

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

position: relative;

transition: flex 0.6s var(--ease-out-expo);

overflow: hidden;

cursor: pointer;

}

.project-item:hover {

flex: 3; /* Hover olunan alan genişler */

}

.project-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

opacity: 0.4;

transition: 0.6s;

filter: grayscale(100%);

}

.project-item:hover .project-bg {

opacity: 0.8;

filter: grayscale(0%);

transform: scale(1.05);

}

.project-content {

position: absolute;

bottom: 50px;

left: 50px;

z-index: 2;

opacity: 0.7;

transition: 0.4s;

background: rgba(0,0,0,0.6);

padding: 20px;

backdrop-filter: blur(5px);

}

.project-item:hover .project-content {

opacity: 1;

bottom: 80px;

}

/* ABOUT SECTION (Text Heavy) */

#about .about-container {

display: flex;

align-items: center;

gap: 100px;

}

.stat-box {

display: flex;

flex-direction: column;

}

.stat-number {

font-size: 5rem;

font-weight: 800;

color: transparent;

-webkit-text-stroke: 1px var(--text-white);

font-family: var(--font-mono);

}

.stat-text {

color: var(--accent-cyan);

text-transform: uppercase;

letter-spacing: 2px;

}

/* CONTACT SECTION */

#contact {

background: radial-gradient(circle at 80% 50%, #1a0b2e 0%, #000 100%);

}

.contact-form {

width: 500px;

display: flex;

flex-direction: column;

gap: 20px;

}

.input-group input,

.input-group textarea {

width: 100%;

background: transparent;

border: none;

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

padding: 15px 0;

color: #fff;

font-family: var(--font-display);

font-size: 1.1rem;

transition: 0.3s;

}

.input-group input:focus,

.input-group textarea:focus {

outline: none;

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

}

.social-links {

margin-top: 40px;

display: flex;

gap: 20px;

}

.social-icon {

width: 50px;

height: 50px;

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

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

transition: 0.3s;

color: #fff;

}

.social-icon:hover {

background: #fff;

color: #000;

transform: translateY(-5px);

}

/* SVG Icons Helper Class */

svg {

width: 24px;

height: 24px;

fill: currentColor;

}

</style>

</head>

<body>

</nav>

<span class="label">v2.0 SYSTEM READY</span>

<h1>Yapay Zeka<br>Sanatla Buluşuyor</h1>

<p>Veriyi estetiğe, kodu geleceğe dönüştürüyoruz. Sıradanlığın ötesinde, mühendisliğin zirvesinde.</p>

<a href="#" class="btn hover-target" onclick="scrollToSection(1)">Keşfetmeye Başla</a>

</div>

<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=600&auto=format&fit=crop"

alt="AI Core"

style="width: 400px; height: 400px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 100px rgba(0,240,255,0.2); z-index: 2;">

</div>

</section>

<span class="label">HİZMETLERİMİZ</span>

<h2>Akıllı Çözümler</h2>

</div>

<h3>Machine Learning</h3>

<p>Kendi kendine öğrenen ve adapte olan algoritmalarla iş süreçlerinizi optimize edin.</p>

<a href="#" style="color:var(--accent-cyan); text-decoration:none; margin-top:auto;">Detay →</a>

</div>

</div>

<h3>Big Data Analytics</h3>

<p>Karmaşık veri setlerinden anlamlı ve stratejik içgörüler çıkarın.</p>

<a href="#" style="color:var(--accent-cyan); text-decoration:none; margin-top:auto;">Detay →</a>

</div>

</div>

<h3>Cyber Security AI</h3>

<p>Tehditleri oluşmadan önce tespit eden yapay zeka destekli güvenlik duvarları.</p>

<a href="#" style="color:var(--accent-cyan); text-decoration:none; margin-top:auto;">Detay →</a>

</div>

</section>

<h3>Otonom Üretim</h3>

<p>Endüstri 4.0 Entegrasyonu</p>

</div>

<h3>Akıllı Şehirler</h3>

<p>IoT Veri Yönetimi</p>

</div>

<h3>Finansal Tahmin</h3>

<p>Derin Öğrenme Modeli</p>

</div>

<h3>Kripto Güvenlik</h3>

<p>Blockchain Altyapısı</p>

</div>

</section>

<span class="label">VİZYONUMUZ</span>

<h2>Geleceği Kodluyoruz</h2>

<p>

AURA, teknolojiyi sadece bir araç olarak değil, bir sanat formu olarak görür.

Veri merkezlerimizden çıkan her bir byte, insanlığın ilerleyişine hizmet eder.

Sınırları zorlayan mühendislik ve kusursuz tasarım anlayışıyla, dijital dünyada iz bırakıyoruz.

</p>

<br>

<p style="color:#fff;">"Yeterince gelişmiş bir teknoloji, büyüden ayırt edilemez." - Arthur C. Clarke</p>

</div>

<span class="stat-text">Global Proje</span>

</div>

<span class="stat-text">AI Ödülü</span>

</div>

<span class="stat-text">Müşteri Memnuniyeti</span>

</div>

<span class="stat-text">Canlı Destek</span>

</div>

</section>

<div>

<span class="label">İLETİŞİM</span>

<h2>Projelerinizi<br>Hayata Geçirelim</h2>

<p>Bir sonraki büyük fikriniz için bizimle iletişime geçin.</p>

</div>

</div>

</div>

</div>

<button type="submit" class="btn">GÖNDER</button>

</form>

</div>

</section>

</div>

const container = document.getElementById('scroll-container');

const dots = document.querySelectorAll('.nav-dot');

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

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

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

let currentSection = 0;

const totalSections = 5;

let isScrolling = false;

// --- 1. HORIZONTAL SCROLL LOGIC ---

// Mouse tekerleği dikey olsa bile yatay kaydırır

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

if (isScrolling) return;

// Küçük hareketleri yoksay

if (Math.abs(e.deltaY) < 20) return;

if (e.deltaY > 0) {

// Aşağı scroll -> Sonraki Bölüm

if (currentSection < totalSections - 1) {

scrollToSection(currentSection + 1);

}

} else {

// Yukarı scroll -> Önceki Bölüm

if (currentSection > 0) {

scrollToSection(currentSection - 1);

}

});

// Klavye ile kontrol

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

if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {

if (currentSection < totalSections - 1) scrollToSection(currentSection + 1);

} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {

if (currentSection > 0) scrollToSection(currentSection - 1);

}

});

function scrollToSection(index) {

isScrolling = true;

currentSection = index;

// Container'ı kaydır

container.style.transform = `translateX(-${index * 100}vw)`;

// Navigasyon güncelle

dots.forEach(dot => dot.classList.remove('active'));

dots[index].classList.add('active');

// Progress bar güncelle

const progress = ((index + 1) / totalSections) * 100;

progressBar.style.width = `${progress}%`;

// Animasyon bittikten sonra tekrar scrolla izin ver

setTimeout(() => {

isScrolling = false;

}, 800); // CSS transition süresiyle uyumlu olmalı

}

// --- 2. CUSTOM CURSOR LOGIC ---

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

const posX = e.clientX;

const posY = e.clientY;

// Dot anında takip eder

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

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

// Outline biraz gecikmeli gelir (smooth effect)

cursorOutline.animate({

left: `${posX}px`,

top: `${posY}px`

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

});

// Hover efektleri

const hoverTargets = document.querySelectorAll('.hover-target, a, button, .project-item, .tech-card, .nav-dot');

hoverTargets.forEach(target => {

target.addEventListener('mouseenter', () => {

document.body.classList.add('hovering');

});

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

document.body.classList.remove('hovering');

});

// Initial setup

scrollToSection(0);

</script>

</body>

</html>

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS