Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Aura | Dijital Yaratıcılık Atölyesi</title>

<style>

/* --- ÖZEL CSS VE TEMA AYARLARI --- */

:root {

/* Talep edilen ana renk paleti */

--black-main: rgb(18, 18, 18);  /* Mat ve canlı siyah (Koyu kömür) */

--gold-main: #D4AF37;   /* Ana Altın Rengi */

--gold-accent: #F0E68C;  /* Vurgu için daha açık altın */

--text-light: #F5F5F5;    /* Koyu arka plan için metin rengi */

--card-bg: rgba(26, 26, 26, 0.7); /* Yarı şeffaf kart arka planı */

--border-color: rgba(212, 175, 55, 0.2); /* Altın rengi çerçeve */

--transition-main: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

body {

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

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

color: var(--text-light);

line-height: 1.7;

scroll-behavior: smooth;

overflow-x: hidden;

}

h1, h2, h3, h4, h5, h6 {

font-family: 'Playfair Display', serif;

color: var(--text-light);

}

/* --- ARKA PLAN PARÇACIKLARI (File 2'den) --- */

#particles-js {

position: fixed;

width: 100%;

height: 100%;

z-index: -1;

top: 0;

left: 0;

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

}

/* --- HEADER VE NAVİGASYON --- */

.main-header {

transition: all 0.3s ease-out;

}

.main-header.scrolled {

background-color: rgba(18, 18, 18, 0.9);

backdrop-filter: blur(12px);

box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);

padding-top: 0.75rem; /* py-3 */

padding-bottom: 0.75rem; /* py-3 */

}

.nav-link {

position: relative;

color: var(--text-light);

font-weight: 500;

}

.nav-link::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background-color: var(--gold-main);

transition: width 0.3s var(--transition-main);

}

.nav-link:hover, .nav-link.active {

color: var(--gold-main);

}

.nav-link:hover::after, .nav-link.active::after {

width: 100%;

}

/* Mobil Menü Animasyonu */

.hamburger-menu.active .line:nth-child(1) {

transform: translateY(9.5px) rotate(45deg);

}

.hamburger-menu.active .line:nth-child(2) {

opacity: 0;

}

.hamburger-menu.active .line:nth-child(3) {

transform: translateY(-9.5px) rotate(-45deg);

}

/* --- TYPED.JS KURSÖRÜ (File 2'den) --- */

.typed-cursor {

color: var(--gold-main) !important;

font-size: 1.1em;

opacity: 1;

animation: blink 0.7s infinite;

}

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

/* --- GENEL BİLEŞENLER --- */

.section-title {

font-size: 3rem; /* 2.25rem (text-4xl) -> 3rem */

font-weight: 700;

color: var(--gold-main);

position: relative;

padding-bottom: 1rem;

display: inline-block;

}

.section-title::after {

content: '';

position: absolute;

bottom: 0;

left: 50%;

transform: translateX(-50%);

width: 80px;

height: 3px;

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

border-radius: 2px;

}

.section-subtitle {

font-size: 1.125rem; /* text-lg */

color: var(--text-light);

opacity: 0.8;

max-width: 700px;

margin: 1rem auto 0;

}

/* Kart Stili (Yeni Tasarım) */

.glass-card {

background: var(--card-bg);

backdrop-filter: blur(10px);

border: 1px solid var(--border-color);

border-radius: 1.5rem; /* 24px */

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

transition: var(--transition-main);

}

.glass-card:hover {

transform: translateY(-10px);

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

border-color: rgba(212, 175, 55, 0.5);

}

/* Buton Stilleri (Yeni Tasarım) */

.btn {

display: inline-block;

padding: 0.9rem 2.2rem;

font-size: 1rem; /* 0.9rem -> 1rem */

font-weight: 700;

text-transform: uppercase;

border-radius: 50px;

transition: all 0.3s var(--transition-main);

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

letter-spacing: 0.5px;

border: 2px solid transparent;

}

.btn-gold {

background-color: var(--gold-main);

color: var(--black-main);

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

}

.btn-gold:hover {

background-color: #c9a030; /* Altının koyu tonu */

border-color: #c9a030;

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(212, 175, 55, 0.3);

}

.btn-outline {

background-color: transparent;

color: var(--gold-main);

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

}

.btn-outline:hover {

background-color: var(--gold-main);

color: var(--black-main);

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(212, 175, 55, 0.3);

}

/* --- YETENEK BARLARI (File 2'den) --- */

.skill-progress {

width: 0; /* Animasyon için başlangıç */

transition: width 1.5s ease-out;

background-color: var(--gold-main);

height: 100%;

border-radius: 9999px;

}

/* --- DEMO GÖRÜNTÜLEYİCİ (File 1'den, Yeniden Tasarlandı) --- */

.demo-controls {

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

backdrop-filter: blur(10px);

border: 1px solid var(--border-color);

}

#template-selector {

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

border: 1px solid var(--border-color);

color: var(--text-light);

border-radius: 0.5rem;

padding: 0.75rem 1rem;

transition: var(--transition-main);

}

#template-selector:focus {

outline: none;

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

box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);

}

.btn-device {

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

color: var(--text-light);

border: 1px solid var(--border-color);

transition: var(--transition-main);

}

.btn-device:hover, .btn-device.active {

background: var(--gold-main);

color: var(--black-main);

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

transform: translateY(-3px);

box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);

}

#iframe-wrapper {

background: #222;

border: 2px solid var(--gold-main);

transition: max-width 0.5s ease, height 0.5s ease;

}

#iframe-view {

transition: width 0.5s ease, height 0.5s ease;

}

/* --- PODCAST OYNATICI (File 1 & 2'den Birleşik) --- */

.audio-player {

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

border: 1px solid var(--border-color);

}

.play-button {

background: var(--gold-main);

color: var(--black-main);

}

.play-button:hover {

background: #c9a030;

}

.play-button .pause-icon { display: none; }

.track-title { color: var(--gold-accent); }

/* --- İLETİŞİM FORMU (File 1 & 2'den Birleşik) --- */

.form-input {

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

border: 1px solid var(--border-color);

color: var(--text-light);

border-radius: 0.5rem;

padding: 1rem;

transition: var(--transition-main);

}

.form-input::placeholder { color: rgba(245, 245, 245, 0.5); }

.form-input:focus {

outline: none;

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

box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);

}

#form-success-message {

opacity: 0;

visibility: hidden;

transition: opacity 0.5s ease-in-out;

}

#form-success-message.show {

opacity: 1;

visibility: visible;

}

/* --- SCROLL TOP BUTONU --- */

#scroll-top-btn {

background-color: var(--gold-main);

color: var(--black-main);

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

transition: all 0.3s ease-in-out;

}

#scroll-top-btn:hover {

background-color: #c9a030;

transform: translateY(-5px) scale(1.05);

box-shadow: 0 10px 20px rgba(212, 175, 55, 0.4);

}

</style>

</head>

Aura<span class="text-[var(--gold-main)]">.</span>

</a>

<a href="#home" class="nav-link">Anasayfa</a>

<a href="#about" class="nav-link">Hakkımızda</a>

<a href="#portfolio" class="nav-link">Portfolyo</a>

<a href="#demo-viewer" class="nav-link">Canlı Demo</a>

<a href="#podcast" class="nav-link">Podcast</a>

<a href="#contact" class

="nav-link">İletişim</a>

</nav>

<a href="#contact" class="hidden md:inline-block btn btn-outline px-6 py-2">İletişime Geç</a>

</button>

</div>

<a href="#home" class="nav-link text-2xl">Anasayfa</a>

<a href="#about" class="nav-link text-2xl">Hakkımızda</a>

<a href="#portfolio" class="nav-link text-2xl">Portfolyo</a>

<a href="#demo-viewer" class="nav-link text-2xl">Canlı Demo</a>

<a href="#podcast" class="nav-link text-2xl">Podcast</a>

<a href="#contact" class="nav-link text-2xl">İletişim</a>

</div>

</header>

<main>

Dijital Deneyimleri <br> <span id="typed-text" class="text-[var(--gold-main)]"></span>

</h1>

Aura, estetik ve teknolojiyi birleştirerek ilham veren, profesyonel ve grafiksel olarak mükemmel dijital çözümler üreten yaratıcı bir atölyedir.

</p>

Portfolyoyu Keşfet

</a>

Bizimle Tanışın

</a>

</div>

</section>

<h2 class="section-title">Biz Kimiz?</h2>

<p class="section-subtitle">Yaratıcılığın teknolojiyle buluştuğu noktada, markanız için kalıcı değerler yaratıyoruz.</p>

</div>

</div>

<h3 class="text-3xl md:text-4xl font-bold text-[var(--gold-accent)] mb-6">Fikirlerden Mükemmel Deneyimlere</h3>

Aura olarak, sadece web siteleri veya uygulamalar yapmıyoruz; markanızın dijital ruhunu inşa ediyoruz. Mat siyahın asaleti ve altının lüks dokunuşuyla, her projeye benzersiz bir karakter katıyoruz.

</p>

Tasarım, geliştirme ve stratejiyi harmanlayarak, kullanıcılarınızı etkileyecek ve ilham verecek profesyonel çözümler sunuyoruz.

</p>

<span class="font-semibold text-white">Web & UI/UX Tasarım</span>

</div>

</div>

<span class="font-semibold text-white">Frontend Geliştirme (React, Vue)</span>

</div>

</div>

<span class="font-semibold text-white">Marka Stratejisi & İçerik</span>

</div>

</div>

</section>

<h2 class="section-title">İlham Veren Projeler</h2>

<p class="section-subtitle">Grafiksel mükemmelliği ve profesyonel tasarımı birleştirdiğimiz çalışmalarımız.</p>

</div>

</div>

<h3 class="text-2xl font-bold text-[var(--gold-main)] mb-3">Lüks Marka E-Ticaret</h3>

Lüks bir saat markası için geliştirilen, altın ve mat siyah temalı, sürükleyici bir e-ticaret deneyimi.

</p>

<span class="text-[var(--gold-accent)] font-semibold">Web Tasarım / Geliştirme</span>

</div>

</article>

</div>

<h3 class="text-2xl font-bold text-[var(--gold-main)] mb-3">Kurumsal Kimlik Tasarımı</h3>

Bir finans teknoloji firması için güven ve profesyonellik yansıtan, modern ve minimalist bir kurumsal kimlik.

</p>

<span class="text-[var(--gold-accent)] font-semibold">Markalaşma / UI/UX</span>

</div>

</article>

</div>

<h3 class="text-2xl font-bold text-[var(--gold-main)] mb-3">Yaratıcı Portfolyo Sitesi</h3>

Uluslararası bir fotoğrafçı için hazırlanan, ilham verici ve grafiksel olarak zengin interaktif portfolyo.

</p>

<span class="text-[var(--gold-accent)] font-semibold">Web Tasarım / Animasyon</span>

</div>

</article>

</div>

</section>

<h2 class="section-title">Canlı Demolarımızı Keşfedin</h2>

<p class="section-subtitle">En yeni web tasarımlarımızı ve dijital çözümlerimizi farklı cihazlarda test edin.</p>

</div>

<option value="https://demo.templatesjungle.com/fashionise/">Fashionise - Moda Şablonu</option>

<option value="https://demo.templatesjungle.com/flexi/">Flexi - Çok Amaçlı Şablon</option>

<option value="https://demo.templatesjungle.com/luxify/">Luxify - Lüks Seyahat</option>

