Blogium: Modelo HTML para blog sobre tecnologia, design e vida

1032 Metehan

Abrir no Editor Video Publique Seu Código

Blogium: Modelo HTML para blog sobre tecnologia, design e vida

Recomendado

21 June 2025

Contêiner de efeitos de luz HTML com CSS

12 December 2025

Jogo HTML5 "Friday Night Funkin'" incorporado

18 September 2024

Hacker Login (ATUALIZAÇÃO) Edição Turca

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>

Recomendado

Contêiner de efeitos de luz HTML com CSS

Jogo HTML5 "Friday Night Funkin'" incorporado

Hacker Login (ATUALIZAÇÃO) Edição Turca

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS