Un código de Metehan

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

14 January 2025

Ejemplo de página web de portafolio

3 January 2025

<!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 = '';
        }
      }
    });
  });
});

Un código de Metehan

Recomendado

Ejemplo de página web de portafolio

Un código de Landingpage1

Un código de adonis1887

HTML

CSS

JS

Recomendado

Ejemplo de página web de portafolio

Un código de Landingpage1

Un código de adonis1887

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS