Hero bölümü

Flexbox ile hero bölümü düzenini kurarsın.

Hero bölümü ne yapar?

Landing sayfasının en üstündeki hero bölümü, ziyaretçinin ilk gördüğü yerdir. Büyük bir başlık, kısa bir açıklama ve bir düğme içerir. TaskFlow hero bölümünü .hero seçicisiyle biçimlendireceğiz.

İçeriği yatay ve dikey olarak ortalamak için kapsayıcıyı esnek yapacağız. display: flex verildiğinde öge bir esnek kapsayıcıya dönüşür ve çocuk ögeleri sıralamaya başlar.

justify-content ve align-items

Esnek kapsayıcıda iki eksen vardır: ana eksen (öntanımlı olarak yatay) ve çapraz eksen (dikey). İçeriği hizalamak için iki özellik kullanırız.

justify-content çocukları ana eksen boyunca hizalar; center değeri ortalar. align-items ise çocukları çapraz eksen boyunca hizalar; yine center ile ortalanır. İkisini birlikte kullanmak içeriği tam ortalamaya yeter.

background-color ile hero arka planı

Hero bölümünü öne çıkarmak için koyu bir arka plan rengi verelim. background-color özelliği bir ögenin arka planını boyar. Üstündeki metnin okunabilmesi için açık renk yazı kullanılır.

TaskFlow'da koyu lacivert tonu #1a2b4a kullanacağız. Hex renkler diyez işaretiyle başlar ve altı rakam devam eder. Şimdi hero bölümünü dosyaya ekleyelim.

Uygulama Hero bölümünü ekle

Önceki dersin başlık yorumunu içeren dosyayı al. Altına bir .hero sınıf seçicisi bölümü ekle ve içine şu bildirimleri yaz: display: flex, justify-content: center, align-items: center ve background-color: #1a2b4a. Her bildirimi noktalı virgülle kapat.

Örnek çözümü göster

/* TaskFlow landing sayfası */

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1a2b4a;
}

Kendini test et

display: flex ne yapar?
- Ögenin arka plan rengini değiştirir
- Metni yatay olarak ortalar
- Ögeyi esnek kapsayıcı yapar, çocukları sıralar
- Ögeyi gizler
Cevabı göster

Ögeyi esnek kapsayıcı yapar, çocukları sıralar — Doğru. display: flex ögeyi esnek kapsayıcıya çevirir ve çocukları dizmeye başlar.

justify-content değerini tamamla

.hero {
  display: flex;
  justify-content: ____;
  align-items: center;
  background-color: #1a2b4a;
}

Cevabı göster

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1a2b4a;
}

Flex özelliklerini anlamlarıyla eşleştir

display: flex

Esnek kapsayıcı yapar
justify-content

Ana eksen hizalaması
align-items

Çapraz eksen hizalaması
background-color

Arka plan rengi

Sıradaki ders: Özellik listesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler