Esprit créatif : blog, podcast, créativité, technologie

32 Metehan

Ouvrir dans l'éditeur Publiez votre code

Esprit créatif : blog, podcast, créativité, technologie

Recommandé

24 June 2025

Web Leb : solutions numériques, conception Web et technologie

24 June 2025

Beril Coşkun: Blog, Culture, Littérature - Site Personnel

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Creative Mind - Modern düşüncelerin buluşma noktası. Kişisel gelişim, yaratıcılık ve teknoloji üzerine derinlemesine yazılar.">
    <meta name="keywords" content="blog, yaratıcılık, kişisel gelişim, teknoloji, podcast, creative mind">
    <meta name="author" content="Creative Mind">
    <meta name="robots" content="index, follow">

<meta property="og:title" content="Creative Mind Blog">
    <meta property="og:description" content="Modern düşüncelerin buluşma noktası">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://creativemind.blog">
    <meta property="og:image" content="https://creativemind.blog/og-image.jpg">

<meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Creative Mind Blog">
    <meta name="twitter:description" content="Modern düşüncelerin buluşma noktası">
    <meta name="twitter:image" content="https://creativemind.blog/twitter-image.jpg">

<title>Creative Mind - Modern Düşüncelerin Buluşma Noktası</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<script src="https://cdn.tailwindcss.com"></script>

/* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

::-webkit-scrollbar-track {
            background: #F5F1E8;
        }

::-webkit-scrollbar-thumb {
            background: #E67E50;
            border-radius: 4px;
        }

::-webkit-scrollbar-thumb:hover {
            background: #D66A3A;
        }

/* Hover animations */
        .hover-scale {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.hover-scale:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 20px 40px rgba(230, 126, 80, 0.15);
        }

.hover-glow:hover {
            box-shadow: 0 0 20px rgba(230, 126, 80, 0.4);
        }

/* Gradient backgrounds */
        .gradient-bg {
            background: linear-gradient(135deg, #F5F1E8 0%, #E8DCC0 100%);
        }

.hero-gradient {
            background: linear-gradient(135deg, #F5F1E8 0%, #EADED1 50%, #E67E50 100%);
        }

/* Animation delays */
        .animate-delay-100 { animation-delay: 0.1s; }
        .animate-delay-200 { animation-delay: 0.2s; }
        .animate-delay-300 { animation-delay: 0.3s; }
        .animate-delay-400 { animation-delay: 0.4s; }
        .animate-delay-500 { animation-delay: 0.5s; }

/* Custom button styles */
        .btn-primary {
            background: linear-gradient(135deg, #E67E50, #F4A76F);
            transition: all 0.3s ease;
        }

.btn-primary:hover {
            background: linear-gradient(135deg, #D66A3A, #E67E50);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(230, 126, 80, 0.3);
        }

/* Parallax effect */
        .parallax {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body class="font-montserrat bg-cream text-dark-brown leading-relaxed">
    
    <nav class="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md shadow-lg z-50 transition-all duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                
                <div class="flex items-center space-x-2 animate-slideInLeft">
                    <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                        <i class="fas fa-brain text-white text-lg"></i>
                    </div>
                    <span class="font-playfair text-2xl font-bold text-dark-brown">Creative Mind</span>
                </div>

<div class="hidden md:flex items-center space-x-8">
                    <a href="#home" class="text-dark-brown hover:text-primary transition-colors duration-300 font-medium">Ana Sayfa</a>
                    <a href="#about" class="text-dark-brown hover:text-primary transition-colors duration-300 font-medium">Hakkımda</a>
                    <a href="#blog" class="text-dark-brown hover:text-primary transition-colors duration-300 font-medium">Blog</a>
                    <a href="#podcast" class="text-dark-brown hover:text-primary transition-colors duration-300 font-medium">Podcast</a>
                    <a href="#contact" class="text-dark-brown hover:text-primary transition-colors duration-300 font-medium">İletişim</a>
                </div>

<div class="md:hidden">
                    <button id="mobile-menu-btn" class="text-dark-brown hover:text-primary transition-colors">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>

<div id="mobile-menu" class="md:hidden bg-white/95 backdrop-blur-md shadow-lg hidden">
            <div class="px-4 py-4 space-y-3">
                <a href="#home" class="block text-dark-brown hover:text-primary transition-colors duration-300 font-medium">Ana Sayfa</a>
                <a href="#about" class="block text-dark-brown hover:text-primary transition-colors duration-300 font-medium">Hakkımda</a>
                <a href="#blog" class="block text-dark-brown hover:text-primary transition-colors duration-300 font-medium">Blog</a>
                <a href="#podcast" class="block text-dark-brown hover:text-primary transition-colors duration-300 font-medium">Podcast</a>
                <a href="#contact" class="block text-dark-brown hover:text-primary transition-colors duration-300 font-medium">İletişim</a>
            </div>
        </div>
    </nav>

<section id="home" class="hero-gradient min-h-screen flex items-center justify-center relative overflow-hidden">
        
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary/10 rounded-full animate-pulse-slow"></div>
            <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-sage/10 rounded-full animate-bounce-slow"></div>
        </div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                
                <div class="text-center lg:text-left animate-fadeInUp">
                    <h1 class="font-playfair text-5xl md:text-6xl lg:text-7xl font-bold text-dark-brown mb-6 leading-tight">
                        Creative
                        <span class="text-primary block">Mind</span>
                    </h1>
                    <p class="text-xl md:text-2xl text-warm-gray mb-8 max-w-2xl">
                        Modern düşüncelerin buluşma noktası. Yaratıcılık, teknoloji ve kişisel gelişim üzerine derinlemesine keşifler.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                        <button class="btn-primary text-white px-8 py-4 rounded-full font-semibold text-lg hover-glow">
                            <i class="fas fa-book-open mr-2"></i>
                            Blog'u Keşfet
                        </button>
                        <button class="border-2 border-primary text-primary px-8 py-4 rounded-full font-semibold text-lg hover:bg-primary hover:text-white transition-all duration-300">
                            <i class="fas fa-podcast mr-2"></i>
                            Podcast Dinle
                        </button>
                    </div>
                </div>

<div class="flex justify-center lg:justify-end animate-fadeInUp animate-delay-300">
                    <div class="bg-white rounded-3xl p-8 shadow-2xl hover-scale max-w-md w-full">
                        <div class="text-center">
                            <div class="w-32 h-32 bg-gradient-to-br from-primary to-light-orange rounded-full mx-auto mb-6 flex items-center justify-center shadow-lg">
                                <i class="fas fa-user text-white text-4xl"></i>
                            </div>
                            <h3 class="font-playfair text-2xl font-bold text-dark-brown mb-2">Ahmet Yıldız</h3>
                            <p class="text-warm-gray mb-4">Yaratıcı Düşünür & İçerik Üreticisi</p>
                            <p class="text-sm text-warm-gray mb-6 leading-relaxed">
                                10+ yıllık deneyimimle teknoloji, yaratıcılık ve kişisel gelişim alanlarında
                                size ilham verici içerikler sunuyorum.
                            </p>

<div class="flex justify-center space-x-4">
                                <a href="#" class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark-brown transition-colors duration-300 hover-glow">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark-brown transition-colors duration-300 hover-glow">
                                    <i class="fab fa-linkedin"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark-brown transition-colors duration-300 hover-glow">
                                    <i class="fab fa-instagram"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark-brown transition-colors duration-300 hover-glow">
                                    <i class="fab fa-youtube"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
            <a href="#about" class="text-primary hover:text-dark-brown transition-colors duration-300">
                <i class="fas fa-chevron-down text-2xl"></i>
            </a>
        </div>
    </section>

<section id="about" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 animate-fadeInUp">
                <h2 class="font-playfair text-4xl md:text-5xl font-bold text-dark-brown mb-6">Hakkımda</h2>
                <p class="text-xl text-warm-gray max-w-3xl mx-auto">
                    Yaratıcılık ve teknolojinin kesişiminde, insanları ilham veren hikayeler anlatıyorum.
                </p>
            </div>

<div class="grid lg:grid-cols-3 gap-8">
                
                <div class="text-center p-8 bg-cream rounded-2xl hover-scale animate-fadeInUp animate-delay-100">
                    <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-lightbulb text-white text-2xl"></i>
                    </div>
                    <h3 class="font-playfair text-2xl font-bold text-dark-brown mb-4">Misyon</h3>
                    <p class="text-warm-gray leading-relaxed">
                        Yaratıcı düşünceyi teşvik ederek, insanların potansiyellerini keşfetmelerine yardımcı olmak.
                    </p>
                </div>

<div class="text-center p-8 bg-cream rounded-2xl hover-scale animate-fadeInUp animate-delay-200">
                    <div class="w-16 h-16 bg-sage rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-eye text-white text-2xl"></i>
                    </div>
                    <h3 class="font-playfair text-2xl font-bold text-dark-brown mb-4">Vizyon</h3>
                    <p class="text-warm-gray leading-relaxed">
                        Düşüncenin gücüyle dolu bir dünya yaratmak ve her bireyin yaratıcı potansiyelini ortaya çıkarmak.
                    </p>
                </div>

<div class="text-center p-8 bg-cream rounded-2xl hover-scale animate-fadeInUp animate-delay-300">
                    <div class="w-16 h-16 bg-navy rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-heart text-white text-2xl"></i>
                    </div>
                    <h3 class="font-playfair text-2xl font-bold text-dark-brown mb-4">Değerler</h3>
                    <p class="text-warm-gray leading-relaxed">
                        Özgünlük, sürekli öğrenme, empati ve yaratıcı düşünce ile hareket etmek.
                    </p>
                </div>
            </div>
        </div>
    </section>

<section id="blog" class="py-20 gradient-bg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 animate-fadeInUp">
                <h2 class="font-playfair text-4xl md:text-5xl font-bold text-dark-brown mb-6">Son Yazılar</h2>
                <p class="text-xl text-warm-gray max-w-3xl mx-auto">
                    Yaratıcılık, teknoloji ve kişisel gelişim üzerine en güncel düşüncelerim.
                </p>
            </div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <article class="bg-white rounded-2xl overflow-hidden shadow-lg hover-scale animate-fadeInUp animate-delay-100">
                    <div class="h-48 bg-gradient-to-br from-primary to-light-orange flex items-center justify-center">
                        <i class="fas fa-brain text-white text-4xl"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">Yaratıcılık</span>
                            <span class="text-warm-gray text-sm ml-3">15 Aralık 2024</span>
                        </div>
                        <h3 class="font-playfair text-xl font-bold text-dark-brown mb-3">
                            Yaratıcı Düşüncenin Gücü: Beyninizi Nasıl Eğitirsiniz?
                        </h3>
                        <p class="text-warm-gray mb-4 text-sm leading-relaxed">
                            Yaratıcılık sadece sanatçıların ayrıcalığı değil. Herkesin geliştirebileceği bir beceri...
                        </p>
                        <a href="#" class="text-primary hover:text-dark-brown font-semibold inline-flex items-center transition-colors duration-300">
                            Devamını Oku <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </article>

<article class="bg-white rounded-2xl overflow-hidden shadow-lg hover-scale animate-fadeInUp animate-delay-200">
                    <div class="h-48 bg-gradient-to-br from-sage to-primary flex items-center justify-center">
                        <i class="fas fa-rocket text-white text-4xl"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="bg-sage text-white px-3 py-1 rounded-full text-sm font-medium">Teknoloji</span>
                            <span class="text-warm-gray text-sm ml-3">12 Aralık 2024</span>
                        </div>
                        <h3 class="font-playfair text-xl font-bold text-dark-brown mb-3">
                            Yapay Zeka Çağında İnsan Yaratıcılığının Rolü
                        </h3>
                        <p class="text-warm-gray mb-4 text-sm leading-relaxed">
                            AI teknolojileri gelişirken, insan yaratıcılığı nasıl evrimleşiyor ve neden hala...
                        </p>
                        <a href="#" class="text-primary hover:text-dark-brown font-semibold inline-flex items-center transition-colors duration-300">
                            Devamını Oku <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </article>

<article class="bg-white rounded-2xl overflow-hidden shadow-lg hover-scale animate-fadeInUp animate-delay-300">
                    <div class="h-48 bg-gradient-to-br from-navy to-sage flex items-center justify-center">
                        <i class="fas fa-seedling text-white text-4xl"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="bg-navy text-white px-3 py-1 rounded-full text-sm font-medium">Kişisel Gelişim</span>
                            <span class="text-warm-gray text-sm ml-3">10 Aralık 2024</span>
                        </div>
                        <h3 class="font-playfair text-xl font-bold text-dark-brown mb-3">
                            Sürekli Öğrenme: Geleceğin En Değerli Becerisi
                        </h3>
                        <p class="text-warm-gray mb-4 text-sm leading-relaxed">
                            Hızla değişen dünyada ayakta kalmanın sırrı: sürekli öğrenme alışkanlığı...
                        </p>
                        <a href="#" class="text-primary hover:text-dark-brown font-semibold inline-flex items-center transition-colors duration-300">
                            Devamını Oku <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </article>
            </div>

<div class="text-center mt-12">
                <a href="#" class="btn-primary text-white px-8 py-4 rounded-full font-semibold text-lg hover-glow inline-flex items-center">
                    <i class="fas fa-plus mr-2"></i>
                    Tüm Yazıları Görüntüle
                </a>
            </div>
        </div>
    </section>

<section id="podcast" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 animate-fadeInUp">
                <h2 class="font-playfair text-4xl md:text-5xl font-bold text-dark-brown mb-6">Creative Mind Podcast</h2>
                <p class="text-xl text-warm-gray max-w-3xl mx-auto">
                    Yaratıcı düşünce ve inovasyonu keşfettiğimiz sesli yolculuk.
                </p>
            </div>

<div class="grid lg:grid-cols-2 gap-12 items-center">
                
                <div class="animate-slideInLeft">
                    <div class="bg-gradient-to-br from-primary to-light-orange rounded-3xl p-8 text-white">
                        <div class="flex items-center mb-6">
                            <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-microphone text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="font-playfair text-2xl font-bold">Son Bölüm</h3>
                                <p class="text-white/80">Bölüm #42</p>
                            </div>
                        </div>

<h4 class="font-playfair text-xl font-bold mb-4">
                            "Dijital Çağda Yaratıcılığın Dönüşümü"
                        </h4>

<p class="text-white/90 mb-6 leading-relaxed">
                            Bu bölümde teknolojinin yaratıcılık üzerindeki etkilerini ve dijital araçların
                            sanatsal ifadeyi nasıl şekillendirdiğini konuşuyoruz.
                        </p>

<div class="bg-white/10 rounded-xl p-4 mb-6">
                            <div class="flex items-center justify-between mb-3">
                                <span class="text-sm">00:00</span>
                                <span class="text-sm">42:35</span>
                            </div>
                            <div class="w-full bg-white/20 h-2 rounded-full mb-4">
                                <div class="bg-white h-2 rounded-full w-1/3"></div>
                            </div>
                            <div class="flex items-center justify-center space-x-6">
                                <button class="text-white/80 hover:text-white transition-colors">
                                    <i class="fas fa-backward text-lg"></i>
                                </button>
                                <button class="w-12 h-12 bg-white text-primary rounded-full flex items-center justify-center hover:bg-white/90 transition-colors">
                                    <i class="fas fa-play"></i>
                                </button>
                                <button class="text-white/80 hover:text-white transition-colors">
                                    <i class="fas fa-forward text-lg"></i>
                                </button>
                            </div>
                        </div>

<div class="flex flex-wrap gap-3">
                            <a href="#" class="flex items-center bg-white/10 hover:bg-white/20 rounded-lg px-3 py-2 transition-colors">
                                <i class="fab fa-spotify mr-2"></i>
                                <span class="text-sm">Spotify</span>
                            </a>
                            <a href="#" class="flex items-center bg-white/10 hover:bg-white/20 rounded-lg px-3 py-2 transition-colors">
                                <i class="fab fa-apple mr-2"></i>
                                <span class="text-sm">Apple</span>
                            </a>
                            <a href="#" class="flex items-center bg-white/10 hover:bg-white/20 rounded-lg px-3 py-2 transition-colors">
                                <i class="fab fa-google mr-2"></i>
                                <span class="text-sm">Google</span>
                            </a>
                        </div>
                    </div>
                </div>

<div class="animate-slideInRight">
                    <h3 class="font-playfair text-2xl font-bold text-dark-brown mb-6">Son Bölümler</h3>

<div class="space-y-4">
                        
                        <div class="bg-cream rounded-xl p-4 hover:bg-primary/10 transition-colors duration-300 cursor-pointer">
                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fas fa-play text-white"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-semibold text-dark-brown mb-1">Yaratıcı Blok Nasıl Aşılır?</h4>
                                    <p class="text-warm-gray text-sm">Bölüm #41 • 38 dk</p>
                                </div>
                            </div>
                        </div>

<div class="bg-cream rounded-xl p-4 hover:bg-primary/10 transition-colors duration-300 cursor-pointer">
                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-sage rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fas fa-play text-white"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-semibold text-dark-brown mb-1">Teknoloji ve İnsan İlişkileri</h4>
                                    <p class="text-warm-gray text-sm">Bölüm #40 • 45 dk</p>
                                </div>
                            </div>
                        </div>

<div class="bg-cream rounded-xl p-4 hover:bg-primary/10 transition-colors duration-300 cursor-pointer">
                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-navy rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fas fa-play text-white"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-semibold text-dark-brown mb-1">Minimalizm ve Odaklanma</h4>
                                    <p class="text-warm-gray text-sm">Bölüm #39 • 52 dk</p>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="mt-6">
                        <a href="#" class="text-primary hover:text-dark-brown font-semibold inline-flex items-center transition-colors duration-300">
                            Tüm Bölümleri Dinle <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-20 bg-gradient-to-br from-primary to-light-orange">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="animate-fadeInUp">
                <div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-envelope text-white text-3xl"></i>
                </div>
                <h2 class="font-playfair text-4xl md:text-5xl font-bold text-white mb-6">
                    Haftalık İlham Bülteni
                </h2>
                <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed">
                    Her hafta yaratıcılık, teknoloji ve kişisel gelişim üzerine özenle seçilmiş
                    içerikleri doğrudan e-posta kutunuza gönderiyorum.
                </p>

<form class="max-w-lg mx-auto">
                    <div class="flex flex-col sm:flex-row gap-4">
                        <input
                            type="email"
                            placeholder="E-posta adresiniz"
                            class="flex-1 px-6 py-4 rounded-full text-dark-brown placeholder-warm-gray focus:outline-none focus:ring-4 focus:ring-white/30 transition-all duration-300"
                            required
                        >
                        <button
                            type="submit"
                            class="bg-white text-primary px-8 py-4 rounded-full font-semibold hover:bg-cream transition-all duration-300 hover:shadow-xl"
                        >
                            <i class="fas fa-paper-plane mr-2"></i>
                            Abone Ol
                        </button>
                    </div>
                </form>

<p class="text-white/80 text-sm mt-4">
                    <i class="fas fa-lock mr-1"></i>
                    E-posta adresiniz güvende. Spam göndermiyoruz.
                </p>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 animate-fadeInUp">
                <h2 class="font-playfair text-4xl md:text-5xl font-bold text-dark-brown mb-6">İletişime Geçin</h2>
                <p class="text-xl text-warm-gray max-w-3xl mx-auto">
                    Sorularınız, önerileriniz veya işbirliği teklifleriniz için benimle iletişime geçebilirsiniz.
                </p>
            </div>

<div class="grid lg:grid-cols-2 gap-12">
                
                <div class="animate-slideInLeft">
                    <div class="space-y-6">
                        <div class="flex items-start space-x-4">
                            <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-envelope text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-dark-brown mb-1">E-posta</h3>
                                <p class="text-warm-gray">hello@creativemind.blog</p>
                            </div>
                        </div>

<div class="flex items-start space-x-4">
                            <div class="w-12 h-12 bg-sage rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-phone text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-dark-brown mb-1">Telefon</h3>
                                <p class="text-warm-gray">+90 (555) 123-4567</p>
                            </div>
                        </div>

<div class="flex items-start space-x-4">
                            <div class="w-12 h-12 bg-navy rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-map-marker-alt text-white"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-dark-brown mb-1">Konum</h3>
                                <p class="text-warm-gray">İstanbul, Türkiye</p>
                            </div>
                        </div>
                    </div>

<div class="mt-8">
                        <h3 class="font-semibold text-dark-brown mb-4">Sosyal Medya</h3>
                        <div class="flex space-x-4">
                            <a href="#" class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark-brown transition-colors duration-300 hover-glow">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark-brown transition-colors duration-300 hover-glow">
                                <i class="fab fa-linkedin"></i>
                            </a>
                            <a href="#" class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark-brown transition-colors duration-300 hover-glow">
                                <i class="fab fa-instagram"></i>
                            </a>
                            <a href="#" class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark-brown transition-colors duration-300 hover-glow">
                                <i class="fab fa-youtube"></i>
                            </a>
                            <a href="#" class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center hover:bg-dark-brown transition-colors duration-300 hover-glow">
                                <i class="fab fa-medium"></i>
                            </a>
                        </div>
                    </div>
                </div>

<div class="animate-slideInRight">
                    <form class="space-y-6">
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-dark-brown font-medium mb-2">Ad Soyad</label>
                                <input
                                    type="text"
                                    class="w-full px-4 py-3 border border-cream rounded-lg focus:outline-none focus:ring-2 focus:ring-primary transition-all duration-300"
                                    placeholder="Adınız ve soyadınız"
                                    required
                                >
                            </div>
                            <div>
                                <label class="block text-dark-brown font-medium mb-2">E-posta</label>
                                <input
                                    type="email"
                                    class="w-full px-4 py-3 border border-cream rounded-lg focus:outline-none focus:ring-2 focus:ring-primary transition-all duration-300"
                                    placeholder="E-posta adresiniz"
                                    required
                                >
                            </div>
                        </div>

<div>
                            <label class="block text-dark-brown font-medium mb-2">Mesaj</label>
                            <input rows="5"
                                class="w-full px-4 py-3 border border-cream rounded-lg focus:outline-none focus:ring-2 focus:ring-primary transition-all duration-300 resize-none"
                                placeholder="Mesajınızı buraya yazın..."
                                required
                            />
                        </div>

<button
                            type="submit"
                            class="w-full btn-primary text-white px-8 py-4 rounded-lg font-semibold text-lg hover-glow"
                        >
                            <i class="fas fa-paper-plane mr-2"></i>
                            Mesaj Gönder
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-dark-brown text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-4 gap-8">
                
                <div class="md:col-span-2">
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                            <i class="fas fa-brain text-white text-lg"></i>
                        </div>
                        <span class="font-playfair text-2xl font-bold">Creative Mind</span>
                    </div>
                    <p class="text-white/80 max-w-md leading-relaxed mb-6">
                        Modern düşüncelerin buluşma noktası. Yaratıcılık, teknoloji ve kişisel gelişim
                        üzerine derinlemesine keşifler yapıyoruz.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-white/60 hover:text-primary transition-colors duration-300">
                            <i class="fab fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-white/60 hover:text-primary transition-colors duration-300">
                            <i class="fab fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-white/60 hover:text-primary transition-colors duration-300">
                            <i class="fab fa-instagram text-xl"></i>
                        </a>
                        <a href="#" class="text-white/60 hover:text-primary transition-colors duration-300">
                            <i class="fab fa-youtube text-xl"></i>
                        </a>
                    </div>
                </div>

<div>
                    <h3 class="font-semibold mb-4">Hızlı Linkler</h3>
                    <ul class="space-y-2">
                        <li><a href="#home" class="text-white/80 hover:text-primary transition-colors duration-300">Ana Sayfa</a></li>
                        <li><a href="#about" class="text-white/80 hover:text-primary transition-colors duration-300">Hakkımda</a></li>
                        <li><a href="#blog" class="text-white/80 hover:text-primary transition-colors duration-300">Blog</a></li>
                        <li><a href="#podcast" class="text-white/80 hover:text-primary transition-colors duration-300">Podcast</a></li>
                        <li><a href="#contact" class="text-white/80 hover:text-primary transition-colors duration-300">İletişim</a></li>
                    </ul>
                </div>

<div>
                    <h3 class="font-semibold mb-4">Kategoriler</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-white/80 hover:text-primary transition-colors duration-300">Yaratıcılık</a></li>
                        <li><a href="#" class="text-white/80 hover:text-primary transition-colors duration-300">Teknoloji</a></li>
                        <li><a href="#" class="text-white/80 hover:text-primary transition-colors duration-300">Kişisel Gelişim</a></li>
                        <li><a href="#" class="text-white/80 hover:text-primary transition-colors duration-300">İnovasyon</a></li>
                        <li><a href="#" class="text-white/80 hover:text-primary transition-colors duration-300">Girişimcilik</a></li>
                    </ul>
                </div>
            </div>

<div class="border-t border-white/20 mt-12 pt-8 text-center">
                <p class="text-white/60">
                    © 2024 Creative Mind. Tüm hakları saklıdır.
                    <a href="#" class="text-primary hover:text-white transition-colors duration-300">Gizlilik Politikası</a> |
                    <a href="#" class="text-primary hover:text-white transition-colors duration-300">Kullanım Şartları</a>
                </p>
            </div>
        </div>
    </footer>

<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-primary text-white rounded-full shadow-lg hover:bg-dark-brown transition-all duration-300 opacity-0 invisible hover-glow">
        <i class="fas fa-chevron-up"></i>
    </button>

<script>
        // Mobile Menu Toggle
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');

mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

// Back to Top Button
        const backToTopBtn = document.getElementById('back-to-top');

backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Navbar Background on Scroll
        const navbar = document.querySelector('nav');
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 50) {
                navbar.classList.add('bg-white/95');
                navbar.classList.remove('bg-white/90');
            } else {
                navbar.classList.add('bg-white/90');
                navbar.classList.remove('bg-white/95');
            }
        });

// Smooth Scroll for Anchor Links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    // Close mobile menu if open
                    mobileMenu.classList.add('hidden');
                }
            });
        });

// Intersection Observer for Animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

// Observe animated elements
        document.querySelectorAll('[class*="animate-"]').forEach(el => {
            el.style.animationPlayState = 'paused';
            observer.observe(el);
        });

// Newsletter Form
        const newsletterForm = document.querySelector('form');
        if (newsletterForm) {
            newsletterForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const email = e.target.querySelector('input[type="email"]').value;

// Simple email validation
                if (email && email.includes('@')) {
                    alert('Teşekkürler! Bülten listemize başarıyla eklendi.');
                    e.target.reset();
                } else {
                    alert('Lütfen geçerli bir e-posta adresi girin.');
                }
            });
        }

// Contact Form
        const contactForm = document.querySelector('#contact form');
        if (contactForm) {
            contactForm.addEventListener('submit', (e) => {
                e.preventDefault();
                alert('Mesajınız başarıyla gönderildi! En kısa sürede geri dönüş yapacağım.');
                e.target.reset();
            });
        }

// Podcast Player Simulation
        const playBtn = document.querySelector('.fa-play');
        if (playBtn) {
            playBtn.closest('button').addEventListener('click', () => {
                if (playBtn.classList.contains('fa-play')) {
                    playBtn.classList.remove('fa-play');
                    playBtn.classList.add('fa-pause');
                } else {
                    playBtn.classList.remove('fa-pause');
                    playBtn.classList.add('fa-play');
                }
            });
        }

// Add loading animation
        window.addEventListener('load', () => {
            document.body.classList.add('loaded');
        });

// Parallax effect for hero section
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const heroSection = document.getElementById('home');
            if (heroSection) {
                const speed = scrolled * -0.5;
                heroSection.style.transform = `translateY(${speed}px)`;
            }
        });

// Dynamic year in footer
        const currentYear = new Date().getFullYear();
        document.querySelector('footer p').innerHTML = document.querySelector('footer p').innerHTML.replace('2024', currentYear);
    </script>
</body>
</html>

Recommandé

Web Leb : solutions numériques, conception Web et technologie

Beril Coşkun: Blog, Culture, Littérature - Site Personnel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS