Özellikler ve Sosyal Kanıt Bölümleri
Simgeler ve açıklamalar içeren bir özellik ızgarası oluşturun; bunun ardından avatar kartları ve yıldız puanları içeren bir kullanıcı görüşleri bölümü ekleyin.
Özellikler ve Sosyal Kanıt Bölümleri, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Özellikler Bölümü Yapısı
Özellikler bölümü, ürününüzün temel değer önerilerini aktarır. Yaygın bir yaklaşım, her birinde simge, kısa başlık ve açıklama bulunan üç veya dört sütunlu bir özellik kartı ızgarası kullanmaktır. Izgaranın üzerinde yer alan kısa üst etiket ve bölüm başlığı bağlamı oluşturur. Bu bölümü beyaz kahraman bölümünden görsel olarak ayırmak için açık gri bg-gray-50 arka planını kullanın.
<section class="bg-gray-50 px-4 py-24">
<div class="mx-auto max-w-7xl">
<!-- Section header -->
<div class="mb-16 text-center">
<span class="text-sm font-semibold uppercase tracking-widest text-blue-600">
Why Launchify
</span>
<h2 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">
Everything you need to launch faster
</h2>
</div>
<!-- Feature grid -->
</div>
</section>Özellik Izgarası Oluşturma
Özellik kartlarını düzenlemek için CSS Izgarası kullanın. Mobilde grid grid-cols-1 ile tek sütunla başlayın ve büyük ekranlarda lg:grid-cols-3 ile üç sütuna genişletin. Kartlar arasında tutarlı boşluk için gap-8 ekleyin. Bu yaklaşım, karmaşık medya sorgularına gerek kalmadan özellik ızgarasının her görüntü alanı genişliğinde iyi görünmesini sağlar.
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Feature card 1 -->
<div class="rounded-2xl bg-white p-8 shadow-sm">
<!-- Icon -->
<!-- Title -->
<!-- Description -->
</div>
<!-- Repeat for each feature -->
</div>Simgeli Özellik Kartı
Her özellik kartında bir simge kapsayıcısı, kalın bir başlık ve destekleyici bir açıklama bulunur. Simge, flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100 ile oluşturulan renkli, yuvarlatılmış bir kare içinde yer alır. Simgenin kendisi text-blue-600 ile renklendirilmiş küçük bir SVG'dir. Başlıkta mt-4 font-semibold text-gray-900, açıklamada ise mt-2 text-sm text-gray-500 kullanılır.
<div class="rounded-2xl bg-white p-8 shadow-sm transition hover:shadow-md">
<!-- Icon -->
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
<svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<!-- Content -->
<h3 class="mt-4 font-semibold text-gray-900">Lightning Fast</h3>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">
Deploy your product in minutes with our one-click infrastructure setup.
No DevOps expertise required.
</p>
</div>Kartlara Üzerine Gelme Efektleri Ekleme
Etkileşimli üzerine gelme efektleri, özellik kartlarının özenli görünmesini sağlar. Kartın üzerine gelindiğinde yükselmiş bir görünüm vermek için transition hover:shadow-md kullanın. Daha çarpıcı bir etki için kartı hafifçe yukarı kaldıran hover:-translate-y-1 ekleyin. Akıcı bir görünüm için bunu transition-all duration-200 ile birleştirin. Etkileşimleri ince tutun; içeriği desteklemeli, dikkati dağıtmamalıdır.
<div class="rounded-2xl bg-white p-8 shadow-sm
transition-all duration-200 hover:-translate-y-1 hover:shadow-md">
<!-- Card content -->
</div>Dönüşümlü Özellik Düzeni
Daha editoryal bir özellikler bölümü için simge/görsel ile metnin taraf değiştirdiği dönüşümlü satırlar kullanın. Her özellik satırı için flex flex-col md:flex-row kullanın ve çift numaralı özelliklerde sırayı md:flex-row-reverse ile tersine çevirin. Bu, görsel bir ritim oluşturur ve uzun sayfalarda düzenin tekdüze görünmesini önler.
<div class="space-y-24">
<!-- Feature row 1: image left, text right -->
<div class="flex flex-col items-center gap-12 md:flex-row">
<div class="flex-1">
<img src="/feature1.png" class="rounded-2xl shadow-lg" alt="Feature">
</div>
<div class="flex-1">
<h3 class="text-2xl font-bold text-gray-900">One-click deployments</h3>
<p class="mt-4 text-gray-500">Push code, ship product. Our CI/CD pipeline handles the rest.</p>
</div>
</div>
<!-- Feature row 2: text left, image right -->
<div class="flex flex-col items-center gap-12 md:flex-row-reverse">
<!-- reversed layout -->
</div>
</div>Sosyal Kanıt Bölümüne Genel Bakış
Sosyal kanıt — referanslar, logolar ve değerlendirmeler — dönüşüm oranlarını önemli ölçüde artırır. Bir logo şeridi, ürününüzü kullanan tanınmış markaları gösterirken referanslar ızgarası ayrıntılı övgüler sunar. En büyük etki için logo şeridini doğrudan kahraman bölümünün altına veya özellikler ile fiyatlandırma bölümleri arasına yerleştirin.
<section class="px-4 py-16">
<div class="mx-auto max-w-7xl">
<!-- Logo strip -->
<p class="mb-8 text-center text-sm font-semibold text-gray-400 uppercase tracking-widest">
Trusted by teams at
</p>
<div class="flex flex-wrap items-center justify-center gap-12 opacity-60">
<!-- Company logos -->
</div>
</div>
</section>Şirket Logosu Şeridi
Güven şeridindeki şirket logoları, renk paletinizle marka renklerinin çakışmasını önlemek için gri tonlamalı gösterilmelidir. Logoların üzerine gelindiğinde renklerini ince bir biçimde ortaya çıkarmak için grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition uygulayın. Logo yüksekliğini h-8 veya h-6 ile tutarlı tutun ve bozulmayı önlemek için object-contain kullanın.
<div class="flex flex-wrap items-center justify-center gap-12">
<img
src="/logos/company-a.svg"
alt="Company A"
class="h-8 object-contain grayscale opacity-60 transition hover:grayscale-0 hover:opacity-100"
/>
<img
src="/logos/company-b.svg"
alt="Company B"
class="h-8 object-contain grayscale opacity-60 transition hover:grayscale-0 hover:opacity-100"
/>
</div>Referanslar Izgarası
Referansları, eşit olmayan kart yükseklikleri için auto-rows-auto kullanarak CSS Izgarası ile duvar döşemesi benzeri bir ızgarada düzenleyin veya yükseklikleri eşit tutun. Her referans kartında bir alıntı, yıldız derecelendirmesi, avatar, ad ve görev bulunur. Görsel bütünlük için özellik kartlarıyla uyumlu bir temel olarak rounded-2xl bg-white p-6 shadow-sm kullanın.
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="rounded-2xl bg-white p-6 shadow-sm">
<!-- Stars -->
<div class="flex gap-1 text-yellow-400">
<span>★</span><span>★</span><span>★</span>
<span>★</span><span>★</span>
</div>
<!-- Quote -->
<p class="mt-3 text-sm text-gray-600 leading-relaxed">
'Launchify cut our deployment time from hours to minutes. Incredible product.'
</p>
<!-- Author -->
<div class="mt-4 flex items-center gap-3">
<img src="/avatar.jpg" class="h-10 w-10 rounded-full" alt="Author">
<div>
<p class="text-sm font-semibold text-gray-900">Sarah Chen</p>
<p class="text-xs text-gray-500">CTO at TechCo</p>
</div>
</div>
</div>
</div>Öne Çıkarılan Referans
Öne çıkan bir referansı, görsel olarak ayırt edilmesi için daha koyu veya renkli arka plana sahip tam genişlikte vurgulanmış bir blokta gösterin. Cesur bir alıntı bloğu için bg-blue-600 text-white rounded-3xl p-12 text-center kullanın. Bu, ızgaranın tekdüzeliğini bozar ve en güçlü sosyal kanıtınıza dikkat çeker.
<div class="rounded-3xl bg-blue-600 p-12 text-center text-white">
<svg class="mx-auto h-10 w-10 text-blue-300" fill="currentColor" viewBox="0 0 32 32">
<!-- Quote icon -->
</svg>
<blockquote class="mt-6 text-2xl font-semibold italic">
'The best investment we made this year. Period.'
</blockquote>
<div class="mt-6 flex items-center justify-center gap-3">
<img src="/ceo.jpg" class="h-12 w-12 rounded-full ring-2 ring-blue-400" alt="CEO">
<div class="text-left">
<p class="font-semibold">James Rivera</p>
<p class="text-sm text-blue-200">CEO at Momentum Labs</p>
</div>
</div>
</div>Bölüm Boşlukları ve Görsel Ayırma
Tutarlı bölüm boşlukları, sayfanın sıkışık veya gereğinden fazla ferah görünmesini önler. Tam bölümler için standart dikey dolgu olarak py-24, logo şeridi gibi daha hafif vurgu bölümleri için py-16 kullanın. Kenarlıklara veya ayırıcılara ihtiyaç duymadan örtük sınırlar oluşturmak için bölümler arasında beyaz, gray-50, beyaz şeklinde dönüşümlü arka plan renkleri kullanın.
<!-- Section color alternation pattern -->
<section class="bg-white px-4 py-24"><!-- Hero --></section>
<section class="bg-gray-50 px-4 py-24"><!-- Features --></section>
<section class="bg-white px-4 py-16"><!-- Logo strip --></section>
<section class="bg-blue-600 px-4 py-24"><!-- Featured quote --></section>
<section class="bg-white px-4 py-24"><!-- Testimonials grid --></section>Güvenilirlik İçin İstatistik Çubuğu
Kullanıcılar, çalışma süresi ve derecelendirmeler gibi temel istatistiklerden oluşan bir satır, kompakt bir biçimde sosyal kanıt işlevi görür. Ortalanmış metinle üç veya dört sütunlu bir ızgara kullanın. Her istatistikte text-4xl font-extrabold text-gray-900 ile büyük ve kalın bir sayı, altında da küçük bir etiket bulunur. Çubuğu üstteki bölüme sabitlemek için border-t border-gray-200 ile ince bir üst kenarlık ekleyin.
<div class="grid grid-cols-2 gap-8 border-t border-gray-200 pt-12 md:grid-cols-4">
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900">2,000+</p>
<p class="mt-1 text-sm text-gray-500">Active users</p>
</div>
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900">99.9%</p>
<p class="mt-1 text-sm text-gray-500">Uptime SLA</p>
</div>
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900">4.9/5</p>
<p class="mt-1 text-sm text-gray-500">Average rating</p>
</div>
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900"><5min</p>
<p class="mt-1 text-sm text-gray-500">Setup time</p>
</div>
</div>Hızlı Kontrol
Bu dersteki Tailwind CSS Ustalığı kavramlarını anlayıp anlamadığınızı sınayın.
Ders Özeti
Bu derste şunları öğrendiniz: simge kartları ve üzerine gelme efektleri içeren duyarlı bir özellik ızgarası oluşturmayı, sosyal kanıt için gri tonlamalı üzerine gelme efektlerine sahip bir logo şeridi eklemeyi ve vurgulanmış alıntı bloğu içeren bir referanslar bölümü oluşturmayı. Sırada fiyatlandırma tablosu bölümünü oluşturmak var.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Özellikler ve Sosyal Kanıt Bölümleri” dersi ücretsiz mi?
Evet — “Özellikler ve Sosyal Kanıt Bölümleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Özellikler ve Sosyal Kanıt Bölümleri” dersinde ne öğreneceğim?
Simgeler ve açıklamalar içeren bir özellik ızgarası oluşturun; bunun ardından avatar kartları ve yıldız puanları içeren bir kullanıcı görüşleri bölümü ekleyin. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Özellikler ve Sosyal Kanıt Bölümleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tanıtım ve Gezinme Bölümü
- Özellikler ve Sosyal Kanıt Bölümleri
- Fiyatlandırma Tablosu Bölümü
- Alt Bilgi ve Duyarlı Tasarım İnce Ayarları