Bu proje, responsive ve modern bir kurumsal web sitesi şablonudur. TailwindCSS, Font Awesome, AOS ve JavaScript ile geliştirilmiş olup, tüm ekran boyutlarına uyumlu tasarıma sahiptir.
📋 İçerik
✨ Özellikler
  • Modern ve Profesyonel Tasarım: Gradient renkler, glass effect, ve modern UI elementleri
  • Tam Responsive: Mobil, tablet, laptop ve masaüstü ekranlara uyumlu
  • İnteraktif Elementler: Hover efektleri, animasyonlar, sayaçlar
  • İkon Entegrasyonu: Font Awesome ikonları
  • Animasyonlar: AOS (Animate On Scroll) kütüphanesiyle sayfa içi animasyonlar
  • Sayaç Animasyonu: İstatistik bölümündeki sayılar sıfırdan başlayarak hedef değere animasyonlu şekilde artış
  • Yukarı Çık Butonu: Sayfanın sağ alt köşesinde animasyonlu yukarı çık butonu
  • Mobil Menü: Küçük ekranlarda hamburger menü ve açılır kapanır navigasyon
  • Form Doğrulama: İletişim formunda basit doğrulama işlemleri
  • Smooth Scroll: Sayfa içi yumuşak kaydırma
🛠️ Kullanılan Teknolojiler
  • HTML5: Sayfa yapısı
  • TailwindCSS: Responsive tasarım ve stil
  • JavaScript: Dinamik içerik ve interaktivite
  • Font Awesome: İkonlar
  • AOS (Animate On Scroll): Elementlerin görünürlüğe girdiğinde animasyonu
  • Google Fonts (Poppins): Yazı tipi
🚀 Kurulum
  1. Projeyi bilgisayarınıza indirin veya klonlayın:
    git clone https://github.com/kullaniciadi/modern-web-sitesi.git
  2. Herhangi bir web sunucusunda veya doğrudan tarayıcınızda açın:
    index.html
Not: Bu proje harici CDN'ler (TailwindCSS, Font Awesome, AOS) kullanmaktadır. İnternet bağlantısı gereklidir.
📁 Dosya Yapısı

modern-web-sitesi/
│
├── index.html # Ana HTML dosyası
├── README.md # Dokümantasyon
└── img/ # (Opsiyonel) Görsel dosyaları
📝 Bölümler

Şablon aşağıdaki bölümleri içerir:
  1. Navbar: Sabit üst navigasyon, mobil uyumlu ve responsive tasarım
  2. Hero: Ana görsel ve çağrı düğmeleri (call-to-action)
  3. İstatistikler: Animasyonlu sayaçlarla rakamlar
  4. Özellikler: Şirket/hizmet özellikleri
  5. Portfolyo: Projeler ve çalışmalar galerisi
  6. Referanslar: Müşteri görüşleri ve yorumları
  7. İletişim: İletişim formu ve bilgileri
  8. Footer: Sayfa altı bilgileri ve bağlantılar
🎭 Animasyonlar
  • AOS Animasyonları: Sayfa kaydırıldıkça elementlerin görünürlüğe girmesi
  • Hover Efektleri: Elementlerin üzerine gelindiğinde animasyonlar
  • Sayaç Animasyonu: İstatistik rakamlarının sıfırdan hedef değere kadar animasyonlu artışı
  • Yukarı Çık Butonu: Görünme/kaybolma ve tıklama animasyonları
📱 Responsive Tasarım
  • Mobil Öncelikli: En küçük ekranlardan başlayarak en büyük ekranlara kadar uyumlu
  • Medya Sorguları: TailwindCSS içinde hazır breakpoint'ler (sm, md, lg, xl)
  • Mobil Menü: Küçük ekranlarda hamburger menü ve açılır kapanır navigasyon
  • Esnek Grid: Ekran boyutuna göre otomatik düzenlenen içerik
💻 JavaScript Özellikleri
  1. Mobil Menü Kontrolü: Hamburger menü tıklama işlemleri
  2. Form Doğrulama: İletişim formu basit doğrulama
  3. Animasyonlu Sayaçlar: İstatistiklerde görünen rakamların animasyonu
  4. Smooth Scroll: Sayfa içi bağlantılarda yumuşak kaydırma
  5. Intersection Observer: Sayaçları otomatik başlatmak için görünürlük kontrolü
  6. Yukarı Çık Butonu: Sayfanın başına dönme ve animasyon kontrolü
🎨 Özelleştirme

Renkleri Değiştirme


TailwindCSS kullanıldığı için, renkleri değiştirmek oldukça kolaydır. Gradient renkler ve diğer renkli elementler doğrudan HTML içinde belirtilmiştir:
<!-- Gradient renk örneği -->
<div class="bg-gradient-to-r from-blue-600 to-purple-600">...</div>

İçerik Değiştirme


Metinleri ve görselleri değiştirmek için index.html dosyasını düzenleyin:
<h1 class="text-4xl font-bold">Başlığınız</h1>
<p>İçerik metni</p>
<img src="yeni-resim.jpg" alt="Resim Açıklama">

Yeni Bölüm Ekleme


Yeni bir bölüm eklemek için mevcut section yapısını kopyalayıp içeriğini değiştirin:
<section class="py-16 smy-20 bg-white relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 smx-6 relative">
<!-- Yeni içerik -->
</div>
</section>
[H=5]


Github indirme linki