<option value="https://demo.templatesjungle.com/zigma/">Zigma - SaaS ve Teknoloji</option>

</select>

</div>

</div>

</div>

</section>

<h2 class="section-title !text-left !text-4xl !p-0 mb-6">Yaratıcı Nabız</h2>

Tasarım, teknoloji ve yaratıcılık üzerine ilham verici sohbetler. Sektör liderleri ve gizli kahramanlarla dijital dünyanın derinliklerine iniyoruz.

</p>

<h4 class="track-title text-xl font-bold mb-3">Bölüm 24: Altın Oran ve Dijital Tasarım</h4>

Tarayıcınız ses öğesini desteklemiyor.

</audio>

</div>

<i class="fab fa-spotify mr-2"></i> Spotify

</a>

<i class="fab fa-apple mr-2"></i> Apple Podcasts

</a>

</div>

</div>

</section>

<h2 class="section-title">İletişime Geçin</h2>

<p class="section-subtitle">Bir fikriniz mi var? Gelin, onu birlikte hayata geçirelim. Bize bir mesaj gönderin.</p>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

Mesajı Gönder

</button>

</div>

</form>

<i class="fas fa-check-circle mr-2"></i> Mesajınız başarıyla gönderildi! Teşekkür ederiz.

</div>

</section>

</main>

Aura<span class="text-[var(--gold-main)]">.</span>

</a>

</div>

<br> Altın ve Siyahın Mükemmel Uyumuyla Tasarlandı.

</p>

</div>

</footer>

</button>

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

// --- Mobil Navigasyon ---

const hamburger = document.getElementById('hamburger-menu');

const mobileNav = document.getElementById('mobile-nav');

const mobileNavLinks = mobileNav.querySelectorAll('.nav-link');

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

mobileNav.classList.toggle('right-[-100%]');

mobileNav.classList.toggle('right-0');

hamburger.classList.toggle('active');

});

mobileNavLinks.forEach(link => {

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

mobileNav.classList.remove('right-0');

mobileNav.classList.add('right-[-100%]');

hamburger.classList.remove('active');

});

// --- Header Scroll Efekti ---

const mainHeader = document.querySelector('.main-header');

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

mainHeader.classList.toggle('scrolled', window.scrollY > 80);

});

// --- Üste Çık Butonu ---

const scrollTopBtn = document.getElementById('scroll-top-btn');

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

if (window.pageYOffset > 500) {

scrollTopBtn.classList.add('opacity-100', 'visible');

} else {

scrollTopBtn.classList.remove('opacity-100', 'visible');

}

});

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

window.scrollTo({ top: 0, behavior: 'smooth' });

});

// --- Pürüzsüz Kaydırma ve Aktif Link Vurgulama ---

const navLinks = document.querySelectorAll('.nav-link');

const sections = document.querySelectorAll('section[id]');

function smoothScroll(e) {

if (e.target.matches('a[href^="#"]')) {

e.preventDefault();

const targetId = e.target.getAttribute('href');

const targetElement = document.querySelector(targetId);

if (targetElement) {

const headerHeight = mainHeader.offsetHeight;

const offsetPosition = targetElement.offsetTop - headerHeight - 20;

window.scrollTo({ top: offsetPosition, behavior: 'smooth' });

}

function highlightNavLink() {

let currentActiveSection = '';

const headerHeight = mainHeader.offsetHeight;

sections.forEach(section => {

const sectionTop = section.offsetTop - headerHeight - 30;

if (pageYOffset >= sectionTop) {

currentActiveSection = section.getAttribute('id');

}

});

navLinks.forEach(link => {

link.classList.remove('active');

if (link.getAttribute('href') === `#${currentActiveSection}`) {

link.classList.add('active');

}

});

}

document.addEventListener('click', smoothScroll);

window.addEventListener('scroll', highlightNavLink);

highlightNavLink(); // İlk yüklemede çalıştır

// --- Typed.js (Hero) ---

if (document.getElementById('typed-text')) {

new Typed("#typed-text", {

strings: ["Sanata Dönüştürür", "İlham Verir", "Profesyonelce Tasarlar", "Mükemmelleştirir"],

typeSpeed: 70,

backSpeed: 50,

loop: true,

showCursor: true,

});

}

// --- Yetenek Barları (Intersection Observer) ---

const skillProgressBars = document.querySelectorAll('.skill-progress');

const aboutSection = document.getElementById('about');

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

if (entries[0].isIntersecting) {

skillProgressBars.forEach(bar => {

bar.style.width = bar.dataset.progress + '%';

});

skillObserver.unobserve(entries[0].target);

}

}, { threshold: 0.3 });

if (aboutSection) skillObserver.observe(aboutSection);

// --- Canlı Demo Görüntüleyici (Vanilla JS) ---

const templateSelector = document.getElementById('template-selector');

const deviceButtons = document.querySelectorAll('.btn-device');

const iframeView = document.getElementById('iframe-view');

const iframeWrapper = document.getElementById('iframe-wrapper');

if (templateSelector) {

templateSelector.addEventListener('change', (e) => {

iframeView.src = e.target.value;

});

}

if (deviceButtons) {

deviceButtons.forEach(button => {

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

// Aktif butonu ayarla

deviceButtons.forEach(btn => btn.classList.remove('active'));

button.classList.add('active');

const width = button.dataset.deviceW;

const height = button.dataset.deviceH;

if(width === '100%') {

// Masaüstü tam ekran

iframeWrapper.style.maxWidth = '100%';

iframeView.style.width = '100%';

iframeView.style.height = '100%';

} else {

// Diğer cihazlar

iframeWrapper.style.maxWidth = width;

iframeView.style.width = width;

iframeView.style.height = height;

}

});

// Başlangıçta masaüstünü tetikle

document.querySelector('.btn-device[data-device-w="100%"]').click();

}

// --- İletişim Formu ---

const contactForm = document.getElementById('contact-form');

const formSuccessMessage = document.getElementById('form-success-message');

if (contactForm) {

contactForm.addEventListener('submit', (e) => {

e.preventDefault();

formSuccessMessage.classList.add('show');

contactForm.reset();

setTimeout(() => {

formSuccessMessage.classList.remove('show');

}, 5000);

});

}

// --- Particles.js (Altın/Siyah Tema) ---

particlesJS("particles-js", {

"particles": {

"number": {

"value": 60, // Sayıyı azalttık

"density": {

"enable": true,

"value_area": 800

}

},

"color": {

"value": "#D4AF37" // Altın rengi

},

"shape": {

"type": "circle",

},

"opacity": {

"value": 0.6, // Biraz daha belirgin

"random": true,

"anim": {

"enable": true,

"speed": 1,

"opacity_min": 0.1,

"sync": false

}

},

"size": {

"value": 2.5, // Biraz daha küçük

"random": true,

"anim": {

"enable": false,

}

},

"line_linked": {

"enable": true,

"distance": 150,

"color": "#D4AF37", // Altın rengi çizgiler

"opacity": 0.15, // Çizgiler daha soluk

"width": 1

},

"move": {

"enable": true,

"speed": 1.5, // Yavaş hareket

"direction": "none",

"random": false,

"straight": false,

"out_mode": "out",

"bounce": false,

}

},

"interactivity": {

"detect_on": "canvas",

"events": {

"onhover": {

"enable": true,

"mode": "grab" // 'grab' modu daha şık

},

"onclick": {

"enable": true,

"mode": "push" // Tıklayınca parçacık ekle

},

"resize": true

},

"modes": {

"grab": {

"distance": 140,

"line_linked": {

"opacity": 0.3 // Grab'de çizgiler belirginleşsin

}

},

"push": { "particles_nb": 4 },

}

},

"retina_detect": true

});

</script>

</body>

</html>

CSS

JS

Metehan

Recommended