Webleb - Snippets de Código

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>

Metehan

Recomendado

Um código de Metehan

Um Código de Metehan

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um código de Metehan

Um Código de Metehan

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS