Web Design, Marketing Digital e Serviços de Vídeo

23 Metehan

Abrir no Editor Publique Seu Código

Web Design, Marketing Digital e Serviços de Vídeo

Recomendado

10 November 2024

Jogo da velha

19 March 2025

Caixas de seleção de sabre de luz Star Wars em CSS3 puro

30 March 2025

Efeito de embaralhamento de texto

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>

Recomendado

Jogo da velha

Caixas de seleção de sabre de luz Star Wars em CSS3 puro

Efeito de embaralhamento de texto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS