Webleb - UI Elements - Airlines HTML Template: Tailwind, Smooth Scroll, Icons

HTML

<!DOCTYPE html>

<head>

<title>Aether Airlines | Premium Aviation</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['-apple-system', 'BlinkMacSystemFont', 'Inter', 'Segoe UI', 'Roboto', 'sans-serif'],

},

colors: {

brand: {

dark: '#0B0F19',

navy: '#151E32',

gold: '#C5A059',

goldLight: '#E5C585',

gray: '#8E94A3'

}

},

animation: {

'float': 'float 6s ease-in-out infinite',

'fade-in-up': 'fadeInUp 0.8s ease-out forwards',

},

keyframes: {

float: {

'0%, 100%': { transform: 'translateY(0)' },

'50%': { transform: 'translateY(-10px)' },

},

fadeInUp: {

'0%': { opacity: '0', transform: 'translateY(20px)' },

'100%': { opacity: '1', transform: 'translateY(0)' },

}

</script>

<style>

/* Custom Utilities & iOS Optimizations */

body {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

background-color: #0B0F19; /* Brand Dark */

color: white;

overflow-x: hidden;

/* Prevent rubber-banding on iOS whole page */

overscroll-behavior-y: none;

}

/* Hide Scrollbar but allow functionality */

.no-scrollbar::-webkit-scrollbar {

display: none;

}

.no-scrollbar {

-ms-overflow-style: none;

scrollbar-width: none;

}

/* Glassmorphism Utilities */

.glass-panel {

background: rgba(21, 30, 50, 0.6);

backdrop-filter: blur(20px);

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

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

}

.glass-header {

background: rgba(11, 15, 25, 0.7);

backdrop-filter: blur(25px);

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

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

}

/* Typography spacing */

h1, h2, h3 {

letter-spacing: -0.02em;

}

/* Smooth Scroll Snap */

.snap-x-mandatory {

scroll-snap-type: x mandatory;

}

.snap-center {

scroll-snap-align: center;

}

/* Video Background Overlay */

.video-overlay {

background: linear-gradient(to bottom, rgba(11,15,25,0.3) 0%, rgba(11,15,25,0.6) 50%, #0B0F19 100%);

}

/* Safe Area Padding */

.safe-pt {

padding-top: env(safe-area-inset-top);

}

.safe-pb {

padding-bottom: env(safe-area-inset-bottom);

}

/* Custom Button Active State (iOS Feel) */

.btn-press:active {

transform: scale(0.96);

transition: transform 0.1s;

}

/* Image Zoom Animation */

.zoom-image {

transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.zoom-image:hover {

transform: scale(1.05);

}

/* Mobile Navigation Transition */

.mobile-nav {

transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

</style>

</head>

<span class="text-xl font-semibold tracking-tight text-white">AETHER</span>

</a>

<a href="#about" class="hover:text-white transition-colors">Vizyon</a>

<a href="#services" class="hover:text-white transition-colors">Deneyim</a>

<a href="#blog" class="hover:text-white transition-colors">Journal</a>

<a href="#" class="px-5 py-2 rounded-full bg-white/10 text-white hover:bg-white hover:text-brand-dark transition-all border border-white/10 btn-press">Bilet Al</a>

</div>

</button>

</div>

</nav>

</button>

<a href="#about" onclick="toggleMenu()" class="text-2xl font-medium text-white">Vizyon</a>

<a href="#services" onclick="toggleMenu()" class="text-2xl font-medium text-white">Deneyim</a>

<a href="#blog" onclick="toggleMenu()" class="text-2xl font-medium text-white">Journal</a>

<a href="#" class="px-8 py-3 rounded-full bg-brand-gold text-brand-dark font-semibold text-lg btn-press shadow-lg shadow-brand-gold/20">Rezervasyon Yap</a>

</div>

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

class="w-full h-full object-cover animate-float scale-110 opacity-60"

style="animation-duration: 20s; animation-name: none; transition: transform 10s ease-out;"

id="hero-bg"

alt="Plane Wing View">

</div>

First Class Redefined

</span>

Sınırların Ötesine <br/> <span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-400">Yolculuk</span>

</h1>

Gelişmiş aerodinamik, ödüllü konfor ve Aether güvencesiyle gökyüzünü yeniden keşfedin.

</p>

</button>

<span>Tanıtımı İzle</span>

</button>

</div>

</div>

</section>

<p class="text-brand-gray text-xs uppercase tracking-wider mb-1">Destinasyonlar</p>

</div>

<p class="text-brand-gray text-xs uppercase tracking-wider mb-1">Yıllık Yolcu</p>

</div>

<p class="text-brand-gray text-xs uppercase tracking-wider mb-1">Dakiklik Oranı</p>

</div>

<span class="text-brand-gold uppercase tracking-widest text-xs font-bold">Mühendislik & Güvenlik</span>

</div>

<h2 class="text-3xl md:text-5xl font-bold mb-6 leading-tight">Mükemmellik <br/>Detaylarda Gizlidir.</h2>

Her perçinde, her motor devrinde ve her aerodinamik hesaplamada tek bir amacımız var: Sizi hedefinize en güvenli ve en konforlu şekilde ulaştırmak. Aether filosundaki uçaklar, havacılık teknolojisinin son harikalarıyla donatılmıştır.

</p>

</div>

<div>

<h4 class="font-semibold text-white mb-1">Aktif Güvenlik</h4>

<p class="text-sm text-gray-400">Yapay zeka destekli hava durumu analizi ve otopilot sistemleri.</p>

</div>

</div>

<div>

<h4 class="font-semibold text-white mb-1">Sürdürülebilirlik</h4>

<p class="text-sm text-gray-400">Yeni nesil motorlarla %25 daha az karbon emisyonu.</p>

</div>

</button>

</div>

<div>

</div>

</section>

<div>

<span class="text-brand-gold uppercase tracking-widest text-xs font-bold block mb-2">Hizmetlerimiz</span>

<h2 class="text-3xl font-bold">Bulutların Üzerinde Konfor</h2>

</div>

</div>

</div>

</div>

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

<p class="text-gray-400 mb-6">Tam yatar koltuklar, kişisel gizlilik panelleri ve masaj fonksiyonu ile ev konforu.</p>

Keşfet <i class="ph-bold ph-arrow-right"></i>

</a>

</div>

</div>

</div>

<h3 class="text-xl font-bold mb-3">Sınırsız Bağlantı</h3>

<p class="text-gray-400 mb-6">Tüm uçuş boyunca yüksek hızlı uydu interneti. İster çalışın, ister film izleyin.</p>

Teknoloji <i class="ph-bold ph-arrow-right"></i>

</a>

</div>

</div>

</div>

<h3 class="text-xl font-bold mb-3">Gökyüzü Mutfağı</h3>

<p class="text-gray-400 mb-6">Michelin yıldızlı şefler tarafından hazırlanan, mevsimsel ve taze menüler.</p>

Menüleri Gör <i class="ph-bold ph-arrow-right"></i>

</a>

</div>

</div>

</section>

<span class="text-brand-gold uppercase tracking-widest text-xs font-bold block mb-2">Filo & Galeri</span>

<h2 class="text-3xl md:text-4xl font-bold">Teknoloji Sanatla Buluşuyor</h2>

</div>

<p class="text-brand-gold text-xs font-bold uppercase">Boeing 787-9</p>

<p class="text-white font-semibold">Dreamliner Kalkış</p>

</div>

</div>

</div>

<p class="text-white font-semibold">Gün Batımı Rotası</p>

</div>

</section>

<h2 class="text-2xl font-bold mb-8 text-center">Seyahat Günlüğü</h2>

</div>

<span class="text-xs text-brand-gold font-bold uppercase">Destinasyon</span>

</div>

<h3 class="text-lg font-semibold text-white mb-1 group-hover:text-brand-gold transition-colors">Tokyo'nun Gizli Sokakları</h3>

<p class="text-sm text-gray-400 line-clamp-2">Modern teknoloji ve geleneksel kültürün eşsiz uyumunu Aether konforuyla keşfedin.</p>

</div>

</div>

</article>

</div>

<span class="text-xs text-blue-400 font-bold uppercase">Yaşam</span>

</div>

<h3 class="text-lg font-semibold text-white mb-1 group-hover:text-brand-gold transition-colors">Kış Tatili Rehberi</h3>

<p class="text-sm text-gray-400 line-clamp-2">Avrupa'nın en iyi kayak merkezlerine özel kış tarifemizle uçun.</p>

</div>

</div>

</article>

</div>

<a href="#" class="text-sm font-medium text-gray-400 hover:text-white transition-colors">Tüm Yazıları Gör</a>

</div>

</section>

<h2 class="text-3xl md:text-5xl font-bold mb-6">Yolculuğunuz Başlasın</h2>

<p class="text-gray-300 mb-8 max-w-xl mx-auto">Aether ayrıcalıklarıyla dolu dünyamıza adım atın. Mobil uygulamamızı indirin veya hemen biletinizi alın.</p>

Bilet Al

</button>

Mobil Uygulama

</button>

</div>

<div>

<h4 class="text-white font-bold mb-4">AETHER</h4>

<li><a href="#" class="hover:text-brand-gold">Hakkımızda</a></li>

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

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

</ul>

</div>

<div>

<h4 class="text-white font-bold mb-4">Deneyim</h4>

<li><a href="#" class="hover:text-brand-gold">Lounge</a></li>

<li><a href="#" class="hover:text-brand-gold">Yemek</a></li>

</ul>

</div>

<div>

<h4 class="text-white font-bold mb-4">Destek</h4>

<li><a href="#" class="hover:text-brand-gold">Yardım Merkezi</a></li>

<li><a href="#" class="hover:text-brand-gold">Bagaj Hakkı</a></li>

<li><a href="#" class="hover:text-brand-gold">İletişim</a></li>

</ul>

</div>

<div>

<h4 class="text-white font-bold mb-4">Yasal</h4>

<li><a href="#" class="hover:text-brand-gold">Gizlilik</a></li>

<li><a href="#" class="hover:text-brand-gold">Şartlar</a></li>

<li><a href="#" class="hover:text-brand-gold">Çerezler</a></li>

</ul>

</div>

</div>

</footer>

// 1. Mobile Menu Toggle

function toggleMenu() {

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

const isOpen = !menu.classList.contains('translate-x-full');

if (isOpen) {

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

document.body.style.overflow = 'auto'; // Enable scroll

} else {

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

document.body.style.overflow = 'hidden'; // Disable scroll

}

// 2. Navbar Scroll Effect (Glassmorphism Intensity)

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

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

if (window.scrollY > 50) {

navbar.classList.add('shadow-lg');

navbar.style.background = 'rgba(11, 15, 25, 0.9)';

} else {

navbar.classList.remove('shadow-lg');

navbar.style.background = 'rgba(11, 15, 25, 0.7)';

}

});

// 3. Horizontal Scroll Controls

function scrollServices(direction) {

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

const scrollAmount = 350;

if (direction === 'left') {

container.scrollBy({ left: -scrollAmount, behavior: 'smooth' });

} else {

container.scrollBy({ left: scrollAmount, behavior: 'smooth' });

}

// 4. Reveal on Scroll Animation (Intersection Observer)

const observerOptions = {

threshold: 0.1,

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

};

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

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('animate-fade-in-up');

entry.target.style.opacity = "1";

observer.unobserve(entry.target);

}

});

}, observerOptions);

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

el.style.opacity = "0"; // Initial state

observer.observe(el);

});

// 5. Hero Parallax Effect

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

const scrolled = window.scrollY;

const heroBg = document.getElementById('hero-bg');

if (heroBg && scrolled < window.innerHeight) {

// Parallax translation

heroBg.style.transform = `scale(1.1) translateY(${scrolled * 0.3}px)`;

}

});

</script>

</body>

</html>

CSS

JS

Airlines HTML Template: Tailwind, Smooth Scroll, Icons

Recommended