Files

T

Ümit Tunç a2827c5d7a a

2025-12-31 22:00:45 +03:00

9.7 KiB

Raw Blame History

Trunçgil - Modern & Multipurpose Tailwind CSS Template

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

🎨 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ı

🎨 Demo Sayfaları

Ana Sayfalar

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

Demo Sayfaları (34 Adet)

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

Blog Sayfaları

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

Portfolio 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

Hizmet Sayfaları

services.html, services2.html - Hizmet sayfaları

Hakkında Sayfaları

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

İletişim Sayfaları

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

Kariyer Sayfaları

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

E-Ticaret Sayfaları

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

Fiyatlandırma

pricing.html - Fiyatlandırma tabloları

Kimlik Doğrulama

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

Diğer Sayfalar

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

🚀 Kurulum

Gereksinimler

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

Adımlar

Projeyi İndirin

git clone <repository-url>
cd templates

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

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

Tarayıcıda Açın
- http://localhost:8000 adresine gidin

📁 Yapı

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

🎨 Renk Şemaları

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

Aqua - Mavi tonları
Grape - Mor tonları
Leaf - Yeşil tonları
Navy - Lacivert tonları
Orange - Turuncu tonları
Pink - Pembe tonları
Purple - Mor tonları
Sky - Açık mavi tonları
Violet - Eflatun tonları
Yellow - Sarı tonları

Renk Şeması Değiştirme

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">

🔤 Yazı Tipleri

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

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

Yazı Tipi Değiştirme

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">

💻 Kullanım

1. Sayfa Oluşturma

Mevcut demo sayfalarından birini kopyalayarak başlayabilirsiniz:

cp demo1.html yeni-sayfa.html

2. İçerik Düzenleme

HTML dosyasını düzenleyerek:

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

3. Hazır Blokları Kullanma

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

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

4. UI Elementlerini Keşfetme

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

Butonlar
Form elemanları
Kartlar
Modals
Tabs
Accordion
vb.

📚 Dokümantasyon

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

Hazır Bloklar

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ı

UI Elementleri

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ı

🎯 Özelleştirme İpuçları

Logo Değiştirme

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

Favicon Değiştirme

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

Meta Bilgileri

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

🌐 Tarayıcı Desteği

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

📞 Destek

Sorularınız için:

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

📄 Lisans

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

🙏 Teşekkürler

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.

9.7 KiB Raw Blame History Unescape Escape