Atölye › Trafik lambası › 1/12. adım
Kendi kendine yanıp sönen bir trafik lambası; yalnız HTML ve CSS ile: kutular, daireler, flexbox, sıraya göre renkler ve zaman çizelgeli CSS animasyonu.
Kendi kendine yanıp sönen bir trafik lambası yapacağız; yalnız HTML ve CSS ile, tek satır JavaScript yazmadan. Sonunda nasıl olacağını Bitmiş hâlini gör düğmesiyle görebilirsin.
İlk parça lambanın gövdesi: bir kutu. Sayfa <style> içinde zaten hazır bir kural taşıyor: sayfadaki her şeyi
ortalıyor ve arka planı gri yapıyor. Sen <body> içine kutuyu koyacaksın.
```html
<div class="light"></div>
```<div class="light"> → bir kutu açar ve ona light (ışık, lamba) sınıf adını verir. CSS ile bu adı kullanıp
kutuyu biçimlendireceğiz.</div> → kutu hemen kapanıyor: içi boş.<body> ile </body> arasındaki boş satıra yaz ve Çalıştır.
Beceriler: HTML ile sayfa yapısı