WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
InspireX: Modern Web Theme (Tailwind, Video, Gallery)
19
Metehan
Open In Editor
Publish Your Code
Recommended
5 July 2025
Modern Login Panel with Animated Border and Password Reset from TheDoc
14 September 2024
Modern Login Form
21 July 2025
Developer Portfolio: Web, Apps, Design - Dawid Wróbel
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>InspireX — Modern & İlham Verici Tema</title> <meta name="description" content="Profesyonel, gerçekçi ve ilham verici modern web tasarım. Mobil uyumlu menü, video bölümü, fotoğraf galerisi, blog ve daha fazlası." /> <meta name="theme-color" content="#0ea5e9" /> <!-- Tailwind CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> // Tailwind config (isteğe bağlı renk ve font ayarları) tailwind.config = { theme: { extend: { fontFamily: { display: ['Inter', 'ui-sans-serif', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial'], }, colors: { brand: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63' } }, boxShadow: { glow: '0 10px 30px -10px rgba(34,211,238,.4)' } } } } </script> <!-- Favicon Placeholder --> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='46' fill='%2306b6d4'/><text x='50' y='60' text-anchor='middle' font-size='48' fill='white'>İ</text></svg>"> <style> /* Basit fade-up animasyonu */ [data-animate] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } [data-animate].show { opacity: 1; transform: none; } /* Kenar parıltısı efekti */ .edge-light { position: relative; } .edge-light::after { content: ''; position: absolute; inset: -1px; border-radius: 1.25rem; padding: 1px; background: linear-gradient(135deg, rgba(6,182,212,.35), rgba(59,130,246,.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* Video modal scrollbar sakla (mobil uyum) */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } </style> </head> <body class="bg-slate-50 text-slate-800 font-display selection:bg-brand-200 selection:text-slate-900"> <!-- NAVBAR --> <header class="sticky top-0 z-50 backdrop-blur bg-white/70 border-b border-slate-200/60"> <div class="max-w-6xl mx-auto px-4"> <div class="flex items-center justify-between h-16"> <a href="#" class="flex items-center gap-2 group" aria-label="InspireX Ana Sayfa"> <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-sky-500 text-white shadow-glow">İX</span> <span class="text-lg font-semibold tracking-tight group-hover:text-sky-700 transition">InspireX</span> </a> <!-- Desktop Menu --> <nav class="hidden md:flex items-center gap-6 text-sm"> <a href="#features" class="hover:text-sky-700">Özellikler</a> <a href="#video" class="hover:text-sky-700">Videolar</a> <a href="#gallery" class="hover:text-sky-700">Fotoğraflar</a> <a href="#blog" class="hover:text-sky-700">Blog</a> <a href="#pricing" class="hover:text-sky-700">Fiyatlar</a> <a href="#contact" class="hover:text-sky-700">İletişim</a> <a href="#cta" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-900 text-white hover:bg-slate-800 transition shadow-md"> Hemen Başla <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> </a> </nav> <!-- Mobile Toggle --> <button id="menuBtn" class="md:hidden p-2 rounded-lg border border-slate-300 hover:bg-slate-100" aria-expanded="false" aria-controls="mobileMenu" aria-label="Mobil menüyü aç/kapat"> <svg id="iconOpen" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg> <svg id="iconClose" class="h-6 w-6 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> </button> </div> </div> <!-- Mobile Menu --> <div id="mobileMenu" class="md:hidden hidden border-t border-slate-200 bg-white" role="dialog" aria-label="Mobil menü"> <div class="max-w-6xl mx-auto px-4 py-4 grid gap-2 text-base"> <a class="py-2" href="#features">Özellikler</a> <a class="py-2" href="#video">Videolar</a> <a class="py-2" href="#gallery">Fotoğraflar</a> <a class="py-2" href="#blog">Blog</a> <a class="py-2" href="#pricing">Fiyatlar</a> <a class="py-2" href="#contact">İletişim</a> <a class="mt-2 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-slate-900 text-white hover:bg-slate-800 transition shadow-md" href="#cta">Hemen Başla</a> </div> </div> </header> <!-- HERO --> <section class="relative overflow-hidden"> <div class="absolute inset-0 -z-10 bg-gradient-to-b from-sky-50 via-white to-white"></div> <div class="max-w-6xl mx-auto px-4 py-20 grid md:grid-cols-2 gap-10 items-center"> <div data-animate> <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium bg-brand-100 text-brand-800 ring-1 ring-brand-300/50">Yeni Nesil Tasarım</span> <h1 class="mt-4 text-4xl md:text-5xl font-extrabold tracking-tight leading-tight"> Profesyonel, Gerçekçi ve <span class="bg-gradient-to-r from-sky-600 to-brand-600 bg-clip-text text-transparent">İlham Verici</span> Deneyim </h1> <p class="mt-4 text-slate-600 max-w-prose">Mobil menü, video ve fotoğraf bölümleri, modern animasyonlar ve kullanıcı odaklı akış ile zenginleştirilmiş, tamamen duyarlı bir web şablonu.</p> <div class="mt-6 flex flex-wrap gap-3"> <a href="#video" class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-sky-600 text-white hover:bg-sky-700 transition shadow-glow"> Demoyu İzle <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg> </a> <a href="#features" class="inline-flex items-center gap-2 px-5 py-3 rounded-xl border border-slate-300 hover:bg-white transition"> Özellikleri Keşfet <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> </a> </div> <div class="mt-8 grid grid-cols-3 gap-6 text-center"> <div class="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm" aria-label="Hızlı Yükleme"> <p class="text-3xl font-bold">98</p> <p class="text-xs text-slate-500">Lighthouse Performans</p> </div> <div class="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm" aria-label="Duyarlı Tasarım"> <p class="text-3xl font-bold">100</p> <p class="text-xs text-slate-500">Responsive Uyum</p> </div> <div class="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm" aria-label="Erişilebilirlik"> <p class="text-3xl font-bold">A11y</p> <p class="text-xs text-slate-500">Erişilebilir Özellikler</p> </div> </div> </div> <div class="relative" data-animate> <div class="relative edge-light rounded-2xl bg-white p-3 shadow-xl"> <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1600&auto=format&fit=crop" alt="Modern arayüz önizleme" class="rounded-xl w-full aspect-[4/3] object-cover" /> <div class="absolute -bottom-4 -right-4 w-28 h-28 rounded-2xl bg-gradient-to-tr from-brand-300 to-sky-400 opacity-60 blur-2xl"></div> </div> </div> </div> </section> <!-- FEATURES --> <section id="features" class="py-20 bg-white"> <div class="max-w-6xl mx-auto px-4"> <div class="text-center max-w-2xl mx-auto mb-12" data-animate> <h2 class="text-3xl md:text-4xl font-bold">Sadelik + Güç = <span class="text-sky-700">Verimlilik</span></h2> <p class="mt-3 text-slate-600">Performanslı, erişilebilir ve sezgisel bileşenlerle modern deneyim sunun.</p> </div> <div class="grid md:grid-cols-3 gap-6"> <!-- Card 1 --> <div class="p-6 rounded-2xl border border-slate-200 bg-gradient-to-b from-white to-slate-50 shadow-sm" data-animate> <div class="h-12 w-12 rounded-xl bg-sky-600 text-white inline-flex items-center justify-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M8 5v14m8-14v14M3 19h18"/></svg> </div> <h3 class="font-semibold text-lg">Mobil Menü & Duyarlı Yapı</h3> <p class="mt-2 text-slate-600">Kayan mobil menü, klavye/okunabilirlik odaklı erişim öznitelikleri ve hızlı aç/kapa animasyonu.</p> </div> <!-- Card 2 --> <div class="p-6 rounded-2xl border border-slate-200 bg-gradient-to-b from-white to-slate-50 shadow-sm" data-animate> <div class="h-12 w-12 rounded-xl bg-sky-600 text-white inline-flex items-center justify-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20v-6m0 0V4m0 10h8m-8 0H4"/></svg> </div> <h3 class="font-semibold text-lg">Şık Animasyonlar</h3> <p class="mt-2 text-slate-600">Scroll ile görünen yumuşak fade-up animasyonlar ve parıltı efektleri.</p> </div> <!-- Card 3 --> <div class="p-6 rounded-2xl border border-slate-200 bg-gradient-to-b from-white to-slate-50 shadow-sm" data-animate> <div class="h-12 w-12 rounded-xl bg-sky-600 text-white inline-flex items-center justify-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V22a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H2a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.02A1.65 1.65 0 0 0 9 4.09V4a2 2 0 1 1 4 0v.09c0 .66.39 1.26 1 1.51h.02a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06c-.51.51-.66 1.25-.33 1.82.25.61.85 1 1.51 1H22a2 2 0 1 1 0 4h-.09c-.66 0-1.26.39-1.51 1Z"/></svg> </div> <h3 class="font-semibold text-lg">Medya Entegrasyonu</h3> <p class="mt-2 text-slate-600">Video modalı, yerel/harici video ve optimize edilebilir görsel galeri.</p> </div> </div> </div> </section> <!-- VIDEO SECTION --> <section id="video" class="py-20 bg-slate-50"> <div class="max-w-6xl mx-auto px-4 grid md:grid-cols-2 gap-10 items-center"> <div data-animate> <h2 class="text-3xl md:text-4xl font-bold">Videolar ile Anlatın</h2> <p class="mt-3 text-slate-600">Ürününüzü veya hikâyenizi güçlü bir video ile sunun. Aşağıdaki örneği tam ekran modalda izleyebilirsiniz.</p> <ul class="mt-6 space-y-3 text-slate-700 list-disc list-inside"> <li>HTML5 video veya YouTube/Vimeo desteği</li> <li>Otomatik oran koruma (16:9)</li> <li>Klavye ile kapatılabilen modal</li> </ul> <div class="mt-6 flex gap-3"> <button id="openVideo" class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-slate-900 text-white hover:bg-slate-800 transition shadow-md"> Videoyu Aç <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg> </button> <a class="inline-flex items-center gap-2 px-5 py-3 rounded-xl border border-slate-300 hover:bg-white" href="#gallery">Galeriye Git</a> </div> </div> <div class="relative" data-animate> <div class="aspect-video rounded-2xl overflow-hidden border border-slate-200 shadow-xl"> <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1522199794611-8e68227822fd?q=80&w=1600&auto=format&fit=crop" alt="Video önizleme" /> <button id="openVideo2" class="absolute inset-0 m-auto h-16 w-16 rounded-full bg-white/90 backdrop-blur flex items-center justify-center shadow-lg hover:scale-105 transition" aria-label="Videoyu oynat"> <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg> </button> </div> </div> </div> <!-- Video Modal --> <div id="videoModal" class="fixed inset-0 z-50 hidden" aria-hidden="true"> <div class="absolute inset-0 bg-black/60"></div> <div class="absolute inset-0 overflow-y-auto no-scrollbar"> <div class="min-h-full flex items-center justify-center p-6"> <div class="relative w-full max-w-4xl"> <button id="closeVideo" class="absolute -top-12 right-0 text-white/90 hover:text-white" aria-label="Kapat"> <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> </button> <div class="aspect-video rounded-2xl overflow-hidden shadow-2xl ring-1 ring-white/10 bg-black"> <!-- Örnek YouTube embed --> <iframe id="ytFrame" class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div> </div> </div> </div> </div> </section> <!-- GALLERY --> <section id="gallery" class="py-20 bg-white"> <div class="max-w-6xl mx-auto px-4"> <div class="flex items-end justify-between gap-4 mb-8" data-animate> <div> <h2 class="text-3xl md:text-4xl font-bold">Fotoğraf Galerisi</h2> <p class="mt-2 text-slate-600">Yüksek kaliteli görsellerle hikâyenizi güçlendirin. Görsele tıklayın, büyütüp inceleyin.</p> </div> <a href="#" class="hidden md:inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-slate-300 hover:bg-white">Tümünü Gör</a> </div> <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4"> <!-- 6 görsel örneği --> <button class="group relative rounded-xl overflow-hidden border border-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-500" data-lightbox="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1600&auto=format&fit=crop" aria-label="Galeride resmi aç"> <img class="aspect-[4/3] w-full object-cover group-hover:scale-[1.02] transition" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=900&auto=format&fit=crop" alt="Galeri görseli 1" /> </button> <button class="group relative rounded-xl overflow-hidden border border-slate-200" data-lightbox="https://images.unsplash.com/photo-1520975922284-9ce007b6409c?q=80&w=1600&auto=format&fit=crop"> <img class="aspect-[4/3] w-full object-cover group-hover:scale-[1.02] transition" src="https://images.unsplash.com/photo-1520975922284-9ce007b6409c?q=80&w=900&auto=format&fit=crop" alt="Galeri görseli 2" /> </button> <button class="group relative rounded-xl overflow-hidden border border-slate-200" data-lightbox="https://images.unsplash.com/photo-1481277542470-605612bd2d61?q=80&w=1600&auto=format&fit=crop"> <img class="aspect-[4/3] w-full object-cover group-hover:scale-[1.02] transition" src="https://images.unsplash.com/photo-1481277542470-605612bd2d61?q=80&w=900&auto=format&fit=crop" alt="Galeri görseli 3" /> </button> <button class="group relative rounded-xl overflow-hidden border border-slate-200" data-lightbox="https://images.unsplash.com/photo-1529336953121-b0a0b6be24c6?q=80&w=1600&auto=format&fit=crop"> <img class="aspect-[4/3] w-full object-cover group-hover:scale-[1.02] transition" src="https://images.unsplash.com/photo-1529336953121-b0a0b6be24c6?q=80&w=900&auto=format&fit=crop" alt="Galeri görseli 4" /> </button> <button class="group relative rounded-xl overflow-hidden border border-slate-200" data-lightbox="https://images.unsplash.com/photo-1487014679447-9f8336841d58?q=80&w=1600&auto=format&fit=crop"> <img class="aspect-[4/3] w-full object-cover group-hover:scale-[1.02] transition" src="https://images.unsplash.com/photo-1487014679447-9f8336841d58?q=80&w=900&auto=format&fit=crop" alt="Galeri görseli 5" /> </button> <button class="group relative rounded-xl overflow-hidden border border-slate-200" data-lightbox="https://images.unsplash.com/photo-1448932223592-d1fc686e76ea?q=80&w=1600&auto=format&fit=crop"> <img class="aspect-[4/3] w-full object-cover group-hover:scale-[1.02] transition" src="https://images.unsplash.com/photo-1448932223592-d1fc686e76ea?q=80&w=900&auto=format&fit=crop" alt="Galeri görseli 6" /> </button> </div> </div> <!-- Lightbox Modal --> <div id="lightboxModal" class="fixed inset-0 z-50 hidden"> <div class="absolute inset-0 bg-black/70"></div> <div class="absolute inset-0 flex items-center justify-center p-6"> <figure class="relative max-w-5xl w-full"> <button id="closeLightbox" class="absolute -top-12 right-0 text-white/90 hover:text-white" aria-label="Kapat"> <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg> </button> <img id="lightboxImg" class="w-full rounded-2xl shadow-2xl ring-1 ring-white/10" src="" alt="Büyütülmüş görsel" /> <figcaption id="lightboxCaption" class="sr-only">Büyütülmüş görsel</figcaption> </figure> </div> </div> </section> <!-- TESTIMONIALS --> <section class="py-20 bg-slate-50"> <div class="max-w-6xl mx-auto px-4"> <div class="text-center max-w-2xl mx-auto mb-12" data-animate> <h2 class="text-3xl md:text-4xl font-bold">Kullanıcılar Ne Diyor?</h2> <p class="mt-3 text-slate-600">Gerçek geri bildirimlerle güven oluşturun.</p> </div> <div class="grid md:grid-cols-3 gap-6"> <blockquote class="p-6 rounded-2xl bg-white border border-slate-200 shadow-sm" data-animate> <p class="text-slate-700">“Tasarım sade ama çok güçlü. Mobil uyum harika.”</p> <footer class="mt-4 text-sm text-slate-500">— Elif K.</footer> </blockquote> <blockquote class="p-6 rounded-2xl bg-white border border-slate-200 shadow-sm" data-animate> <p class="text-slate-700">“Video ve galeri entegrasyonu tam ihtiyacımız olan şeydi.”</p> <footer class="mt-4 text-sm text-slate-500">— Mert A.</footer> </blockquote> <blockquote class="p-6 rounded-2xl bg-white border border-slate-200 shadow-sm" data-animate> <p class="text-slate-700">“Kurulum kolay, performans mükemmel.”</p> <footer class="mt-4 text-sm text-slate-500">— Derya S.</footer> </blockquote> </div> </div> </section> <!-- BLOG PREVIEW --> <section id="blog" class="py-20 bg-white"> <div class="max-w-6xl mx-auto px-4"> <div class="flex items-end justify-between gap-4 mb-8" data-animate> <div> <h2 class="text-3xl md:text-4xl font-bold">Son Yazılar</h2> <p class="mt-2 text-slate-600">İçgörü, ipucu ve trendler.</p> </div> <a href="#" class="hidden md:inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-slate-300 hover:bg-white">Tüm Yazılar</a> </div> <div class="grid md:grid-cols-3 gap-6"> <!-- Post 1 --> <article class="rounded-2xl border border-slate-200 bg-white overflow-hidden shadow-sm" data-animate> <img class="w-full aspect-video object-cover" src="https://images.unsplash.com/photo-1474631245212-32dc3c8310c6?q=80&w=1600&auto=format&fit=crop" alt="Blog görseli 1"/> <div class="p-6"> <h3 class="font-semibold text-lg">Duyarlı Tasarımın Temelleri</h3> <p class="mt-2 text-slate-600 line-clamp-3">Farklı cihazlarda tutarlı deneyim sunmanın püf noktaları ve pratik ipuçları.</p> <a href="#" class="mt-4 inline-flex items-center gap-2 text-sky-700 hover:underline">Devamını Oku <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> </a> </div> </article> <!-- Post 2 --> <article class="rounded-2xl border border-slate-200 bg-white overflow-hidden shadow-sm" data-animate> <img class="w-full aspect-video object-cover" src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?q=80&w=1600&auto=format&fit=crop" alt="Blog görseli 2"/> <div class="p-6"> <h3 class="font-semibold text-lg">Medya Yönetimi: Görsel ve Video</h3> <p class="mt-2 text-slate-600 line-clamp-3">Hızlı yükleme için optimizasyon, format seçimi ve erişilebilir altyazı ekleme.</p> <a href="#" class="mt-4 inline-flex items-center gap-2 text-sky-700 hover:underline">Devamını Oku <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> </a> </div> </article> <!-- Post 3 --> <article class="rounded-2xl border border-slate-200 bg-white overflow-hidden shadow-sm" data-animate> <img class="w-full aspect-video object-cover" src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?q=80&w=1600&auto=format&fit=crop" alt="Blog görseli 3"/> <div class="p-6"> <h3 class="font-semibold text-lg">Kullanıcı Odaklı Arayüz İpuçları</h3> <p class="mt-2 text-slate-600 line-clamp-3">Net hiyerarşi, kontrast, boşluk ve etkileşim geri bildirimi nasıl kurulur?</p> <a href="#" class="mt-4 inline-flex items-center gap-2 text-sky-700 hover:underline">Devamını Oku <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> </a> </div> </article> </div> </div> </section> <!-- PRICING / CTA --> <section id="pricing" class="py-20 bg-slate-50"> <div class="max-w-6xl mx-auto px-4"> <div class="text-center max-w-2xl mx-auto mb-12" data-animate> <h2 class="text-3xl md:text-4xl font-bold">Şeffaf Fiyatlandırma</h2> <p class="mt-2 text-slate-600">İhtiyacınıza uygun planı seçin. İstediğiniz zaman yükseltin.</p> </div> <div class="grid md:grid-cols-3 gap-6"> <!-- Plan 1 --> <div class="p-6 rounded-2xl bg-white border border-slate-200 shadow-sm" data-animate> <h3 class="font-semibold text-lg">Başlangıç</h3> <p class="mt-1 text-slate-600">Kişisel projeler için</p> <p class="mt-4 text-3xl font-bold">₺0<span class="text-base text-slate-500">/ay</span></p> <ul class="mt-4 space-y-2 text-sm text-slate-600"> <li>Mobil menü</li> <li>Video modal</li> <li>Foto galeri</li> </ul> <a href="#cta" class="mt-6 inline-flex justify-center w-full px-4 py-2 rounded-xl border border-slate-300 hover:bg-white">Başla</a> </div> <!-- Plan 2 (Öne çıkan) --> <div class="p-6 rounded-2xl bg-gradient-to-b from-white to-slate-50 border-2 border-sky-600 shadow-glow" data-animate> <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium bg-sky-100 text-sky-800">En Popüler</div> <h3 class="mt-3 font-semibold text-lg">Profesyonel</h3> <p class="mt-1 text-slate-600">Ekipler ve markalar</p> <p class="mt-4 text-3xl font-bold">₺199<span class="text-base text-slate-500">/ay</span></p> <ul class="mt-4 space-y-2 text-sm text-slate-600"> <li>Özel bileşen seti</li> <li>Gelişmiş animasyonlar</li> <li>Öncelikli destek</li> </ul> <a href="#cta" class="mt-6 inline-flex justify-center w-full px-4 py-2 rounded-xl bg-sky-600 text-white hover:bg-sky-700">Başla</a> </div> <!-- Plan 3 --> <div class="p-6 rounded-2xl bg-white border border-slate-200 shadow-sm" data-animate> <h3 class="font-semibold text-lg">Kurumsal</h3> <p class="mt-1 text-slate-600">Özel ihtiyaçlar</p> <p class="mt-4 text-3xl font-bold">İletişim</p> <ul class="mt-4 space-y-2 text-sm text-slate-600"> <li>Özel entegrasyon</li> <li>Performans danışmanlığı</li> <li>SLA ve güvenlik</li> </ul> <a href="#contact" class="mt-6 inline-flex justify-center w-full px-4 py-2 rounded-xl border border-slate-300 hover:bg-white">Satış ile Görüş</a> </div> </div> </div> </section> <!-- CTA --> <section id="cta" class="py-20 bg-gradient-to-b from-sky-50 via-white to-white"> <div class="max-w-6xl mx-auto px-4 grid md:grid-cols-2 gap-10 items-center"> <div data-animate> <h2 class="text-3xl md:text-4xl font-bold">Hazır mısınız?</h2> <p class="mt-3 text-slate-600">InspireX ile projelerinizi bir üst seviyeye taşıyın. Hızlı kurulum, modern görünüm, güçlü iç yapı.</p> <form class="mt-6 grid sm:grid-cols-[1fr_auto] gap-3" onsubmit="event.preventDefault(); alert('Teşekkürler! Sizinle iletişime geçeceğiz.');"> <label class="sr-only" for="email">E-posta</label> <input id="email" type="email" required placeholder="E-posta adresiniz" class="w-full rounded-xl border-slate-300 focus:border-sky-600 focus:ring-sky-600"/> <button class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-slate-900 text-white hover:bg-slate-800">Kayıt Ol</button> </form> </div> <div data-animate> <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"> <dl class="grid grid-cols-2 gap-6"> <div> <dt class="text-sm text-slate-500">Tamamlanan Proje</dt> <dd class="text-2xl font-bold">+320</dd> </div> <div> <dt class="text-sm text-slate-500">Memnuniyet Oranı</dt> <dd class="text-2xl font-bold">%97</dd> </div> <div> <dt class="text-sm text-slate-500">Ortalama Teslim</dt> <dd class="text-2xl font-bold">5 gün</dd> </div> <div> <dt class="text-sm text-slate-500">Aktif Kullanıcı</dt> <dd class="text-2xl font-bold">12k</dd> </div> </dl> </div> </div> </div> </section> <!-- CONTACT --> <section id="contact" class="py-20 bg-white"> <div class="max-w-6xl mx-auto px-4"> <div class="text-center max-w-2xl mx-auto mb-12" data-animate> <h2 class="text-3xl md:text-4xl font-bold">Bizimle İletişime Geçin</h2> <p class="mt-2 text-slate-600">Sorularınız için formu doldurun, kısa sürede dönüş yapalım.</p> </div> <form class="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto" onsubmit="event.preventDefault(); alert('Mesajınız için teşekkürler!');"> <div class="grid gap-2"> <label for="name" class="text-sm">Ad Soyad</label> <input id="name" type="text" required class="rounded-xl border-slate-300 focus:border-sky-600 focus:ring-sky-600" placeholder="Adınız Soyadınız" /> </div> <div class="grid gap-2"> <label for="mail" class="text-sm">E-posta</label> <input id="mail" type="email" required class="rounded-xl border-slate-300 focus:border-sky-600 focus:ring-sky-600" placeholder="ornek@mail.com" /> </div> <div class="md:col-span-2 grid gap-2"> <label for="message" class="text-sm">Mesaj</label> <input id="message" rows="5" required class="rounded-xl border-slate-300 focus:border-sky-600 focus:ring-sky-600" placeholder="Mesajınızı yazın..."/> </div> <div class="md:col-span-2 flex items-center justify-between"> <label class="inline-flex items-center gap-2 text-sm text-slate-600"><input type="checkbox" required class="rounded border-slate-300"/> KVKK metnini kabul ediyorum</label> <button class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-sky-600 text-white hover:bg-sky-700">Gönder</button> </div> </form> </div> </section> <!-- FOOTER --> <footer class="border-t border-slate-200 bg-white"> <div class="max-w-6xl mx-auto px-4 py-10 grid md:grid-cols-4 gap-8 text-sm"> <div> <a href="#" class="inline-flex items-center gap-2" aria-label="InspireX Ana Sayfa"> <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-sky-500 text-white">İX</span> <span class="font-semibold">InspireX</span> </a> <p class="mt-3 text-slate-600">Modern, gerçekçi ve ilham verici web deneyimleri.</p> </div> <div> <h4 class="font-semibold mb-3">Ürün</h4> <ul class="space-y-2 text-slate-600"> <li><a href="#features" class="hover:text-sky-700">Özellikler</a></li> <li><a href="#pricing" class="hover:text-sky-700">Fiyatlar</a></li> <li><a href="#blog" class="hover:text-sky-700">Blog</a></li> </ul> </div> <div> <h4 class="font-semibold mb-3">Şirket</h4> <ul class="space-y-2 text-slate-600"> <li><a href="#" class="hover:text-sky-700">Hakkımızda</a></li> <li><a href="#contact" class="hover:text-sky-700">İletişim</a></li> <li><a href="#" class="hover:text-sky-700">Kariyer</a></li> </ul> </div> <div> <h4 class="font-semibold mb-3">Bülten</h4> <form class="grid grid-cols-[1fr_auto] gap-2" onsubmit="event.preventDefault(); alert('Abonelik tamamlandı!');"> <label class="sr-only" for="fmail">E-posta</label> <input id="fmail" type="email" required placeholder="E-posta adresiniz" class="rounded-xl border-slate-300 focus:border-sky-600 focus:ring-sky-600"/> <button class="px-4 py-2 rounded-xl bg-slate-900 text-white hover:bg-slate-800">Abone Ol</button> </form> </div> </div> <div class="border-t border-slate-200"> <div class="max-w-6xl mx-auto px-4 py-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-slate-500"> <p>© <span id="year"></span> InspireX. Tüm hakları saklıdır.</p> <div class="flex items-center gap-4"> <a href="#" class="hover:text-slate-700">KVKK</a> <a href="#" class="hover:text-slate-700">Gizlilik</a> <a href="#" class="hover:text-slate-700">Şartlar</a> </div> </div> </div> </footer> <!-- SCRIPTS --> <script> // Yıl document.getElementById('year').textContent = new Date().getFullYear(); // Mobile Menu Toggle const menuBtn = document.getElementById('menuBtn'); const mobileMenu = document.getElementById('mobileMenu'); const iconOpen = document.getElementById('iconOpen'); const iconClose = document.getElementById('iconClose'); function toggleMenu() { const expanded = menuBtn.getAttribute('aria-expanded') === 'true'; menuBtn.setAttribute('aria-expanded', String(!expanded)); mobileMenu.classList.toggle('hidden'); iconOpen.classList.toggle('hidden'); iconClose.classList.toggle('hidden'); } menuBtn.addEventListener('click', toggleMenu); document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !mobileMenu.classList.contains('hidden')) { toggleMenu(); } }); // Scroll ile görünüm animasyonu const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('show'); observer.unobserve(entry.target); } }); }, { threshold: 0.15 }); document.querySelectorAll('[data-animate]').forEach((el) => observer.observe(el)); // Video Modal (YouTube) const videoModal = document.getElementById('videoModal'); const openVideo = document.getElementById('openVideo'); const openVideo2 = document.getElementById('openVideo2'); const closeVideo = document.getElementById('closeVideo'); const ytFrame = document.getElementById('ytFrame'); function showVideo() { videoModal.classList.remove('hidden'); document.body.style.overflow = 'hidden'; // Autoplay için ek parametre (eklemek isterseniz): // ytFrame.src += '&autoplay=1'; } function hideVideo() { videoModal.classList.add('hidden'); document.body.style.overflow = ''; // Videoyu durdurmak için src resetle ytFrame.contentWindow.postMessage(JSON.stringify({ event: 'command', func: 'stopVideo', args: [] }), '*'); } openVideo.addEventListener('click', showVideo); openVideo2.addEventListener('click', showVideo); closeVideo.addEventListener('click', hideVideo); videoModal.addEventListener('click', (e) => { if (e.target === videoModal.firstElementChild || e.target === videoModal) hideVideo(); }); document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !videoModal.classList.contains('hidden')) hideVideo(); }); // Lightbox (Galeri) const lightboxModal = document.getElementById('lightboxModal'); const lightboxImg = document.getElementById('lightboxImg'); const closeLightbox = document.getElementById('closeLightbox'); document.querySelectorAll('[data-lightbox]').forEach((btn) => { btn.addEventListener('click', () => { const src = btn.getAttribute('data-lightbox'); lightboxImg.src = src; lightboxModal.classList.remove('hidden'); document.body.style.overflow = 'hidden'; }); }); function hideLightbox() { lightboxModal.classList.add('hidden'); lightboxImg.src = ''; document.body.style.overflow = ''; } closeLightbox.addEventListener('click', hideLightbox); lightboxModal.addEventListener('click', (e) => { if (e.target === lightboxModal.firstElementChild || e.target === lightboxModal) hideLightbox(); }); document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !lightboxModal.classList.contains('hidden')) hideLightbox(); }); </script> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
