Modern ve çok amaçlı bir HTML template koleksiyonu. Tailwind CSS kullanılarak geliştirilmiş, profesyonel ve responsive web siteleri için hazır bir şablon setidir.

• Özellikler
• Demo Sayfaları
• Kurulum
• Yapı
• Renk Şemaları
• Yazı Tipleri
• Kullanım
• Dokümantasyon
• Lisans

• 🎨 Modern Tasarım: Güncel ve profesyonel tasarım anlayışı
• 📱 Tam Responsive: Tüm cihazlarda mükemmel görünüm
• 🎯 Çok Amaçlı: Kurumsal, e-ticaret, blog, portfolio ve daha fazlası
• ⚡ Hızlı: Optimize edilmiş kod ve performans
• 🎭 10 Farklı Renk Şeması: Kolayca değiştirilebilir tema renkleri
• 🔤 4 Farklı Yazı Tipi: Space Grotesk, THICCCBOI, Urbanist, DM
• 🧩 Hazır Bloklar: Kolayca kullanılabilir UI bileşenleri
• 📦 Zengin İçerik: 34 demo sayfası, blog, portfolio, e-ticaret ve daha fazlası

• index.html - Ana sayfa (Space Grotesk, Grape)
• onepage.html - Tek sayfa versiyonu
• page-loader.html - Yükleme animasyonlu sayfa

• demo1.html - demo34.html arası çeşitli tasarım seçenekleri
• Farklı yazı tipleri, renk şemaları ve düzenler

• blog.html, blog2.html, blog3.html - Blog listesi sayfaları
• blog-post.html, blog-post2.html, blog-post3.html - Blog detay sayfaları

• projects.html, projects2.html, projects3.html, projects4.html - Proje listesi
• single-project.html, single-project2.html, single-project3.html, single-project4.html - Proje detay

• services.html, services2.html - Hizmet sayfaları

• about.html, about2.html - Hakkında sayfaları

• contact.html, contact2.html, contact3.html - İletişim formları

• career.html, career2.html - Kariyer sayfaları
• career-job.html - İş ilanı detay

• shop.html, shop2.html - Ürün listesi
• shop-product.html - Ürün detay
• shop-cart.html - Sepet
• shop-checkout.html - Ödeme

• pricing.html - Fiyatlandırma tabloları

• signin.html, signin2.html - Giriş sayfaları
• signup.html, signup2.html - Kayıt sayfaları

• 404.html - Hata sayfası
• terms.html - Kullanım koşulları

• Modern bir web tarayıcı
• (Opsiyonel) Yerel sunucu (Live Server, XAMPP, WAMP, vb.)

1. Projeyi İndirin

   git clone <repository-url>
   cd templates

2. Dosyaları Açın

   • Doğrudan tarayıcıda index.html dosyasını açabilirsiniz
   • Veya yerel sunucu kullanarak çalıştırabilirsiniz

3. Yerel Sunucu ile Çalıştırma (Önerilen)

   # Python ile
   python -m http.server 8000
   
   # Node.js ile (http-server)
   npx http-server
   
   # PHP ile
   php -S localhost:8000

4. Tarayıcıda Açın

   • http://localhost:8000 adresine gidin

templates/
├── assets/
│   ├── css/
│   │   ├── colors/          # 10 farklı renk şeması
│   │   │   ├── aqua.css
│   │   │   ├── grape.css
│   │   │   ├── leaf.css
│   │   │   ├── navy.css
│   │   │   ├── orange.css
│   │   │   ├── pink.css
│   │   │   ├── purple.css
│   │   │   ├── sky.css
│   │   │   ├── violet.css
│   │   │   └── yellow.css
│   │   ├── fonts/           # Yazı tipi tanımlamaları
│   │   │   ├── dm.css
│   │   │   ├── space.css
│   │   │   ├── thicccboi.css
│   │   │   └── urbanist.css
│   │   ├── icon.css
│   │   └── plugins.css
│   ├── fonts/               # Web fontları
│   │   ├── custom/
│   │   ├── space/
│   │   ├── thicccboi/
│   │   ├── unicons/
│   │   └── urbanist/
│   ├── img/                 # Görseller
│   │   ├── avatars/
│   │   ├── brands/
│   │   ├── demos/
│   │   ├── docs/
│   │   ├── icons/
│   │   ├── illustrations/
│   │   ├── photos/
│   │   └── svg/
│   ├── js/
│   │   ├── plugins.js
│   │   └── theme.js
│   └── media/               # Video ve medya dosyaları
├── docs/                    # Dokümantasyon
│   ├── blocks/             # Hazır bloklar
│   ├── elements/           # UI elementleri
│   ├── styleguide/         # Stil kılavuzu
│   ├── blog-post.html
│   ├── changelog.html
│   ├── credits.html
│   ├── faq.html
│   └── forms.html
├── *.html                  # Ana sayfa dosyaları
├── style.css              # Ana stil dosyası
└── README.md              # Bu dosya

