Web · 10-B 40 dk · 8 adım

Dijital Kartvizit

Herkes kendi kartvizit sayfasını yaptı: ad, unvan, üç bağlantı ve bir fotoğraf yeri. Kutu modeli, kenar boşluğu ve flex hizalama ilk kez burada işe yaradı.

yapanlar: 10-B, bireysel

Canlı Kod'da aç 0% · 0/8 adım

adımlar yaptıkça işaretle · işaret bu tarayıcıda kalır

1 Canlı Kod'da başlangıç kodunu aç: boş bir .kart kutusu ve temel renkler hazır.
2 HTML sekmesinde kartın içine adını (h1), unvanını (p) ve üç bağlantılı liste (ul > li > a) yaz. Bağlantılar şimdilik # olabilir.
3 CSS'te .kart için genişlik (320px), iç boşluk (24px), yuvarlak köşe (16px) ve gölge ver:
adım 3 css
```
1.kart { width: 320px; padding: 24px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
```
4 Kartı sayfanın ortasına al: body'ye display: flex; justify-content: center; align-items: center; min-height: 100vh.
5 Fotoğraf yeri için 96×96 yuvarlak bir div (.avatar) ekle; border-radius: 50% ile daire olur. İstersen baş harfini içine yaz.
6 Bağlantıları yan yana diz: ul'ye display: flex; gap: 12px; list-style: none; padding: 0.
7 Bir vurgu rengi seç ve yalnızca iki yerde kullan: unvan ve bağlantı hover'ı. Her şeyi boyama.
8 Telefonda dene (önizlemeyi daralt): kart taşıyorsa width yerine max-width: 100% kullan.

bitince şunlar çalışmalı

Kart sayfanın tam ortasında
Ad, unvan, üç bağlantı ve yuvarlak avatar var
Bağlantılar yan yana, üstüne gelince renk değişiyor
Dar ekranda kart taşmıyor

ne öğrendik

kutu modeli
flexbox
renk ve tipografi

İşaret bu tarayıcıda kalır. XP için giriş yap — her uygulama +10 XP.

öncekiHesap Makinesi sıradakiKonsol Not Ortalamasi