Simetri
Her şey yerli yerinde.
Kalıplar · Hazır bölümler
Bileşenleri birleştirip sayfa bölümleri kur. Her kalıp fkdev.sbs’te gerçekten kullanılan yapıdır.
Merhabalar, ben Furkan. Kısaca Furkan diyebilirsiniz.
(Uzun hâlini soran olursa: o da Furkan.)
<section class="fk-center" style="padding:40px 0;width:100%">
<h1 class="fk-display" data-fk-split style="font-size:clamp(48px,8vw,110px)">Furkan <em>Kırcı</em></h1>
<p class="fk-lede" style="margin:24px auto 0">Merhabalar, ben Furkan. Kısaca Furkan diyebilirsiniz.</p>
<p class="fk-aside" style="margin:6px 0 30px">(Uzun hâlini soran olursa: o da Furkan.)</p>
<div class="fk-cluster" style="justify-content:center"><a class="fk-btn fk-btn-primary" href="#hero" data-fk-magnetic>Bir dakikada Furkan <svg class="fk-go" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a><a class="fk-btn fk-btn-ghost" href="#hero">Hikâyem</a></div>
</section>4 durak · 4 ders
<header class="fk-center" style="width:100%">
<nav class="fk-crumbs fk-glass" aria-label="Örnek kalıp sayfa yolu"><ol><li><a href="/"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg><span>Ana Sayfa</span></a></li><li class="fk-sep" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></li><li><span aria-current="page">Deneyim</span></li></ol></nav>
<p style="margin:24px 0 0"><span class="fk-eyebrow fk-glass">4 durak · 4 ders</span></p>
<h1 class="fk-h1" style="margin-top:20px">Yaptıkça <em>öğrendim.</em></h1>
</header><div class="fk-card fk-center" style="width:100%;padding:56px 24px">
<h2 class="fk-h2">Kahve benden, <em>fikir sizden.</em></h2>
<p style="margin:16px auto 28px;max-width:520px">Projeniz için yazın; nerede olursanız olun cevap gelir.</p>
<div class="fk-cluster" style="justify-content:center"><a class="fk-btn fk-btn-primary" href="#cta">İletişime geçin <svg class="fk-go" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
</div>Her şey yerli yerinde.
Karar al, uygula.
Dünyanın her yerinden.
<div class="fk-grid fk-g-3" style="width:100%">
<article class="fk-card fk-center"><span class="fk-card-num">01</span><h3 class="fk-card-title">Simetri</h3><p>Her şey yerli yerinde.</p></article>
<article class="fk-card fk-center"><span class="fk-card-num">02</span><h3 class="fk-card-title">Hız</h3><p>Karar al, uygula.</p></article>
<article class="fk-card fk-center"><span class="fk-card-num">03</span><h3 class="fk-card-title">İletişim</h3><p>Dünyanın her yerinden.</p></article>
</div>Hata 404
Muhtemelen o da hızlı bir kararla Bursa’ya taşındı.
Ana sayfaya dön<section class="fk-center" style="padding:24px 0;width:100%">
<p><span class="fk-eyebrow fk-glass">Hata 404</span></p>
<h1 class="fk-h1" style="margin-top:18px">Bu sayfa <em>kayıp.</em></h1>
<p class="fk-lede" style="margin:20px auto 28px">Muhtemelen o da hızlı bir kararla Bursa’ya taşındı.</p>
<a class="fk-btn fk-btn-primary" href="/">Ana sayfaya dön <svg class="fk-go" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</section>ErrorDocument 404 /404.html<div class="fk-grid fk-g-3" style="width:100%">
<article class="fk-card fk-center"><span class="fk-avatar" style="margin:0 auto 14px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="3"/><path d="m4 7 8 6 8-6"/></svg></span><span class="fk-mono">E-posta</span><h3 class="fk-card-title" style="margin-top:6px">merhaba@</h3><button type="button" class="fk-btn fk-btn-primary fk-btn-sm" data-fk-copy="merhaba@fkdev.sbs" data-fk-msg="E-posta kopyalandı">Kopyala</button></article>
<article class="fk-card fk-center"><span class="fk-avatar" style="margin:0 auto 14px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6.5 6.5 0 0 1 3.5 6"/></svg></span><span class="fk-mono">İK</span><h3 class="fk-card-title" style="margin-top:6px">ik@</h3><button type="button" class="fk-btn fk-btn-primary fk-btn-sm" data-fk-copy="ik@fkdev.sbs" data-fk-msg="İK adresi kopyalandı">Kopyala</button></article>
<article class="fk-card fk-center"><span class="fk-avatar" style="margin:0 auto 14px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4M6 9l6-6 6 6M4 20h16"/></svg></span><span class="fk-mono">Dosya</span><h3 class="fk-card-title" style="margin-top:6px">yukle</h3><a class="fk-btn fk-btn-primary fk-btn-sm" href="https://yukle.fkdev.sbs/" rel="noopener">Yükle <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M8 7h9v9"/></svg></a></article>
</div>Yapay zekâ asistanı için hazır sohbet kalıbı. Bu demo gerçek API çağırmaz; gerçek bağlantı için Yapay zekâ sayfasına bak.
<div class="fk-card" data-chat-demo style="width:100%;max-width:560px">
<div class="fk-chat" aria-live="polite">
<div class="fk-msg fk-msg-ai">Merhaba! fkdev UI hakkında ne sormak istersin?</div>
</div>
<form class="fk-input-group" style="margin-top:18px">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3c.6 4.8 4.2 8.4 9 9-4.8.6-8.4 4.2-9 9-.6-4.8-4.2-8.4-9-9 4.8-.6 8.4-4.2 9-9Z"/></svg>
<input type="text" class="fk-input" placeholder="Bir şey sor…" aria-label="Mesaj" style="padding-right:56px">
<button class="fk-btn fk-btn-icon" type="submit" aria-label="Gönder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 3 3 10.5l7 2.5 2.5 7L21 3Z"/><path d="m10 13 4-4"/></svg></button>
</form>
</div>| Sınıf / öznitelik | Açıklama |
|---|---|
fk-chat | Mesaj listesi |
fk-msg fk-msg-user / fk-msg-ai | Kullanıcı / asistan balonu |
fk-typing | Yazıyor… üç nokta |
Yönetim paneli için KPI kartı ve CSS çubuk grafik. Tam panelin kendisi (e-ticaret, CRM, DataTables, giriş/kayıt) ayrı bir sitede: admin.fkdev.sbs.
<div class="fk-grid fk-g-2" style="width:100%">
<div class="fk-kpi"><span>Ciro · bu ay</span><strong>₺284.910</strong><small><b class="fk-up">↑ 12,4%</b> geçen aya göre</small></div>
<div class="fk-kpi"><span>Son 12 gün</span><div class="fk-chart" role="img" aria-label="Son 12 günde siparişler"><i style="--h:30;--i:0"></i><i style="--h:52;--i:1"></i><i style="--h:41;--i:2"></i><i style="--h:66;--i:3"></i><i style="--h:58;--i:4"></i><i style="--h:80;--i:5"></i><i style="--h:47;--i:6"></i><i style="--h:72;--i:7"></i><i style="--h:90;--i:8"></i><i style="--h:64;--i:9"></i><i style="--h:76;--i:10"></i><i style="--h:100;--i:11" class="is-hi"></i></div></div>
</div>| Sınıf / öznitelik | Açıklama |
|---|---|
fk-kpi | Tek sayı kartı; span etiket, strong değer, small karşılaştırma |
fk-up / fk-down | Yeşil artış / kırmızı düşüş |
fk-chart > i + --h | Çubuk grafik; --h 0–100, en yüksek çubuğa is-hi |
fk-dash | Yan menülü panel iskeleti (isteğe bağlı) |