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
SEE: https://github.hubspot.com/pace/docs/welcome

stellar.js for the Parallax effect
SEE: http://markdalgleish.com/projects/stellar.js

Animate.css for animations
SEE: https://daneden.github.io/animate.css

 

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.

Footer

Fades in and slide from the left.