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