3'lü Paket Kıyaslama (Kompakt)

Canlı Önizleme

1000px genişliğindeki alana tam sığan, 3'lü kompakt hosting paketleri:

Uygulama (Kod Yapısı)

Bu tasarımı projelerinize entegre etmek için aşağıdaki HTML hiyerarşisini ve CSS sınıflarını kullanabilirsiniz.

1. HTML Yapısı

<div class="pricing-grid">
    <!-- Standart Kart -->
    <div class="pricing-card">
        <div class="pricing-header">
            <h3 class="pricing-plan-name">Paket İsmi</h3>
            <span class="savings-badge">%70 İndirim</span>
            <div class="current-price">₺ 187.05 \u003cspan\u003e/ay\u003c/span\u003e</div>
        </div>
        <a href="#" class="pricing-btn">Sepete Ekle</a>
        <ul class="features-list">
            <li><span class="text-highlight">Sınırsız</span> Özellik</li>
        </ul>
    </div>

    <!-- Öne Çıkan Kart -->
    <div class="pricing-card featured">
        <div class="featured-badge">TAVSİYE EDİLEN</div>
        ...
    </div>
</div>

2. Kritik CSS Sınıfları

Yerleşimi sağlayan ana CSS tanımları:

/* 3'lü Izgara Yapısı */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Öne Çıkan Paket Vurgusu */
.pricing-card.featured {
    border: 2px solid var(--primary);
    transform: scale(1.03);
    z-index: 2;
}

/* Fiyat ve Buton Alanı */
.current-price { font-size: 2.1rem; font-weight: 800; }
.pricing-btn { background: var(--primary); color: white; }

Tasarım Notları

Bu yerleşimde kullanılan temel kurallar:

• Görsel Hiyerarşi: featured sınıfı, scale ve shadow yardımıyla paketi diğerlerinden bir adım öne çıkarır.
• Renk Modeli: Sadece tanımlı kurumsal palet (Primary Blue ve Secondary Navy) kullanılarak marka bütünlüğü korunmuştur.
• Esneklik: grid-template-columns sayesinde ekran küçüldüğünde kartlar otomatik olarak alt alta dizilir.