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
- Kullanılan Teknolojiler
- Kurulum
- Dosya Yapısı
- Bölümler
- Animasyonlar
- Responsive Tasarım
- JavaScript Özellikleri
- Özelleştirme
- Lisans
✨ Ö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
- Projeyi bilgisayarınıza indirin veya klonlayın:
git clone https://github.com/kullaniciadi/modern-web-sitesi.git - Herhangi bir web sunucusunda veya doğrudan tarayıcınızda açın:
index.html
📁 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:
- Navbar: Sabit üst navigasyon, mobil uyumlu ve responsive tasarım
- Hero: Ana görsel ve çağrı düğmeleri (call-to-action)
- İstatistikler: Animasyonlu sayaçlarla rakamlar
- Özellikler: Şirket/hizmet özellikleri
- Portfolyo: Projeler ve çalışmalar galerisi
- Referanslar: Müşteri görüşleri ve yorumları
- Ä°letiÅŸim: Ä°letiÅŸim formu ve bilgileri
- 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
- Mobil Menü Kontrolü: Hamburger menü tıklama işlemleri
- Form DoÄŸrulama: Ä°letiÅŸim formu basit doÄŸrulama
- Animasyonlu Sayaçlar: İstatistiklerde görünen rakamların animasyonu
- Smooth Scroll: Sayfa içi bağlantılarda yumuşak kaydırma
- Intersection Observer: Sayaçları otomatik başlatmak için görünürlük kontrolü
- 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 sm
y-20 bg-white relative overflow-hidden"><div class="max-w-7xl mx-auto px-4 sm
x-6 relative"><!-- Yeni içerik -->
</div>
</section>
[H=5]
Github indirme linki
