Webleb - Extraits de Code

HTML

<!DOCTYPE html>

<head>

<title>AURA Gastronomy | Fine Dining & Chef Studio</title>

tailwind.config = {

theme: {

extend: {

colors: {

'aura-black': '#0a0a0a',

'aura-dark': '#121212',

'aura-gold': '#D4AF37',

'aura-copper': '#b87333',

'aura-ivory': '#F5F5F0',

'aura-gray': '#2A2A2A',

},

fontFamily: {

serif: ['"Playfair Display"', 'serif'],

sans: ['"Montserrat"', 'sans-serif'],

},

backgroundImage: {

'gradient-gold': 'linear-gradient(135deg, #D4AF37 0%, #AA8828 100%)',

'gradient-dark': 'linear-gradient(to bottom, rgba(10,10,10,0) 0%, #0a0a0a 100%)',

}

</script>

<style>

/* Custom CSS & Reset Overrides */

:root {

--transition-slow: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);

--transition-med: all 0.4s ease-out;

--gold: #D4AF37;

}

body {

background-color: #0a0a0a;

color: #F5F5F0;

overflow-x: hidden;

scroll-behavior: smooth;

}

/* Scrollbar Styling */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: #0a0a0a;

}

::-webkit-scrollbar-thumb {

background: #333;

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: var(--gold);

}

/* Selection Color */

::selection {

background: var(--gold);

color: #000;

}

/* Preloader */

#preloader {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #000;

z-index: 9999;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

transition: opacity 0.8s ease;

}

.loader-line {

width: 0;

height: 2px;

background: var(--gold);

transition: width 1.5s ease;

}

.loader-text {

margin-bottom: 20px;

font-family: 'Playfair Display', serif;

letter-spacing: 4px;

opacity: 0;

animation: fadeIn 1s forwards;

}

/* Navigation Glassmorphism */

nav {

transition: all 0.4s ease;

}

nav.scrolled {

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

backdrop-filter: blur(12px);

border-bottom: 1px solid rgba(212, 175, 55, 0.1);

padding-top: 15px;

padding-bottom: 15px;

}

/* Hero Video Overlay */

.video-overlay {

background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7));

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 10;

}

/* Typography & Decor */

.text-gold-gradient {

background: linear-gradient(45deg, #FFE5A0, #D4AF37, #996515);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.section-title::after {

content: '';

display: block;

width: 60px;

height: 2px;

background: var(--gold);

margin-top: 15px;

}

/* Card Hover Effects */

.menu-card, .service-card, .gallery-item {

transition: var(--transition-med);

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

}

.menu-card:hover, .service-card:hover {

transform: translateY(-10px);

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

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

}

/* Image Hover Zoom */

.img-zoom-container {

overflow: hidden;

}

.img-zoom-container img {

transition: transform 0.8s ease;

}

.img-zoom-container:hover img {

transform: scale(1.1);

}

/* Button Styling */

.btn-premium {

position: relative;

padding: 12px 30px;

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

color: var(--gold);

overflow: hidden;

transition: all 0.4s ease;

z-index: 1;

letter-spacing: 2px;

text-transform: uppercase;

font-size: 0.8rem;

}

.btn-premium::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 0;

height: 100%;

background: var(--gold);

z-index: -1;

transition: width 0.4s ease;

}

.btn-premium:hover::before {

width: 100%;

}

.btn-premium:hover {

color: #000;

}

/* Reveal Animation Classes */

.reveal {

opacity: 0;

transform: translateY(30px);

transition: var(--transition-slow);

}

.reveal.active {

opacity: 1;

transform: translateY(0);

}

.reveal-left {

opacity: 0;

transform: translateX(-30px);

transition: var(--transition-slow);

}

.reveal-left.active {

opacity: 1;

transform: translateX(0);

}

/* Lightbox */

#lightbox {

display: none;

backdrop-filter: blur(15px);

}

/* Timeline */

.timeline-item {

position: relative;

padding-left: 30px;

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

}

.timeline-item::before {

content: '';

position: absolute;

left: -4px;

top: 5px;

width: 7px;

height: 7px;

background: var(--gold);

border-radius: 50%;

box-shadow: 0 0 10px var(--gold);

}

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

@keyframes float {

0% { transform: translateY(0px); }

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

100% { transform: translateY(0px); }

}

.floating-icon {

animation: float 4s ease-in-out infinite;

}

</style>

</head>

<div class="loader-text text-2xl text-aura-gold">AURA GASTRONOMY</div>

</div>

AURA<span class="text-aura-gold">.</span>

</a>

<a href="#about" class="hover:text-aura-gold transition-colors">HİKAYEMİZ</a>

<a href="#experience" class="hover:text-aura-gold transition-colors">DENEYİM</a>

<a href="#gallery" class="hover:text-aura-gold transition-colors">GALERİ</a>

<a href="#reservation" class="btn-premium ml-4">REZERVASYON</a>

</div>

</button>

</div>

</button>

<a href="#about" class="text-2xl font-serif text-white hover:text-aura-gold">Hikayemiz</a>

<a href="#experience" class="text-2xl font-serif text-white hover:text-aura-gold">Deneyim</a>

<a href="#gallery" class="text-2xl font-serif text-white hover:text-aura-gold">Galeri</a>

<a href="#reservation" class="text-2xl font-serif text-aura-gold">Rezervasyon</a>

</div>

</nav>

Tarayıcınız video etiketini desteklemiyor.

</video>

<p class="text-aura-gold tracking-[0.3em] text-sm md:text-base mb-4 reveal">EST. 2024 • FINE DINING STUDIO</p>

Ateşin Sanatı<br>

<span class="italic font-light text-aura-ivory text-4xl md:text-6xl">Lezzetin Ruhu</span>

</h1>

Modern gastronomi ve geleneksel ateş kültürünün sofistike birleşimi.

</p>

<a href="#menu" class="btn-premium inline-block">KEŞFET</a>

</div>

</div>

</header>

<p class="font-serif italic text-2xl">"Mutfak bir sahne, tabak ise tuvaldir."</p>

<p class="text-aura-gold text-sm mt-2 text-right tracking-widest">— CHEF DEMİR KANER</p>

</div>

</div>

<span class="text-aura-gold text-sm tracking-widest uppercase mb-2 block">Felsefemiz</span>

<h2 class="text-4xl md:text-5xl font-serif text-white mb-8 section-title">Doğaya Saygı,<br>Lezzete Tutku</h2>

Aura mutfağında her malzeme kendi hikayesini anlatır. Mevsimin ritmine uygun, yerel üreticilerden özenle seçilen ürünler, modern pişirme teknikleri ve kadim ateş kültürüyle harmanlanır.

</p>

Sadece karın doyurmak için değil, ruhu beslemek için tasarlanmış bir deneyim. Minimalist sunumlarımızın ardında, saatler süren hazırlık süreçleri ve derin bir gastronomi bilgisi yatar.

</p>

<h4 class="text-white font-serif text-xl">Farm-to-Table</h4>

<p class="text-sm text-gray-500 mt-1">Sürdürülebilir kaynaklardan, aracısız temin edilen organik ürünler.</p>

</div>

<p class="text-sm text-gray-500 mt-1">Meşe odununda ağır pişirme ve tütsüleme teknikleri.</p>

</div>

<h4 class="text-white font-serif text-xl">Sıfır Atık</h4>

<p class="text-sm text-gray-500 mt-1">Doğaya minimum iz bırakarak maksimum lezzet.</p>

</div>

</section>

<span class="text-aura-gold text-sm tracking-widest uppercase">Hizmetlerimiz</span>

<h2 class="text-4xl font-serif text-white mt-2">Gastronomik Deneyimler</h2>

</div>

<h3 class="text-2xl font-serif text-white mb-4">Chef's Table</h3>

Şefin mutfağına konuk olun. Hazırlık sürecini izleyebileceğiniz, şefin anlatımıyla sunulan 12 aşamalı özel tadım menüsü.

</p>

<a href="#" class="text-aura-gold text-xs tracking-widest uppercase border-b border-transparent group-hover:border-aura-gold pb-1">Detaylar</a>

</div>

<h3 class="text-2xl font-serif text-white mb-4">Şarap Eşleşmesi</h3>

Sommelierimiz tarafından özenle seçilen yerli ve yabancı şaraplarla, menüdeki her lezzetin notalarını zirveye taşıyın.

</p>

<a href="#" class="text-aura-gold text-xs tracking-widest uppercase border-b border-transparent group-hover:border-aura-gold pb-1">Kavı İncele</a>

</div>

<h3 class="text-2xl font-serif text-white mb-4">Özel Davetler</h3>

Kapalı grup yemekleri ve kurumsal etkinlikler için kişiselleştirilmiş menüler ve size özel ayrılmış VIP salonu.

</p>

<a href="#" class="text-aura-gold text-xs tracking-widest uppercase border-b border-transparent group-hover:border-aura-gold pb-1">İletişime Geç</a>

</div>

</section>

<div>

<span class="text-aura-gold text-sm tracking-widest uppercase">Mevsimsel Menü</span>

<h2 class="text-4xl md:text-5xl font-serif text-white mt-2">İmza Tabaklar</h2>

</div>

</div>

</div>

<h3 class="text-2xl font-serif text-white mb-2">İsli Wagyu A5</h3>

<p class="text-xs text-aura-copper uppercase tracking-wider mb-4">Trüf Mantarı • Yer elması Püresi</p>

<p class="text-gray-400 text-sm font-light mb-6">48 saat dinlendirilmiş Wagyu eti, meşe dumanında tütsülenmiş, konfit yer elması ile.</p>

</div>

</div>

<h3 class="text-2xl font-serif text-white mb-2">Kuzey Deniz Tarağı</h3>

<p class="text-xs text-aura-copper uppercase tracking-wider mb-4">Havyar • Safran Köpüğü</p>

<p class="text-gray-400 text-sm font-light mb-6">Hafif mühürlenmiş deniz tarağı, Beluga havyarı ve narenciye dokunuşlu safran sosu ile.</p>

</div>

</div>

<h3 class="text-2xl font-serif text-white mb-2">Çikolata Küresi</h3>

<p class="text-xs text-aura-copper uppercase tracking-wider mb-4">Altın Yaprak • Ahududu Coulis</p>

<p class="text-gray-400 text-sm font-light mb-6">%70 Bitter Valrhona çikolata, masada sunulan sıcak karamel sos ritüeli ile.</p>

</div>

</div>

<h3 class="text-2xl font-serif text-white mb-2">Ördek Göğsü</h3>

<p class="text-xs text-aura-copper uppercase tracking-wider mb-4">Pancar • Vişne Glaze</p>

<p class="text-gray-400 text-sm font-light mb-6">Ağır ateşte pişmiş ördek göğsü, fırınlanmış pancar dokuları ve ekşi vişne sos.</p>

</div>

<a href="#" class="inline-block text-white border-b border-aura-gold pb-1 hover:text-aura-gold transition-colors">Tüm Menüyü İncele PDF (2.4MB)</a>

</div>

</section>

<span class="text-aura-gold text-sm tracking-widest uppercase">Atmosfer</span>

<h2 class="text-4xl font-serif text-white mt-2">Aura'yı Hisset</h2>

</div>

</video>

<span class="text-white font-serif text-xl"><i class="fas fa-play-circle mr-2 text-aura-gold"></i> Mutfak Sanatı</span>

</div>

</div>

</div>

</div>

</section>

<h2 class="text-3xl md:text-4xl font-serif text-white mb-4">Rezervasyon Yap</h2>

<p class="text-gray-400 font-light">Sınırlı sayıda masamız mevcuttur. Deneyiminiz için lütfen önceden rezervasyon yaptırınız.</p>

</div>

<label class="absolute left-0 top-3 text-gray-500 text-sm transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-aura-gold peer-valid:-top-4 peer-valid:text-xs">İsim Soyisim</label>

</div>

<label class="absolute left-0 top-3 text-gray-500 text-sm transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-aura-gold peer-valid:-top-4 peer-valid:text-xs">Telefon</label>

</div>

</div>

<option value="" class="bg-aura-dark">Kişi Sayısı</option>

</select>

</div>

<label class="absolute left-0 top-3 text-gray-500 text-sm transition-all peer-focus:-top-4 peer-focus:text-xs peer-focus:text-aura-gold peer-valid:-top-4 peer-valid:text-xs">Özel Notlar (Alerjenler vb.)</label>

</div>

<button type="submit" class="btn-premium w-full md:w-auto">Masayı Ayırt</button>

</div>

</form>

</div>

<div>

<h4 class="text-white font-serif mb-2">Adres</h4>

<p class="text-gray-400 text-sm">Maçka Cd. No:34, Nişantaşı<br>İstanbul, Türkiye</p>

</div>

<div>

<h4 class="text-white font-serif mb-2">Saatler</h4>

<p class="text-gray-400 text-sm">Salı - Pazar: 18:00 - 00:00<br>Pazartesi: Kapalı</p>

</div>

<div>

<h4 class="text-white font-serif mb-2">İletişim</h4>

<p class="text-gray-400 text-sm">+90 (212) 555 0123<br>info@auragastronomy.com</p>

</div>

</section>

</div>

</div>

</footer>

</div>

// 1. Preloader Logic

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

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

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

line.style.width = '100%';

setTimeout(() => {

preloader.style.opacity = '0';

setTimeout(() => {

preloader.style.display = 'none';

// Trigger initial animations after loader

revealOnScroll();

}, 800);

}, 1000);

});

// 2. Navbar Scroll Effect

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

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

if (window.scrollY > 50) {

nav.classList.add('scrolled');

} else {

nav.classList.remove('scrolled');

}

});

// 3. Scroll Reveal Animation (Intersection Observer)

function revealOnScroll() {

const reveals = document.querySelectorAll('.reveal, .reveal-left');

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

entries.forEach(entry => {

if (entry.isIntersecting) {

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

}

});

}, {

threshold: 0.1,

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

});

reveals.forEach(element => {

observer.observe(element);

});

}

window.addEventListener('scroll', revealOnScroll);

// 4. Menu Horizontal Scroll Buttons

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

const leftBtn = document.getElementById('scroll-left');

const rightBtn = document.getElementById('scroll-right');

if(leftBtn && rightBtn) {

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

slider.scrollBy({ left: -350, behavior: 'smooth' });

});

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

slider.scrollBy({ left: 350, behavior: 'smooth' });

});

}

// 5. Mobile Menu Logic

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

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

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

const mobileLinks = document.querySelectorAll('#mobile-menu a');

function toggleMobileMenu() {

if (mobileMenu.classList.contains('translate-x-full')) {

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

} else {

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

}

mobileMenuBtn.addEventListener('click', toggleMobileMenu);

closeMobileBtn.addEventListener('click', toggleMobileMenu);

mobileLinks.forEach(link => {

link.addEventListener('click', toggleMobileMenu);

});

// 6. Lightbox Logic

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

const lightboxImg = document.getElementById('lightbox-img');

function openLightbox(element) {

let src = '';

// Check if it's an image or a container with an image

if (element.tagName === 'IMG') {

src = element.src;

} else {

const img = element.querySelector('img');

if (img) src = img.src;

// If video, we might handle differently, but here we'll just skip or show placeholder

const vid = element.querySelector('video');

if (vid) return; // Simple implementation skips video for lightbox

}

if (src) {

lightboxImg.src = src;

lightbox.style.display = 'flex';

setTimeout(() => { lightbox.style.opacity = '1'; }, 10);

}

function closeLightbox() {

lightbox.style.opacity = '0';

setTimeout(() => { lightbox.style.display = 'none'; }, 300);

}

</script>

</body>

</html>

CSS

JS

Metehan

Recommandé