Halkalı merkez mahallesi fatih cd ozgur apt no 46 , Küçükçekmece , İstanbul , 34303 , TR
Bu sayfa EkaSunucu tarafından oluşturulan merkezi CSS dosyasını test etmek için tasarlanmıştır. Sayfada tüm temel bileşenler gösterilecektir.
Bu örnekte hero bölümü, içindekiler, içerik kartları ve sık sorulan sorular gibi bileşenleri görebilirsiniz.
Tüm tasarım öğelerini tek bir dosyada yönetin
Tüm cihazlarda kusursuz görünüm sağlar
Hazır bileşenlerle hızlı sayfa geliştirme
Tek dosyada güncelleme ile tüm siteyi yenileyin
İçerik kartları, bilgileri düzenli ve estetik bir şekilde sunmanızı sağlar. Her kart, belirli bir konuya odaklanabilir ve önemli bilgileri vurgulayabilir.
İçerik kartları aşağıdaki özelliklere sahiptir:
Uyarı kutuları, kullanıcılarınıza önemli bilgileri iletmek için tasarlanmıştır. Farklı türde uyarılar için farklı renkler kullanabilirsiniz.
Adım adım rehberler, karmaşık süreçleri daha anlaşılır hale getirmek için kullanılır. Her adım numaralandırılır ve görsel olarak belirginleştirilir.
Sayfanızın header bölümüne aşağıdaki kodu ekleyin:
Türkiye (Türkçe)
Almanya (German)
Worldwide (English)
<link rel="stylesheet" href="/templates/website/EkaSunucu/css/pages.css">Bu kod, merkezi CSS dosyasını sayfanıza dahil edecektir.
Sayfanızın yapısını oluştururken, bu CSS dosyasında tanımlanmış sınıfları kullanın:
.hero-section sınıfını kullanın.contents-card sınıfını kullanın.content-section sınıfını kullanın.content-card sınıfını kullanınTüm ikonlar için Font Awesome kullanılmaktadır. Örnek kullanım:
<i class="fas fa-info-circle"></i>Doğru ikon sınıfları için Font Awesome dokümantasyonunu kontrol edin.
Özel renk şemaları veya stillemeler için CSS değişkenlerini kullanabilirsiniz. Örnek:
<body style="--primary-color: #FF5500; --secondary-color: #FF8844;">Bu şekilde sayfanızın renk şemasını kolayca değiştirebilirsiniz.
CSS dosyası, tüm sitede tutarlı renk kullanımı için bir dizi değişken tanımlar. Temel renk değişkenleri şunlardır:
--primary-color: Ana renk--secondary-color: İkincil renk--accent-color: Vurgu rengi--text-color: Ana metin rengi--text-secondary: İkincil metin rengi--light-bg: Açık arka plan rengi--card-bg: Kart arka plan rengiBu değişkenleri kullanarak, tüm sitenizin renk şemasını tek bir yerden değiştirebilirsiniz.
CSS dosyası, tutarlı tipografi için font aileleri ve boyutlar tanımlar:
--font-primary: Ana font (Inter)--font-secondary: İkincil font (Poppins)Başlıklar için font-family: var(--font-secondary) kullanılırken, metin için font-family: var(--font-primary) kullanılır.
CSS dosyası, farklı ekran boyutları için kapsamlı medya sorguları içerir. Bu sayede siteniz tüm cihazlarda kusursuz görünür.
1200px ve üzeri ekran genişliği olan cihazlar için optimize edilmiştir.
768px ile 1199px arası ekran genişliği olan cihazlar için optimize edilmiştir.
767px ve altı ekran genişliği olan cihazlar için optimize edilmiştir.
CSS dosyası kullanımı hakkında en çok sorulan sorular ve yanıtları
<link rel="stylesheet" href="/templates/website/EkaSunucu/css/pages.css"> kodunu ekleyerek CSS dosyasını dahil edebilirsiniz. Bu, tüm stil tanımlamalarını sayfanıza uygulayacaktır. <body style="--primary-color: #FF0000; --secondary-color: #FF5555;">
<body style="--font-primary: 'Roboto', sans-serif; --font-secondary: 'Montserrat', sans-serif;"> Ancak bu fontların sayfanızda yüklenmiş olması gerektiğini unutmayın.