Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Şımarık AVM | Premium Alışveriş Deneyimi</title>
<meta name="description" content="Şımarık AVM - Şehrin en seçkin alışveriş ve yaşam merkezi. Lüks markalar ve eşsiz deneyimler.">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
krem: '#FAF7F2',
altin: '#B8862F',
},
fontFamily: {
serif: ['Playfair Display', 'serif'],
sans: ['Inter', 'sans-serif'],
}
}
}
}
</script>
<style>
body { background-color: #FAF7F2; font-family: 'Inter', sans-serif; color: #333; }
h1, h2, h3 { font-family: 'Playfair Display', serif; }
.premium-shadow { box-shadow: 0 10px 30px -10px rgba(184, 134, 47, 0.1); }
</style>
</head>
<body class="bg-krem">
<!-- Header & Nav -->
<nav class="p-6 flex justify-between items-center max-w-7xl mx-auto">
<div class="text-2xl font-serif font-bold text-altin tracking-wider">ŞIMARIK AVM</div>
<div id="status-badge" class="px-4 py-1 rounded-full text-sm font-medium flex items-center gap-2">
<!-- JS ile dolacak -->
</div>
</nav>
<!-- Hero Section -->
<section class="relative py-20 px-6 overflow-hidden">
<div class="max-w-7xl mx-auto text-center relative z-10">
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
Kendinizi <span class="text-altin italic">Şımartmanın</span> <br>En Zarif Yolu
</h1>
<p class="text-lg text-gray-600 max-w-2xl mx-auto mb-10 leading-relaxed">
Dünyaca ünlü markalar, gurme lezzetler ve seçkin bir atmosfer Şımarık AVM'de sizi bekliyor. Yaşam tarzınızı zirveye taşıyın.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#" class="bg-altin text-white px-8 py-4 rounded-2xl font-semibold flex items-center justify-center gap-2 hover:bg-opacity-90 transition-all premium-shadow">
<i data-lucide="map-pin"></i> Yol Tarifi Al
</a>
<a href="tel:+902120000000" class="border-2 border-altin text-altin px-8 py-4 rounded-2xl font-semibold flex items-center justify-center gap-2 hover:bg-altin hover:text-white transition-all">
<i data-lucide="phone"></i> Bizi Arayın
</a>
</div>
</div>
</section>
<!-- Özellikler -->
<section class="py-16 bg-white/50">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="p-8 bg-white rounded-2xl premium-shadow text-center">
<div class="w-12 h-12 bg-krem text-altin rounded-xl flex items-center justify-center mx-auto mb-4">
<i data-lucide="sparkles"></i>
</div>
<h3 class="text-xl font-bold mb-2">Lüks Markalar</h3>
<p class="text-gray-500 text-sm">Dünyanın en prestijli moda evleri tek bir çatı altında.</p>
</div>
<div class="p-8 bg-white rounded-2xl premium-shadow text-center">
<div class="w-12 h-12 bg-krem text-altin rounded-xl flex items-center justify-center mx-auto mb-4">
<i data-lucide="utensils"></i>
</div>
<h3 class="text-xl font-bold mb-2">Gurme Deneyim</h3>
<p class="text-gray-500 text-sm">Uluslararası mutfaklardan eşsiz lezzet durakları.</p>
</div>
<div class="p-8 bg-white rounded-2xl premium-shadow text-center">
<div class="w-12 h-12 bg-krem text-altin rounded-xl flex items-center justify-center mx-auto mb-4">
<i data-lucide="car"></i>
</div>
<h3 class="text-xl font-bold mb-2">Vale Hizmeti</h3>
<p class="text-gray-500 text-sm">Konforunuz için profesyonel otopark ve vale servisi.</p>
</div>
</div>
</section>
<!-- Ürün Kategorileri (6 Adet) -->
<section class="py-20 max-w-7xl mx-auto px-6">
<h2 class="text-4xl text-center mb-16 italic">Kategorilerimiz</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
<!-- Kat 1 -->
<div class="group cursor-pointer">
<div class="aspect-square bg-white rounded-2xl mb-4 flex items-center justify-center group-hover:bg-altin transition-all duration-500 premium-shadow">
<i data-lucide="shirt" class="w-10 h-10 text-altin group-hover:text-white"></i>
</div>
<p class="text-center font-semibold">Moda</p>
</div>
<!-- Kat 2 -->
<div class="group cursor-pointer">
<div class="aspect-square bg-white rounded-2xl mb-4 flex items-center justify-center group-hover:bg-altin transition-all duration-500 premium-shadow">
<i data-lucide="watch" class="w-10 h-10 text-altin group-hover:text-white"></i>
</div>
<p class="text-center font-semibold">Aksesuar</p>
</div>
<!-- Kat 3 -->
<div class="group cursor-pointer">
<div class="aspect-square bg-white rounded-2xl mb-4 flex items-center justify-center group-hover:bg-altin transition-all duration-500 premium-shadow">
<i data-lucide="gem" class="w-10 h-10 text-altin group-hover:text-white"></i>
</div>
<p class="text-center font-semibold">Mücevher</p>
</div>
<!-- Kat 4 -->
<div class="group cursor-pointer">
<div class="aspect-square bg-white rounded-2xl mb-4 flex items-center justify-center group-hover:bg-altin transition-all duration-500 premium-shadow">
<i data-lucide="refrigerator" class="w-10 h-10 text-altin group-hover:text-white"></i>
</div>
<p class="text-center font-semibold">Teknoloji</p>
</div>
<!-- Kat 5 -->
<div class="group cursor-pointer">
<div class="aspect-square bg-white rounded-2xl mb-4 flex items-center justify-center group-hover:bg-altin transition-all duration-500 premium-shadow">
<i data-lucide="smile" class="w-10 h-10 text-altin group-hover:text-white"></i>
</div>
<p class="text-center font-semibold">Kozmetik</p>
</div>
<!-- Kat 6 -->
<div class="group cursor-pointer">
<div class="aspect-square bg-white rounded-2xl mb-4 flex items-center justify-center group-hover:bg-altin transition-all duration-500 premium-shadow">
<i data-lucide="coffee" class="w-10 h-10 text-altin group-hover:text-white"></i>
</div>
<p class="text-center font-semibold">Kafe</p>
</div>
</div>
</section>
<!-- Harita Bölümü -->
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-6 text-center">
<h2 class="text-3xl mb-8 italic">Bize Ulaşın</h2>
<div class="w-full h-96 bg-gray-200 rounded-2xl overflow-hidden premium-shadow">
<!-- Google Maps Placeholder -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d192698.61119565572!2d28.871754439055272!3d41.0053702119102!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caa7040068086b%3A0xe1cc458444f01ac!2zSXPPhGFuYnVs!5e0!3m2!1str!2str!4v1715430000000!5m2!1str!2str"
width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>
</div>
<p class="mt-6 text-gray-500 italic">Lüksün Kalbi, Şehir Merkezi No: 100, İstanbul</p>
</div>
</section>
<!-- Footer -->
<footer class="py-10 border-t border-gray-100 text-center text-sm text-gray-400">
<p>© 2024 Şımarık AVM. Tüm hakları saklıdır.</p>
</footer>
<script>
// Lucide ikonlarını başlat
lucide.createIcons();
// Çalışma saatleri ve Açık/Kapalı kontrolü
const statusBadge = document.getElementById('status-badge');
const now = new Date();
const hour = now.getHours();
// Örnek çalışma saatleri: 10:00 - 22:00
const isOpen = hour >= 10 && hour < 22;
if (isOpen) {
statusBadge.classList.add('bg-green-100', 'text-green-700');
statusBadge.innerHTML = '<span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span> Şu an Açığız (10:00 - 22:00)';
} else {
statusBadge.classList.add('bg-red-100', 'text-red-700');
statusBadge.innerHTML = '<span class="w-2 h-2 bg-red-500 rounded-full"></span> Şu an Kapalıyız (Açılış 10:00)';
}
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
49
Requests
8
Domains
1098KB
Transfer Size
3032KB
Content Size
685.0ms
Dom Content Loaded
704.0ms
First Paint
1,283.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...