Animasyonlu Landing Page

Bu projede, CSS animasyonlarını kullanarak basit bir animasyonlu landing page oluşturacaksınız. Bu alıştırma, öğrendiğiniz animasyon özelliklerini gerçek bir web sayfası projesinde uygulamanıza yardımcı olacaktır.

Proje Detayları

Bu projede, CSS animasyonlarını kullanarak basit bir animasyonlu landing page oluşturacaksınız. Bu alıştırma, öğrendiğiniz animasyon özelliklerini gerçek bir web sayfası projesinde uygulamanıza yardımcı olacaktır.

Proje Adımları:

  1. Bir HTML dosyası oluşturun ve landing page için temel yapıyı hazırlayın (başlık, alt başlık, butonlar, özellik kartları).
  2. Bir CSS dosyası oluşturun ve HTML dosyasına bağlayın.
  3. Sayfa yüklendiğinde başlığın yukarıdan kayarak gelmesi için bir animasyon oluşturun.
  4. Alt başlığın soldan kayarak gelmesi için başka bir animasyon oluşturun (gecikme ile).
  5. Butonların aşağıdan yukarı doğru fade-in efekti ile görünmesi için animasyon ekleyin.
  6. Özellik kartlarının sırayla (staggered) görünmesi için farklı gecikmelerle animasyonlar oluşturun.
  7. Butonlara hover efektleri ekleyin (büyüme, renk değişimi, gölge efektleri).
  8. Sayfa altına sürekli dönen bir loading spinner veya dekoratif element ekleyin.
  9. Tüm animasyonların uyumlu çalışmasını sağlayın ve performansı optimize edin.

Başlangıç HTML Kodu:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animasyonlu Landing Page</title>
    <link rel="stylesheet" href="animated-landing.css">
</head>
<body>
    <main class="landing-page">
        <section class="hero">
            <h1 class="hero-title">Harika Bir Ürün</h1>
            <p class="hero-subtitle">Bu ürün hayatınızı değiştirecek ve size yeni olanaklar sunacak.</p>
            <div class="hero-buttons">
                <button class="btn btn-primary">Hemen Başla</button>
                <button class="btn btn-secondary">Daha Fazla Bilgi</button>
            </div>
        </section>
        
        <section class="features">
            <div class="feature-card">
                <h3>Hızlı</h3>
                <p>Çok hızlı ve verimli çalışır.</p>
            </div>
            <div class="feature-card">
                <h3>Güvenli</h3>
                <p>Verileriniz tamamen güvende.</p>
            </div>
            <div class="feature-card">
                <h3>Kolay</h3>
                <p>Kullanımı çok basit ve sezgisel.</p>
            </div>
        </section>
        
        <div class="loading-spinner"></div>
    </main>
</body>
</html>

Bu HTML dosyasını ve boş bir animated-landing.css dosyasını oluşturun, ardından CSS dosyasını yukarıdaki adımlara göre doldurun.