Photoshop PSD Image to Responsive Website

Following an online course, I created this responsive website from a Photoshop PSD design


This goal of this project was to create a fully responsive website with animations and parallax effects from a static Photoshop PSD image file. I followed a design plan file that laid out colors, font names, and font colors. 12 column responsive layout was achieved with Bootstrap. Respond.js was used to support responsive design in Internet Explorer 8 and below.

Page loader using PACE automatic page loading progress bar

stellar.js for the Parallax effect

Animate.css for animations


View Completed Website in a New Tab


Original PSD converted to an image

Page loader, Header, and Slider

On load animated Logo from the left and menu links from the right. Fixed header that changes color on scroll.
Nav links with slow scroll “Transition” to selected section and the background color of the link changes to show selection.
The slider is auto and manual.

Service Section

CSS animations on load. Slide in from the left and fade in. Icons flip on hover.


Our Work – Portfolio Section

CSS animation fade in and carousel appears from the bottom. Hover effect and manual carousel. Parallax image background.


Team Section

CSS animation appears and grows larger. Hover effects: Zoom, dark overlay. Manual carousel.


Testimonial Section

Parallax image background. Auto carousel


Recent Blog Posts

Contact Us

Form fades in and grows larger. PHP and AJAX contact form. Parallax image background.


Fades in and slide from the left.