Merhaba arkadaşlar ben Kerem ZOR birkaç gün önce bir portfolyo tasarımı çizmiştim (biportfolyo) psd olarak forumda ve sitemde paylaşmıştım. Tasarıma gerçekten çok büyük bir ilgi söz konusu bende ilk kodlayanınkini paylaşayım diye karar aldım ve Uğur Dalkıran arkadaşımız çok güzel bir biçimde css & html kodlamış bulunmakta.
Değiştirmeniz Gerekenler:
Öncelikle “Sosyal Medyada…” olan kısmı ve sosyal ağ profillerinin linklerini kendinize göre düzenleyiniz.
Sonrasında 176px genişliğinde ve 51px yüksekliğinde, kendinize ait logonuz ile beraber sloganınızı değiştiriniz. Logonuzu değiştirirken aşağıdaki kodlar arasında bulunan Site Başlığı ve Slogan kısımlarını değiştirmeyi unutmayınız. Tasarımda SEO’lu logolar kodlamak (bkz: yakuter)
Sağ tarafa bakacak olursak, ziyaretçilerinizin size daha kısa yoldan mail göndermesi için, bir mail şablonu oluşturdum. Bu şablonda ki mail adresini kendinize göre düzenleyiniz. (Sadece “dlkrnugur@gmail.com” yazan yere kendi mail adresinizi yazmanız yeterli.)
Şimdi geldik referanslar bölümüne.
Bir ortalama divi açıp bu divin içerisine referansları eklemişim. Referansları eklerken aşağıdaki koda göz atın:
Şimdi arkadaşlar bu kısmı şöyle anlatayım. resim/large.jpg resme tıklanınca açılacak olan büyük resmin adresini belirliyor. rel=”lightbox” ise, referansları ziyaretçiye karşı daha hoş bir şekilde sunmak için kullandığım jQuery eklentisi çağırıyor. overlay ekrandaki ilk referansın üzerine gelindiğinde büyüteç resmini çıkmasını sağlıyor. resim/ref.png ekranda ziyaretçilere karşı gösterilecek ilk referansı belirtiyor.
Referans Ekleme – Önemli
Portfolyo tasarımına referans eklemek isterseniz, index.html dosyasını düzenlerken yukarı kod dizilimine rastlayacaksınız. Bu kodu üç kere ekledikten sonra şu kısmı değiştirin:
/* --- Bu kısmı aşağıdaki ile değiştirin --- */
Yani ard arda üç kere thumb ekledikten sonra aşağıdaki gibi (son-thumb), daha sonra tekrar üç kere thumb. :)
Önemli:
Arkadaşlar bu tasarımı ben yani Kerem ZOR çizmiş olup Uğur DALKIRAN kodlamıştır. Lütfen footer bölümünde bulunan "Arayüz Tasarım: Kerem ZOR
CSS Entegre: Uğur Dalkıran" bölümü silmeyin veya değiştirmeyin. Teşekkürler...
Biportfolyo DEMO - [B]İNDİR[/B]