Meydan okuma - İleri seviye projesi

Tüm ileri seviye konularını birleştiren bir portföy sayfası kurarsın.

Portföy sayfası: tüm konuları birleştir

Bu capstone derste tüm ileri seviye konuları bir portföy sayfasında birleştirirsin. .hero kabına linear-gradient degrade verilir; başlık @keyframes ile süzülür. Kartlar subgrid ile hizalanır.

.card::before sözde elementi dekoratif çizgi çizer. .menu > li çocuk seçicisi menüyü düzenler. @media (prefers-color-scheme: dark) ile koyu tema verilir. Altı konu bir araya gelince tek tutarlı portföy doğar.

Uygulama Portföy hero bölümünü tamamla

Portföyün hero bölümünü tamamla. .hero kabına background: linear-gradient(135deg, #1e293b, #4338ca) ile degrade arka plan ver. @keyframes titleSlide bildirimi yaz; from durakta opacity: 0 ve transform: translateY(20px), to durakta opacity: 1 ve transform: translateY(0) olsun. .hero-title etiketinde animation: titleSlide 1s ease-out bildirimi yaz.

Örnek çözümü göster

/* hero bölümü */
.hero {
  background: linear-gradient(135deg, #1e293b, #4338ca);
}

/* animasyon */
@keyframes titleSlide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* başlık */
.hero-title {
  animation: titleSlide 1s ease-out;
}

Uygulama Portföy kart dekorasyonunu tamamla

Portföyün kart kısmını tamamla. .card etiketinde position: relative olsun. .card::before sözde elementinde content: "", position: absolute, width: 4px ve background: linear-gradient(180deg, #6366f1, #8b5cf6) bildirimleri olsun.

Örnek çözümü göster

/* kart kabı */
.card {
  position: relative;
}

/* dekoratif çizgi */
.card::before {
  content: "";
  position: absolute;
  width: 4px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
}

Kendini test et

@media (prefers-color-scheme: dark) ne zaman uygulanır?
```
@media (prefers-color-scheme: dark) {
  body { background: #0f172a; color: #f8fafc; }
}
```
- Yalnız yazdırırken
- Kullanıcı koyu tema seçtiğinde
- Ekran daralınca
- Bağlantı yavaşsa
Cevabı göster

Kullanıcı koyu tema seçtiğinde — Doğru. prefers-color-scheme: dark, kullanıcının aygıtında koyu tema seçiliyse uygulanır.

@keyframes adını yaz

@keyframes ____ {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

Cevabı göster

@keyframes titleSlide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

Tüm ileri konuları eşle

@keyframes

Animasyon durakları
::before

Sözde element
linear-gradient

Degrade arka plan
subgrid

Üst ızgarayı devralma
prefers-color-scheme

Tema tercihi

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

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler