Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>AEROVANTAGE | Havacılığın Geleceği</title>

tailwind.config = {

theme: {

extend: {

colors: {

brand: {

dark: '#0B1120',    // Derin Gece Mavisi

blue: '#1E3A8A',    // Kurumsal Mavi

accent: '#38BDF8',  // Gökyüzü Mavisi (Vurgu)

metal: '#94A3B8',   // Metalik Gri

gold: '#C5A059'     // Premium Altın Dokunuş

}

},

fontFamily: {

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

display: ['Oswald', 'sans-serif'],

},

backgroundImage: {

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

}

</script>

<style>

/* Custom Styles & Reset */

html {

scroll-behavior: smooth;

}

body {

background-color: #0B1120;

color: #F8FAFC;

overflow-x: hidden;

}

/* Custom Scrollbar */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: #0B1120;

}

::-webkit-scrollbar-thumb {

background: #334155;

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: #38BDF8;

}

/* Animations */

@keyframes slowZoom {

0% { transform: scale(1); }

100% { transform: scale(1.1); }

}

.animate-zoom {

animation: slowZoom 20s infinite alternate;

}

.glass-panel {

background: rgba(15, 23, 42, 0.7);

backdrop-filter: blur(12px);

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

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

}

.glass-nav {

background: rgba(11, 17, 32, 0.85);

backdrop-filter: blur(10px);

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

}

/* Scroll Reveal Classes */

.reveal {

opacity: 0;

transform: translateY(30px);

transition: all 0.8s ease-out;

}

.reveal.active {

opacity: 1;

transform: translateY(0);

}

.line-clamp-3 {

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

overflow: hidden;

}

/* Video Background Fallback */

.video-bg-overlay {

background: linear-gradient(to bottom, rgba(11,17,32,0.3) 0%, rgba(11,17,32,0.8) 80%, #0B1120 100%);

}

/* Loading Screen */

#loader {

position: fixed;

inset: 0;

background: #0B1120;

z-index: 9999;

display: flex;

justify-content: center;

align-items: center;

transition: opacity 0.5s ease;

}

.loader-spinner {

width: 50px;

height: 50px;

border: 3px solid rgba(56, 189, 248, 0.3);

border-radius: 50%;

border-top-color: #38BDF8;

animation: spin 1s ease-in-out infinite;

}

@keyframes spin {

to { transform: rotate(360deg); }

}

</style>

</head>

<h2 class="text-brand-accent tracking-[0.5em] text-sm font-display animate-pulse">AEROVANTAGE</h2>

</div>

<span class="text-2xl font-display font-bold tracking-wider text-white">AEROVANTAGE</span>

<span class="text-[0.6rem] text-brand-metal tracking-[0.3em] uppercase">Aerospace & Aviation</span>

</div>

</a>

<a href="#about" class="text-sm uppercase tracking-widest hover:text-brand-accent transition-colors relative after:content-[''] after:absolute after:-bottom-2 after:left-0 after:w-0 after:h-0.5 after:bg-brand-accent after:transition-all hover:after:w-full">Hakkımızda</a>

<a href="#services" class="text-sm uppercase tracking-widest hover:text-brand-accent transition-colors relative after:content-[''] after:absolute after:-bottom-2 after:left-0 after:w-0 after:h-0.5 after:bg-brand-accent after:transition-all hover:after:w-full">Hizmetler</a>

<a href="#contact" class="px-6 py-2 border border-brand-accent text-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all duration-300 font-medium text-sm tracking-wide">İLETİŞİM</a>

</div>

</button>

</div>

</nav>

<a href="#about" class="text-2xl font-display text-white hover:text-brand-accent">Hakkımızda</a>

<a href="#services" class="text-2xl font-display text-white hover:text-brand-accent">Hizmetler</a>

<a href="#contact" class="text-2xl font-display text-white hover:text-brand-accent">İletişim</a>

</div>

<img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?q=80&w=2074&auto=format&fit=crop"

alt="Airplane Wing View"

class="w-full h-full object-cover animate-zoom opacity-80">

</div>

<span class="text-brand-accent text-xs font-bold tracking-[0.2em] uppercase">Premium Aviation Solutions</span>

</div>

GÖKYÜZÜNÜN <br>

<span class="text-transparent bg-clip-text bg-gradient-to-r from-white via-brand-metal to-brand-accent">ÖTESİNDE</span>

</h1>

Mühendislik mükemmelliği ve lüks seyahat deneyimini birleştiriyoruz.

Geleceğin havacılık teknolojileri ile sınırları kaldırın.

</p>

FİLOYU KEŞFET

</a>

<i class="fa-solid fa-play text-xs"></i> TANITIM FİLMİ

</a>

</div>

</a>

</div>

</header>

<p class="text-xs text-brand-metal tracking-widest uppercase">Günlük Uçuş</p>

</div>

<p class="text-xs text-brand-metal tracking-widest uppercase">Küresel Destinasyon</p>

</div>

<p class="text-xs text-brand-metal tracking-widest uppercase">Yıllık Tecrübe</p>

</div>

<p class="text-xs text-brand-metal tracking-widest uppercase">Güvenlik Oranı</p>

</div>

</section>

<span class="text-center text-sm font-light text-white">Yılın En İyi<br>Mühendislik Ödülü</span>

</div>

<h4 class="text-brand-accent font-bold tracking-widest uppercase text-sm mb-4">VİZYONUMUZ</h4>

<h2 class="text-4xl md:text-5xl font-display font-bold text-white mb-6 leading-tight">Mükemmellik Bir Varış Noktası Değil, Bir Standarttır.</h2>

Aerovantage olarak, havacılığı sadece bir ulaşım aracı olarak değil, insan potansiyelinin sınırsızlığının bir kanıtı olarak görüyoruz. Airbus ve Boeing standartlarının ötesinde, kendi özgün mühendislik disiplinimizle her parçayı sanat eseri gibi işliyoruz.

</p>

<h5 class="text-white font-bold text-lg">Mühendislik Vizyonu</h5>

<p class="text-sm text-brand-metal mt-1">Aerodinamik verimlilik ve sürdürülebilir yakıt teknolojileri ile geleceği tasarlıyoruz.</p>

</div>

<h5 class="text-white font-bold text-lg">Güvenlik Felsefesi</h5>

<p class="text-sm text-brand-metal mt-1">Sıfır tolerans prensibiyle, her uçuş öncesi 360 derece yapay zeka destekli kontroller.</p>

</div>

</section>

<h2 class="text-4xl font-display font-bold text-white">HİZMET VE ÇÖZÜMLER</h2>

</div>

</div>

<h3 class="text-xl font-bold text-white mb-3">Premium Kabin Konforu</h3>

Ergonomik tasarımın zirvesi. Gürültü önleyici izolasyon ve akıllı aydınlatma sistemleri ile bulutların üzerinde ev konforu.

</p>

<a href="#" class="text-brand-accent text-sm font-bold flex items-center gap-2 group-hover:gap-4 transition-all">Detaylar <i class="fa-solid fa-arrow-right"></i></a>

</div>

</div>

<h3 class="text-xl font-bold text-white mb-3">Uçak İçi Teknoloji</h3>

Yüksek hızlı uydu interneti, 4K kişisel eğlence ekranları ve iş dünyası için kesintisiz bağlantı çözümleri.

</p>

<a href="#" class="text-brand-accent text-sm font-bold flex items-center gap-2 group-hover:gap-4 transition-all">Detaylar <i class="fa-solid fa-arrow-right"></i></a>

</div>

</div>

<h3 class="text-xl font-bold text-white mb-3">Bakım & Operasyon</h3>

7/24 teknik destek ve proaktif bakım algoritmaları ile filonuz her zaman uçuşa hazır, operasyonlarınız aksamaz.

</p>

<a href="#" class="text-brand-accent text-sm font-bold flex items-center gap-2 group-hover:gap-4 transition-all">Detaylar <i class="fa-solid fa-arrow-right"></i></a>

</div>

</section>

<div>

<h2 class="text-4xl font-display font-bold">KOKPİT & DENEYİM</h2>

<p class="text-brand-metal mt-2">Uçuşun her anına tanıklık edin.</p>

</div>

</div>

</div>

<span class="text-brand-accent text-xs font-bold uppercase">Test Uçuşu</span>

<h3 class="text-white font-bold">A350 Gece İnişi - Kokpit Kamerası</h3>

</div>

</div>

<span class="text-brand-accent text-xs font-bold uppercase">Hizmet</span>

<h3 class="text-white font-bold">First Class Deneyimi</h3>

</div>

</div>

<span class="text-brand-accent text-xs font-bold uppercase">Teknoloji</span>

<h3 class="text-white font-bold">Jet Motoru Dayanıklılık Testi</h3>

</div>

</section>

<span class="text-brand-accent font-bold tracking-widest text-sm uppercase">FİLO VE GALERİ</span>

<h2 class="text-4xl font-display font-bold text-white mt-2">GÖKLERİN HAKİMLERİ</h2>

</div>

<button class="text-brand-metal hover:text-white transition-colors">Ticari</button>

<button class="text-brand-metal hover:text-white transition-colors">Kargo</button>

</div>

<h3 class="text-2xl font-bold text-white">Aerovantage X-1000</h3>

<p class="text-brand-metal">Uzun Menzilli Ticari Uçak</p>

</div>

<span class="text-white border border-white px-4 py-1 text-sm uppercase">İncele</span>

</div>

</div>

</div>

</div>

</section>

<h2 class="text-3xl font-display font-bold text-white mb-12 reveal">HAVACILIK GÜNDEMİ</h2>

</div>

<span class="text-xs text-brand-accent uppercase font-bold tracking-wider">Teknoloji</span>

<h3 class="text-xl font-bold text-white mt-2 mb-3 group-hover:text-brand-accent transition-colors">Sürdürülebilir Havacılık Yakıtı (SAF) ile Geleceğe Uçuş</h3>

Karbon ayak izini azaltma hedefimiz doğrultusunda, filomuzun %40'ını biyoyakıt teknolojilerine entegre ediyoruz.

</p>

<a href="#" class="text-white text-sm hover:underline">Devamını Oku</a>

</div>

</article>

</div>

<h3 class="text-xl font-bold text-white mt-2 mb-3 group-hover:text-brand-accent transition-colors">Yeni Nesil Motorların Bakım Süreçleri</h3>

Mühendislerimiz, türbin verimliliğini %15 artıran yeni bakım protokollerini başarıyla test etti.

</p>

<a href="#" class="text-white text-sm hover:underline">Devamını Oku</a>

</div>

</article>

</div>

<span class="text-xs text-brand-accent uppercase font-bold tracking-wider">Destinasyon</span>

<h3 class="text-xl font-bold text-white mt-2 mb-3 group-hover:text-brand-accent transition-colors">Asya-Pasifik Rotasında Yeni Dönem</h3>

Tokyo ve Singapur seferlerimizde business class deneyimini yeniden tanımlayan süitlerimizi hizmete sunduk.

</p>

<a href="#" class="text-white text-sm hover:underline">Devamını Oku</a>

</div>

</article>

</div>

</section>

<span class="text-xl font-display font-bold tracking-wider text-white">AEROVANTAGE</span>

</a>

Havacılıkta güvenlik, konfor ve teknoloji standartlarını belirleyen küresel lider.

</p>

</div>

<h4 class="text-white font-bold mb-6">Kurumsal</h4>

<li><a href="#" class="hover:text-brand-accent transition-colors">Yatırımcı İlişkileri</a></li>

<li><a href="#" class="hover:text-brand-accent transition-colors">Kariyer</a></li>

<li><a href="#" class="hover:text-brand-accent transition-colors">Sürdürülebilirlik</a></li>

<li><a href="#" class="hover:text-brand-accent transition-colors">Basın Odası</a></li>

</ul>

</div>

<h4 class="text-white font-bold mb-6">Teknik</h4>

<li><a href="#" class="hover:text-brand-accent transition-colors">Filo Bilgileri</a></li>

<li><a href="#" class="hover:text-brand-accent transition-colors">Güvenlik Dokümantasyonu</a></li>

<li><a href="#" class="hover:text-brand-accent transition-colors">Bakım Partnerleri</a></li>

<li><a href="#" class="hover:text-brand-accent transition-colors">Kargo Operasyonları</a></li>

</ul>

</div>

<h4 class="text-white font-bold mb-6">Bülten</h4>

<p class="text-xs text-brand-metal mb-4">En son havacılık haberleri ve özel teklifler için kaydolun.</p>

<button class="bg-brand-accent text-brand-dark font-bold py-3 text-sm hover:bg-white transition-colors">ABONE OL</button>

</form>

</div>

<a href="#" class="hover:text-white">Gizlilik Politikası</a>

<a href="#" class="hover:text-white">Kullanım Şartları</a>

<a href="#" class="hover:text-white">Çerez Politikası</a>

</div>

</footer>

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

// Loader Animation

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

setTimeout(() => {

loader.style.opacity = '0';

setTimeout(() => {

loader.style.display = 'none';

}, 500);

}, 1500);

// Navbar Scroll Effect

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

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

if (window.scrollY > 50) {

navbar.classList.add('glass-nav', 'py-2');

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

} else {

navbar.classList.remove('glass-nav', 'py-2');

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

}

});

// Scroll Reveal Animation with Intersection Observer

const observerOptions = {

threshold: 0.15,

rootMargin: "0px 0px -50px 0px"

};

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

entries.forEach(entry => {

if (entry.isIntersecting) {

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

}

});

}, observerOptions);

document.querySelectorAll('.reveal').forEach(el => {

observer.observe(el);

});

// Mobile Menu Toggle

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

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

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

const menuLinks = mobileMenu.querySelectorAll('a');

function toggleMenu() {

const isHidden = mobileMenu.classList.contains('translate-x-full');

if (isHidden) {

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

} else {

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

}

mobileBtn.addEventListener('click', toggleMenu);

closeMenu.addEventListener('click', toggleMenu);

menuLinks.forEach(link => {

link.addEventListener('click', toggleMenu);

});

</script>

</body>

</html>

Metehan

Recommended

A Code by Metehan

HTML

CSS

JS

Recommended

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS