Biportfolyo

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 SEOlu logolar kodlamak 

<div class="logo"><h1><a href="index.html" title="Site Başlığı">Site Başlığı</a></h1><p>Slogan</p></div>

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 d...@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:

<div class="thumb"><a href="resim/large.jpg" title="Buraya ziyaretçilerinizin ilgisini çekebilecek referansınız ile ilgili kısa bir yazı yazabilirsiniz." rel="lightbox"><span class="overlay"></span><img src="resim/ref.png" alt="Referans" title="Referans" width="210" height="125" /></a></div>

Ş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:

<div class="thumb"> /* --- Bu kısmı aşağıdaki ile değiştirin --- */ <div class="son-thumb">

Biportfolyo DEMO - İNDİR