Template, 10 farklı renk şeması ile gelir:

1. Aqua - Mavi tonları
2. Grape - Mor tonları
3. Leaf - Yeşil tonları
4. Navy - Lacivert tonları
5. Orange - Turuncu tonları
6. Pink - Pembe tonları
7. Purple - Mor tonları
8. Sky - Açık mavi tonları
9. Violet - Eflatun tonları
10. Yellow - Sarı tonları

HTML dosyasının <head> bölümünde renk şemasını değiştirebilirsiniz:

<!-- Mevcut -->
<link rel="stylesheet" href="assets/css/colors/grape.css">

<!-- Yeni renk şeması -->
<link rel="stylesheet" href="assets/css/colors/aqua.css">

Template, 4 farklı yazı tipi seçeneği sunar:

1. Space Grotesk - Modern ve okunabilir
2. THICCCBOI - Kalın ve dikkat çekici
3. Urbanist - Şehirli ve profesyonel
4. DM - Minimal ve şık

HTML dosyasının <head> bölümünde yazı tipini değiştirebilirsiniz:

<!-- Mevcut -->
<link rel="stylesheet" type="text/css" href="assets/css/fonts/space.css">

<!-- Yeni yazı tipi -->
<link rel="stylesheet" type="text/css" href="assets/css/fonts/thicccboi.css">

Ve <body> etiketine font sınıfı ekleyin:

<body class="font-THICCCBOI">

Mevcut demo sayfalarından birini kopyalayarak başlayabilirsiniz:

cp demo1.html yeni-sayfa.html

HTML dosyasını düzenleyerek:

• Başlıkları değiştirin
• Metinleri güncelleyin
• Görselleri değiştirin
• Renk şemasını seçin

docs/blocks/ klasöründeki hazır blokları sayfalarınıza ekleyebilirsiniz:

• Hero bölümleri
• Özellikler
• Testimonials
• Pricing
• FAQ
• Footer
• vb.

docs/elements/ klasöründe tüm UI elementlerini bulabilirsiniz:

• Butonlar
• Form elemanları
• Kartlar
• Modals
• Tabs
• Accordion
• vb.

Detaylı dokümantasyon için:

• docs/index.html - Genel bakış
• docs/changelog.html - Değişiklik geçmişi
• docs/credits.html - Krediler ve kaynaklar
• docs/faq.html - Sık sorulan sorular
• docs/styleguide/ - Kapsamlı stil kılavuzu

docs/blocks/ klasöründe kullanıma hazır bölümler:

• about.html - Hakkında bölümleri
• blog.html - Blog bölümleri
• call-to-action.html - CTA bölümleri
• clients.html - Müşteri logoları
• contact.html - İletişim formları
• facts.html - İstatistikler
• faq.html - SSS bölümleri
• features.html - Özellikler
• footer.html - Footer şablonları
• hero.html - Hero bölümleri
• misc.html - Çeşitli bölümler
• navbar.html - Navigasyon menüleri
• portfolio.html - Portfolio galerileri
• pricing.html - Fiyatlandırma tabloları
• process.html - Süreç adımları
• team.html - Takım üyeleri
• testimonials.html - Müşteri yorumları

docs/elements/ klasöründe detaylı örnekler:

• Accordion, Alerts, Animations
• Avatars, Backgrounds, Badges
• Buttons, Cards, Carousels
• Dividers, Form Elements
• Image Hover, Image Mask
• Lightbox, Modal, Pagination
• Player, Progressbar, Shadows
• Shapes, Tables, Tabs
• Text Animations, Tooltips
• Typography ve daha fazlası

<a href='index.html'>
  <img src="assets/img/logo-dark.png" alt="Logo">
</a>

<link rel="shortcut icon" href="assets/img/favicon.png">

<meta name="description" content="Sitenizin açıklaması">
<meta name="keywords" content="anahtar, kelimeler">
<meta name="author" content="Yazar Adı">
<title>Sayfa Başlığı</title>

• Chrome (son 2 versiyon)
• Firefox (son 2 versiyon)
• Safari (son 2 versiyon)
• Edge (son 2 versiyon)
• Opera (son 2 versiyon)

Sorularınız için:

• Dokümantasyonu inceleyin: docs/index.html
• FAQ sayfasını ziyaret edin: docs/faq.html
• GitHub issues kullanın

Bu template, elemis tarafından geliştirilmiştir.

• Tailwind CSS
• Unicons
• Tüm açık kaynak kütüphaneler

Not: Bu template, modern web standartlarına uygun olarak geliştirilmiştir ve tüm cihazlarda mükemmel performans sağlar.

Güncelleme: Template, düzenli olarak güncellenmekte ve yeni özellikler eklenmektedir.