Here is a large green button created by yours truly. The color is an earthy green and the button works great as a call to action.

Button is available as PSD format

A clean set of social icons, simple yet elegant.

• Best viewed in Chrome and Safari
• Basic HTML knowledge required
• Includes HTML, CSS and javascript files
• Also includes photoshop file

When it comes to web design I’m a huge fan of both minimalism as well as heavy imagery. If you’re a photographer, artist or designer, minimalism is a great way to emphasize your work.It allows the user to focus on a single aspect of the site at a time while still remaining visually pleasing.

I recently put together a minimalist portfolio design which I haven’t yet been able to use. I started with just the design and decided to chop it up and code it to feature on the blog.

The design itself is fairly simple but also very easy on the eyes. As for the code, I used Codrops’ ‘Slicebox’. A great slideshow plugin that utilizes the CSS3 3D transform property. You can read up on some of the documentation on their site. I’m also using the bxslider along with fancybox for the subfeature thumbnail image slides.

Feel free to download the source files and use them for your project. They’re very easy to customize, simply replace the image paths in the array:

var thumbImages = [
     "image/large-1.jpg",
     "image/large-2.jpg",
     "image/large-3.jpg",
     "image/large-4.jpg",
     "image/large-5.jpg",
     "image/large-6.jpg"
];

with you’re own images and you’re good to go.

For the thumbnails you can use your full sized images and it will resize it accordingly. Just replace the image paths:

About Page

The about page is pretty straight forward, you can replace the text and image to customize it.

Portfolio Page

The portfolio page is similar to the home page, with regards to the image replacement. Simply replace the images in the array:

var portfolioImage = [
     "image/large-1.jpg",
     "image/large-2.jpg",
     "image/large-3.jpg",
     "image/large-4.jpg",
     "image/large-5.jpg",
     "image/large-6.jpg"
];

with you’re own images.

Contact Page

The contact page form is set up visually but you will need to add phpmailer or some form of mailer for the functionality.

If you have any questions feel free to send me a message or post in the comments.

Enjoy

EDIT:

There was a bug with the Slicebox plugin that made it break in Firefox 10. I’ve made a quick modification to the plugin for now until I can find a better solution to the problem. Here’s the fix:

On line 93 of the plugin (jquery.slicebox.js) replace:

if( Modernizr.csstransforms3d )

With:

if( Modernizr.csstransforms3d && navigator.userAgent.indexOf("Firefox") == -1 )

And on line 101 of the index.html page replace:

if( !Modernizr.csstransforms3d )

With

if( !Modernizr.csstransforms3d || navigator.userAgent.indexOf("Firefox") != -1 )

“For anyone designing for the Retina display (640×960) it really is quite a different experience” – teehanlax.com

Teehan+Lax

Included is 16 layered PSD Follow buttons with icons, 8 white & 8 blue with alternate wording – Follow Me, Follow Us and Follow button also included is matching icons at 48px x 48px in size.

Buttons are also included in JPG & PNG format

design deck