Un código de Metehan

Abrir en el editor Video Publica tu código

Recomendado

13 April 2025

HTML de Cyberpunk Form: Efecto de falla, seguimiento ocular

3 January 2026

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>Profesyonel Blog Platformu</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Profesyonel ve modern blog platformu">
  <meta name="robots" content="index, follow">
  
  
  <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=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  
  
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  
  <header class="header">
    <div class="container">
      <div class="header-inner">
        <div class="logo">
          <a href="index.html">
            <h1>BlogMaster<span>.</span></h1>
          </a>
        </div>
        
        <nav class="main-nav">
          <ul class="nav-list">
            <li class="nav-item"><a href="#" class="nav-link active">Ana Sayfa</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Kategoriler</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Popüler Yazılar</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Yazarlar</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Hakkımızda</a></li>
            <li class="nav-item"><a href="#" class="nav-link">İletişim</a></li>
          </ul>
        </nav>
        
        <div class="header-actions">
          <div class="search-toggle">
            <i class="fas fa-search"></i>
          </div>
          <div class="theme-toggle">
            <i class="fas fa-moon"></i>
          </div>
          <div class="mobile-menu-toggle">
            <i class="fas fa-bars"></i>
          </div>
        </div>
      </div>
      
      
      <div class="search-container">
        <form class="search-form">
          <input type="text" placeholder="Arama yap..." class="search-input">
          <button type="submit" class="search-btn">
            <i class="fas fa-search"></i>
          </button>
        </form>
      </div>
    </div>
  </header>
  
  
  <div class="mobile-menu">
    <div class="mobile-menu-header">
      <div class="logo">
        <a href="index.html">
          <h1>BlogMaster<span>.</span></h1>
        </a>
      </div>
      <div class="mobile-menu-close">
        <i class="fas fa-times"></i>
      </div>
    </div>
    <nav class="mobile-nav">
      <ul class="mobile-nav-list">
        <li class="mobile-nav-item"><a href="#" class="mobile-nav-link active">Ana Sayfa</a></li>
        <li class="mobile-nav-item"><a href="#" class="mobile-nav-link">Kategoriler</a></li>
        <li class="mobile-nav-item"><a href="#" class="mobile-nav-link">Popüler Yazılar</a></li>
        <li class="mobile-nav-item"><a href="#" class="mobile-nav-link">Yazarlar</a></li>
        <li class="mobile-nav-item"><a href="#" class="mobile-nav-link">Hakkımızda</a></li>
        <li class="mobile-nav-item"><a href="#" class="mobile-nav-link">İletişim</a></li>
      </ul>
    </nav>
  </div>
  
  
  <section class="hero">
    <div class="container">
      <div class="hero-content">
        <div class="featured-label">Öne Çıkan İçerik</div>
        <h2 class="hero-title">Modern Teknolojinin İş Hayatındaki Yeri ve Önemi</h2>
        <p class="hero-excerpt">Günümüz iş dünyasında teknolojinin rolü ve şirketlerin dijital dönüşüme nasıl adapte olduğuna dair kapsamlı bir analiz.</p>
        <div class="hero-meta">
          <div class="author">
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Yazar" class="author-img">
            <span class="author-name">Ahmet Yılmaz</span>
          </div>
          <div class="post-date">
            <i class="far fa-calendar-alt"></i>
            <span>10 Nisan 2023</span>
          </div>
          <div class="post-read-time">
            <i class="far fa-clock"></i>
            <span>10 dk okuma</span>
          </div>
        </div>
        <a href="#" class="btn-primary">Makaleyi Oku</a>
      </div>
    </div>
  </section>
  
  
  <section class="categories">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">Popüler Kategoriler</h2>
        <a href="#" class="view-all">Tümünü Gör <i class="fas fa-arrow-right"></i></a>
      </div>
      <div class="category-cards">
        <div class="category-card">
          <div class="category-icon">
            <i class="fas fa-laptop-code"></i>
          </div>
          <h3 class="category-title">Teknoloji</h3>
          <p class="category-count">48 makale</p>
        </div>
        <div class="category-card">
          <div class="category-icon">
            <i class="fas fa-chart-line"></i>
          </div>
          <h3 class="category-title">İş Dünyası</h3>
          <p class="category-count">32 makale</p>
        </div>
        <div class="category-card">
          <div class="category-icon">
            <i class="fas fa-paint-brush"></i>
          </div>
          <h3 class="category-title">Tasarım</h3>
          <p class="category-count">24 makale</p>
        </div>
        <div class="category-card">
          <div class="category-icon">
            <i class="fas fa-brain"></i>
          </div>
          <h3 class="category-title">Yapay Zeka</h3>
          <p class="category-count">19 makale</p>
        </div>
        <div class="category-card">
          <div class="category-icon">
            <i class="fas fa-globe"></i>
          </div>
          <h3 class="category-title">Dünya</h3>
          <p class="category-count">27 makale</p>
        </div>
      </div>
    </div>
  </section>
  
  
  <section class="latest-posts">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">En Son Yazılar</h2>
        <a href="#" class="view-all">Tümünü Gör <i class="fas fa-arrow-right"></i></a>
      </div>
      <div class="posts-grid">
        
        <div class="post-card">
          <div class="post-image">
            <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d" alt="Blog Post">
            <div class="post-category">Teknoloji</div>
          </div>
          <div class="post-content">
            <h3 class="post-title">Yazılım Geliştirme Süreçlerinde DevOps Yaklaşımı</h3>
            <p class="post-excerpt">DevOps metodolojisiyle yazılım geliştirme ve operasyon süreçlerini nasıl birleştirebileceğinizi öğrenin.</p>
            <div class="post-meta">
              <div class="author">
                <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Yazar" class="author-img">
                <span class="author-name">Mehmet Demir</span>
              </div>
              <div class="post-date">8 Nisan 2023</div>
            </div>
          </div>
        </div>
        
        
        <div class="post-card">
          <div class="post-image">
            <img src="https://images.unsplash.com/photo-1504639725590-34d94c6ea77b" alt="Blog Post">
            <div class="post-category">İş Dünyası</div>
          </div>
          <div class="post-content">
            <h3 class="post-title">Uzaktan Çalışmanın Geleceği ve Şirketlere Etkisi</h3>
            <p class="post-excerpt">Pandemi sonrası uzaktan çalışma modelinin şirket kültürüne ve verimliliğe olan etkilerini inceliyoruz.</p>
            <div class="post-meta">
              <div class="author">
                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Yazar" class="author-img">
                <span class="author-name">Ayşe Kaya</span>
              </div>
              <div class="post-date">5 Nisan 2023</div>
            </div>
          </div>
        </div>
        
        
        <div class="post-card">
          <div class="post-image">
            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085" alt="Blog Post">
            <div class="post-category">Yapay Zeka</div>
          </div>
          <div class="post-content">
            <h3 class="post-title">Yapay Zeka ve Makine Öğrenmesindeki Son Gelişmeler</h3>
            <p class="post-excerpt">Yapay zeka teknolojilerinin günlük hayatımızı nasıl değiştirdiğine dair güncel bir değerlendirme.</p>
            <div class="post-meta">
              <div class="author">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Yazar" class="author-img">
                <span class="author-name">Ali Yıldız</span>
              </div>
              <div class="post-date">1 Nisan 2023</div>
            </div>
          </div>
        </div>
        
        
        <div class="post-card">
          <div class="post-image">
            <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" alt="Blog Post">
            <div class="post-category">İş Dünyası</div>
          </div>
          <div class="post-content">
            <h3 class="post-title">Girişimciler İçin Finansal Yönetim Stratejileri</h3>
            <p class="post-excerpt">Yeni bir iş kurarken dikkat edilmesi gereken finansal yönetim ipuçları ve stratejileri.</p>
            <div class="post-meta">
              <div class="author">
                <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Yazar" class="author-img">
                <span class="author-name">Emre Şahin</span>
              </div>
              <div class="post-date">29 Mart 2023</div>
            </div>
          </div>
        </div>
        
        
        <div class="post-card">
          <div class="post-image">
            <img src="https://images.unsplash.com/photo-1483058712412-4245e9b90334" alt="Blog Post">
            <div class="post-category">Tasarım</div>
          </div>
          <div class="post-content">
            <h3 class="post-title">Web Tasarımda 2023 Trendleri</h3>
            <p class="post-excerpt">Bu yılın öne çıkan web tasarım trendlerini ve kullanıcı deneyiminde yeni yaklaşımları keşfedin.</p>
            <div class="post-meta">
              <div class="author">
                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Yazar" class="author-img">
                <span class="author-name">Zeynep Arslan</span>
              </div>
              <div class="post-date">25 Mart 2023</div>
            </div>
          </div>
        </div>
        
        
        <div class="post-card">
          <div class="post-image">
            <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa" alt="Blog Post">
            <div class="post-category">Teknoloji</div>
          </div>
          <div class="post-content">
            <h3 class="post-title">Siber Güvenlik: Şirketler İçin Temel Önlemler</h3>
            <p class="post-excerpt">Dijital dünyada şirketlerin alması gereken siber güvenlik önlemleri ve veri koruma stratejileri.</p>
            <div class="post-meta">
              <div class="author">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Yazar" class="author-img">
                <span class="author-name">Kemal Özkan</span>
              </div>
              <div class="post-date">20 Mart 2023</div>
            </div>
          </div>
        </div>
      </div>
      <div class="load-more">
        <button class="btn-secondary">Daha Fazla Yükle</button>
      </div>
    </div>
  </section>
  
  
  <section class="featured-author">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">Ayın Yazarı</h2>
      </div>
      <div class="author-spotlight">
        <div class="author-image">
          <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=400&h=400&q=80" alt="Ayın Yazarı">
        </div>
        <div class="author-details">
          <h3 class="author-name">Prof. Dr. Ahmet Yılmaz</h3>
          <p class="author-title">Teknoloji Yazarı & Akademisyen</p>
          <div class="author-stats">
            <div class="stat">
              <span class="stat-number">156</span>
              <span class="stat-label">Makale</span>
            </div>
            <div class="stat">
              <span class="stat-number">14.2K</span>
              <span class="stat-label">Takipçi</span>
            </div>
            <div class="stat">
              <span class="stat-number">4.8</span>
              <span class="stat-label">Değerlendirme</span>
            </div>
          </div>
          <p class="author-bio">
            Prof. Dr. Ahmet Yılmaz, 20 yılı aşkın akademik kariyerinde teknoloji ve inovasyon alanlarında öncü çalışmalar yapmış, 5 kitap yayınlamış ve dünya çapında saygın dergilerde 100'den fazla makale yayınlamıştır. Yapay zeka ve dijital dönüşüm konularında uluslararası bir otorite olarak kabul edilmektedir.
          </p>
          <div class="author-social">
            <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
            <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
            <a href="#" class="social-link"><i class="fab fa-medium-m"></i></a>
            <a href="#" class="social-link"><i class="fas fa-globe"></i></a>
          </div>
          <a href="#" class="btn-primary">Tüm Yazılarını Gör</a>
        </div>
      </div>
    </div>
  </section>
  
  
  <section class="newsletter">
    <div class="container">
      <div class="newsletter-content">
        <h2 class="newsletter-title">En Son İçeriklerden Haberdar Olun</h2>
        <p class="newsletter-text">Haftalık bültenimize abone olarak son makalelerimiz, özel içeriklerimiz ve sektör haberleri hakkında bilgi sahibi olun.</p>
        <form class="newsletter-form">
          <input type="email" placeholder="E-posta adresiniz" required class="newsletter-input">
          <button type="submit" class="btn-primary">Abone Ol</button>
        </form>
        <p class="newsletter-privacy">Kişisel verileriniz <a href="#">Gizlilik Politikamıza</a> uygun olarak korunacaktır.</p>
      </div>
    </div>
  </section>
  
  
  <footer class="footer">
    <div class="container">
      <div class="footer-top">
        <div class="footer-about">
          <div class="logo">
            <h2>BlogMaster<span>.</span></h2>
          </div>
          <p class="about-text">
            BlogMaster, teknoloji, iş dünyası, tasarım ve daha birçok alanda uzman yazarların özgün içeriklerini buluşturduğu bir blog platformudur. Güncel bilgiler, derinlemesine analizler ve sektör trendlerini takip edin.
          </p>
          <div class="social-links">
            <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
            <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
            <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
            <a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
          </div>
        </div>
        <div class="footer-links">
          <h3 class="footer-title">Hızlı Bağlantılar</h3>
          <ul class="footer-list">
            <li><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Hakkımızda</a></li>
            <li><a href="#">Kategoriler</a></li>
            <li><a href="#">Popüler Yazılar</a></li>
            <li><a href="#">Yazarlar</a></li>
            <li><a href="#">İletişim</a></li>
          </ul>
        </div>
        <div class="footer-categories">
          <h3 class="footer-title">Kategoriler</h3>
          <ul class="footer-list">
            <li><a href="#">Teknoloji</a></li>
            <li><a href="#">İş Dünyası</a></li>
            <li><a href="#">Tasarım</a></li>
            <li><a href="#">Yapay Zeka</a></li>
            <li><a href="#">Dünya</a></li>
            <li><a href="#">Yaşam</a></li>
          </ul>
        </div>
        <div class="footer-contact">
          <h3 class="footer-title">İletişim</h3>
          <ul class="contact-list">
            <li class="contact-item">
              <i class="fas fa-map-marker-alt"></i>
              <span>Levent, İstanbul</span>
            </li>
            <li class="contact-item">
              <i class="fas fa-phone"></i>
              <span>+90 212 555 55 55</span>
            </li>
            <li class="contact-item">
              <i class="fas fa-envelope"></i>
              <span>info@blogmaster.com</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="copyright">
          © 2023 BlogMaster. Tüm hakları saklıdır.
        </div>
        <div class="footer-bottom-links">
          <a href="#">Şartlar ve Koşullar</a>
          <a href="#">Gizlilik Politikası</a>
          <a href="#">Çerez Politikası</a>
        </div>
      </div>
    </div>
  </footer>
  
  
  <a href="#" class="back-to-top">
    <i class="fas fa-arrow-up"></i>
  </a>
  
  <script src="script.js"></script>
</body>
</html>

CSS

/* Base Styles */
:root {
  --primary-color: #2563eb;
  --primary-color-dark: #1d4ed8;
  --secondary-color: #f97316;
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --light-color: #f9fafb;
  --dark-color: #111827;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --border-color: #e5e7eb;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --border-radius: 0.5rem;
  --transition-normal: all 0.3s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--light-color);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-normal);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
  border: none;
}

.container {
  width: 100%;
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--text-primary);
  position: relative;
  padding-bottom: 1rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 8rem;
  height: 0.3rem;
  background-color: var(--primary-color);
}

.view-all {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--primary-color);
  transition: var(--transition-normal);
}

.view-all i {
  margin-left: 0.8rem;
  transition: var(--transition-normal);
}

.view-all:hover {
  color: var(--primary-color-dark);
}

.view-all:hover i {
  transform: translateX(0.5rem);
}

/* Buttons */
.btn-primary {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  padding: 1.2rem 2.4rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: var(--transition-normal);
  cursor: pointer;
  text-align: center;
}

.btn-primary:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-2px);
  box-shadow: var(--box-shadow);
}

.btn-secondary {
  display: inline-block;
  background-color: transparent;
  color: var(--primary-color);
  padding: 1.2rem 2.4rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  border: 2px solid var(--primary-color);
  transition: var(--transition-normal);
  cursor: pointer;
  text-align: center;
}

.btn-secondary:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--box-shadow);
}

/* Header */
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: var(--transition-normal);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 8rem;
}

.logo h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

.logo span {
  color: var(--primary-color);
}

.main-nav {
  display: flex;
}

.nav-list {
  display: flex;
  align-items: center;
}

.nav-item {
  margin: 0 1.5rem;
}

.nav-link {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding-bottom: 0.5rem;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: var(--transition-normal);
}

.nav-link:hover, .nav-link.active {
  color: var(--primary-color);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
}

.search-toggle, .theme-toggle, .mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  font-size: 1.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-normal);
}

.search-toggle:hover, .theme-toggle:hover, .mobile-menu-toggle:hover {
  color: var(--primary-color);
}

.mobile-menu-toggle {
  display: none;
}

.search-container {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
  z-index: 10;
}

.search-container.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.search-form {
  display: flex;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
}

.search-input {
  flex: 1;
  padding: 1.2rem 2rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  font-size: 1.6rem;
}

.search-btn {
  background-color: var(--primary-color);
  color: white;
  padding: 0 2rem;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  cursor: pointer;
  transition: var(--transition-normal);
}

.search-btn:hover {
  background-color: var(--primary-color-dark);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 30rem;
  height: 100vh;
  background-color: white;
  z-index: 2000;
  padding: 2rem;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.4s ease-in-out;
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.mobile-menu-close {
  font-size: 2.4rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition-normal);
}

.mobile-menu-close:hover {
  color: var(--danger-color);
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
}

.mobile-nav-item {
  margin-bottom: 1.5rem;
}

.mobile-nav-link {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition-normal);
}

.mobile-nav-link:hover, .mobile-nav-link.active {
  color: var(--primary-color);
}

/* Hero Section */
.hero {
  padding: 12rem 0 6rem;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1499750310107-5fef28a66643') no-repeat center center/cover;
  color: white;
  text-align: center;
}

.hero-content {
  max-width: 80rem;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.featured-label {
  display: inline-block;
  background-color: var(--secondary-color);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 3rem;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2rem;
}

.hero-excerpt {
  font-size: 1.8rem;
  margin-bottom: 3rem;
  opacity: 0.9;
}

.hero-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  font-size: 1.4rem;
}

.author {
  display: flex;
  align-items: center;
  margin-right: 2rem;
}

.author-img {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 1rem;
}

.post-date, .post-read-time {
  display: flex;
  align-items: center;
  margin-right: 2rem;
}

.post-date i, .post-read-time i {
  margin-right: 0.8rem;
}

/* Categories Section */
.categories {
  padding: 8rem 0;
  background-color: white;
}

.category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 3rem;
}

.category-card {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: var(--box-shadow);
  transition: var(--transition-normal);
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  margin: 0 auto 2rem;
  background-color: var(--primary-color);
  color: white;
  font-size: 3rem;
  border-radius: 50%;
}

.category-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.category-count {
  font-size: 1.4rem;
  color: var(--text-tertiary);
}

/* Latest Posts Section */
.latest-posts {
  padding: 8rem 0;
  background-color: var(--gray-100);
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr));
  gap: 3rem;
}

.post-card {
  background-color: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--box-shadow);
  transition: var(--transition-normal);
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.post-image {
  position: relative;
  height: 24rem;
  overflow: hidden;
}

.post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.post-card:hover .post-image img {
  transform: scale(1.05);
}

.post-category {
  position: absolute;
  top: 2rem;
  left: 2rem;
  background-color: var(--primary-color);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 3rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.post-content {
  padding: 2.5rem;
}

.post-title {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1.5rem;
  transition: var(--transition-normal);
}

.post-title:hover {
  color: var(--primary-color);
}

.post-excerpt {
  font-size: 1.5rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.4rem;
  color: var(--text-tertiary);
}

.post-date {
  font-size: 1.4rem;
}

.load-more {
  margin-top: 6rem;
  text-align: center;
}

/* Featured Author Section */
.featured-author {
  padding: 8rem 0;
  background-color: white;
}

.author-spotlight {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  align-items: center;
  padding: 4rem;
  background-color: var(--light-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.author-image {
  flex: 0 0 30rem;
}

.author-image img {
  width: 100%;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.author-details {
  flex: 1;
}

.author-name {
  font-family: 'Playfair Display', serif;
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.author-title {
  font-size: 1.8rem;
  color: var(--text-tertiary);
  margin-bottom: 2rem;
}

.author-stats {
  display: flex;
  gap: 3rem;
  margin-bottom: 2rem;
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--primary-color);
}

.stat-label {
  font-size: 1.4rem;
  color: var(--text-tertiary);
}

.author-bio {
  font-size: 1.6rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.8;
}

.author-social {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--gray-200);
  color: var(--text-secondary);
  font-size: 1.8rem;
  transition: var(--transition-normal);
}

.social-link:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-3px);
}

/* Newsletter Section */
.newsletter {
  padding: 8rem 0;
  background: linear-gradient(135deg, var(--primary-color), #1e40af);
  color: white;
}

.newsletter-content {
  max-width: 70rem;
  margin: 0 auto;
  text-align: center;
}

.newsletter-title {
  font-family: 'Playfair Display', serif;
  font-size: 3.6rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.newsletter-text {
  font-size: 1.8rem;
  margin-bottom: 4rem;
  opacity: 0.9;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 60rem;
  margin: 0 auto 2rem;
}

.newsletter-input {
  flex: 1;
  min-width: 30rem;
  padding: 1.5rem 2rem;
  border-radius: var(--border-radius);
  font-size: 1.6rem;
}

.newsletter-privacy {
  font-size: 1.4rem;
  opacity: 0.8;
}

.newsletter-privacy a {
  text-decoration: underline;
}

.newsletter-privacy a:hover {
  color: var(--gray-300);
}

/* Footer */
.footer {
  background-color: var(--dark-color);
  color: white;
  padding: 8rem 0 2rem;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  gap: 5rem;
  margin-bottom: 5rem;
}

.footer-about {
  max-width: 35rem;
}

.about-text {
  margin: 2rem 0;
  font-size: 1.5rem;
  color: var(--gray-400);
  line-height: 1.8;
}

.social-links {
  display: flex;
  gap: 1.5rem;
}

.footer-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: 1rem;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 6rem;
  height: 0.2rem;
  background-color: var(--primary-color);
}

.footer-list li {
  margin-bottom: 1.5rem;
}

.footer-list a {
  color: var(--gray-400);
  font-size: 1.5rem;
  transition: var(--transition-normal);
}

.footer-list a:hover {
  color: white;
  padding-left: 0.5rem;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: center;
  color: var(--gray-400);
  font-size: 1.5rem;
}

.contact-item i {
  margin-right: 1.5rem;
  color: var(--primary-color);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.4rem;
  color: var(--gray-400);
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-bottom-links {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-bottom-links a {
  color: var(--gray-400);
  transition: var(--transition-normal);
}

.footer-bottom-links a:hover {
  color: white;
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  width: 5rem;
  height: 5rem;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: var(--box-shadow);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
  z-index: 100;
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-5px);
}

/* Media Queries */
@media screen and (max-width: 1200px) {
  html {
    font-size: 58%;
  }
}

@media screen and (max-width: 992px) {
  html {
    font-size: 56%;
  }
  
  .main-nav {
    display: none;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  .posts-grid {
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  }
  
  .hero-title {
    font-size: 4rem;
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 54%;
  }
  
  .hero-title {
    font-size: 3.6rem;
  }
  
  .section-title {
    font-size: 2.8rem;
  }
  
  .author-spotlight {
    flex-direction: column;
    text-align: center;
  }
  
  .author-image {
    flex: 0 0 100%;
    max-width: 30rem;
    margin: 0 auto;
  }
  
  .author-stats {
    justify-content: center;
  }
  
  .author-social {
    justify-content: center;
  }
  
  .newsletter-title {
    font-size: 3rem;
  }
}

@media screen and (max-width: 576px) {
  html {
    font-size: 52%;
  }
  
  .header-inner {
    height: 7rem;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .section-title {
    font-size: 2.4rem;
  }
  
  .category-cards {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
  
  .posts-grid {
    grid-template-columns: 1fr;
  }
  
  .newsletter-form {
    flex-direction: column;
  }
  
  .newsletter-input {
    min-width: 100%;
  }
  
  .footer-top {
    gap: 3rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 400px) {
  .hero-meta {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .author, .post-date, .post-read-time {
    margin-right: 0;
  }
}

JS

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
  // Mobile menu toggle
  const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
  const mobileMenuClose = document.querySelector('.mobile-menu-close');
  const mobileMenu = document.querySelector('.mobile-menu');
  
  if (mobileMenuToggle && mobileMenu && mobileMenuClose) {
    mobileMenuToggle.addEventListener('click', function() {
      mobileMenu.classList.add('active');
      document.body.style.overflow = 'hidden';
    });
    
    mobileMenuClose.addEventListener('click', function() {
      mobileMenu.classList.remove('active');
      document.body.style.overflow = '';
    });
  }
  
  // Search toggle
  const searchToggle = document.querySelector('.search-toggle');
  const searchContainer = document.querySelector('.search-container');
  
  if (searchToggle && searchContainer) {
    searchToggle.addEventListener('click', function() {
      searchContainer.classList.toggle('active');
      
      // Focus on search input when opened
      if (searchContainer.classList.contains('active')) {
        setTimeout(() => {
          document.querySelector('.search-input').focus();
        }, 300);
      }
    });
    
    // Close search when clicking outside
    document.addEventListener('click', function(event) {
      if (!event.target.closest('.search-container') && !event.target.closest('.search-toggle')) {
        searchContainer.classList.remove('active');
      }
    });
  }
  
  // Theme toggle (light/dark mode)
  const themeToggle = document.querySelector('.theme-toggle');
  const htmlElement = document.documentElement;
  
  if (themeToggle) {
    // Check for saved theme preference or prefer-color-scheme
    const savedTheme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
      htmlElement.classList.add('dark-mode');
      themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
    }
    
    themeToggle.addEventListener('click', function() {
      htmlElement.classList.toggle('dark-mode');
      
      if (htmlElement.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
        themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
      } else {
        localStorage.setItem('theme', 'light');
        themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
      }
    });
  }
  
  // Back to top button
  const backToTopButton = document.querySelector('.back-to-top');
  
  if (backToTopButton) {
    window.addEventListener('scroll', function() {
      if (window.scrollY > 300) {
        backToTopButton.classList.add('active');
      } else {
        backToTopButton.classList.remove('active');
      }
    });
    
    backToTopButton.addEventListener('click', function(e) {
      e.preventDefault();
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  }
  
  // Sticky header
  const header = document.querySelector('.header');
  let lastScrollTop = 0;
  
  if (header) {
    window.addEventListener('scroll', function() {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      
      if (scrollTop > 100) {
        header.classList.add('sticky');
      } else {
        header.classList.remove('sticky');
      }
      
      // Hide header when scrolling down, show when scrolling up
      if (scrollTop > lastScrollTop && scrollTop > 200) {
        header.style.transform = 'translateY(-100%)';
      } else {
        header.style.transform = 'translateY(0)';
      }
      
      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
    });
  }
  
  // Newsletter form submission
  const newsletterForm = document.querySelector('.newsletter-form');
  
  if (newsletterForm) {
    newsletterForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const emailInput = this.querySelector('input[type="email"]');
      const email = emailInput.value.trim();
      
      // Basic email validation
      if (isValidEmail(email)) {
        // Here you would typically send the data to your server
        alert('Bültenimize başarıyla abone oldunuz!');
        emailInput.value = '';
      } else {
        alert('Lütfen geçerli bir e-posta adresi giriniz.');
      }
    });
    
    // Email validation helper function
    function isValidEmail(email) {
      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(String(email).toLowerCase());
    }
  }
  
  // Initialize animations on scroll
  const animateOnScroll = function() {
    const elements = document.querySelectorAll('.post-card, .category-card, .author-spotlight');
    
    elements.forEach(function(element) {
      const elementPosition = element.getBoundingClientRect().top;
      const screenPosition = window.innerHeight / 1.2;
      
      if (elementPosition < screenPosition) {
        element.classList.add('animate-in');
      }
    });
  };
  
  // Add animation classes to CSS
  const style = document.createElement('style');
  style.textContent = `
    .post-card, .category-card, .author-spotlight {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .animate-in {
      opacity: 1;
      transform: translateY(0);
    }
  `;
  document.head.appendChild(style);
  
  // Run animations on scroll and on load
  window.addEventListener('scroll', animateOnScroll);
  window.addEventListener('load', animateOnScroll);
  
  // Smooth scrolling for anchor links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      if (this.getAttribute('href') === '#') return;
      
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
        
        // Close mobile menu if open
        if (mobileMenu && mobileMenu.classList.contains('active')) {
          mobileMenu.classList.remove('active');
          document.body.style.overflow = '';
        }
      }
    });
  });
});

Recomendado

Un código de gherhz

HTML de Cyberpunk Form: Efecto de falla, seguimiento ocular

Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS