InspireX : Thème Web moderne (Tailwind, Vidéo, Galerie)

46 Metehan

Ouvrir dans l'éditeur Publiez votre code

InspireX : Thème Web moderne (Tailwind, Vidéo, Galerie)

Recommandé

9 July 2025

Sélecteur de thème d'interface utilisateur : options claires, sombres et atténuées

17 July 2024

Modèle de site Web de portfolio HTML 2024

19 January 2024

Bouton de changement de thème

HTML

<!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" />

<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>

<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>">

/* 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">
  
  <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>

<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>

<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>

<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>

<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>

<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">
        
        <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>
        
        <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>
        
        <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>

<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>

<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">
              
              <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>

<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 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>

<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>

<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">
        
        <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>
        
        <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>
        
        <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>

<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">
        
        <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>
        
        <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>
        
        <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>

<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>

<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 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>

<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');

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>

Recommandé

Sélecteur de thème d'interface utilisateur : options claires, sombres et atténuées

Modèle de site Web de portfolio HTML 2024

Bouton de changement de thème

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS