Webdesign, digitales Marketing und Videodienste

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

16 December 2024

CSS-animiertes Profil und Benachrichtigung

HTML

<!DOCTYPE html>
<html lang="tr" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Profesyonel hizmetlerimizle ölçülebilir değer sunuyoruz. Tasarım, üretim ve uygulamada gerçekçi çözümler.">
    <title>Şirket Adı | Profesyonel Hizmetler</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#0E7490',
                        accent: '#F59E0B',
                        dark: '#0B1220',
                        light: '#EEF2F6',
                        gray: '#94A3B8',
                    },
                    fontFamily: {
                        heading: ['Manrope', 'sans-serif'],
                        body: ['Inter', 'sans-serif'],
                    },
                    transitionDuration: {
                        DEFAULT: '250ms',
                    },
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            @apply bg-light text-dark dark:bg-dark dark:text-light;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Manrope', sans-serif;
        }
        
        /* Focus styles */
        *:focus-visible {
            @apply outline-none ring-2 ring-accent ring-offset-2 ring-offset-light dark:ring-offset-dark;
        }
        
        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }
        
        /* Hero overlay */
        .hero-overlay {
            background: rgba(11, 18, 32, 0.5);
        }
        
        /* Service card hover */
        .service-card:hover {
            transform: translateY(-4px);
            @apply shadow-lg;
        }
        
        /* Mobile menu animation */
        .mobile-menu {
            transform: translateX(100%);
            transition: transform 300ms ease;
        }
        
        .mobile-menu.open {
            transform: translateX(0);
        }
        
        /* Lightbox */
        .lightbox {
            opacity: 0;
            visibility: hidden;
            transition: opacity 300ms ease, visibility 300ms ease;
        }
        
        .lightbox.open {
            opacity: 1;
            visibility: visible;
        }
        
        /* Video modal */
        .video-modal {
            opacity: 0;
            visibility: hidden;
            transition: opacity 300ms ease, visibility 300ms ease;
        }
        
        .video-modal.open {
            opacity: 1;
            visibility: visible;
        }
    </style>
</head>
<body class="antialiased">
    
    <div class="bg-primary text-white text-sm py-2 px-4">
        <div class="container mx-auto flex justify-between items-center">
            <div>Hafta içi 09:00–18:00 • <a href="tel:+905551234567" class="hover:underline">+90 555 123 45 67</a> • <a href="#map" class="hover:underline">İstanbul</a></div>
            <div class="flex items-center space-x-4">
                <button id="theme-toggle" class="flex items-center justify-center w-6 h-6">
                    <svg id="theme-icon-dark" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                    </svg>
                    <svg id="theme-icon-light" class="w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                    </svg>
                </button>
                <div class="flex items-center space-x-2">
                    <button class="font-medium hover:underline" data-lang="tr">TR</button>
                    <span>/</span>
                    <button class="font-medium hover:underline" data-lang="en">EN</button>
                </div>
            </div>
        </div>
    </div>

<header class="sticky top-0 z-50 bg-white/90 dark:bg-dark/90 backdrop-blur-md shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                
                <a href="#" class="flex items-center">
                    <svg class="w-10 h-10 text-primary" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="48" height="48" rx="8" fill="#0E7490"/>
                        <path d="M24 16L28 24L24 32L20 24L24 16Z" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M32 20L24 24L32 28L28 24L32 20Z" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M16 20L24 24L16 28L20 24L16 20Z" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span class="ml-2 text-xl font-bold text-dark dark:text-white">Şirket Adı</span>
                </a>

<nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="font-medium hover:text-primary">Ana Sayfa</a>
                    <a href="#about" class="font-medium hover:text-primary">Hakkımızda</a>
                    <a href="#services" class="font-medium hover:text-primary">Hizmetler</a>
                    <a href="#projects" class="font-medium hover:text-primary">Projeler</a>
                    <a href="#blog" class="font-medium hover:text-primary">Blog</a>
                    <a href="#contact" class="font-medium hover:text-primary">İletişim</a>
                </nav>

<div class="hidden md:block">
                    <a href="#contact" class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-md font-medium transition-colors">
                        Teklif Al
                    </a>
                </div>

<button id="mobile-menu-button" class="md:hidden flex items-center justify-center w-10 h-10 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800">
                    <svg class="w-6 h-6 text-dark dark:text-light" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </header>

<div id="mobile-menu" class="mobile-menu fixed inset-y-0 right-0 z-50 w-full max-w-xs bg-white dark:bg-dark shadow-xl">
        <div class="flex flex-col h-full p-6">
            <div class="flex justify-between items-center mb-8">
                <a href="#" class="flex items-center">
                    <svg class="w-8 h-8 text-primary" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="48" height="48" rx="8" fill="#0E7490"/>
                        <path d="M24 16L28 24L24 32L20 24L24 16Z" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M32 20L24 24L32 28L28 24L32 20Z" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M16 20L24 24L16 28L20 24L16 20Z" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span class="ml-2 text-lg font-bold text-dark dark:text-white">Şirket Adı</span>
                </a>
                <button id="mobile-menu-close" class="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800">
                    <svg class="w-6 h-6 text-dark dark:text-light" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

<nav class="flex-1 space-y-4">
                <a href="#" class="block py-2 font-medium hover:text-primary">Ana Sayfa</a>
                <a href="#about" class="block py-2 font-medium hover:text-primary">Hakkımızda</a>
                <a href="#services" class="block py-2 font-medium hover:text-primary">Hizmetler</a>
                <a href="#projects" class="block py-2 font-medium hover:text-primary">Projeler</a>
                <a href="#blog" class="block py-2 font-medium hover:text-primary">Blog</a>
                <a href="#contact" class="block py-2 font-medium hover:text-primary">İletişim</a>
            </nav>

<div class="pt-8 border-t border-gray-200 dark:border-gray-700">
                <a href="#contact" class="block w-full text-center bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-md font-medium transition-colors">
                    Teklif Al
                </a>
            </div>

<section class="relative h-screen flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 hero-overlay"></div>
        <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" 
             alt="Hero background" 
             class="absolute inset-0 w-full h-full object-cover" 
             loading="eager" 
             fetchpriority="high">
        
        <div class="container mx-auto px-4 relative z-10 text-center text-white">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">Gerçekçi çözümler, mütevazı yaklaşımla.</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Tasarım, üretim ve uygulamada ölçülebilir değer sunuyoruz.</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#services" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-md font-medium transition-colors">
                    Hizmetler
                </a>
                <a href="#projects" class="bg-white hover:bg-white/90 text-dark px-8 py-3 rounded-md font-medium transition-colors">
                    Projeleri Gör
                </a>
            </div>
        </div>
    </section>

<section id="about" class="py-20 bg-white dark:bg-dark">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2">
                    <h2 class="text-3xl font-bold mb-6">Hakkımızda</h2>
                    <p class="text-lg mb-6">20 yılı aşkın deneyimimizle, sektörde güvenilir bir marka olarak hizmet veriyoruz. Müşteri memnuniyetini her şeyin üzerinde tutan anlayışımızla projelerinize değer katıyoruz.</p>
                    <p class="text-lg mb-8">Uzman ekibimiz ve modern ekipmanlarımızla, en zorlu projelerde bile kaliteden ödün vermeden çalışıyor, sizlere en iyi hizmeti sunmak için çaba gösteriyoruz.</p>
                    <a href="#contact" class="inline-block bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-md font-medium transition-colors">
                        Bize Ulaşın
                    </a>
                </div>
                <div class="md:w-1/2">
                    <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                         alt="Takım fotoğrafı" 
                         class="rounded-lg shadow-lg w-full h-auto"
                         loading="lazy">
                </div>
            </div>

