Ünite Projesi: Etkinlik Afişi

Ders 41/45 · 22 dakika · ünite projesi

Bu ünitede renkleri, yazıları, kutuları ve yerleşimi style niteliğiyle denediniz. Şimdi hepsini tek bir tasarımda birleştiriyorsunuz.

Konu

Var olan veya tamamen uydurduğunuz bir etkinlik için tek sayfalık bir afiş tasarlayın. Bir konser, okul şenliği, turnuva, kitap fuarı… Afişte etkinliğin adı, tarihi, yeri ve en az birkaç maddelik bir programı bulunsun.

Nasıl çalışır?

Kontrol listesi kullandığınız özelliklere bakar, afişinizin güzel olup olmadığına karar veremez. Bu yüzden son iki madde size kalıyor.

Değerleri istediğiniz gibi seçin, örnek çözümdeki renkleri kopyalamak zorunda değilsiniz. Takılırsanız önceki derslere dönebilirsiniz.

Etkinlik afişi

Afişinizi aşağıya yazın. Bütün stilleri style niteliğiyle yazın.

h1 = 1 :: Etkinliğin adı tek bir h1 olsun
[style*="background"] :: Bir elemana arka plan rengi, resmi veya geçişi verin
[style*="font-size"] >= 2 :: En az iki elemanın yazı boyutunu ayarlayın
[style*="letter-spacing"] :: Bir yazının harf aralığını değiştirin
[style*="text-transform"], [style*="text-decoration"] :: text-transform veya text-decoration kullanın
[style*="padding"] :: Bir kutuya iç boşluk verin
[style*="border"] :: Kenarlık veya yuvarlak köşe kullanın
[style*="flex"], [style*="grid"] :: Elemanları Flexbox veya Grid ile yan yana dizin
li >= 3 :: Program en az üç maddelik bir liste olsun
Yazıların tamamı arka planların üzerinde rahat okunuyor
Önizleme kutusunu daralttığımda da afiş bozulmuyor

<div style="max-width: 480px; margin: 0 auto; padding: 32px; border-radius: 16px; color: white; font-family: system-ui, sans-serif; background-image: linear-gradient(135deg, midnightblue, teal);">
  <p lang="tr" style="text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; margin: 0;">Okul şenliği</p>
  <h1 style="font-size: 3rem; line-height: 1.1; margin: 8px 0 24px;">Bahar Günü</h1>

  <div style="display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid white; border-bottom: 1px solid white;">
    <span>16 Mayıs Cumartesi</span>
    <span>Okul bahçesi</span>
  </div>

  <ul style="padding-left: 20px; line-height: 1.8;">
    <li>10.00 Açılış konseri</li>
    <li>12.00 Kitap takası</li>
    <li>15.00 Satranç turnuvası</li>
  </ul>

  <p style="display: inline-block; margin: 0; padding: 8px 16px; border-radius: 999px; background-color: gold; color: black; font-weight: 700;">Giriş ücretsiz</p>
</div>

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.