Setelah sebelumnya Richard Fang membuat desain Online Bizcard dengan PSD, saya iseng-iseng menslicing hasil desain PSD Richard Fang tadi ke CSS/xHTML.

Dalam proses pembuatan, saya menggunakan :

• jQuery
• 960.gs
• CSS Reset Eric Meyer
• Fonts.css Yahoo
• Tabs jQuery CSS

Setelah mengalami proses panjang untuk urusan cross browser – karena tidak biasanya hasil render opera berbeda dengan firefox dan safari – akhirnya selesai juga slicingannya, hehe. Berikut screenshotnya :

1. Screenshot About Page

2. Screenshot Network Page

Khusus untuk tab network, social network yang tampil bisa diganti sesuai keperluan.

Social network yang bisa dipakai:

• Facebook
• Twitter
• DeviantArt
• WordPress
• Blogspot
• Flickr
• LinkedIn
• YouTube
• Vimeo
• Tumblr
• Skype

Cara mengganti, buka file index.html, pada tag <ul class=”social”> tambahkan :

<li><a href="[link]" class="[nama-class]"><span>Tulisan...</span></a></li>

Ganti [nama-class] dengan nama social network yang diinginkan, misal jika ingin menambahkan Tumblr, nama class diisi tumblr, kalo wordpress, maka nama class diisi wordpress (huruf kecil semua), begitu seterusnya.

3. Screenshot Contact Page

vCard ini sudah di tes di Firefox 3.6, Opera 10.50, Safari 5, Chrome 5 dan IE8.

Ok, that’s all , edit sesuai kebutuhan anda, jika mengalami kesulitan, silakan kontak saya, hehehe

---

Posted by rizkyabdilah - http://rizkyabdilah.net/