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>

Guzel bir paylasim, tesekkurler. Duyuru panolu tasarimlar kullanici deneyimini gercekten iyilestiriyor. CSS animasyonlarini da ekleyerek daha dinamik bir gorunum elde etmek mumkun. Benzer bir yaklasimi projelerimizde de kullaniyoruz, ozellikle SaaS urunlerde bildirim panelleri icin bu tur hazir kod parcaciklari cok islevsel oluyor.

@BuinsoftTech dedi ki:

Guzel bir paylasim, tesekkurler. Duyuru panolu tasarimlar kullanici deneyimini gercekten iyilestiriyor. CSS animasyonlarini da ekleyerek daha dinamik bir gorunum elde etmek mumkun. Benzer bir yaklasimi projelerimizde de kullaniyoruz, ozellikle SaaS urunlerde bildirim panelleri icin bu tur hazir kod parcaciklari cok islevsel oluyor.

Rica ederim :) bazen bulmak zor oluyor böyle paylşımlar eskiden çok yapılırdı.. Faydamız olursa ne mutlu.