Siteye Modern Duyuru Panosu Ekleme Kodu

Css:

/* TB Duyuru Panosu */
.turkbaseduyuru-board {
 max-width: 700px;
 margin: 30px auto;
 font-family: 'Inter', sans-serif;
}

.turkbaseduyuru-header {
 font-size: 22px;
 font-weight: 700;
 color: #111827;
 margin-bottom: 20px;
 border-left: 4px solid #3b82f6;
 padding-left: 10px;
}

.turkbaseduyuru-card {
 background: #ffffff;
 border-radius: 14px;
 padding: 20px;
 margin-bottom: 16px;
 box-shadow: 0 6px 16px rgba(0,0,0,0.08);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.turkbaseduyuru-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.turkbaseduyuru-title {
 font-size: 18px;
 font-weight: 600;
 color: #111827;
 margin-bottom: 8px;
}

.turkbaseduyuru-text {
 font-size: 15px;
 color: #374151;
 margin-bottom: 10px;
}

.turkbaseduyuru-date {
 font-size: 13px;
 color: #6b7280;
 font-weight: 500;
}

Html:

<!-- TB Duyuru Panosu -->
<div class="turkbaseduyuru-board">
 <div class="turkbaseduyuru-header">
  <span>📢 Duyurular</span>
 </div>
  
 <div class="turkbaseduyuru-card">
  <h4 class="turkbaseduyuru-title">Yeni Özellik Yayında</h4>
  <p class="turkbaseduyuru-text">Forumda artık karanlık mod desteği mevcut.</p>
  <span class="turkbaseduyuru-date">08.05.2026</span>
 </div>
  
 <div class="turkbaseduyuru-card">
  <h4 class="turkbaseduyuru-title">Bakım Çalışması</h4>
  <p class="turkbaseduyuru-text">Sunucular 10 Mayıs’ta 02:00 - 04:00 arası kapalı olacak.</p>
  <span class="turkbaseduyuru-date">07.05.2026</span>
 </div>
</div>