Başlık 3
Modern ve Düzenli Başlık Sistemi Kodu
Aşağıdaki kodlar; yazı sayfalarındaki başlıkları daha profesyonel, düzenli, okunabilir ve modern bir görünüme dönüştürmek için hazırlanmıştır.
Bu sistem:
- Başlıkları hizalar
- Yazıları daha toplu gösterir
- Modern gölgeler ekler
- Renk geçişleri sağlar
- Mobil uyumlu çalışır
- Animasyonlu giriş efekti içerir
- Profesyonel blog ve içerik sitelerine uygun görünür
HTML
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Başlık Tasarımı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header-box">
<span class="mini-title">Profesyonel Yazı Sistemi</span>
<h1>Ana Başlık Buraya Yazılır</h1>
<p>
Bu alan açıklama yazısı için kullanılır.
Daha temiz, modern ve düzenli bir görünüm sağlar.
</p>
</div>
<div class="content-box">
<h2>Alt Başlık</h2>
<p>
İçerik metni burada yer alır.
Tasarım hem masaüstü hem mobil cihazlarda düzgün görünür.
</p>
</div>
<div class="content-box">
<h2>İkinci Alt Başlık</h2>
<p>
Başlık sistemi sayesinde yazılar daha profesyonel görünür.
</p>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: white;
min-height: 100vh;
padding: 40px;
}
.container {
width: 100%;
max-width: 1000px;
margin: auto;
}
.header-box {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(12px);
padding: 40px;
border-radius: 25px;
margin-bottom: 35px;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
animation: fadeUp 1s ease;
}
.mini-title {
display: inline-block;
background: #38bdf8;
color: #0f172a;
padding: 8px 16px;
border-radius: 50px;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
.header-box h1 {
font-size: 48px;
margin-bottom: 20px;
line-height: 1.2;
}
.header-box p {
font-size: 18px;
color: #cbd5e1;
line-height: 1.8;
}
.content-box {
background: rgba(255,255,255,0.06);
padding: 30px;
border-radius: 20px;
margin-bottom: 25px;
transition: 0.4s;
border-left: 5px solid #38bdf8;
}
.content-box:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.10);
}
.content-box h2 {
font-size: 30px;
margin-bottom: 15px;
color: #7dd3fc;
}
.content-box p {
font-size: 17px;
color: #dbeafe;
line-height: 1.7;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media(max-width: 768px) {
body {
padding: 20px;
}
.header-box h1 {
font-size: 34px;
}
.content-box h2 {
font-size: 24px;
}
.header-box,
.content-box {
padding: 25px;
}
}
Bu Kodun Sağladıkları
Görsel Düzen
- Daha temiz başlık görünümü
- Profesyonel kutu sistemi
- Modern cam efekti (Glassmorphism)
- Mobil uyumluluk
Kullanıcı Deneyimi
- Okuması kolay
- Başlıklar daha dikkat çekici
- İçerik bölümleri daha düzenli
Profesyonel Özellikler
- Hover animasyonları
- Yumuşak geçiş efektleri
- Gölgelendirme sistemi
- Responsive tasarım
Daha da Güçlendirmek İçin
İstersen bunun devamında sana:
- Neon efektli başlık sistemi
- Ultra modern admin panel tasarımı
- Premium blog görünümü
- Haber sitesi başlık sistemi
- Apple tarzı minimalist tasarım
- Animasyonlu geçişli başlık sistemi
- Tailwind CSS versiyonu
- React sürümü
- Dark/Light mode sistemi
- Otomatik başlık hizalama sistemi
hazırlayabilirim.
Bu kod şu anda profesyonel seviyede modern bir başlık düzenleme sistemidir.