<div class="mt-20 grid grid-cols-1 sm:grid-cols-3 gap-8 text-center">
                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
                    <div class="text-4xl font-bold text-primary mb-2 counter" data-target="15">0</div>
                    <div class="text-lg">Yıllık Deneyim</div>
                </div>
                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
                    <div class="text-4xl font-bold text-primary mb-2 counter" data-target="320">0</div>
                    <div class="text-lg">Tamamlanan Proje</div>
                </div>
                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
                    <div class="text-4xl font-bold text-primary mb-2 counter" data-target="98">0</div>
                    <div class="text-lg">Müşteri Memnuniyeti</div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="py-20 bg-gray-50 dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">Hizmetlerimiz</h2>
                <p class="text-lg max-w-2xl mx-auto">Profesyonel ekibimizle sunduğumuz hizmetlerimiz hakkında bilgi alın.</p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="service-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all duration-300">
                    <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Dijital Tasarım</h3>
                    <p class="text-gray-600 dark:text-gray-400 mb-4">Markanızın dijital dünyadaki yüzünü modern ve etkileyici tasarımlarla oluşturuyoruz.</p>
                    <a href="#" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors">
                        Detaylı Bilgi
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>

<div class="service-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all duration-300">
                    <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Web Geliştirme</h3>
                    <p class="text-gray-600 dark:text-gray-400 mb-4">Hızlı, güvenli ve kullanıcı dostu web siteleri ile dijital varlığınızı güçlendiriyoruz.</p>
                    <a href="#" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors">
                        Detaylı Bilgi
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>

<div class="service-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all duration-300">
                    <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Video Prodüksiyon</h3>
                    <p class="text-gray-600 dark:text-gray-400 mb-4">Profesyonel video çekim ve kurgu hizmetleriyle markanızın hikayesini anlatıyoruz.</p>
                    <a href="#" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors">
                        Detaylı Bilgi
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>

<div class="service-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all duration-300">
                    <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Dijital Pazarlama</h3>
                    <p class="text-gray-600 dark:text-gray-400 mb-4">Hedef kitlenize ulaşmanızı sağlayacak etkili dijital pazarlama stratejileri geliştiriyoruz.</p>
                    <a href="#" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors">
                        Detaylı Bilgi
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>

<div class="service-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all duration-300">
                    <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Mobil Uygulama</h3>
                    <p class="text-gray-600 dark:text-gray-400 mb-4">iOS ve Android platformları için yüksek performanslı mobil uygulamalar geliştiriyoruz.</p>
                    <a href="#" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors">
                        Detaylı Bilgi
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>

<div class="service-card bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md transition-all duration-300">
                    <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold mb-3">SEO Optimizasyon</h3>
                    <p class="text-gray-600 dark:text-gray-400 mb-4">Arama motorlarında üst sıralarda yer almanız için profesyonel SEO hizmetleri sunuyoruz.</p>
                    <a href="#" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors">
                        Detaylı Bilgi
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </section>

<section id="projects" class="py-20 bg-white dark:bg-dark">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">Öne Çıkan Projeler</h2>
                <p class="text-lg max-w-2xl mx-auto">Gerçekleştirdiğimiz başarılı projelerden bir seçki.</p>
            </div>

<div class="flex flex-wrap justify-center gap-2 mb-12">
                <button class="project-filter px-4 py-2 rounded-full bg-primary text-white" data-filter="all">Tümü</button>
                <button class="project-filter px-4 py-2 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700" data-filter="web">Web Tasarım</button>
                <button class="project-filter px-4 py-2 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700" data-filter="branding">Marka Kimliği</button>
                <button class="project-filter px-4 py-2 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700" data-filter="video">Video Prodüksiyon</button>
            </div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                
                <div class="project-item" data-category="web">
                    <div class="relative overflow-hidden rounded-lg group">
                        <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="Web projesi" 
                             class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105"
                             loading="lazy">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <button class="project-view-btn text-white bg-primary hover:bg-primary/90 px-6 py-2 rounded-md font-medium" 
                                    data-image="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                                    data-title="E-Ticaret Web Sitesi"
                                    data-description="XYZ firması için geliştirdiğimiz modern e-ticaret platformu">
                                Detayları Gör
                            </button>
                        </div>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-xl font-bold">E-Ticaret Web Sitesi</h3>
                        <p class="text-gray-600 dark:text-gray-400">Web Tasarım</p>
                    </div>
                </div>

<div class="project-item" data-category="branding">
                    <div class="relative overflow-hidden rounded-lg group">
                        <img src="https://images.unsplash.com/photo-1567443024551-f3e3a7ae8a8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="Marka kimliği projesi" 
                             class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105"
                             loading="lazy">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <button class="project-view-btn text-white bg-primary hover:bg-primary/90 px-6 py-2 rounded-md font-medium" 
                                    data-image="https://images.unsplash.com/photo-1567443024551-f3e3a7ae8a8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                                    data-title="Marka Kimliği Tasarımı"
                                    data-description="ABC şirketi için oluşturduğumuz modern ve minimalist marka kimliği">
                                Detayları Gör
                            </button>
                        </div>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-xl font-bold">Marka Kimliği Tasarımı</h3>
                        <p class="text-gray-600 dark:text-gray-400">Marka Kimliği</p>
                    </div>
                </div>

<div class="project-item" data-category="video">
                    <div class="relative overflow-hidden rounded-lg group">
                        <img src="https://images.unsplash.com/photo-1579107625803-6e4143e83a3d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="Video projesi" 
                             class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105"
                             loading="lazy">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <button class="project-view-btn text-white bg-primary hover:bg-primary/90 px-6 py-2 rounded-md font-medium" 
                                    data-image="https://images.unsplash.com/photo-1579107625803-6e4143e83a3d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                                    data-title="Tanıtım Filmi"
                                    data-description="DEF firması için hazırladığımız kurumsal tanıtım filmi">
                                Detayları Gör
                            </button>
                        </div>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-xl font-bold">Tanıtım Filmi</h3>
                        <p class="text-gray-600 dark:text-gray-400">Video Prodüksiyon</p>
                    </div>
                </div>

<div class="project-item" data-category="web">
                    <div class="relative overflow-hidden rounded-lg group">
                        <img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="Web projesi" 
                             class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105"
                             loading="lazy">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <button class="project-view-btn text-white bg-primary hover:bg-primary/90 px-6 py-2 rounded-md font-medium" 
                                    data-image="https://images.unsplash.com/photo-1559028012-481c04fa702d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                                    data-title="Kurumsal Web Sitesi"
                                    data-description="GHI şirketi için tasarladığımız responsive kurumsal web sitesi">
                                Detayları Gör
                            </button>
                        </div>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-xl font-bold">Kurumsal Web Sitesi</h3>
                        <p class="text-gray-600 dark:text-gray-400">Web Tasarım</p>
                    </div>
                </div>

<div class="project-item" data-category="branding">
                    <div class="relative overflow-hidden rounded-lg group">
                        <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="Marka kimliği projesi" 
                             class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105"
                             loading="lazy">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <button class="project-view-btn text-white bg-primary hover:bg-primary/90 px-6 py-2 rounded-md font-medium" 
                                    data-image="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                                    data-title="Ambalaj Tasarımı"
                                    data-description="JKL markası için hazırladığımız ürün ambalaj tasarımları">
                                Detayları Gör
                            </button>
                        </div>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-xl font-bold">Ambalaj Tasarımı</h3>
                        <p class="text-gray-600 dark:text-gray-400">Marka Kimliği</p>
                    </div>
                </div>

<div class="project-item" data-category="video">
                    <div class="relative overflow-hidden rounded-lg group">
                        <img src="https://images.unsplash.com/photo-1579445710183-f9a816f7da60?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="Video projesi" 
                             class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105"
                             loading="lazy">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <button class="project-view-btn text-white bg-primary hover:bg-primary/90 px-6 py-2 rounded-md font-medium" 
                                    data-image="https://images.unsplash.com/photo-1579445710183-f9a816f7da60?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                                    data-title="Ürün Tanıtım Videosu"
                                    data-description="MNO ürünü için çektiğimiz profesyonel tanıtım videosu">
                                Detayları Gör
                            </button>
                        </div>
                    </div>
                    <div class="mt-4">
                        <h3 class="text-xl font-bold">Ürün Tanıtım Videosu</h3>
                        <p class="text-gray-600 dark:text-gray-400">Video Prodüksiyon</p>
                    </div>
                </div>
            </div>

<div class="text-center mt-12">
                <a href="#" class="inline-block bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-md font-medium transition-colors">
                    Tüm Projeleri Gör
                </a>
            </div>
        </div>
    </section>

<section class="py-20 bg-gray-50 dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">Videolarımız</h2>
                <p class="text-lg max-w-2xl mx-auto">Gerçekleştirdiğimiz projelerden video örnekleri.</p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                    <div class="relative aspect-video">
                        <img src="https://images.unsplash.com/photo-1579107625803-6e4143e83a3d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="Video kapak görseli" 
                             class="w-full h-full object-cover"
                             loading="lazy">
                        <button class="video-play-btn absolute inset-0 m-auto w-16 h-16 bg-primary hover:bg-primary/90 rounded-full flex items-center justify-center text-white transition-colors" 
                                data-video="https://www.youtube.com/embed/dQw4w9WgXcQ">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Kurumsal Tanıtım Filmi</h3>
                        <div class="flex items-center text-gray-600 dark:text-gray-400 mb-4">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span>2:45</span>
                        </div>
                        <p class="text-gray-600 dark:text-gray-400">ABC firması için hazırladığımız kurumsal tanıtım filmi.</p>
                    </div>
                </div>

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                    <div class="relative aspect-video">
                        <img src="https://images.unsplash.com/photo-1579445710183-f9a816f7da60?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="Video kapak görseli" 
                             class="w-full h-full object-cover"
                             loading="lazy">
                        <button class="video-play-btn absolute inset-0 m-auto w-16 h-16 bg-primary hover:bg-primary/90 rounded-full flex items-center justify-center text-white transition-colors" 
                                data-video="https://www.youtube.com/embed/dQw4w9WgXcQ">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Ürün Lansman Videosu</h3>
                        <div class="flex items-center text-gray-600 dark:text-gray-400 mb-4">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span>1:30</span>
                        </div>
                        <p class="text-gray-600 dark:text-gray-400">XYZ ürününün lansmanı için hazırladığımız tanıtım videosu.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-20 bg-white dark:bg-dark">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">Referanslar</h2>
                <p class="text-lg max-w-2xl mx-auto">Müşterilerimizin bizimle ilgili görüşleri.</p>
            </div>

<div class="max-w-4xl mx-auto">
                <div class="testimonial-slider">
                    
                    <div class="testimonial-slide p-8 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
                        <div class="w-20 h-20 mx-auto mb-6 rounded-full overflow-hidden border-4 border-primary">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=128&q=80" 
                                 alt="Müşteri fotoğrafı" 
                                 class="w-full h-full object-cover"
                                 loading="lazy">
                        </div>
                        <p class="text-lg mb-6">"Profesyonel yaklaşımları ve işlerindeki titizlikleri için teşekkür ederiz. Web sitemizin tasarımı ve kullanıcı deneyimi mükemmel oldu."</p>
                        <div>
                            <div class="font-bold">Ayşe Kaya</div>
                            <div class="text-gray-600 dark:text-gray-400">ABC Şirketi, Pazarlama Müdürü</div>
                        </div>
                    </div>

<div class="testimonial-slide p-8 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
                        <div class="w-20 h-20 mx-auto mb-6 rounded-full overflow-hidden border-4 border-primary">
                            <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=128&q=80" 
                                 alt="Müşteri fotoğrafı" 
                                 class="w-full h-full object-cover"
                                 loading="lazy">
                        </div>
                        <p class="text-lg mb-6">"Marka kimliğimizi mükemmel şekilde yansıtan bir çalışma yaptılar. Süreç boyunca gösterdikleri özen ve yaratıcılık için teşekkürler."</p>
                        <div>
                            <div class="font-bold">Mehmet Demir</div>
                            <div class="text-gray-600 dark:text-gray-400">XYZ Markası, Genel Müdür</div>
                        </div>
                    </div>

<div class="testimonial-slide p-8 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
                        <div class="w-20 h-20 mx-auto mb-6 rounded-full overflow-hidden border-4 border-primary">
                            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=128&q=80" 
                                 alt="Müşteri fotoğrafı" 
                                 class="w-full h-full object-cover"
                                 loading="lazy">
                        </div>
                        <p class="text-lg mb-6">"Video prodüksiyon hizmetlerinden çok memnun kaldık. Yaratıcı fikirleri ve teknik becerileri sayesinde harika bir iş çıkardılar."</p>
                        <div>
                            <div class="font-bold">Zeynep Aydın</div>
                            <div class="text-gray-600 dark:text-gray-400">DEF Ürünleri, İletişim Direktörü</div>
                        </div>
                    </div>
                </div>

<section id="blog" class="py-20 bg-gray-50 dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">Blog & İçgörüler</h2>
                <p class="text-lg max-w-2xl mx-auto">Sektörle ilgili güncel bilgiler ve içerikler.</p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:-translate-y-2">
                    <a href="#">
                        <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="Blog post görseli" 
                             class="w-full h-48 object-cover"
                             loading="lazy">
                    </a>
                    <div class="p-6">
                        <div class="flex items-center mb-2">
                            <span class="text-xs font-medium px-2 py-1 bg-primary/10 text-primary rounded-full">Tasarım</span>
                            <span class="text-xs text-gray-500 dark:text-gray-400 ml-auto">15 Haziran 2023</span>
                        </div>
                        <h3 class="text-xl font-bold mb-2">
                            <a href="#" class="hover:text-primary transition-colors">2023'ün En İyi Web Tasarım Trendleri</a>
                        </h3>
                        <p class="text-gray-600 dark:text-gray-400 mb-4">Bu yıl web tasarım dünyasında öne çıkan trendleri ve bu trendlerin kullanıcı deneyimine etkilerini inceledik.</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors">
                            Devamını Oku
                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                    </div>
                </article>

<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:-translate-y-2">
                    <a href="#">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="Blog post görseli" 
                             class="w-full h-48 object-cover"
                             loading="lazy">
                    </a>
                    <div class="p-6">
                        <div class="flex items-center mb-2">
                            <span class="text-xs font-medium px-2 py-1 bg-primary/10 text-primary rounded-full">Pazarlama</span>
                            <span class="text-xs text-gray-500 dark:text-gray-400 ml-auto">2 Haziran 2023</span>
                        </div>
                        <h3 class="text-xl font-bold mb-2">
                            <a href="#" class="hover:text-primary transition-colors">Sosyal Medya Pazarlamasında Yeni Dönem</a>
                        </h3>
                        <p class="text-gray-600 dark:text-gray-400 mb-4">Sosyal medya algoritmalarındaki değişiklikler ve bu
</body>
</html>

Webdesign, digitales Marketing und Videodienste

Empfohlen

IT-Systeme und Netzwerke

waschen und reinigen

CSS-animiertes Profil und Benachrichtigung

HTML

CSS

JS

Empfohlen

IT-Systeme und Netzwerke

waschen und reinigen

CSS-animiertes Profil und Benachrichtigung

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS