Özet - Hero bölümü

Renk ve arka plan özelliklerini birleştirerek bir hero bölümü kurarsın.

Hero bölümü ne yapar?

Bir kahraman bölümü (hero) sayfanın en üstünde durur; ziyaretçinin ilk gördüğü büyük başlık ve görselden oluşur. Genellikle tam genişlik, koyu bir arka plan görseli ve üzerine beyaz başlık ile kurulur.

Bu derste öğrendiğin renk ve arka plan özelliklerini bir araya getirip bir hero bölümünü sıfırdan kuracağız: background kısayolu ile görsel, color ile metin rengi, background-size ile kaplama ve padding ile nefes alma alanı.

Bir hero için plan

Hero bölümünü kurarken şu dört parçayı bir araya getireceksin: bir .hero sınıf seçicisi, background kısayolu ile görsel, color ile başlık rengi ve padding ile içerik için yer.

İlk görevde bölümün zeminini ve metin rengini ayarlayacaksın. İkinci görevde .hero h1 seçicisine renk ve hafif bir gölge ekleyerek başlığı öne çıkaracaksın. Renklerin doğru karşıtlıkta olmasına dikkat et.

Uygulama .hero bölümünü kur

Bir .hero sınıf seçicisi ekle. background kısayolunu #1a1a2e url("/images/hero.jpg") center/cover no-repeat değeriyle, color özelliğini #fff, padding özelliğini 4rem 2rem değeriyle ata.

Örnek çözümü göster

/* .hero bölümünü kur */
.hero {
  background: #1a1a2e url("/images/hero.jpg") center/cover no-repeat;
  color: #fff;
  padding: 4rem 2rem;
}

Uygulama .hero h1 başlığını öne çıkar

Aşağıdaki .hero bloğunun ardına bir .hero h1 seçicisi ekle. color özelliğini #fff, text-shadow özelliğini 0 2px 4px rgba(0, 0, 0, 0.4) değeriyle ata.

Örnek çözümü göster

.hero h1 {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

Kendini test et

Özelliği amacına eşle

background

Görsel ve renk tek satırda
color

Metin rengini ayarlar
background-size: cover

Görseli kutuya yayar
opacity

Tüm öğeyi saydamlaştırır

Hero metin rengini tamamla

.hero {
  background: #1a1a2e url("/images/hero.jpg") center/cover no-repeat;
  color: ____;
  padding: 4rem 2rem;
}

Cevabı göster

.hero {
  background: #1a1a2e url("/images/hero.jpg") center/cover no-repeat;
  color: #fff;
  padding: 4rem 2rem;
}

Sıradaki ders: Kenarlık temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler