तुर्की ब्लॉग और पॉडकास्ट HTML टेम्पलेट

36 Metehan

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

19 March 2025

HTML और CSS का उपयोग करके वेबसाइट डिज़ाइन

24 June 2025

डिजिटल एजेंसी HTML टेम्पलेट | टेलविंड CSS

13 July 2024

सरलतम लॉगिन फ़ॉर्म टेम्पलेट

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yaratıcı Zihin | Kişisel Blog & Podcast</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6c63ff',
                        secondary: '#E67E50',
                        darkbg: '#1a1a2e',
                        cardbg: 'rgba(255, 255, 255, 0.05)',
                        lighttext: '#f5f5f7',
                    },
                    fontFamily: {
                        montserrat: ['Montserrat', 'sans-serif'],
                        playfair: ['Playfair Display', 'serif']
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #1a1a2e;
            color: #f5f5f7;
            overflow-x: hidden;
        }
        
        .hero-title {
            font-family: 'Playfair Display', serif;
        }
        
        .nav-link {
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #6c63ff;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }
        
        .profile-img {
            transition: transform 0.3s ease;
        }
        
        .profile-img:hover {
            transform: scale(1.02);
        }
        
        .social-icon {
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            transform: translateY(-3px);
            color: #6c63ff;
        }
        
        .blog-card, .podcast-card {
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .blog-card:hover, .podcast-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(108, 99, 255, 0.2);
            background: rgba(108, 99, 255, 0.1);
        }
        
        .hamburger {
            transition: all 0.3s ease;
        }
        
        .hamburger.active .line:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        
        .hamburger.active .line:nth-child(2) {
            opacity: 0;
        }
        
        .hamburger.active .line:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }
        
        .skill-bar {
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            overflow: hidden;
        }
        
        .skill-progress {
            height: 100%;
            background-color: #6c63ff;
            border-radius: 5px;
            position: relative;
            width: 0;
            transition: width 1.5s ease-in-out;
        }
        
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: -1;
            top: 0;
            left: 0;
        }
        
        .scroll-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 50px;
            height: 50px;
            background-color: #6c63ff;
            color: #f5f5f7;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
            z-index: 999;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .scroll-top.active {
            opacity: 1;
            visibility: visible;
        }
        
        .scroll-top:hover {
            background-color: #4d44db;
            transform: translateY(-5px);
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in-up {
            animation: fadeInUp 0.8s forwards;
        }
    </style>
</head>
<body class="min-h-screen">
    
    <div id="particles-js"></div>
    
    
    <div class="scroll-top" id="scroll-top-btn">
        <i class="fas fa-arrow-up"></i>
    </div>
    
    
    <header class="fixed w-full bg-darkbg bg-opacity-90 shadow-sm z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-primary font-montserrat">Yaratıcı<span class="text-lighttext">Zihin</span></a>
            
            
            <nav class="hidden md:flex space-x-8">
                <a href="#anasayfa" class="nav-link active uppercase text-sm font-medium tracking-wider">Anasayfa</a>
                <a href="#hakkimda" class="nav-link uppercase text-sm font-medium tracking-wider">Hakkımda</a>
                <a href="#blog" class="nav-link uppercase text-sm font-medium tracking-wider">Blog</a>
                <a href="#podcast" class="nav-link uppercase text-sm font-medium tracking-wider">Podcast</a>
                <a href="#iletisim" class="nav-link uppercase text-sm font-medium tracking-wider">İletişim</a>
            </nav>
            
            
            <button id="menu-toggle" class="md:hidden focus:outline-none">
                <div class="hamburger">
                    <div class="line w-6 h-0.5 bg-lighttext mb-1.5 transition-all"></div>
                    <div class="line w-6 h-0.5 bg-lighttext mb-1.5 transition-all"></div>
                    <div class="line w-6 h-0.5 bg-lighttext transition-all"></div>
                </div>
            </button>
        </div>
        
        
        <div id="mobile-menu" class="hidden md:hidden bg-darkbg py-4 px-4 shadow-lg">
            <div class="flex flex-col space-y-4">
                <a href="#anasayfa" class="nav-link active uppercase text-sm font-medium tracking-wider py-2">Anasayfa</a>
                <a href="#hakkimda" class="nav-link uppercase text-sm font-medium tracking-wider py-2">Hakkımda</a>
                <a href="#blog" class="nav-link uppercase text-sm font-medium tracking-wider py-2">Blog</a>
                <a href="#podcast" class="nav-link uppercase text-sm font-medium tracking-wider py-2">Podcast</a>
                <a href="#iletisim" class="nav-link uppercase text-sm font-medium tracking-wider py-2">İletişim</a>
            </div>
        </div>
    </header>

<section id="anasayfa" class="pt-32 pb-20 px-4 min-h-screen flex items-center">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                
                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-8 fade-in-up">
                    <h1 class="hero-title text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                        Merhaba, Ben <span class="text-primary">Atilla</span> <br>
                        <span id="typed-text"></span>
                    </h1>
                    <p class="text-lg text-gray-300 mb-8">
                        Dijital dünyanın derinliklerine dalmayı seven bir yaratıcıyım. Burada tasarım, teknoloji, 
                        inovasyon ve kişisel gelişim üzerine düşüncelerimi ve keşiflerimi paylaşıyorum.
                    </p>
                    
                    <div class="flex space-x-6 mb-8">
                        <a href="#" class="social-icon text-xl text-gray-300 hover:text-primary">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="social-icon text-xl text-gray-300 hover:text-primary">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="social-icon text-xl text-gray-300 hover:text-primary">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#" class="social-icon text-xl text-gray-300 hover:text-primary">
                            <i class="fab fa-github"></i>
                        </a>
                    </div>
                    
                    <div class="flex space-x-4">
                        <a href="#blog" class="bg-primary hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium transition-all transform hover:-translate-y-1 shadow-md">
                            Yazılarımı Oku
                        </a>
                        <a href="#iletisim" class="border border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-full font-medium transition-all transform hover:-translate-y-1">
                            İletişime Geç
                        </a>
                    </div>
                </div>
                
                
                <div class="md:w-1/2 flex justify-center fade-in-up">
                    <div class="relative w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96">
                        <div class="absolute inset-0 bg-primary bg-opacity-20 rounded-full transform rotate-6"></div>
                        <div class="absolute inset-0 bg-primary bg-opacity-10 rounded-full transform -rotate-6"></div>
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" 
                             alt="Profil Resmi" 
                             class="profile-img relative w-full h-full object-cover rounded-full border-4 border-darkbg shadow-xl">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="hakkimda" class="py-16 px-4 bg-darkbg bg-opacity-90">
        <div class="container mx-auto">
            <div class="text-center mb-16 fade-in-up">
                <h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">Hakkımda</h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    Ben kimim, neler yaparım ve hangi becerilere sahibim? Tüm detayları bu bölümde bulabilirsiniz.
                </p>
            </div>
            
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2 fade-in-up">
                    <img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.0.3&q=80&w=1470" 
                         alt="Hakkımda Görseli" 
                         class="w-full rounded-lg shadow-xl">
                </div>
                
                <div class="md:w-1/2 fade-in-up">
                    <h3 class="text-2xl font-bold mb-6">Ben Kimim ve Neler Yaparım?</h3>
                    <p class="text-gray-300 mb-6">
                        Ben Atilla Demir, yazılım geliştirme ve dijital tasarım alanında tutkulu bir yaratıcıyım. 
                        Sistem Mühendisliği eğitimimle birlikte, web dünyasının dinamiklerine ve kullanıcı deneyimini 
                        zenginleştirmeye odaklanıyorum.
                    </p>
                    <p class="text-gray-300 mb-8">
                        Bu blog, dijital sanat, yeni teknolojiler, yaratıcı problem çözme ve kişisel öğrenme 
                        yolculuğumu paylaştığım bir platform. Amacım, bilgi birikimimi ve deneyimlerimi aktarırken, 
                        aynı zamanda ilham verici içerikler sunarak sizin de yaratıcı potansiyelinizi keşfetmenize 
                        yardımcı olmak.
                    </p>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4">Yeteneklerim</h3>
                        
                        <div class="mb-5">
                            <div class="flex justify-between mb-1">
                                <span class="text-gray-300">Web Geliştirme (HTML, CSS, JS)</span>
                                <span class="text-gray-300">95%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" style="width: 95%"></div>
                            </div>
                        </div>
                        
                        <div class="mb-5">
                            <div class="flex justify-between mb-1">
                                <span class="text-gray-300">UX/UI Tasarım</span>
                                <span class="text-gray-300">85%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" style="width: 85%"></div>
                            </div>
                        </div>
                        
                        <div class="mb-5">
                            <div class="flex justify-between mb-1">
                                <span class="text-gray-300">Mobil Uygulama Geliştirme</span>
                                <span class="text-gray-300">75%</span>
                            </div>
                            <div class="skill-bar">
                                <div class="skill-progress" style="width: 75%"></div>
                            </div>
                        </div>
                    </div>
                    
                    <a href="#" class="bg-primary hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium inline-block transition-all transform hover:-translate-y-1 shadow-md">
                        CV'mi İndir
                    </a>
                </div>
            </div>
        </div>
    </section>

<section id="blog" class="py-16 px-4 bg-darkbg">
        <div class="container mx-auto">
            <div class="text-center mb-16 fade-in-up">
                <h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">Son Blog Yazılarım</h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    Tasarım, teknoloji ve kişisel gelişim üzerine en son düşüncelerim ve analizlerim.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <article class="blog-card rounded-lg overflow-hidden fade-in-up">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1596700877840-7e1e6f47796d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.0.3&q=80&w=800" 
                             alt="Blog Görseli" 
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>15 Haz 2025</span>
                            <span class="mx-2">•</span>
                            <span>7 dk.</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3 text-primary">Renk Psikolojisi ve Marka Kimliği</h3>
                        <p class="text-gray-400 mb-4">
                            Renklerin markaların bilinirliği ve tüketici algısı üzerindeki derin etkilerini keşfedin.
                        </p>
                        <a href="#" class="text-primary font-medium inline-flex items-center">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>
                
                
                <article class="blog-card rounded-lg overflow-hidden fade-in-up">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1534067783941-51c9c23adec1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.0.3&q=80&w=800" 
                             alt="Blog Görseli" 
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>28 May 2025</span>
                            <span class="mx-2">•</span>
                            <span>9 dk.</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3 text-primary">Web Tasarımında Minimalist Yaklaşım</h3>
                        <p class="text-gray-400 mb-4">
                            Daha azın daha çok olduğu felsefesiyle, sade ve işlevsel web tasarımlarının gücü.
                        </p>
                        <a href="#" class="text-primary font-medium inline-flex items-center">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>
                
                
                <article class="blog-card rounded-lg overflow-hidden fade-in-up">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1456324504191-c1e1945207e7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.0.3&q=80&w=800" 
                             alt="Blog Görseli" 
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>12 Nis 2025</span>
                            <span class="mx-2">•</span>
                            <span>6 dk.</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3 text-primary">Yaratıcı Bloklarla Başa Çıkma Yolları</h3>
                        <p class="text-gray-400 mb-4">
                            İlhamın tükendiği anlar herkesin başına gelebilir. Pratik tekniklerle yeniden akışa geçin.
                        </p>
                        <a href="#" class="text-primary font-medium inline-flex items-center">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>
            </div>
            
            <div class="text-center mt-12 fade-in-up">
                <a href="#" class="inline-block border border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-full font-medium transition-all">
                    Tüm Yazıları Görüntüle
                </a>
            </div>
        </div>
    </section>

<section id="podcast" class="py-16 px-4 bg-darkbg bg-opacity-90">
        <div class="container mx-auto">
            <div class="text-center mb-16 fade-in-up">
                <h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">Yaratıcı Sohbetler Podcast'i</h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    Farklı sektörlerden başarılı yaratıcılarla derinlemesine sohbetler.
                </p>
            </div>
            
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2 fade-in-up">
                    <img src="https://images.unsplash.com/photo-1549060279-7e16f0309e13?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.0.3&q=80&w=1080" 
                         alt="Podcast Görseli" 
                         class="w-full rounded-lg shadow-xl">
                </div>
                
                <div class="md:w-1/2 fade-in-up">
                    <h3 class="text-2xl font-bold mb-6">Fikirlerden İlham Alan Sohbetler</h3>
                    <p class="text-gray-300 mb-6">
                        Farklı sektörlerden başarılı yaratıcılarla, onların ilham kaynakları, kariyer yolculukları 
                        ve projeleri hakkında derinlemesine sohbetler. Her bölümde yeni bir bakış açısı ve motivasyon 
                        bulacaksınız.
                    </p>
                    
                    <div class="podcast-card p-6 rounded-lg mb-8">
                        <h4 class="text-xl font-bold mb-2">Son Bölüm: Bölüm 24 - Sürdürülebilir Tasarım ve Lisa Chen</h4>
                        <p class="text-gray-400 text-sm mb-4">10 Haziran 2024 • 45 dk.</p>
                        <audio controls class="w-full">
                            <source src="#" type="audio/mpeg">
                            Tarayıcınız ses öğesini desteklemiyor.
                        </audio>
                    </div>
                    
                    <div class="flex flex-wrap gap-3">
                        <a href="#" class="bg-[#1DB954] hover:bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium inline-flex items-center">
                            <i class="fab fa-spotify mr-2"></i> Spotify
                        </a>
                        <a href="#" class="bg-[#FD3A69] hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-medium inline-flex items-center">
                            <i class="fab fa-apple mr-2"></i> Apple Podcasts
                        </a>
                        <a href="#" class="bg-[#4285F4] hover:bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium inline-flex items-center">
                            <i class="fab fa-google mr-2"></i> Google Podcasts
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="iletisim" class="py-16 px-4 bg-darkbg">
        <div class="container mx-auto">
            <div class="text-center mb-16 fade-in-up">
                <h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">İletişime Geçin</h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    Projeleriniz, işbirliği teklifleriniz veya sorularınız için bana ulaşın.
                </p>
            </div>
            
            <div class="flex flex-col md:flex-row gap-12">
                <div class="md:w-1/2 fade-in-up">
                    <form class="space-y-6">
                        <div>
                            <label for="name" class="block text-gray-300 mb-2">Adınız Soyadınız</label>
                            <input type="text" id="name" class="w-full px-4 py-3 bg-cardbg border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white">
                        </div>
                        
                        <div>
                            <label for="email" class="block text-gray-300 mb-2">E-posta Adresiniz</label>
                            <input type="email" id="email" class="w-full px-4 py-3 bg-cardbg border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white">
                        </div>
                        
                        <div>
                            <label for="subject" class="block text-gray-300 mb-2">Konu</label>
                            <input type="text" id="subject" class="w-full px-4 py-3 bg-cardbg border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white">
                        </div>
                        
                        <div>
                            <label for="message" class="block text-gray-300 mb-2">Mesajınız</label>
                            <input id="message" rows="5" class="w-full px-4 py-3 bg-cardbg border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white"/>
                        </div>
                        
                        <button type="submit" class="bg-primary hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium transition-all shadow-md w-full">
                            Mesajı Gönder
                        </button>
                    </form>
                </div>
                
                <div class="md:w-1/2 fade-in-up">
                    <div class="bg-cardbg border border-gray-700 rounded-lg p-8">
                        <h3 class="text-xl font-bold mb-6">İletişim Bilgilerim</h3>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="bg-primary bg-opacity-20 p-3 rounded-full mr-4">
                                    <i class="fas fa-map-marker-alt text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-300">Konum</h4>
                                    <p class="text-gray-400">İstanbul, Türkiye</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-primary bg-opacity-20 p-3 rounded-full mr-4">
                                    <i class="fas fa-envelope text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-300">E-posta</h4>
                                    <p class="text-gray-400">info@yaraticizihin.com</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-primary bg-opacity-20 p-3 rounded-full mr-4">
                                    <i class="fas fa-phone-alt text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-300">Telefon</h4>
                                    <p class="text-gray-400">+90 (555) 123 4567</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-primary bg-opacity-20 p-3 rounded-full mr-4">
                                    <i class="fas fa-clock text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-300">Çalışma Saatleri</h4>
                                    <p class="text-gray-400">Pzt-Cum: 09:00 - 17:00</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-8">
                            <h4 class="font-bold text-gray-300 mb-4">Sosyal Medyada Takip Edin</h4>
                            <div class="flex space-x-4">
                                <a href="#" class="social-icon text-xl text-gray-400 hover:text-primary">
                                    <i class="fab fa-instagram"></i>
                                </a>
                                <a href="#" class="social-icon text-xl text-gray-400 hover:text-primary">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="#" class="social-icon text-xl text-gray-400 hover:text-primary">
                                    <i class="fab fa-linkedin-in"></i>
                                </a>
                                <a href="#" class="social-icon text-xl text-gray-400 hover:text-primary">
                                    <i class="fab fa-github"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-darkbg border-t border-gray-800 py-12 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row justify-between">
                <div class="mb-8 md:mb-0">
                    <a href="#" class="text-2xl font-bold text-primary font-montserrat mb-4 inline-block">Yaratıcı<span class="text-lighttext">Zihin</span></a>
                    <p class="text-gray-500 max-w-xs">
                        Yaratıcı düşünce, tasarım ve teknoloji üzerine bir kişisel blog ve podcast.
                    </p>
                </div>
                
                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                    <div>
                        <h3 class="text-lg font-bold mb-4 text-gray-300">Keşfet</h3>
                        <ul class="space-y-2">
                            <li><a href="#anasayfa" class="text-gray-500 hover:text-white transition">Anasayfa</a></li>
                            <li><a href="#hakkimda" class="text-gray-500 hover:text-white transition">Hakkımda</a></li>
                            <li><a href="#blog" class="text-gray-500 hover:text-white transition">Blog</a></li>
                            <li><a href="#podcast" class="text-gray-500 hover:text-white transition">Podcast</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-bold mb-4 text-gray-300">Bağlantılar</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-500 hover:text-white transition">Twitter</a></li>
                            <li><a href="#" class="text-gray-500 hover:text-white transition">Instagram</a></li>
                            <li><a href="#" class="text-gray-500 hover:text-white transition">LinkedIn</a></li>
                            <li><a href="#" class="text-gray-500 hover:text-white transition">GitHub</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-bold mb-4 text-gray-300">Yasal</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-500 hover:text-white transition">Gizlilik Politikası</a></li>
                            <li><a href="#" class="text-gray-500 hover:text-white transition">Kullanım Şartları</a></li>
                            <li><a href="#" class="text-gray-500 hover:text-white transition">Çerez Politikası</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm mb-4 md:mb-0">
                    © 2025 Yaratıcı Zihin. Tüm Hakları Saklıdır.
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-primary transition">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition">
                        <i class="fab fa-github"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

अनुशंसित

HTML और CSS का उपयोग करके वेबसाइट डिज़ाइन

डिजिटल एजेंसी HTML टेम्पलेट | टेलविंड CSS

सरलतम लॉगिन फ़ॉर्म टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS