XML ve Blogger İçin Özel Tasarım Aranıyor!!!
Blogger ve XML platformlarında deneyimi olan tasarımcı arıyoruz. Proje, kapsamlı bir tasarım süreci gerektiriyor ve detaylı işlevsellikler içeriyor. İşte istenilen tasarım özellikleri:
1. Header (Sabit, Full Width)
- Konum: Sabit, üst kısmında kalacak şekilde (position: fixed).
- Arka Plan: Siyah arka plan.
- Border: Alt kenarda 1px bordo rengiyle solid bir border olacak.
- İçerik:
- Logo: Sol köşeye yerleştirilecek ve ana sayfaya yönlendiren bağlantı olacak.
- Yatay Menü: Ortada yatay bir açılır menü olacak.
- Arama İkonu: Sağ köşeye yerleştirilecek ve tıklanabilir olacak.
- Arama Kutusu: Arama ikonu tıklandığında açılacak, kutu dolarsa modal pencere açılacak. Kutu boşsa gizlenecek.
- Erişilebilirlik: Arama ikonu için aria-label eklenmesi erişilebilirliği artıracaktır.
2. Container (Sabit, Full Width)
- Konum: Sabit, container’ın tamamı full width olacak.
- Arka Plan: Beyaz, ama gözleri almayan bir sararmalı sayfa rengi kullanılacak.
- İçerik:
- Kartlar: İçerik kartları ve reklam kartları olacak.
- Düzen: İçerik kartları 5’erli gruplar halinde sıralanacak ve her 5 içerik kartından sonra 1 reklam kartı yer alacak.
- Boyutlar: Her kartın boyutu 300x100 px olacak.
- Arka Plan: Her kart için içerik detayında eklenen ilk görsel dinamik olarak alınarak arka plan olarak kullanılacak.
- Mobil Uyumluluk: Kartlar ve içerikler mobilde düzgün görüntülenecek şekilde duyarlı tasarım (responsive design) uygulanacak.
3. Kart Yapısı (İçerik ve Reklam Kartları, Full Width)
- Kartlar: Her kart bir bağlantı içerecek.
- Ön Yüz: Kartın ön yüzü, içerik veya reklam başlığını gösterecek.
- Arka Yüz: Kartın arka yüzü, daha fazla bilgi gösterecek.
- Bağlantı: Hem ön yüz hem de arka yüz aynı bağlantıyı içerecek, yani her iki yüz de aynı sayfaya yönlendirecek.
- Lazy Loading: Kartların görselleri için lazy loading kullanılacak, böylece sayfa daha hızlı yüklenecek.
4. Modal Penceresi
- İçerik Kartına Tıklama: İçerik kartına tıklanıldığında bir modal pencere açılacak.
- Modal İçeriği: Modal pencere, içerik detaylarını gösterecek.
- Modal Kapanma: Kullanıcı modalı kapatabilecektir.
- Animasyonlar: Modal penceresi ve etkileşimli öğeler için yumuşak geçiş animasyonları kullanılacak.
5. Footer (Sabit, Full Width)
- Konum: Sabit, alt kısımda kalacak şekilde.
- Boyutlar: Tam genişlikte olacak.
- Arka Plan: Siyah olacak.
- Border: Üst kenarda 1px bordo rengiyle solid bir border yer alacak.
- İçerik:
- Yan Yana Sidebar Kutucukları: Footer içinde yan yana kutucuklar olacak.
6. Diğer Etiketler (Full Width)
- Konum: Diğer tüm etiketler full width olacak ve bir alt alta sıralanacak.
7. Copyright Bölümü (Sabit, Full Width)
- Konum: Copyright etiketi sabit olacak ve full width olacak.
- Arka Plan: Gri olacak.
- Border: Yok.
- İçerik:
- Solda: "Copyright rbarut33 aittir, hakları saklıdır" yazısı.
- Merkezde: "İletişim rbarut33@gmail.com" yazısı.
- Sağda: "Abone ol" butonu ve metni olacak.
- Div Yapısı: Her bir alan için bir div olacak, her div yalnızca hizalama amacıyla kullanılacak ve görünmez olacak.
8. Dinamik Kart Dizilimi (JavaScript ile)
- Kartlar: 5 içerik kartı ve 1 reklam kartı olacak şekilde kartlar dinamik olarak sıralanacak.
- İçerik Kartlarına Tıklama: İçerik kartlarına tıklanıldığında, ilgili içerik modalda gösterilecek.
9. Performans ve SEO
- Görsel Optimizasyonu: Kartların ve içeriklerin görselleri optimize edilecek ve lazy loading uygulanacak, böylece sayfa hızını artıracaktır.
- SEO: Sayfanın başlıkları, meta açıklamaları, alt metinler ve semantik HTML etiketleri ile SEO uyumlu hale getirilecek.
Sonuç olarak, yukarıdaki tüm talepler doğrultusunda özelleştirilmiş bir tasarım yapılacaktır. Eğer ilgileniyorsanız ve bu projede yer almak isterseniz, bizimle iletişime geçebilirsiniz.
Yorumlar