Blogium : Modèle HTML de blog sur la technologie, le design et la vie

1,501 Metehan

Ouvrir dans l'éditeur Publiez votre code

Blogium : Modèle HTML de blog sur la technologie, le design et la vie

Recommandé

20 June 2025

Interface utilisateur des icônes de lecteur et d'application CSS Glassmorphism

2 December 2025

Exemple de bouton HTML basique

1 April 2025

Liste de tâches intelligentes

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blogium | Profesyonel Blog Platformu</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .blog-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .category-badge {
            position: absolute;
            top: 15px;
            right: 15px;
        }
        
        .navbar {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.9);
        }
        
        .article-content p {
            margin-bottom: 1.5rem;
            line-height: 1.7;
        }
        
        .article-content h2 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-top: 2.5rem;
            margin-bottom: 1rem;
            color: #2d3748;
        }
        
        .featured-post {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
        }
        
        .featured-post::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
            z-index: 1;
        }
        
        .reading-progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(to right, #667eea, #764ba2);
            z-index: 9999;
            width: 0%;
        }
        
        .tag {
            transition: all 0.2s ease;
        }
        
        .tag:hover {
            background-color: #667eea;
            color: white;
        }
        
        @media (max-width: 768px) {
            .hero-text {
                padding: 0 1rem;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    
    <div class="reading-progress-bar" id="reading-progress"></div>

<nav class="navbar fixed w-full z-50 shadow-md">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-indigo-700">Blogium</a>
            <div class="hidden md:flex space-x-8">
                <a href="#" class="hover:text-indigo-600 transition-colors">Ana Sayfa</a>
                <a href="#" class="hover:text-indigo-600 transition-colors">Kategoriler</a>
                <a href="#" class="hover:text-indigo-600 transition-colors">Popüler</a>
                <a href="#" class="hover:text-indigo-600 transition-colors">Hakkımda</a>
                <a href="#" class="hover:text-indigo-600 transition-colors">İletişim</a>
            </div>
            <div class="flex items-center space-x-4">
                <button class="md:hidden text-gray-600">
                    <i class="fas fa-bars text-xl"></i>
                </button>
                <button class="bg-indigo-600 text-white px-4 py-2 rounded-full hover:bg-indigo-700 transition-colors hidden md:block">
                    Abone Ol
                </button>
            </div>
        </div>
    </nav>

<header class="gradient-bg text-white pt-32 pb-20">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center hero-text">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">Teknoloji, Tasarım ve Yaşam Üzerine Yazılar</h1>
                <p class="text-xl mb-10 opacity-90">Modern dünyanın karmaşıklığını anlamak için rehberiniz</p>
                <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                    <input type="text" placeholder="Makale ara..." class="px-6 py-3 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-300 w-full sm:w-auto">
                    <button class="bg-white text-indigo-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors w-full sm:w-auto">
                        <i class="fas fa-search mr-2"></i> Ara
                    </button>
                </div>
            </div>
        </div>
    </header>

<section class="py-12 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">Öne Çıkan Yazılar</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="featured-post h-96">
                    <img src="https://images.unsplash.com/photo-1555949963-aa79dcee981c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Featured Post" class="w-full h-full object-cover">
                    <div class="absolute bottom-0 left-0 p-8 z-10 text-white">
                        <span class="bg-indigo-600 text-xs px-3 py-1 rounded-full uppercase font-semibold">Teknoloji</span>
                        <h3 class="text-2xl font-bold mt-4">Yapay Zeka Geleceğimizi Nasıl Şekillendiriyor?</h3>
                        <div class="flex items-center mt-4 text-sm">
                            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80" alt="Author" class="w-8 h-8 rounded-full mr-2">
                            <span>Ahmet Yılmaz</span>
                            <span class="mx-2">•</span>
                            <span>12 Mayıs 2023</span>
                        </div>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 gap-6">
                    <div class="flex bg-gray-50 rounded-lg overflow-hidden shadow-sm">
                        <div class="w-1/3">
                            <img src="https://images.unsplash.com/photo-1542744094-3a31f272c490?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Post" class="w-full h-full object-cover">
                        </div>
                        <div class="w-2/3 p-4">
                            <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded-full uppercase font-semibold">Tasarım</span>
                            <h3 class="font-semibold mt-2">2023'ün En İyi Web Tasarım Trendleri</h3>
                            <div class="flex items-center mt-3 text-xs text-gray-500">
                                <span>14 Haziran 2023</span>
                                <span class="mx-2">•</span>
                                <span>5 dk okuma</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex bg-gray-50 rounded-lg overflow-hidden shadow-sm">
                        <div class="w-1/3">
                            <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Post" class="w-full h-full object-cover">
                        </div>
                        <div class="w-2/3 p-4">
                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full uppercase font-semibold">İş Dünyası</span>
                            <h3 class="font-semibold mt-2">Girişimciler İçin Büyüme Stratejileri</h3>
                            <div class="flex items-center mt-3 text-xs text-gray-500">
                                <span>7 Temmuz 2023</span>
                                <span class="mx-2">•</span>
                                <span>7 dk okuma</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex bg-gray-50 rounded-lg overflow-hidden shadow-sm">
                        <div class="w-1/3">
                            <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1715&q=80" alt="Post" class="w-full h-full object-cover">
                        </div>
                        <div class="w-2/3 p-4">
                            <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full uppercase font-semibold">Pazarlama</span>
                            <h3 class="font-semibold mt-2">Sosyal Medya Pazarlamasında Yeni Dönem</h3>
                            <div class="flex items-center mt-3 text-xs text-gray-500">
                                <span>21 Temmuz 2023</span>
                                <span class="mx-2">•</span>
                                <span>6 dk okuma</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row">
                <main class="w-full md:w-2/3 md:pr-8">
                    <h2 class="text-3xl font-bold mb-8">Son Yazılar</h2>
                    
                    <div class="grid grid-cols-1 gap-8">
                        
                        <article class="blog-card bg-white rounded-xl overflow-hidden shadow-md">
                            <div class="relative">
                                <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Blog post" class="w-full h-64 object-cover">
                                <span class="category-badge bg-indigo-600 text-white text-xs px-3 py-1 rounded-full uppercase font-semibold">Teknoloji</span>
                            </div>
                            <div class="p-6">
                                <h3 class="text-2xl font-bold mb-3">Frontend Geliştiriciler İçin 2023 Araçları</h3>
                                <p class="text-gray-600 mb-4">Frontend development sürekli değişen ve gelişen bir alan. 2023'te öne çıkan araçları ve nasıl kullanacaklarını bu yazıda bulabilirsiniz.</p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Author" class="w-10 h-10 rounded-full mr-3">
                                        <div>
                                            <p class="font-medium">Mehmet Kaya</p>
                                            <p class="text-sm text-gray-500">25 Ağustos 2023 • 8 dk okuma</p>
                                        </div>
                                    </div>
                                    <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Devamını Oku <i class="fas fa-arrow-right ml-1"></i></a>
                                </div>
                            </div>
                        </article>
                        
                        
                        <article class="blog-card bg-white rounded-xl overflow-hidden shadow-md">
                            <div class="relative">
                                <img src="https://images.unsplash.com/photo-1542435503-956c469947f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Blog post" class="w-full h-64 object-cover">
                                <span class="category-badge bg-pink-600 text-white text-xs px-3 py-1 rounded-full uppercase font-semibold">Tasarım</span>
                            </div>
                            <div class="p-6">
                                <h3 class="text-2xl font-bold mb-3">Kullanıcı Deneyimi Tasarımında Renk Psikolojisi</h3>
                                <p class="text-gray-600 mb-4">Renkler kullanıcıların duygularını ve davranışlarını nasıl etkiler? UX tasarımında renk seçiminin önemi ve etkili kullanım yöntemleri.</p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1744&q=80" alt="Author" class="w-10 h-10 rounded-full mr-3">
                                        <div>
                                            <p class="font-medium">Zeynep Demir</p>
                                            <p class="text-sm text-gray-500">18 Ağustos 2023 • 6 dk okuma</p>
                                        </div>
                                    </div>
                                    <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Devamını Oku <i class="fas fa-arrow-right ml-1"></i></a>
                                </div>
                            </div>
                        </article>
                        
                        
                        <article class="blog-card bg-white rounded-xl overflow-hidden shadow-md">
                            <div class="relative">
                                <img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Blog post" class="w-full h-64 object-cover">
                                <span class="category-badge bg-green-600 text-white text-xs px-3 py-1 rounded-full uppercase font-semibold">Yaşam</span>
                            </div>
                            <div class="p-6">
                                <h3 class="text-2xl font-bold mb-3">Dijital Detoks: Teknoloji Bağımlılığından Kurtulma Rehberi</h3>
                                <p class="text-gray-600 mb-4">Sürekli ekran karşısında olmanın olumsuz etkileri ve dijital dünyayla sağlıklı bir ilişki kurmak için uygulayabileceğiniz stratejiler.</p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Author" class="w-10 h-10 rounded-full mr-3">
                                        <div>
                                            <p class="font-medium">Can Öztürk</p>
                                            <p class="text-sm text-gray-500">10 Ağustos 2023 • 9 dk okuma</p>
                                        </div>
                                    </div>
                                    <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Devamını Oku <i class="fas fa-arrow-right ml-1"></i></a>
                                </div>
                            </div>
                        </article>
                    </div>
                    
                    <div class="mt-12 flex justify-center">
                        <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-full transition-colors flex items-center">
                            Daha Fazla Yazı Yükle <i class="fas fa-sync-alt ml-2"></i>
                        </button>
                    </div>
                </main>
                
                <aside class="w-full md:w-1/3 mt-12 md:mt-0">
                    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                        <h3 class="text-xl font-bold mb-4">Yazar Hakkında</h3>
                        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80" alt="Author" class="w-24 h-24 rounded-full mx-auto mb-4">
                        <p class="text-center font-medium text-lg">Ahmet Yılmaz</p>
                        <p class="text-center text-gray-600 mb-4">Teknoloji Yazarı & Girişimci</p>
                        <p class="text-gray-700">10 yılı aşkın süredir teknoloji dünyasının içindeyim. Yazılım geliştirme, yapay zeka ve dijital dönüşüm konularında yazılar yazıyorum.</p>
                        <div class="flex justify-center space-x-4 mt-4">
                            <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-twitter text-lg"></i></a>
                            <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-linkedin-in text-lg"></i></a>
                            <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-instagram text-lg"></i></a>
                            <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-medium text-lg"></i></a>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                        <h3 class="text-xl font-bold mb-4">Kategoriler</h3>
                        <ul class="space-y-3">
                            <li class="flex justify-between items-center">
                                <a href="#" class="text-gray-700 hover:text-indigo-600">Teknoloji</a>
                                <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">24</span>
                            </li>
                            <li class="flex justify-between items-center">
                                <a href="#" class="text-gray-700 hover:text-indigo-600">Tasarım</a>
                                <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">15</span>
                            </li>
                            <li class="flex justify-between items-center">
                                <a href="#" class="text-gray-700 hover:text-indigo-600">Yaşam</a>
                                <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">9</span>
                            </li>
                            <li class="flex justify-between items-center">
                                <a href="#" class="text-gray-700 hover:text-indigo-600">İş Dünyası</a>
                                <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">12</span>
                            </li>
                            <li class="flex justify-between items-center">
                                <a href="#" class="text-gray-700 hover:text-indigo-600">Pazarlama</a>
                                <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">7</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                        <h3 class="text-xl font-bold mb-4">Popüler Etiketler</h3>
                        <div class="flex flex-wrap gap-2">
                            <a href="#" class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Yazılım</a>
                            <a href="#" class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">React</a>
                            <a href="#" class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">UI/UX</a>
                            <a href="#" class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Girişimcilik</a>
                            <a href="#" class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Python</a>
                            <a href="#" class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">JavaScript</a>
                            <a href="#" class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Dijital Pazarlama</a>
                            <a href="#" class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Veri Bilimi</a>
                        </div>
                    </div>
                    
                    <div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl shadow-md p-6 text-white">
                        <h3 class="text-xl font-bold mb-4">Bültene Abone Ol</h3>
                        <p class="mb-4">En yeni yazılarımı e-posta adresinize gönderelim.</p>
                        <form>
                            <input type="email" placeholder="E-posta adresiniz" class="w-full px-4 py-3 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-300 mb-3">
                            <button type="submit" class="w-full bg-white text-indigo-600 font-medium py-3 rounded-lg hover:bg-gray-100 transition-colors">Abone Ol</button>
                        </form>
                    </div>
                </aside>
            </div>
        </div>
    </section>

<footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">Blogium</h3>
                    <p class="text-gray-400">Teknoloji, tasarım ve yaşam üzerine düşünceler, rehberler ve deneyimler.</p>
                </div>
                
                <div>
                    <h4 class="font-semibold mb-4">Bağlantılar</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Ana Sayfa</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Hakkımda</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Kategoriler</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">İletişim</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-semibold mb-4">Kategoriler</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Teknoloji</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Tasarım</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Yaşam</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">İş Dünyası</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-semibold mb-4">İletişim</h4>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <i class="fas fa-envelope mr-2 text-gray-400"></i>
                            <span class="text-gray-400">info@blogium.com</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-phone mr-2 text-gray-400"></i>
                            <span class="text-gray-400">+90 212 345 6789</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
                            <span class="text-gray-400">İstanbul, Türkiye</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400">© 2023 Blogium. Tüm hakları saklıdır.</p>
                <div class="flex space-x-4 mt-4 md:mt-0">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>
    </footer>

CSS