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>

Airlines HTML Template: Tailwind, Smooth Scroll, Icons

Recommended

HTML Code Placeholder Comment

Simple HTML CSS Button

Swordfight Unity WebGL Game HTML Template

HTML

CSS

JS

Recommended

HTML Code Placeholder Comment

Simple HTML CSS Button

Swordfight Unity WebGL Game HTML Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS