Meydan okuma - Orta seviye projesi

Tüm orta seviye konularını birleştiren bir ana sayfa kurarsın.

Orta seviye projesi: ana sayfa

Bir ana sayfa, orta seviyenin tüm araçlarını birleştirir. :root seçicisinde --brand gibi özel değişkenler tanımlanır; var(--brand) ile her yerde çağrılır. Üst bilgi ve alt bilgi flex ile yan yana, ana bölüm grid-template-areas ile adlandırılmış bölgelerden kurulur.

@media (min-width: 768px) ile dar ekran bildirimleri daraltılır; transition ile durum geçişleri yumuşak, transform: scale() ile kartların üzerine gelindiğinde büyümesi sağlanır. Yedi nokta, tüm orta seviyeyi bir araya getirir.

Uygulama Ana sayfa iskeletini kur

Aşağıdaki CSS'i tamamla. :root içinde --brand: #2563eb tanımla. .page kabı grid olsun ve "header" "main" "footer" şeklinde tek sütunlu bir şablon kullansın. .header ve .footer etiketleri ilgili bölgelere yerleşsin.

Örnek çözümü göster

/* kök değişkenler */
:root {
  --brand: #2563eb;
}

/* sayfa kabı */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
}

/* üst bilgi */
.header {
  grid-area: header;
}

/* ana bölüm */
.main {
  grid-area: main;
}

/* alt bilgi */
.footer {
  grid-area: footer;
}

Uygulama Kartlara geçiş ve dönüşüm ekle

Aşağıdaki CSS'i tamamla. .card için transition: transform 0.2s bildirimi olsun; .card:hover durumunda transform: scale(1.05) uygulansın. @media (max-width: 600px) içinde .page tek sütuna insin: grid-template-columns: 1fr.

Örnek çözümü göster

/* kart */
.card {
  transition: transform 0.2s;
}

/* kart üzerine gelme */
.card:hover {
  transform: scale(1.05);
}

/* dar ekran */
@media (max-width: 600px) {
  .page {
    grid-template-columns: 1fr;
  }
}

Kendini test et

Bir kartın üzerine gelindiğinde büyümesi için hangi dönüşüm kullanılır?
```
.card:hover {
  transform: ???;
}
```
- translate(10px, 0)
- scale(1.05)
- rotate(45deg)
- skew(10deg)
Cevabı göster

scale(1.05) — Doğru. scale(1.05), kartı %5 büyütür; hover durumunda tercih edilir.

Özel değişken tanımını yaz

:root {
  --brand: ____;
}

Cevabı göster

:root {
  --brand: #2563eb;
}

Araçları rolüyle eşleştir

var(--brand)

Değişkeni çağırır
grid-template-areas

Bölgeleri adlandırır
@media (min-width: 768px)

Geniş ekranı seçer
transition

Durum geçişini yumuşatır
transform: scale()

Kartı büyütür

Sıradaki ders: Orta seviye bölüm sınavı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler